domma-cms 0.55.1 → 0.69.3

package/admin/js/templates/theme.html

@@ -0,0 +1,211 @@
+<div class="page-header">
+    <h1 id="theme-title"><span data-icon="droplet"></span> Theme</h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="/" target="_blank" rel="noopener" class="btn btn-ghost btn-sm">
+            <span data-icon="external-link"></span> View site
+        </a>
+        <button id="theme-save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+    </div>
+</div>
+
+<div id="theme-errors" class="alert alert-danger mb-3" style="display:none;"></div>
+
+<div class="tabs" id="theme-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Themes</button>
+        <button class="tab-item">Element Overrides</button>
+    </div>
+
+    <!-- ------------------------------------------------------------------ -->
+    <!-- Themes                                                              -->
+    <!-- ------------------------------------------------------------------ -->
+    <div class="tab-panel active">
+        <div class="card mb-4">
+            <div class="card-header"><h2>Site &amp; Admin</h2></div>
+            <div class="card-body">
+                <div class="row mb-3">
+                    <div class="col-6">
+                        <label class="form-label">Front-end Theme</label>
+                        <select id="theme-frontend" class="form-select"></select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
+                            Applied to every public page.</p>
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label">Admin Theme</label>
+                        <select id="theme-admin" class="form-select"></select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
+                            Applied to this admin panel. Takes effect as soon as you save.</p>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col">
+                        <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                            <input id="theme-auto-enabled" type="checkbox" class="form-check">
+                            Switch automatically between a day and a night theme
+                        </label>
+                        <p id="theme-auto-roller-hint" class="form-hint text-muted"
+                           style="display:none;margin-top:.35rem;font-size:.8rem;">
+                            Custom themes (Theme Roller) do not support auto-switching.</p>
+                    </div>
+                </div>
+                <div id="theme-auto-fields" class="row mt-3" style="display:none;">
+                    <div class="col-6">
+                        <label class="form-label">Day Theme</label>
+                        <select id="theme-day" class="form-select"></select>
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label">Night Theme</label>
+                        <select id="theme-night" class="form-select"></select>
+                    </div>
+                    <div class="col-3 mt-3">
+                        <label class="form-label">Day Starts At</label>
+                        <input id="theme-day-start" type="time" class="form-input" value="07:00">
+                    </div>
+                    <div class="col-3 mt-3">
+                        <label class="form-label">Night Starts At</label>
+                        <input id="theme-night-start" type="time" class="form-input" value="19:00">
+                    </div>
+                    <div class="col-12 mt-2">
+                        <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch on each visitor's local
+                            time. They need not be a light/dark pair.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4">
+            <div class="card-header"><h2>Theme Switcher</h2></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-12">
+                        <label class="form-check-label">
+                            <input id="theme-switcher-enabled" type="checkbox" class="form-check">
+                            Show a theme switcher on the public site
+                        </label>
+                        <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">
+                            A floating disc of theme dots that lets a visitor pick their own theme.
+                            It offers every theme the stylesheet ships.</p>
+                    </div>
+                </div>
+                <div id="theme-switcher-fields" class="row mt-3" style="display:none;">
+                    <div class="col-4">
+                        <label class="form-label">Position</label>
+                        <select id="theme-switcher-position" class="form-select">
+                            <option value="right-center">Right, centred</option>
+                            <option value="left-center">Left, centred</option>
+                            <option value="bottom-right">Bottom right</option>
+                            <option value="bottom-left">Bottom left</option>
+                            <option value="top-right">Top right</option>
+                            <option value="top-left">Top left</option>
+                        </select>
+                    </div>
+                    <div class="col-4">
+                        <label class="form-label">Offset X (px)</label>
+                        <input id="theme-switcher-offset-x" type="number" class="form-input" min="0" max="400">
+                    </div>
+                    <div class="col-4">
+                        <label class="form-label">Offset Y (px)</label>
+                        <input id="theme-switcher-offset-y" type="number" class="form-input" min="0" max="400">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header"><h2>Typography</h2></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <label class="form-label">Font Family</label>
+                        <select id="theme-font-family" class="form-select">
+                            <optgroup label="Sans-serif">
+                                <option value="Roboto">Roboto (default)</option>
+                                <option value="Inter">Inter</option>
+                                <option value="Open Sans">Open Sans</option>
+                                <option value="Lato">Lato</option>
+                                <option value="Nunito">Nunito</option>
+                                <option value="Poppins">Poppins</option>
+                                <option value="Source Sans 3">Source Sans 3</option>
+                                <option value="Montserrat">Montserrat</option>
+                                <option value="Raleway">Raleway</option>
+                                <option value="DM Sans">DM Sans</option>
+                                <option value="Work Sans">Work Sans</option>
+                            </optgroup>
+                            <optgroup label="Serif">
+                                <option value="Merriweather">Merriweather</option>
+                                <option value="Playfair Display">Playfair Display</option>
+                                <option value="Lora">Lora</option>
+                                <option value="Roboto Slab">Roboto Slab</option>
+                            </optgroup>
+                            <optgroup label="Dyslexia-friendly">
+                                <option value="Lexend">Lexend</option>
+                                <option value="Atkinson Hyperlegible">Atkinson Hyperlegible</option>
+                                <option value="Andika">Andika</option>
+                            </optgroup>
+                            <optgroup label="System">
+                                <option value="system-ui">System UI (no web font)</option>
+                            </optgroup>
+                        </select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Public site body text.
+                            The dyslexia-friendly group uses wider letterforms and spacing.</p>
+                    </div>
+                    <div class="col-3">
+                        <label class="form-label">Font Size</label>
+                        <select id="theme-font-size" class="form-select">
+                            <option value="13">13px - Compact</option>
+                            <option value="14">14px - Small</option>
+                            <option value="15">15px - Slightly small</option>
+                            <option value="16">16px - Default</option>
+                            <option value="17">17px - Slightly large</option>
+                            <option value="18">18px - Large</option>
+                            <option value="20">20px - Extra large</option>
+                        </select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Root font size. Every
+                            rem value scales with it.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ------------------------------------------------------------------ -->
+    <!-- Element overrides                                                   -->
+    <!-- ------------------------------------------------------------------ -->
+    <div class="tab-panel">
+        <div class="card mb-4">
+            <div class="card-body">
+                <p class="text-muted" style="margin:0 0 .75rem;">
+                    An override re-themes one region of the page. Give it a CSS selector, then either adopt another
+                    theme wholesale or set individual design tokens. Everything inside that region follows - including
+                    components rendered later - because a Domma theme is nothing but a block of
+                    <code>--dm-*</code> values.
+                </p>
+                <button id="theme-add-override" class="btn btn-ghost btn-sm" type="button">
+                    <span data-icon="plus"></span> Add override
+                </button>
+            </div>
+        </div>
+
+        <div id="theme-overrides"></div>
+        <p id="theme-overrides-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
+            No overrides yet. The whole site uses the front-end theme.
+        </p>
+
+        <div class="card mt-4">
+            <div class="card-header">
+                <h2>Generated CSS</h2>
+                <button id="theme-refresh-css" class="btn btn-ghost btn-sm" type="button">
+                    <span data-icon="refresh-cw"></span> Refresh
+                </button>
+            </div>
+            <div class="card-body">
+                <p class="text-muted" style="margin-top:0;font-size:.85rem;">
+                    Exactly what is injected into every public page, ahead of your custom CSS.
+                </p>
+                <pre id="theme-css-preview" class="p-3"
+                     style="max-height:320px;overflow:auto;background:var(--dm-surface-raised);border-radius:var(--dm-radius-md);font-size:.8rem;margin:0;">(nothing yet)</pre>
+            </div>
+        </div>
+    </div>
+</div>

package/admin/js/templates/todo.html

@@ -0,0 +1,113 @@
+<!-- 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/todo.js, which also
+     inserts the row template: the router renders this file through _.render, eating any {{…}}. -->
+<div class="todo-tool">
+
+    <!-- Quick add: type and press Enter. -->
+    <form class="todo-add" data-on-submit="add">
+        <input type="text" class="form-input todo-add-text" placeholder="Add a task and press Enter…"
+               aria-label="New task" autocomplete="off" data-model="draft.value" data-focus="addFocus.value">
+        <select class="form-input todo-add-priority" aria-label="Priority" data-model="draftPriority.value">
+            <option value="highest">Highest</option>
+            <option value="high">High</option>
+            <option value="medium">Medium</option>
+            <option value="low">Low</option>
+            <option value="lowest">Lowest</option>
+        </select>
+        <input type="date" class="form-input todo-add-due" aria-label="Due date (optional)" title="Due date (optional)"
+               data-model="draftDue.value">
+        <button type="submit" class="btn btn-sm btn-primary" data-bind-disabled="cannotAdd.value">
+            <span data-icon="plus" data-icon-size="14"></span> Add
+        </button>
+        <span data-help-title="Adding tasks"
+              data-help="Type and press Enter. Priority and due date are optional - the priority starts at the default from settings (the cog above). Press N anywhere on this screen to jump here."></span>
+    </form>
+
+    <div class="todo-bar">
+        <label class="todo-search">
+            <span data-icon="search" data-icon-size="14"></span>
+            <input type="search" class="form-input" placeholder="Search tasks…" aria-label="Search tasks"
+                   data-model="query.value" data-focus="searchFocus.value">
+        </label>
+        <select class="form-input todo-filter" aria-label="Show" data-options="filterOptions.value"
+                data-options-text="label" data-options-value="value" data-model="filter.value"></select>
+        <span data-help-title="Working with tasks"
+              data-help="Tick a task to complete it. Right-click a task (or its ⋮, or click its status or priority) to change status, priority or due date, edit, or delete it. Completed tasks always sit at the bottom. Press / to search."></span>
+        <span class="todo-count" data-bind-text="countText.value"></span>
+        <button type="button" class="btn btn-sm btn-ghost todo-clear" data-if="counts.value.completed"
+                data-on-click="clearCompleted" title="Delete every completed task">
+            <span data-icon="trash" data-icon-size="13"></span> Clear completed
+        </button>
+    </div>
+
+    <p class="todo-state" data-if="loading.value">Loading tasks…</p>
+    <p class="todo-state" data-if="isEmpty.value" data-bind-text="emptyText.value"></p>
+
+    <div class="todo-list">
+        <div class="todo-rows" data-each="rows.value key=id"></div>
+    </div>
+</div>
+
+<style>
+.todo-tool { display: flex; flex-direction: column; gap: .75rem; }
+.todo-add, .todo-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
+.todo-add .form-input, .todo-bar .form-input { height: 2rem; }
+.todo-add-text { flex: 1 1 240px; }
+.todo-add-priority { width: 7.5rem; padding-top: 0; padding-bottom: 0; }
+.todo-add-due { width: 9.5rem; }
+.todo-search { position: relative; flex: 1 1 180px; max-width: 280px; margin: 0; }
+.todo-search > svg, .todo-search > [data-icon] {
+    position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--dm-text-muted); pointer-events: none;
+}
+.todo-search .form-input { padding-left: 1.9rem; }
+.todo-filter { width: auto; min-width: 10rem; padding-top: 0; padding-bottom: 0; }
+.todo-count { font-size: var(--dm-text-xs); color: var(--dm-text-muted); white-space: nowrap; }
+.todo-clear { margin-left: auto; color: var(--dm-text-muted); }
+.todo-state { margin: 1.5rem 0; text-align: center; color: var(--dm-text-muted); }
+
+.todo-rows { display: flex; flex-direction: column; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.todo-rows:empty { display: none; }
+.todo-row {
+    display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem .45rem .75rem;
+    border-bottom: 1px solid var(--dm-border);
+}
+.todo-row:last-child { border-bottom: 0; }
+.todo-row:hover, .todo-row:focus-within { background: var(--dm-surface-hover, rgba(127,127,127,.08)); }
+.todo-row .todo-check { flex: 0 0 auto; width: 1rem; height: 1rem; cursor: pointer; margin: 0; }
+.todo-text { flex: 1; min-width: 0; font-size: var(--dm-text-sm); overflow-wrap: anywhere; cursor: pointer; }
+.todo-row.is-done .todo-text { text-decoration: line-through; opacity: .5; }
+.todo-due { flex: 0 0 auto; font-size: var(--dm-text-xs); padding: .05rem .45rem; border-radius: 999px; white-space: nowrap;
+    background: var(--dm-surface-hover, rgba(127,127,127,.15)); color: var(--dm-text-muted); }
+.todo-due:empty { display: none; }
+.todo-due.is-today { color: var(--dm-warning, #d97706); }
+.todo-due.is-overdue { background: color-mix(in srgb, var(--dm-danger, #dc2626) 16%, transparent); color: var(--dm-danger, #dc2626); }
+.todo-pill {
+    flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-size: var(--dm-text-xs); font-weight: 500;
+    padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+}
+.todo-kebab { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1.2;
+    color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.todo-kebab:hover { color: var(--dm-primary); background: var(--dm-surface-hover, rgba(127,127,127,.15)); }
+@media (max-width: 640px) { .todo-pill[data-kind="status"] { display: none; } }
+
+/* Pills take the theme's own tokens, so they read in dark mode too. */
+.todo-pill[data-value="not-started"] { background: var(--dm-surface-hover, rgba(127,127,127,.15)); color: var(--dm-text-muted); }
+.todo-pill[data-value="in-progress"] { background: color-mix(in srgb, var(--dm-primary) 18%, transparent); color: var(--dm-primary); }
+.todo-pill[data-value="completed"]   { background: color-mix(in srgb, var(--dm-success, #16a34a) 18%, transparent); color: var(--dm-success, #16a34a); }
+.todo-pill[data-value="highest"] { background: color-mix(in srgb, var(--dm-danger, #dc2626) 20%, transparent); color: var(--dm-danger, #dc2626); }
+.todo-pill[data-value="high"]    { background: color-mix(in srgb, #ea580c 18%, transparent); color: #ea580c; }
+.todo-pill[data-value="medium"]  { background: color-mix(in srgb, var(--dm-warning, #d97706) 18%, transparent); color: var(--dm-warning, #d97706); }
+.todo-pill[data-value="low"]     { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.todo-pill[data-value="lowest"]  { background: var(--dm-surface-hover, rgba(127,127,127,.15)); color: var(--dm-text-muted); }
+
+/* Editor and settings slideovers */
+.todo-panel { display: flex; flex-direction: column; gap: 1rem; padding: .25rem 0 .5rem; }
+.todo-panel .form-label { display: flex; align-items: center; font-weight: 500; margin-bottom: .3rem; }
+.todo-panel textarea { min-height: 90px; resize: vertical; font-family: inherit; }
+.todo-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
+.todo-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.todo-panel-meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.todo-panel-actions { display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--dm-border); }
+.todo-panel-actions .spacer { flex: 1; }
+.todo-quick-due { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
+</style>

package/admin/js/views/analytics.js

@@ -0,0 +1,62 @@
+import{apiRequest as v,getToken as Z,refreshAccessToken as Q}from"../api.js";import{addBannerAction as X}from"../lib/plugin-chrome.js";import{helpPopovers as V}from"../lib/help-popover.js";import{onceClosed as ee,openMenuAt as te,settingsStore as ae,sidebarCount as se,viewLifetime as ne}from"../lib/tool-kit.js";import{DEFAULT_SETTINGS as oe,journeyRows as le,kpis as ie,LIMITS as re,normaliseSettings as O,RANGE_LABEL as B,RANGES as ce,seriesRange as de,topRows as pe}from"../lib/analytics-shape.js";const ue="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js",me=3e4,q=ae("analytics.settings",O),ve=`
+<div class="an-row" data-url="{{url}}">
+    <span class="an-bar-fill" style="width: {{bar}}"></span>
+    <span class="an-rank">{{rank}}</span>
+    <span class="an-url" title="{{url}}">{{url}}</span>
+    <span class="an-num">{{hitsText}}</span>
+    <span class="an-share">{{share}}</span>
+    <button type="button" class="an-kebab" aria-label="Page actions" title="Actions">\u22EE</button>
+</div>`,A=`
+<div class="an-row" data-url="{{url}}">
+    <span class="an-bar-fill" style="width: {{bar}}"></span>
+    <span class="an-url" title="{{label}}">{{label}}</span>
+    <span class="an-num">{{count}}</span>
+    <button type="button" class="an-kebab" aria-label="Page actions" title="Actions">\u22EE</button>
+</div>`,be=`
+<div class="an-row" data-url="{{url}}">
+    <span class="an-url" title="{{url}}">{{url}}</span>
+    <span class="an-num" title="Views per hour today, against the usual {{baseline}}">{{hits}}/h</span>
+    <span class="an-share">\xD7{{ratio}}</span>
+    <button type="button" class="an-kebab" aria-label="Page actions" title="Actions">\u22EE</button>
+</div>`;function he(){return window.Chart?Promise.resolve():new Promise((r,s)=>{const t=document.createElement("script");t.src=ue,t.async=!0,t.onload=()=>r(),t.onerror=()=>s(new Error("chart.js load failed")),document.head.appendChild(t)})}function fe(r){const s=document.createElement("template");return s.innerHTML=r.trim(),s.content.firstElementChild}async function ye(r){const s=b=>fetch("/api/analytics/export.csv?range="+encodeURIComponent(r),{headers:b?{Authorization:"Bearer "+b}:{}});let t=await s(Z());if(t.status===401&&(t=await s(await Q())),!t.ok)throw new Error("export failed");const c=await t.blob(),d=(t.headers.get("Content-Disposition")||"").match(/filename="?([^"]+)"?/),u=URL.createObjectURL(c),i=document.createElement("a");i.href=u,i.download=d?d[1]:"analytics.csv",document.body.appendChild(i),i.click(),i.remove(),URL.revokeObjectURL(u)}const l=ne(/^#\/analytics\b/);export const analyticsView={templateUrl:"/admin/js/templates/analytics.html",async onMount(r){l.reset();const s=r.get(0),t=M.observable(q.read()),c=M.observable(t.peek().range),d=M.observable("pages"),u=M.observable(""),i=M.observable(null),b=M.observable([]),y=M.observable(null),S=M.observable([]),g=M.observable(null),x=M.observable([]),j=M.observable("");l.add(M.effect(()=>{const e=i.value,{rows:a,matched:n}=pe(e?.top,{filter:u.value,limit:t.value.limit,total:e?.total});x.value=a,j.value=e?e.top.length?n?n>a.length?`Showing ${a.length} of ${n} pages - the cog changes how many.`:"":"No pages match that filter.":"No page views recorded in this range yet.":"Loading\u2026"}));const P=M.observable([]),U=M.observable([]),$=M.observable([]);l.add(M.effect(()=>{const e=le(y.value);P.value=e.entry,U.value=e.exit,$.value=e.paths}));const G={range:c,section:d,filter:u,spikes:S,pageRows:x,pagesNote:j,entryRows:P,exitRows:U,pathRows:$,kpi:M.computed(()=>ie(i.value,y.value)),isAllTime:M.computed(()=>c.value==="all"),sessionsCount:M.computed(()=>y.value?.totalSessions??0),liveText:M.computed(()=>g.value===null?"Active now: -":`${g.value} active now`),liveClass:M.computed(()=>g.value?"is-on":""),liveTitle:M.computed(()=>t.value.live?"Refreshes every 30 seconds":"Live refresh is off - see settings")};l.add(M.effect(()=>q.write(t.value)));const W=(e,a)=>{t.value=O({...t.peek(),[e]:a})};let k=0;async function w(){const e=c.peek(),a=++k;try{const[n,p,m,f]=await Promise.all([v("/analytics/stats?range="+encodeURIComponent(e)),v("/analytics/series?range="+encodeURIComponent(de(e))),v("/analytics/journeys?range="+encodeURIComponent(e)),v("/analytics/spikes")]);if(a!==k)return;i.value=n,b.value=p?.series??[],y.value=m,S.value=(f?.items??[]).map(o=>({...o,key:o.url}))}catch{a===k&&E.toast("Could not load analytics.",{type:"error"})}}async function C(){try{g.value=(await v("/analytics/realtime"))?.activeSessions??0,se("#/analytics")}catch{}}let _=!0;l.add(M.effect(()=>{if(c.value,_){_=!1;return}w()}));let L=null;l.add(M.effect(()=>{clearInterval(L),L=t.value.live?setInterval(()=>{document.hidden||C()},me):null})),l.add(()=>clearInterval(L));const H=s.querySelector(".an-chart");let R=null;l.add(()=>{R?.destroy(),R=null}),l.add(M.effect(()=>{const e=b.value,a=t.value.chart;if(!window.Chart||!H.isConnected)return;const n=getComputedStyle(document.documentElement),p=n.getPropertyValue("--dm-primary").trim()||"rgb(99, 102, 241)",m=n.getPropertyValue("--dm-text-muted").trim()||"#888",f=`color-mix(in srgb, ${n.getPropertyValue("--dm-border").trim()||"#888"} 45%, transparent)`;R?.destroy(),R=new window.Chart(H,{type:a,data:{labels:e.map(o=>D(o.date).format("D MMM")),datasets:[{label:"Page views",data:e.map(o=>o.hits),borderColor:p,backgroundColor:a==="bar"?p:`color-mix(in srgb, ${p} 18%, transparent)`,fill:a==="line",tension:.3,borderWidth:2,pointRadius:e.length>40?0:2,borderRadius:3}]},options:{responsive:!0,maintainAspectRatio:!1,animation:!1,plugins:{legend:{display:!1}},scales:{y:{beginAtZero:!0,ticks:{precision:0,color:m},grid:{color:f}},x:{ticks:{maxRotation:0,autoSkip:!0,maxTicksLimit:10,color:m},grid:{display:!1}}}}})}));function J(){const e=E.slideover({title:"Analytics settings",size:"sm",position:"right"}),a=fe(`
+                <div class="an-panel-form">
+                    <div>
+                        <label class="form-label" for="an-set-range">Open on</label>
+                        <select id="an-set-range" class="form-input" data-model="range.value">
+                            ${ce.map(o=>`<option value="${o}">${B[o]}</option>`).join("")}
+                        </select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="an-set-limit">Top pages shown
+                            <span data-help="How many pages the Top pages list shows. The filter still searches all of them, and the CSV export always has every page."></span>
+                        </label>
+                        <select id="an-set-limit" class="form-input" data-model="limit.value">
+                            ${re.map(o=>`<option value="${o}">${o||"All"}</option>`).join("")}
+                        </select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="an-set-chart">Chart</label>
+                        <select id="an-set-chart" class="form-input" data-model="chart.value">
+                            <option value="line">Line</option>
+                            <option value="bar">Bars</option>
+                        </select>
+                    </div>
+                    <div class="an-setting-row">
+                        <label class="form-label" for="an-set-live" style="margin:0">Live "active now"
+                            <span data-help="Refresh the active-visitor count every 30 seconds while this screen is open and visible."></span>
+                        </label>
+                        <input id="an-set-live" type="checkbox" class="form-switch" data-model="live.value">
+                    </div>
+                    <div class="an-setting-row">
+                        <label class="form-label" for="an-set-confirm" style="margin:0">Confirm before resetting
+                            <span data-help="Reset deletes every counter this site has. Leave this on."></span>
+                        </label>
+                        <input id="an-set-confirm" type="checkbox" class="form-switch" data-model="confirmReset.value">
+                    </div>
+                    <small class="an-panel-meta">Saved in this browser as you change them.</small>
+                    <div class="an-panel-actions">
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="reset">Reset to defaults</button>
+                        <span class="spacer"></span>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="done">Done</button>
+                    </div>
+                </div>`),n=(o,K=T=>T)=>M.computed({read:()=>t.value[o],write:T=>W(o,K(T))}),p={range:n("range"),limit:n("limit",Number),chart:n("chart"),live:n("live"),confirmReset:n("confirmReset")};e.element.appendChild(a);const m=V(a),f=M.applyBindings(p,a,{methods:{done:()=>e.close(),reset:()=>{t.value={...oe}}}});ee(e,()=>{f.dispose(),m()}),e.open()}X(r,{id:"analytics-settings",icon:"settings",title:"Analytics settings",onClick:J});const h=[...s.querySelectorAll(".an-list")];h[0].innerHTML=ve,h[1].innerHTML=A,h[2].innerHTML=A,h[3].innerHTML=A,h[4].innerHTML=be,l.add(V(s,{position:"bottom"}));const z=M.applyBindings(G,s,{methods:{refresh:()=>{w(),C()},showPages:()=>{d.value="pages"},showJourneys:()=>{d.value="journeys"},showSpikes:()=>{d.value="spikes"}}});l.add(()=>z.dispose());const N=e=>new URL(e,location.origin).href,Y=E.contextMenu(s,{match:".an-row",inherit:!1,density:"compact",items:e=>{const a=e.dataset.url;return[{label:"Open on the site",icon:"external-link",action:()=>window.open(N(a),"_blank","noopener")},{label:"Copy address",icon:"copy",action:async()=>{try{await navigator.clipboard.writeText(N(a)),E.toast("Address copied",{type:"success"})}catch{E.toast("The browser would not allow copying",{type:"error"})}}},{label:"Show only this page",icon:"filter",action:()=>{d.value="pages",u.value=a}}]}});l.add(()=>Y?.destroy?.());const F=E.contextMenu(s.querySelector(".an-bar-end"),{match:".an-more",inherit:!1,density:"compact",items:()=>[{label:`Export ${B[c.peek()].toLowerCase()} as CSV`,icon:"download",action:async()=>{try{await ye(c.peek())}catch{E.toast("Export failed.",{type:"error"})}}},{type:"divider"},{label:"Reset all statistics\u2026",icon:"trash",danger:!0,action:async()=>{if(!(t.peek().confirmReset&&!await E.confirm("Delete every analytics counter for this site? This cannot be undone.")))try{await v("/analytics/stats",{method:"DELETE"}),E.toast("Analytics reset.",{type:"success"}),w()}catch{E.toast("Reset failed.",{type:"error"})}}}]});l.add(()=>F?.destroy?.()),s.addEventListener("click",e=>{const a=e.target.closest(".an-kebab, .an-more");a&&te(a)}),I.scan(s);try{await he()}catch{E.toast("The chart library could not be loaded; figures still work.",{type:"warning"})}await Promise.all([w(),C()])}};