domma-cms 0.55.1 → 0.69.3

package/admin/js/templates/notes.html

@@ -0,0 +1,137 @@
+<!-- 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/notes.js. -->
+<div class="notes-tool">
+
+    <!-- One compact bar: find, filter, count, layout, new. -->
+    <div class="notes-bar">
+        <label class="notes-search">
+            <span data-icon="search" data-icon-size="14"></span>
+            <input type="search" class="form-input" placeholder="Search notes…" aria-label="Search notes"
+                   data-model="query.value" data-focus="searchFocus.value">
+        </label>
+        <select class="form-input notes-cat-select" aria-label="Filter by category"
+                data-options="categories.value" data-options-caption="'All categories'"
+                data-model="category.value"></select>
+        <span data-help-title="Finding notes"
+              data-help="Search matches titles, content and categories as you type. Pick a category to narrow the list, or click a category chip on any note. Press / to jump to search."></span>
+
+        <span class="notes-count" data-bind-text="countText.value"></span>
+
+        <div class="notes-bar-end">
+            <div class="notes-layout" role="group" aria-label="Layout">
+                <button type="button" class="btn btn-sm btn-ghost" title="Cards" aria-label="Card layout"
+                        data-bind-class="isCards.value && 'is-active'" data-on-click="useCards">
+                    <span data-icon="grid" data-icon-size="15"></span>
+                </button>
+                <button type="button" class="btn btn-sm btn-ghost" title="List" aria-label="List layout"
+                        data-bind-class="!isCards.value && 'is-active'" data-on-click="useList">
+                    <span data-icon="list" data-icon-size="15"></span>
+                </button>
+            </div>
+            <button type="button" class="btn btn-sm btn-primary" data-on-click="create" title="New note (N)">
+                <span data-icon="plus" data-icon-size="14"></span> New
+            </button>
+        </div>
+    </div>
+
+    <p class="notes-state" data-if="loading.value">Loading notes…</p>
+    <p class="notes-state" data-if="isEmpty.value" data-bind-text="emptyText.value"></p>
+
+    <!-- Right-click a note (or its ⋮) for everything you can do to it. -->
+    <div class="notes-list" data-bind-class="listClass.value">
+        <!-- The item template is inserted by notes.js (CARD_TEMPLATE): the router
+             renders this file through _.render first, which would eat its {{…}}. -->
+        <div class="notes-items" data-each="visible.value key=id"></div>
+    </div>
+</div>
+
+<style>
+.notes-tool { display: flex; flex-direction: column; gap: .75rem; }
+
+.notes-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.notes-search { position: relative; flex: 1 1 200px; max-width: 320px; margin: 0; }
+.notes-search > svg, .notes-search > [data-icon] {
+    position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
+    color: var(--dm-text-muted); pointer-events: none;
+}
+.notes-search .form-input { padding-left: 1.9rem; height: 2rem; }
+.notes-cat-select { width: auto; min-width: 9rem; max-width: 14rem; height: 2rem; padding-top: 0; padding-bottom: 0; }
+.notes-count { font-size: var(--dm-text-xs); color: var(--dm-text-muted); white-space: nowrap; }
+.notes-bar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
+.notes-layout { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.notes-layout .btn { border-radius: 0; padding: .25rem .45rem; line-height: 1; color: var(--dm-text-muted); }
+.notes-layout .btn.is-active { background: var(--dm-surface-hover, rgba(127,127,127,.15)); color: var(--dm-primary); }
+
+.notes-state { margin: 1.5rem 0; text-align: center; color: var(--dm-text-muted); }
+
+/* Cards: a responsive grid. */
+.notes-list.is-cards .notes-items {
+    display: grid; gap: .75rem;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}
+.note-card {
+    position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 0;
+    padding: .75rem .85rem; cursor: pointer;
+    background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+    transition: border-color var(--dm-transition-fast);
+}
+.note-card:hover, .note-card:focus-visible { border-color: var(--dm-primary); outline: none; }
+.note-title { margin: 0; padding-right: 1.5rem; font-size: var(--dm-text-sm); font-weight: 600; overflow-wrap: anywhere; }
+.note-kebab {
+    position: absolute; top: .45rem; right: .4rem;
+    border: 0; background: none; cursor: pointer; padding: 0 .3rem;
+    font-size: var(--dm-text-lg); line-height: 1.2; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm);
+}
+.note-kebab:hover { color: var(--dm-primary); background: var(--dm-surface-hover, rgba(127,127,127,.15)); }
+.note-preview { margin: 0; font-size: var(--dm-text-sm); color: var(--dm-text-muted); white-space: pre-line; overflow-wrap: anywhere; }
+.note-preview:empty { display: none; }
+.note-foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; }
+.note-cats { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; min-width: 0; }
+.note-cat {
+    font-size: var(--dm-text-xs); padding: .05rem .45rem; border-radius: 999px; cursor: pointer;
+    background: var(--dm-surface-hover, rgba(127,127,127,.15)); color: var(--dm-text);
+}
+.note-cat:hover { background: var(--dm-primary); color: var(--dm-text-inverse, #fff); }
+.note-time { font-size: var(--dm-text-xs); color: var(--dm-text-muted); white-space: nowrap; }
+.notes-list.hide-cats .note-cats { visibility: hidden; }
+
+/* List: one dense row per note. */
+.notes-list.is-list .notes-items {
+    display: flex; flex-direction: column;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden;
+}
+.notes-list.is-list .note-card {
+    flex-direction: row; align-items: center; gap: .75rem;
+    padding: .45rem .5rem .45rem .75rem; border: 0; border-radius: 0; border-bottom: 1px solid var(--dm-border);
+}
+.notes-list.is-list .note-card:last-child { border-bottom: 0; }
+.notes-list.is-list .note-card:hover { background: var(--dm-surface-hover, rgba(127,127,127,.08)); }
+.notes-list.is-list .note-title {
+    flex: 0 0 28%; padding: 0; font-size: var(--dm-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.notes-list.is-list .note-preview { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.notes-list.is-list .note-preview:empty { display: block; }
+.notes-list.is-list .note-foot { flex: 0 0 auto; margin: 0; }
+.notes-list.is-list .note-cats { flex: 0 1 auto; flex-wrap: nowrap; }
+.notes-list.is-list .note-kebab { position: static; }
+@media (max-width: 640px) {
+    .notes-list.is-list .note-preview { display: none; }
+    .notes-list.is-list .note-title { flex: 1; }
+}
+
+/* The editor and settings slideovers. */
+.notes-panel { display: flex; flex-direction: column; gap: 1rem; padding: .25rem 0 .5rem; height: 100%; }
+.notes-panel .form-label { display: flex; align-items: center; font-weight: 500; margin-bottom: .3rem; }
+.notes-panel textarea { min-height: 260px; resize: vertical; font-family: inherit; line-height: 1.5; }
+.notes-panel .notes-field-grow { flex: 1; display: flex; flex-direction: column; }
+.notes-panel .notes-field-grow textarea { flex: 1; }
+.notes-panel-meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); display: flex; justify-content: space-between; gap: .5rem; }
+.notes-panel-actions { display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--dm-border); }
+.notes-panel-actions .spacer { flex: 1; }
+.notes-setting { display: flex; flex-direction: column; gap: .3rem; }
+.notes-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.notes-setting small { color: var(--dm-text-muted); }
+.notes-range { display: flex; align-items: center; gap: .6rem; }
+.notes-range input { flex: 1; }
+.notes-range output { min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--dm-text-sm); }
+</style>

package/admin/js/templates/plugin-code.html

@@ -68,7 +68,7 @@
                 <span class="pcode-current" id="pcode-current">Select a file</span>
                 <span style="flex:1"></span>
                 <button id="pcode-rename" class="btn btn-sm btn-ghost" title="Rename file" disabled><span data-icon="edit-3"></span></button>
-                <button id="pcode-delete" class="btn btn-sm btn-ghost" title="Delete file" disabled><span data-icon="trash-2"></span></button>
+                <button id="pcode-delete" class="btn btn-sm btn-ghost" title="Delete file" disabled><span data-icon="trash"></span></button>
                 <button id="pcode-saveall" class="btn btn-sm btn-ghost" disabled>Save All</button>
                 <button id="pcode-save" class="btn btn-sm btn-primary" disabled><span data-icon="save"></span> Save</button>
             </div>

package/admin/js/templates/plugin-marketplace.html

@@ -1,16 +1,29 @@
 <div class="view-header">
-  <h2><span data-icon="store"></span> Plugin Marketplace</h2>
-  <p class="text-muted">Install premium plugins from the Domma manager.</p>
+  <h2><span data-icon="store"></span> Browse</h2>
+  <p class="text-muted">Plugins available to this site.</p>
 </div>
 
+<!--
+  Shown when this site is not managed. Telling an unmanaged customer to set
+  MANAGER_URL is telling them to configure something they will never have: a
+  standalone purchase arrives as a file, and Install from File is the whole
+  procedure. The managed path is mentioned second because it is not theirs to
+  set up.
+-->
 <div id="marketplace-unavailable" style="display:none">
   <div class="card">
-    <div class="card-body text-center">
-      <p>The Domma Manager is not configured. Set <code>MANAGER_URL</code> and <code>LICENCE_TOKEN</code> in your <code>.env</code> to enable the marketplace.</p>
+    <div class="card-body">
+      <p><strong>This site installs plugins from a file.</strong></p>
+      <p class="text-muted">Buy a plugin and you are sent a single <code>.dcmsplugin</code> file. Use
+        <strong>Install from File</strong> above to install it - no connection to anything is needed, and the
+        same button takes an update later.</p>
+      <p class="text-muted" style="margin-bottom:0">Sites managed for you browse and install here instead, over their
+        manager connection.</p>
     </div>
   </div>
 </div>
 
 <div id="marketplace-available" style="display:none">
+  <p id="marketplace-site" class="text-muted" style="display:none;font-size:.85rem;margin:0 0 .75rem"></p>
   <div id="marketplace-grid" class="card-grid"></div>
 </div>

package/admin/js/templates/plugins.html

@@ -1,17 +1,23 @@
 <div class="view-header d-flex justify-content-between align-items-center">
     <div>
-        <h1><span data-icon="package"></span> Plugins</h1>
-        <p class="text-muted" style="margin:0;font-size:.875rem">Plugins extend the CMS with new features. Changes take effect after a server restart.</p>
+        <h1><span data-icon="store"></span> Marketplace</h1>
+        <p class="text-muted" style="margin:0;font-size:.875rem">Install plugins to add features. Once enabled, a plugin appears under Tools. Changes take effect after a server restart.</p>
     </div>
-    <button id="new-plugin-btn" class="btn btn-primary">
-        <span data-icon="plus"></span> New Plugin
-    </button>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <button id="install-file-btn" class="btn btn-secondary" title="Install a .dcmsplugin file">
+            <span data-icon="upload"></span> Install from File
+        </button>
+        <button id="new-plugin-btn" class="btn btn-primary">
+            <span data-icon="plus"></span> New Plugin
+        </button>
+    </div>
+    <input type="file" id="install-file-input" accept=".dcmsplugin" hidden>
 </div>
 
 <div id="plugin-tabs" class="tabs">
     <div class="tab-list">
-        <button class="tab-item active" data-tab="installed">Installed Plugins</button>
-        <button class="tab-item" data-tab="marketplace">Marketplace</button>
+        <button class="tab-item active" data-tab="installed">Installed</button>
+        <button class="tab-item" data-tab="marketplace">Browse</button>
     </div>
 
     <div class="tab-panel active" data-panel="installed">

package/{plugins/site-search/admin/templates/site-search.html → admin/js/templates/search.html}

@@ -1,5 +1,5 @@
 <div class="view-header">
-    <h1><span data-icon="search"></span> Site Search</h1>
+    <h1><span data-icon="search"></span> Search</h1>
     <div>
         <button id="save-settings-btn" class="btn btn-primary">
             <span data-icon="save"></span> Save
@@ -20,6 +20,16 @@
             <div class="card mb-4" style="margin-top:1rem;">
                 <div class="card-body">
 
+                    <div class="row mb-3">
+                        <div class="col">
+                            <label class="form-check-label">
+                                <input id="field-enabled" type="checkbox">
+                                Enable search on the public site
+                            </label>
+                            <span class="form-hint">When off, no search trigger, stylesheet or script is added to public pages.</span>
+                        </div>
+                    </div>
+
                     <div class="row mb-3">
                         <div class="col">
                             <label class="form-label">Search placeholder text</label>
@@ -100,6 +110,41 @@
                             </div>
                         </div>
 
+                        <div class="row mb-3" id="ss-size-row">
+                            <div class="col">
+                                <label class="form-label" for="field-icon-size">Icon size</label>
+                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+                                    <input id="field-icon-size" type="range" min="32" max="96" step="2" value="52"
+                                           style="flex:1 1 200px;max-width:260px;">
+                                    <span id="ss-size-value" class="text-sm font-mono" style="min-width:3.5rem;">52px</span>
+                                </div>
+                                <span class="form-hint">How big the floating button is, in pixels (32-96). The search glyph inside
+                                    scales with it. 44px and up is the comfortable range for tapping on a phone.</span>
+                            </div>
+                        </div>
+
+                        <div class="row mb-3" id="ss-radius-row">
+                            <div class="col">
+                                <label class="form-label" for="field-icon-radius">Icon corner radius</label>
+                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+                                    <input id="field-icon-radius" type="range" min="0" max="26" step="1" value="26"
+                                           style="flex:1 1 200px;max-width:260px;">
+                                    <span id="ss-radius-value" class="text-sm font-mono" style="min-width:3.5rem;">26px</span>
+                                    <span id="ss-radius-preview" aria-hidden="true"
+                                          style="width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
+                                                 background:var(--dm-surface);color:var(--dm-text);
+                                                 border:1px solid var(--dm-border);border-radius:26px;
+                                                 box-shadow:0 4px 16px rgba(0,0,0,.14);flex:0 0 auto;transition:border-radius .12s;">
+                                        <span data-icon="search" style="width:20px;height:20px;"></span>
+                                    </span>
+                                </div>
+                                <span class="form-hint">0 is a square, <span id="ss-radius-max-hint">26</span> a circle - the top of the
+                                    range is always half the icon size, so it moves when you change the size above. The preview is the real
+                                    button at its real size. Applies to the floating button in icon mode only - the navbar icon has no
+                                    surface to round, and the labelled variant is a pill by definition.</span>
+                            </div>
+                        </div>
+
                         <div class="row" style="align-items:flex-start;gap:0;">
 
                             <div class="col-auto" style="margin-right:1.5rem;margin-bottom:1rem;">
@@ -175,14 +220,15 @@
         <div class="tab-panel" id="tab-how-it-works">
             <div class="card mb-4" style="margin-top:1rem;">
                 <div class="card-body">
-                    <p class="text-muted mb-2">Site Search adds a search icon to the public navbar. Visitors can click
-                        it or use
-                        the keyboard shortcut to open a full-screen overlay with live results.</p>
+                    <p class="text-muted mb-2">Search adds a search icon to the public navbar, or a floating button
+                        if you prefer. Visitors can click it or use the keyboard shortcut to open a full-screen overlay
+                        with live results.</p>
                     <ul class="text-muted" style="padding-left:1.25rem;line-height:1.8;">
                         <li>Results are weighted: title matches score highest, followed by tags, description, and page
                             content.
                         </li>
                         <li>Draft pages and private pages are excluded from results.</li>
+                        <li>An authored context menu can offer "Site search" as an action, which opens the same overlay.</li>
                         <li>Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate results, <kbd>↵</kbd> to open, <kbd>Esc</kbd> to
                             close.
                         </li>

package/admin/js/templates/settings.html

@@ -30,101 +30,20 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Font Family</label>
-          <select id="field-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:0.4rem;font-size:0.8rem;">Applied to the public-facing
-            website body text. The dyslexia-friendly group uses wider letterforms and spacing to reduce character
-            confusion.</p>
-        </div>
-        <div class="col-3">
-          <label class="form-label">Font Size</label>
-          <select id="field-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:0.4rem;font-size:0.8rem;">Root font size. All rem/em values
-            scale with this.</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-6">
-          <label class="form-label">Public Site Theme</label>
-            <select id="field-theme" class="form-select"></select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
-            website.</p>
-        </div>
-        <div class="col-6">
-          <label class="form-label">Admin Theme</label>
-            <select id="field-admin-theme" class="form-select"></select>
-          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
-        </div>
-      </div>
-        <!-- Auto day/night theme -->
-        <div class="row mt-3">
-            <div class="col">
-                <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                    <input id="field-auto-theme-enabled" type="checkbox" class="form-check"> Enable automatic day/night
-                    theme switching
-                </label>
-                <p id="auto-theme-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="auto-theme-fields" class="row mt-3" style="display:none;">
-            <div class="col-6">
-                <label class="form-label">Day Theme</label>
-                <select id="field-day-theme" class="form-select"></select>
-            </div>
-            <div class="col-6">
-                <label class="form-label">Night Theme</label>
-                <select id="field-night-theme" class="form-select"></select>
-            </div>
-            <div class="col-3 mt-3">
-                <label class="form-label">Day Starts At</label>
-                <input id="field-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="field-night-start" type="time" class="form-input" value="19:00">
+        <div class="col">
+          <div class="card" style="background:var(--dm-surface-raised);">
+            <div class="card-body" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+              <span data-icon="droplet"></span>
+              <div style="flex:1 1 240px;">
+                <strong>Themes, fonts and element overrides moved.</strong>
+                <p class="text-muted" style="margin:.25rem 0 0;font-size:.85rem;">
+                  The site theme, admin theme, automatic day/night pair and typography now live in
+                  Content &rsaquo; Theme, alongside per-element theme overrides.
+                </p>
+              </div>
+              <a href="#/theme" class="btn btn-ghost btn-sm">Open Theme</a>
             </div>
-            <div class="col-12 mt-2">
-                <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch based on each visitor's local
-                    time. Any theme can be used - they need not be light/dark pairs.</p>
+          </div>
         </div>
       </div>
       <div class="row mt-3">
@@ -448,7 +367,7 @@
               </div>
 
               <div class="row mb-4" style="align-items:flex-end;gap:0;">
-                <div class="col-sm-4">
+                <div class="col-4">
                   <label class="form-label">Home label</label>
                   <input id="field-breadcrumbs-home-label" type="text" class="form-input" placeholder="Home">
                 </div>
@@ -490,7 +409,7 @@
                 </div>
 
                 <!-- Offsets -->
-                <div class="col-sm-3" style="margin-right:1rem;">
+                <div class="col-3" style="margin-right:1rem;">
                   <label class="form-label" for="field-bc-offset-x">Horizontal offset</label>
                   <div style="display:flex;align-items:center;gap:.4rem;">
                     <input id="field-bc-offset-x" type="number" class="form-input" min="0" max="500" placeholder="8"
@@ -501,7 +420,7 @@
                     right edge.</p>
                 </div>
 
-                <div class="col-sm-3">
+                <div class="col-3">
                   <label class="form-label" for="field-bc-offset-y">Vertical offset</label>
                   <div style="display:flex;align-items:center;gap:.4rem;">
                     <input id="field-bc-offset-y" type="number" class="form-input" min="0" max="500" placeholder="60"