domma-cms 0.76.0 → 0.77.1

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

@@ -1,10 +1,15 @@
-<div class="page-header">
-    <h2><span data-icon="menu"></span> <span id="me-title">Edit menu</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back</a>
-        <button class="btn btn-primary" id="me-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
+<!-- Menus › Edit. See admin/js/views/menu-editor.js. No page heading: the Tool banner above is the
+     heading ("Menus › <name>"), with All menus, Menu locations and Save as its actions. -->
+<div class="mex">
+<p class="mex-alert is-dirty" data-bind-hidden="!dirty.value">
+    <span data-icon="edit-3" data-icon-size="16"></span>
+    <span>Unsaved changes - Save (Ctrl+S) to keep them. Leave and they are kept as a draft for next time.</span>
+    <span class="mex-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
+<p class="mex-alert is-bad" data-bind-hidden="!problems.value">
+    <span data-icon="alert-triangle" data-icon-size="16"></span>
+    <span data-bind-text="problems.value"></span></p>
 
 <div class="card">
     <div class="card-body" style="padding-top:0;">
@@ -17,10 +22,13 @@
             </div>
             <div class="tab-content">
                 <div class="tab-panel active" id="me-items" data-panel="me-items">
-                    <div class="toolbar">
-                        <button class="btn btn-sm btn-secondary" id="me-add-item"><span data-icon="plus"></span> Add item</button>
-                        <button class="btn btn-sm btn-ghost" id="me-add-separator"><span data-icon="minus"></span> Add separator</button>
-                        <button class="btn btn-sm btn-ghost" id="me-add-spacer"><span data-icon="move"></span> Add spacer</button>
+                    <div class="toolbar mex-toolbar">
+                        <button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button>
+                        <span class="mex-spacer"></span>
+                        <small class="mex-note"><span data-bind-text="itemCount.value"></span> items</small>
+                        <span data-help-title="Items" data-help="Click an item to edit its label, link, icon, who sees it, badge and look. Right-click it (or ⋮, or Shift+F10) to add an item or a sub-item below it, move, indent, duplicate, hide or remove it. Drag the grip to move it, or drop it onto another item to nest it. With an item focused: Enter edits, Alt+Up / Down moves, Alt+Right / Left indents, Delete removes. Changes are kept only when you Save."></span>
                     </div>
                     <div id="me-items-list" class="menu-tree"></div>
                 </div>
@@ -31,7 +39,8 @@
                     </p>
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-variant">Variant</label>
+                            <label for="me-variant">Variant
+                                <span data-help="The colour scheme of the bar - transparent over the page, dark, light, or the theme's own default."></span></label>
                             <select id="me-variant" name="variant" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="transparent">Transparent</option>
@@ -41,7 +50,8 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label for="me-position">Position</label>
+                            <label for="me-position">Position
+                                <span data-help-title="Position" data-help="Sticky stays at the top as the page scrolls; fixed never moves; static scrolls away with the page. Floating lifts the menu off the page into a panel pinned to a corner or edge - its own options appear below."></span></label>
                             <select id="me-position" name="position" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="sticky">Sticky</option>
@@ -51,7 +61,8 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label for="me-orientation">Orientation</label>
+                            <label for="me-orientation">Orientation
+                                <span data-help="Horizontal lays the items in a row; vertical stacks them in a column - a side rail when this menu is the navbar."></span></label>
                             <select id="me-orientation" name="orientation" class="form-input">
                                 <option value="">- default (horizontal) -</option>
                                 <option value="horizontal">Horizontal</option>
@@ -171,7 +182,8 @@
                             </label>
                         </div>
                         <div class="form-group">
-                            <label for="me-highlight-hover">Hover effect</label>
+                            <label for="me-highlight-hover">Hover effect
+                                <span data-help-title="Highlighting" data-help="How items react under the pointer, and how the item for the page being viewed is marked. Set here for the whole menu; any single item can override both in its own editor."></span></label>
                             <!-- Options are filled from HIGHLIGHT_HOVER in menu-decor.mjs on mount,
                                  so this list and the per-item editor's always match. -->
                             <select id="me-highlight-hover" name="highlightHover" class="form-input"></select>
@@ -234,7 +246,8 @@
                     </p>
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-bind-slot">Slot</label>
+                            <label for="me-bind-slot">Slot
+                                <span data-help-title="Binding" data-help="Makes this menu take over a slot (the navbar, a footer, an overlay…) on some pages only - a project's pages, or pages matching a pattern - while the menu mapped under Menu locations stays everywhere else. The most specific match wins."></span></label>
                             <select id="me-bind-slot" name="bindSlot" class="form-input"></select>
                             <small class="form-hint">Leave unset for no binding - this menu then only renders where it is mapped or where a <code>[menu]</code> shortcode places it.</small>
                         </div>
@@ -261,7 +274,8 @@
                 <div class="tab-panel" id="me-meta" data-panel="me-meta">
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
-                            <label for="me-slug">Slug <span class="required">*</span></label>
+                            <label for="me-slug">Slug <span class="required">*</span>
+                                <span data-help="The menu's id - its file name and what [menu slug=&quot;…&quot;] names. Renaming it moves the menu and any location mapped to it."></span></label>
                             <input type="text" id="me-slug" name="slug" class="form-input" required>
                             <small class="form-hint">Lowercase alphanumeric + hyphen - affects file name</small>
                         </div>
@@ -284,3 +298,29 @@
         </div>
     </div>
 </div>
+</div>
+
+<style>
+/* Menus › Edit - see admin/js/views/menu-editor.js. Only --dm-* tokens. */
+.mex { display: flex; flex-direction: column; gap: .75rem; }
+.mex [hidden] { display: none !important; }
+.mex-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.mex-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.mex-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.mex-spacer { flex: 1; }
+.mex-note { color: var(--dm-text-muted); font-size: var(--dm-text-sm); margin: 0; }
+.mex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+.mex-toolbar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+/* Rows: grip, label, url, hide, edit, ⋮ - everything else is in the row's context menu. */
+.mex .menu-tree-row--slim { grid-template-columns: 16px minmax(0, 1fr) auto repeat(3, auto); padding: 3px 4px; border-radius: var(--dm-radius-sm); cursor: pointer; }
+.mex .menu-tree-row--separator, .mex .menu-tree-row--spacer { grid-template-columns: 16px minmax(80px, 1fr) auto; padding: 2px 4px; }
+.mex .menu-tree-row:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 5%, transparent)); }
+.mex .menu-tree-row:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
+.mex .menu-tree-row .me-row-label, .mex .menu-tree-row .me-row-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mex .me-hidden.active { color: var(--dm-warning); }
+.mex .mex-untitled { color: var(--dm-danger); font-style: italic; font-weight: 500; }
+.mex-kebab { font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted); padding: 0 .4rem; }
+.mex-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .mex .menu-tree-row--slim .me-row-url { display: none; } .mex .menu-tree-row--slim { grid-template-columns: 16px minmax(0, 1fr) repeat(3, auto); } }
+</style>

package/admin/js/templates/menu-locations.html

@@ -1,14 +1,57 @@
-<div class="page-header">
-    <h2><span data-icon="map"></span> Menu locations</h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back to menus</a>
-        <button class="btn btn-primary" id="ml-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
-<p class="text-muted mb-4">Map each registered slot to a menu. Plugins can register additional slots via <code>hooks.registerMenuLocation()</code>.</p>
+<!-- Menus › Locations. Bound with M.applyBindings - see admin/js/views/menu-locations.js, which also inserts
+     the row template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the Tool banner above is the heading; All menus and Save are its actions. -->
+<div class="mlx">
+    <p class="mlx-alert is-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit-3" data-icon-size="16"></span>
+        <span>Unsaved changes - Save (Ctrl+S) to apply them. Leave and they are kept as a draft for next time.</span>
+        <span class="mlx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="ml-table"></div>
+    <div class="mlx-card">
+        <div class="mlx-card-title">Where each menu shows
+            <span data-help-title="Menu locations" data-help="A slot is a place on the site a menu can fill - the navbar, the footers, the admin sidebar, the overlay (for floating panels), and any a plugin adds. Pick a menu for each. A menu's own Binding tab can take a slot over on some pages only; this is what shows everywhere else. The [menu location] shortcode draws whatever fills a slot."></span>
+            <span class="mlx-spacer"></span>
+            <small class="mlx-note" data-bind-text="summary.value"></small>
+        </div>
+        <p class="mlx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mlx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="mlx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length">No menu slots registered.</p>
+        <div class="mlx-list" data-each="rows.value key=slot"></div>
+        <p class="mlx-note">Click a slot to edit the menu in it; right-click (or ⋮, or Shift+F10) to clear it or copy its shortcode.
+            <span data-help="Nested deeper than the slot draws: that slot only shows so many levels, and the deeper items are simply left out there. Menu not found: the mapped menu was deleted or renamed outside the editor - pick another."></span></p>
     </div>
 </div>
+
+<style>
+/* Menus › Locations - see admin/js/views/menu-locations.js. Only --dm-* tokens. */
+.mlx { display: flex; flex-direction: column; gap: .75rem; }
+.mlx [hidden] { display: none !important; }
+.mlx-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 12%, transparent); color: var(--dm-text); }
+.mlx-spacer { flex: 1; }
+.mlx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mlx-note.is-bad { color: var(--dm-danger); }
+.mlx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.mlx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
+.mlx-list { display: flex; flex-direction: column; }
+.mlx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(10rem, 16rem) auto; gap: .75rem; align-items: center;
+    padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.mlx-row:last-child { border-bottom: 0; }
+.mlx-row:hover, .mlx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.mlx-row.is-changed { box-shadow: inset 3px 0 0 var(--dm-primary); }
+.mlx-row.is-bad { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.mlx-main { min-width: 0; display: flex; flex-direction: column; }
+.mlx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mlx-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
+.mlx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.mlx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.mlx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.mlx-chip.is-changed { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+.mlx-select { margin: 0; }
+.mlx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.mlx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 720px) { .mlx-row { grid-template-columns: minmax(0, 1fr) auto; } .mlx-chips { grid-column: 1 / -1; justify-content: flex-start; } }
+</style>

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

@@ -1,15 +1,20 @@
-<div class="view-header">
-    <h1 id="editor-title"><span data-icon="edit"></span> Page Editor</h1>
-    <div class="view-header-actions">
-      <select id="quick-switch" class="form-select form-select-sm" style="display:none; width:auto;">
-        <option value="">Switch page...</option>
-      </select>
-      <a id="view-page-btn" class="btn btn-ghost" target="_blank" rel="noopener" style="display:none;">
-        <span data-icon="external-link"></span> View Page
-      </a>
-        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
-        <button id="save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
-    </div>
+<!-- Page editor. No page heading: the Tool banner above is the heading ("Pages › Edit …", set by
+     admin/js/views/page-editor.js), with Back, Editor reference, View on the site and Save in it. This bar
+     carries the page switcher and the unsaved state; Ctrl+S saves; leaving with unsaved changes asks and
+     keeps a draft. -->
+<div class="pex-bar">
+  <select id="quick-switch" class="form-select form-select-sm" style="display:none; width:auto;" aria-label="Switch to another page">
+    <option value="">Switch page...</option>
+  </select>
+  <span data-help-title="Switching pages" data-help="Opens another page in the editor. It is locked while this page has unsaved changes - save or discard them first."></span>
+  <span id="pe-unsaved" class="pex-chip" hidden title="Changes not saved yet">Unsaved</span>
+  <small id="pe-problem" class="pex-problem" hidden></small>
+  <span class="pex-spacer"></span>
+  <a id="view-page-btn" class="btn btn-ghost btn-sm" target="_blank" rel="noopener" style="display:none;">
+    <span data-icon="external-link"></span> View page
+  </a>
+  <button type="button" id="discard-btn" class="btn btn-ghost btn-sm" hidden>Discard</button>
+  <button type="button" id="save-btn" class="btn btn-primary btn-sm"><span data-icon="save"></span> Save</button>
 </div>
 
 <div class="tabs" id="editor-meta-tabs">
@@ -55,7 +60,7 @@
     <div class="tab-panel">
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">URL Path</label>
+          <label class="form-label">URL Path <span data-help-title="URL path" data-help="Where the page lives on the site, starting with /. Changing it moves the page; menu links to the old address are updated. A project whose root URL is a prefix of this address files the page under it."></span></label>
           <input id="page-url-path" type="text" class="form-input" placeholder="/about or /services/web-dev">
           <small class="form-hint">The URL where this page will live. Changing this will update any navigation links
             pointing to the old URL.</small>
@@ -67,11 +72,11 @@
           <input id="field-title" type="text" class="form-input" placeholder="Page title">
         </div>
         <div class="col-3">
-          <label class="form-label">Layout</label>
+          <label class="form-label">Layout <span data-help="The page shell: navbar, width, sidebar, footer. Layouts are managed under System › Layouts."></span></label>
           <select id="field-layout" class="form-select"></select>
         </div>
         <div class="col-3">
-          <label class="form-label">Status</label>
+          <label class="form-label">Status <span data-help-title="Draft or published" data-help="A draft is hidden from visitors (404) - but anyone who can read pages sees it with a banner, and Live Preview and share links show it before it is published."></span></label>
           <select id="field-status" class="form-select">
             <option value="draft">Draft</option>
             <option value="published">Published</option>
@@ -84,24 +89,24 @@
           <input id="field-description" type="text" class="form-input" placeholder="Short description">
         </div>
         <div class="col-4">
-          <label class="form-label">Sort Order</label>
+          <label class="form-label">Sort Order <span data-help="Lower numbers come first in navigation and in page lists sorted by navigation order."></span></label>
           <input id="field-sort-order" type="number" class="form-input" value="99" min="0">
         </div>
       </div>
       <div class="row mb-3">
         <div class="col-4">
-          <label class="form-label">Category</label>
+          <label class="form-label">Category <span data-help="A free label for grouping pages - collection displays and search can filter by it."></span></label>
           <input id="field-category" type="text" class="form-input" placeholder="e.g. news, docs, products">
         </div>
         <div class="col-4">
-          <label class="form-label">Visibility</label>
+          <label class="form-label">Visibility <span data-help-title="Who can see the page" data-help="Public: everyone. A role &quot;and above&quot;: that role and every more senior one. A role &quot;only&quot;: holders of that role (and the super-admin). Private: the super-admin alone. Signed-out visitors are sent to sign in."></span></label>
           <select id="field-visibility" class="form-select">
             <option value="public">Public - everyone</option>
             <option value="private">Private - super-admin only</option>
           </select>
         </div>
         <div class="col-4">
-          <label class="form-label">Project</label>
+          <label class="form-label">Project <span data-help="Which project the page belongs to. Inherit from URL files it under the project whose root URL matches its address, else Core."></span></label>
           <select id="field-project" class="form-select">
             <option value="">Inherit from URL</option>
           </select>
@@ -110,14 +115,14 @@
       </div>
       <div class="row mb-3">
         <div class="col-6">
-          <label class="form-label">Theme Override</label>
+          <label class="form-label">Theme Override <span data-help="Shows this page in a different theme from the rest of the site - built-in or custom."></span></label>
             <select id="field-theme" class="form-select"></select>
           <small class="form-hint">Overrides the site-wide theme for this page only.</small>
         </div>
       </div>
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">Tags</label>
+          <label class="form-label">Tags <span data-help="Keywords for filtering and search. Type and press Enter; existing tags are suggested."></span></label>
           <input id="field-tags" type="text" class="form-input" />
           <small class="form-hint">Comma-separated keywords for filtering and search.</small>
         </div>
@@ -142,6 +147,7 @@
           <label class="form-check-label" title="Included in fresh installs via the seed script">
             <input id="field-bundled" type="checkbox" class="form-check"> Bundled
           </label>
+          <span data-help="Included when a fresh site is seeded. Leave off for pages that belong to this site only."></span>
         </div>
       </div>
     </div>
@@ -150,13 +156,13 @@
     <div class="tab-panel">
       <div class="row mb-3">
         <div class="col">
-          <label class="form-label">SEO Title</label>
+          <label class="form-label">SEO Title <span data-help="The title search engines and browser tabs show. Blank uses the page title."></span></label>
           <input id="field-seo-title" type="text" class="form-input" placeholder="Overrides default title">
         </div>
       </div>
       <div class="row">
         <div class="col">
-          <label class="form-label">SEO Description</label>
+          <label class="form-label">SEO Description <span data-help="The summary search engines show under the title. Blank uses the page description."></span></label>
           <input id="field-seo-desc" type="text" class="form-input" placeholder="Overrides default description">
         </div>
       </div>
@@ -164,7 +170,7 @@
 
     <!-- DConfig -->
     <div class="tab-panel">
-      <label class="form-label">Config JSON</label>
+      <label class="form-label">Config JSON <span data-help-title="DConfig" data-help="Declarative behaviour for elements on this page - click handlers, class toggles - as a JSON object keyed by CSS selector. Must be valid JSON before the page can be saved."></span></label>
       <textarea id="field-dconfig" class="form-input dconfig-textarea"
                 placeholder='{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }'></textarea>
       <small class="form-hint">Declarative click handlers and class toggles applied on page load. Merged with any <code>[dconfig]</code>
@@ -186,6 +192,7 @@
           </button>
         </div>
         <span class="live-preview-status" id="live-preview-status">Showing unsaved changes</span>
+        <span data-help-title="Live Preview" data-help="The whole page - navbar, footer, theme - rendered by the server from what is in the editor now, before saving. Share link makes a private, revocable address for someone without an account."></span>
         <div class="live-preview-actions">
           <button type="button" class="btn btn-ghost btn-sm" id="live-preview-refresh">
             <span data-icon="refresh-cw"></span> Refresh
@@ -204,10 +211,10 @@
       <!-- History -->
       <div class="tab-panel" id="history-panel">
           <div class="mb-3" style="display:flex;align-items:center;justify-content:space-between;">
-              <h3 style="margin:0;font-size:1rem;">Version History</h3>
+              <h3 style="margin:0;font-size:1rem;">Version History <span data-help="A version is kept on every save. Click one to compare it with the editor; right-click it (or ⋮, or Shift+F10) to restore or delete it. Restoring keeps a snapshot of the current page first."></span></h3>
               <div style="display:flex;gap:.5rem;align-items:center;">
                   <button class="btn btn-ghost btn-sm" id="history-delete-selected-btn"
-                          style="display:none;color:var(--dm-danger,#e55);">
+                          style="display:none;color:var(--dm-danger);">
                       <span data-icon="trash"></span> Delete Selected
                   </button>
                   <button class="btn btn-ghost btn-sm" id="history-save-named-btn">
@@ -247,3 +254,17 @@
 </div>
 
 <div id="media-picker-modal"></div>
+
+<style>
+.pex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
+.pex-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.pex-spacer { flex: 1; }
+.pex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pex-problem { color: var(--dm-danger); font-size: var(--dm-text-sm); }
+.pex-bar [hidden] { display: none !important; }
+#history-panel .pe-version-row { cursor: pointer; }
+#history-panel .pe-version-row:hover, #history-panel .pe-version-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pe-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.pe-kebab:hover { color: var(--dm-primary); }
+</style>

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

@@ -1,82 +1,100 @@
-<style>
-    .pcode-layout { display: flex; gap: 1rem; align-items: stretch; min-height: 70vh; }
-    .pcode-files { flex: 0 0 250px; overflow-y: auto; }
-    .pcode-files .card-body { padding: .5rem; }
-    .pcode-dir {
-        padding: .5rem .5rem .2rem; font-size: .7rem; font-weight: 700;
-        text-transform: uppercase; letter-spacing: .04em;
-        color: var(--dm-text-muted, #6b7280);
-    }
-    .pcode-file {
-        display: flex; align-items: center; gap: .4rem; width: 100%;
-        padding: .3rem .5rem .3rem 1rem; border: 0; background: none; cursor: pointer;
-        border-radius: var(--dm-radius-md, 6px); text-align: left;
-        color: var(--dm-text, inherit); font-size: .82rem;
-        font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace);
-        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .pcode-file:hover { background: var(--dm-hover-bg, rgba(128,128,128,.12)); }
-    .pcode-file.active { background: var(--dm-primary, #2563eb); color: #fff; }
-    .pcode-file .pcode-dirty { margin-left: auto; font-weight: 700; }
-    .pcode-editor-card { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-    .pcode-editor-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 0; }
-    .pcode-toolbar {
-        display: flex; align-items: center; gap: .5rem;
-        padding: .5rem .75rem; border-bottom: 1px solid var(--dm-border, rgba(128,128,128,.25));
-    }
-    .pcode-current {
-        font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace);
-        font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    }
-    #pcode-editor { flex: 1; display: flex; min-height: 55vh; }
-    #pcode-editor > .dm-edit-wrap { flex: 1; }
-    .pcode-statusbar {
-        display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem;
-        border-top: 1px solid var(--dm-border, rgba(128,128,128,.25));
-        font-size: .78rem; color: var(--dm-text-muted, #6b7280);
-    }
-    #pcode-cursor { margin-left: auto; font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace); }
-</style>
-
-<div class="view-header d-flex justify-content-between align-items-center mb-4">
-    <div>
-        <h1 class="view-title"><span data-icon="code"></span> <span id="pcode-title">Plugin Code</span></h1>
-        <p class="view-subtitle text-muted" style="margin:0;font-size:.875rem">
-            <code>admin/</code> files apply on a hard refresh; everything else needs a server restart.
-        </p>
-    </div>
-    <div class="d-flex gap-2">
-        <button id="pcode-back" class="btn btn-ghost"><span data-icon="arrow-left"></span> Plugins</button>
-        <button id="pcode-restart" class="btn btn-warning"><span data-icon="refresh-cw"></span> Restart Server</button>
-    </div>
-</div>
+<!-- Plugin code editor. Bound with M.applyBindings - see admin/js/views/plugin-code.js, which also inserts
+     the file-row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner ("Marketplace › <plugin>") is the heading; Back, New file, Save all
+     and Restart server are banner actions. -->
+<div class="pcx">
+    <p class="pcx-alert is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+    <p class="pcx-alert" data-bind-hidden="!restartPending.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span>Server files were saved - they apply when the server restarts.</span>
+        <button type="button" class="btn btn-sm btn-warning" data-on-click="restart">Restart server</button>
+    </p>
 
-<div class="pcode-layout">
-    <div class="card pcode-files">
-        <div class="card-body">
-            <div style="display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem .5rem;">
-                <strong style="font-size:.8rem">Files</strong>
-                <button id="pcode-newfile" class="btn btn-sm btn-ghost" title="New file"><span data-icon="plus"></span></button>
+    <div class="pcx-layout">
+        <div class="pcx-card pcx-files">
+            <div class="pcx-card-title">Files
+                <span class="pcx-count" data-bind-text="files.value.length"></span>
+                <span data-help-title="Files" data-help="Every editable file in the plugin (.js, .json, .md, .html, .css, .txt, .svg). Click one to open it - unsaved edits are kept per file while you switch, and a ● marks them. Right-click a file (or ⋮, or Shift+F10) to save, revert, copy its path, rename, duplicate or delete it. plugin.json, plugin.js and config.js cannot be deleted or renamed."></span>
+                <span class="pcx-spacer"></span>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="newFile" title="New file" aria-label="New file"><span data-icon="plus" data-icon-size="14"></span></button>
             </div>
-            <div id="pcode-filelist"></div>
+            <input type="search" class="form-input pcx-search" placeholder="Filter files…" aria-label="Filter files" data-model="query.value">
+            <p class="pcx-note" data-bind-hidden="!loading.value">Loading…</p>
+            <p class="pcx-note" data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
+            <div class="pcx-list" data-each="rows.value key=key"></div>
         </div>
-    </div>
 
-    <div class="card pcode-editor-card">
-        <div class="card-body">
-            <div class="pcode-toolbar">
-                <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"></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 class="pcx-card pcx-editor-card">
+            <div class="pcx-toolbar">
+                <span class="pcx-current" data-bind-text="currentText.value">Select a file</span>
+                <span class="pcx-chip" data-bind-hidden="!openPath.value" data-bind-class="scopeCls.value" data-bind-text="scopeLabel.value" data-bind-title="scopeHint.value"></span>
+                <span class="pcx-chip is-warn" data-bind-hidden="!currentDirty.value">Unsaved</span>
+                <span data-help-title="Saving" data-help="Ctrl+S saves the open file, Ctrl+Shift+S every unsaved file. An admin/ file applies when the admin tab is refreshed; anything else (plugin.js, config.js, public snippets…) is read when the server starts, so it needs a restart - Restart server is in the banner. Leaving with unsaved files asks first and keeps them as a draft for your next visit."></span>
+                <span class="pcx-spacer"></span>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="revert" data-bind-hidden="!currentDirty.value" title="Put the open file back as it was saved">Revert</button>
+                <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="!currentDirty.value || saving.value">
+                    <span data-icon="save" data-icon-size="14"></span> Save</button>
+                <button type="button" class="pcx-kebab pcx-more" data-bind-hidden="!openPath.value" aria-label="More for this file" title="More">⋮</button>
             </div>
-            <div id="pcode-editor"></div>
-            <div class="pcode-statusbar">
-                <span id="pcode-status">Ctrl+S saves the open file. Unsaved edits survive switching files.</span>
-                <span id="pcode-cursor"></span>
+            <div class="pcx-editor" id="pcode-editor"></div>
+            <p class="pcx-empty" data-bind-hidden="openPath.value">Choose a file on the left to edit it.</p>
+            <div class="pcx-statusbar">
+                <span data-bind-text="status.value"></span>
+                <span class="pcx-spacer"></span>
+                <span data-bind-hidden="!dirtyCount.value" data-bind-text="dirtyText.value"></span>
+                <span class="pcx-cursor" data-bind-text="cursor.value"></span>
             </div>
         </div>
     </div>
 </div>
+
+<style>
+.pcx { display: flex; flex-direction: column; gap: .75rem; }
+.pcx [hidden], .pcx-form [hidden] { display: none !important; }
+.pcx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .55rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.pcx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.pcx-layout { display: flex; gap: .75rem; align-items: stretch; min-height: 70vh; }
+.pcx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); display: flex; flex-direction: column; min-width: 0; }
+.pcx-files { flex: 0 0 270px; padding: .6rem; gap: .5rem; overflow-y: auto; max-height: 80vh; }
+.pcx-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.pcx-count { opacity: .6; font-size: var(--dm-text-xs); font-weight: 400; }
+.pcx-spacer { flex: 1; }
+.pcx-search { width: 100%; }
+.pcx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pcx-list { display: flex; flex-direction: column; }
+.pcx-dir { padding: .5rem .35rem .15rem; font-size: var(--dm-text-xs); font-weight: 700; letter-spacing: .03em; color: var(--dm-text-muted);
+    font-family: var(--dm-font-mono, monospace); }
+.pcx-file { display: flex; align-items: center; gap: .35rem; padding: .28rem .35rem; border-radius: var(--dm-radius-sm); cursor: pointer;
+    color: var(--dm-text); font-size: var(--dm-text-sm); font-family: var(--dm-font-mono, monospace); min-width: 0; }
+.pcx-file.is-nested { padding-left: 1rem; }
+.pcx-file:hover, .pcx-file:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pcx-file.is-open { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); box-shadow: inset 3px 0 0 var(--dm-primary); }
+.pcx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pcx-dirty { color: var(--dm-warning); font-weight: 700; }
+.pcx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted);
+    border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.pcx-kebab:hover { color: var(--dm-primary); }
+.pcx-editor-card { flex: 1; }
+.pcx-toolbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--dm-border); }
+.pcx-toolbar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.pcx-current { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.pcx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.pcx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.pcx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pcx-editor { flex: 1; display: flex; min-height: 55vh; }
+.pcx-editor > .dm-edit-wrap { flex: 1; }
+.pcx-empty { margin: 0; padding: 2rem; color: var(--dm-text-muted); text-align: center; }
+.pcx-statusbar { display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem; border-top: 1px solid var(--dm-border);
+    font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.pcx-cursor { font-family: var(--dm-font-mono, monospace); }
+/* The path slideover */
+.pcx-form { display: flex; flex-direction: column; gap: .85rem; }
+.pcx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.pcx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pcx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pcx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.pcx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 800px) { .pcx-layout { flex-direction: column; } .pcx-files { flex-basis: auto; max-height: 40vh; } }
+</style>