domma-cms 0.75.0 → 0.77.0

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

@@ -1,112 +1,123 @@
-<div class="page-header">
-    <h2><span data-icon="menu"></span> <span id="ctx-title">New context menu</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/context-menus"><span data-icon="arrow-left"></span> Back</a>
-        <button class="btn btn-primary" id="ctx-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
+<!-- Context menu editor. Bound with M.applyBindings - see admin/js/views/context-menu-editor.js, which also
+     inserts the Items row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading or Back button: the Tool banner carries the name ("Context Menus › <menu>"), Save and
+     "All context menus". -->
+<div class="cmx">
+    <p class="cmx-intro">
+        A context menu is not placed on a page the way a nav menu is. It attaches to a <strong>region</strong>
+        and opens when someone right-clicks inside it. So there are two questions to answer: which region, and
+        what the menu offers. Everything else has a sensible default.
+        <span data-help-title="Nested menus" data-help="Menus can sit inside one another. A right-click picks the INNERMOST menu covering the spot clicked, never the one that happened to load first. A menu that does not apply to a page is not sent to that page at all."></span>
+    </p>
 
-<div id="ctx-errors" class="alert alert-danger mb-4" style="display:none;"></div>
-
-<p class="text-muted ctx-intro">
-    A context menu is not placed on a page the way a nav menu is. It attaches to a <strong>region</strong>
-    and opens when someone right-clicks inside it. So there are two questions to answer: which region, and
-    what the menu offers. Everything else has a sensible default.
-</p>
+    <div class="cmx-alert is-bad" data-bind-hidden="!serverError.value">
+        <strong>Not saved.</strong>
+        <div class="cmx-server-errors" data-each="serverErrors.value key=key"></div>
+    </div>
 
-<div class="row ctx-workspace">
-  <div class="col-8">
-<div class="tabs" id="ctx-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Binding</button>
-        <button class="tab-item">Items</button>
-        <button class="tab-item">Appearance</button>
-        <button class="tab-item">Scope</button>
+    <div class="cmx-unsaved" data-bind-hidden="!dirty.value">
+        <span class="cmx-dot" aria-hidden="true"></span>
+        <span>Unsaved changes<span data-bind-text="problemText.value"></span></span>
+        <span class="cmx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard" data-bind-hidden="isNew">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+            <span data-icon="save" data-icon-size="13"></span> <span data-bind-text="saveText.value">Save</span></button>
     </div>
 
-    <!-- Binding ------------------------------------------------------- -->
-    <div class="tab-panel active">
-        <div class="row">
-            <div class="col-12">
-                <div class="card mb-4">
-                    <div class="card-header"><h3 class="m-0">Where it binds</h3></div>
-                    <div class="card-body">
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-name">Name<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Your label for this menu in the admin list. Visitors never see it.">?</button></label>
-                            <input class="form-input" id="ctx-name" type="text" placeholder="Entry actions">
+    <div class="row ctx-workspace">
+      <div class="col-8">
+        <div class="tabs cmx-tabs" id="ctx-tabs">
+            <div class="tab-list">
+                <button type="button" class="tab-item active">Binding <span class="cmx-tab-dot" data-bind-hidden="!tabBad.value.binding" title="Something here needs fixing"></span></button>
+                <button type="button" class="tab-item">Items <span class="cmx-count" data-bind-text="items.value.length"></span> <span class="cmx-tab-dot" data-bind-hidden="!tabBad.value.items" title="Something here needs fixing"></span></button>
+                <button type="button" class="tab-item">Appearance <span class="cmx-tab-dot" data-bind-hidden="!tabBad.value.appearance" title="Something here needs fixing"></span></button>
+                <button type="button" class="tab-item">Scope</button>
+            </div>
+
+            <!-- Binding -->
+            <div class="tab-panel active">
+                <div class="cmx-card">
+                    <div class="cmx-card-title">Where it binds</div>
+                    <div class="cmx-grid">
+                        <div>
+                            <label class="form-label" for="ctx-name">Name <span class="text-danger">*</span>
+                                <span data-help="Your label for this menu in the admin list. Visitors never see it."></span></label>
+                            <input class="form-input" id="ctx-name" type="text" maxlength="80" placeholder="Entry actions" data-model="name.value">
+                            <small class="cmx-err" data-bind-hidden="!err.value.name" data-bind-text="err.value.name"></small>
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-slug">Slug<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The filename this menu is saved as. Fixed once created, because the file is the record.">?</button></label>
-                            <input class="form-input" id="ctx-slug" type="text" placeholder="entry-actions">
-                            <small class="text-muted">Lowercase letters, numbers and hyphens. Cannot be changed later.</small>
+                        <div>
+                            <label class="form-label" for="ctx-slug">Slug
+                                <span data-help="The filename this menu is saved as. Made from the name as you type; fixed once created, because the file is the record."></span></label>
+                            <input class="form-input font-mono" id="ctx-slug" type="text" maxlength="64" placeholder="entry-actions" data-model="slug.value" data-bind-disabled="notNew">
+                            <small class="cmx-err" data-bind-hidden="!err.value.slug" data-bind-text="err.value.slug"></small>
+                            <small class="cmx-hint" data-bind-hidden="!notNew">Fixed - it is the file's name.</small>
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-selector">Container selector<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="A CSS selector for the region, e.g. #product-grid, .entry-card or main. Right-clicks anywhere inside it are offered to this menu. body, html, * and :root are refused, because they would swallow every other menu on the page.">?</button></label>
-                            <input class="form-input" id="ctx-selector" type="text" placeholder="#product-grid">
-                            <small class="text-muted">The region this menu covers. Right-clicks inside it are offered to this menu.</small>
+                        <div class="cmx-wide">
+                            <label class="form-label" for="ctx-selector">Container selector <span class="text-danger">*</span>
+                                <span data-help-title="Container selector" data-help="A CSS selector for the region, e.g. #product-grid, .entry-card or main. Right-clicks anywhere inside it are offered to this menu. body, html, * and :root are refused, because they would swallow every other menu on the page."></span></label>
+                            <input class="form-input font-mono" id="ctx-selector" type="text" placeholder="#product-grid" data-model="selector.value">
+                            <small class="cmx-err" data-bind-hidden="!err.value.selector" data-bind-text="err.value.selector"></small>
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-match">Match (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Narrows it: only claim the click when it landed on something matching this, e.g. [data-entry-id] to answer on rows but not the space between them. Blank means the whole container.">?</button></label>
-                            <input class="form-input" id="ctx-match" type="text" placeholder="[data-entry-id]">
-                            <small class="text-muted">Only claim right-clicks on descendants matching this. Leave empty to cover the whole container.</small>
+                        <div>
+                            <label class="form-label" for="ctx-match">Match <small class="cmx-hint-inline">(optional)</small>
+                                <span data-help="Narrows it: only claim the click when it landed on something matching this, e.g. [data-entry-id] to answer on rows but not the space between them. Blank means the whole container."></span></label>
+                            <input class="form-input font-mono" id="ctx-match" type="text" placeholder="[data-entry-id]" data-model="match.value">
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-exclude">Exclude (optional)<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Holes in the region. A right-click on one of these falls through to whatever encloses it, which is useful for links and inputs where the browser's own menu is more use.">?</button></label>
-                            <input class="form-input" id="ctx-exclude" type="text" placeholder="a, button, input">
-                            <small class="text-muted">Regions that decline, so the click falls through to whatever encloses them.</small>
+                        <div>
+                            <label class="form-label" for="ctx-exclude">Exclude <small class="cmx-hint-inline">(optional)</small>
+                                <span data-help="Holes in the region. A right-click on one of these falls through to whatever encloses it - useful for links and inputs, where the browser's own menu is more use."></span></label>
+                            <input class="form-input font-mono" id="ctx-exclude" type="text" placeholder="a, button, input" data-model="exclude.value">
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="col-12">
-                <div class="card mb-4">
-                    <div class="card-header"><h3 class="m-0">Behaviour<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Menus can sit inside one another. A right-click picks the INNERMOST menu covering the spot clicked, never the one that happened to load first.">?</button></h3></div>
-                    <div class="card-body">
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-inherit">When nested inside another menu<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Append puts the outer menu's items after yours, Prepend before, and Stand alone shows only yours.">?</button></label>
-                            <select class="form-select" id="ctx-inherit">
+                <div class="cmx-card">
+                    <div class="cmx-card-title">Behaviour</div>
+                    <div class="cmx-grid">
+                        <div class="cmx-wide">
+                            <label class="form-label" for="ctx-inherit">When nested inside another menu
+                                <span data-help="Show my items, then theirs puts the outer menu's items after yours; the reverse puts them before; Show only my items hides the outer menu's."></span></label>
+                            <select class="form-select" id="ctx-inherit" data-model="inherit.value">
                                 <option value="append">Show my items, then theirs (default)</option>
                                 <option value="prepend">Show their items, then mine</option>
                                 <option value="false">Show only my items</option>
                             </select>
                         </div>
-                        <div class="form-group">
-                            <label class="form-check">
-                                <input type="checkbox" id="ctx-enabled" checked> Enabled
-                            </label>
-                            <small class="text-muted">Turn this off to park a menu without deleting it. A disabled menu is never sent to the browser.</small>
+                        <div class="cmx-setting cmx-wide">
+                            <label class="form-label" for="ctx-enabled">Enabled
+                                <span data-help="Off parks a menu without deleting it. A disabled menu is never sent to the browser."></span></label>
+                            <input type="checkbox" class="form-switch" id="ctx-enabled" data-model="enabled.value">
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <!-- Items --------------------------------------------------------- -->
-    <div class="tab-panel">
-        <div class="card">
-            <div class="card-header">
-                <h3 class="m-0">Items<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="What the menu offers when it opens, top to bottom. An Item does something when clicked, a Divider draws a line, a Heading labels a group. A menu whose items are all dividers and headings is refused on save, because there would be nothing to click.">?</button></h3>
-                <button class="btn btn-sm btn-secondary" id="ctx-add-item"><span data-icon="plus"></span> Add item</button>
-            </div>
-            <div class="card-body">
-                <div id="ctx-items"></div>
-                <p class="text-muted mb-0" id="ctx-items-empty">No items yet. Every menu needs at least one.</p>
+            <!-- Items -->
+            <div class="tab-panel">
+                <div class="cmx-card">
+                    <div class="cmx-card-title">Items
+                        <span data-help-title="Items" data-help="What the menu offers when it opens, top to bottom. An Item does something when clicked, a Divider draws a line, a Heading labels a group. Click an item to edit it; right-click it (or ⋮, or Shift+F10) to move, duplicate, add beside it or remove it. Alt+↑ / Alt+↓ move the focused item. A menu of nothing but dividers and headings is refused, because there would be nothing to click."></span>
+                        <span class="cmx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="addHeader"><span data-icon="type" data-icon-size="13"></span> Heading</button>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="addDivider"><span data-icon="minus" data-icon-size="13"></span> Divider</button>
+                        <button type="button" class="btn btn-sm btn-secondary" id="ctx-add-item" data-on-click="addItem"><span data-icon="plus" data-icon-size="13"></span> Add item</button>
+                    </div>
+                    <p class="cmx-note" data-bind-hidden="items.value.length">No items yet. Every menu needs at least one.</p>
+                    <p class="cmx-err" data-bind-hidden="!err.value.items" data-bind-text="err.value.items"></p>
+                    <div class="cmx-list" id="ctx-items" data-each="rows.value key=key"></div>
+                </div>
             </div>
-        </div>
-    </div>
 
-    <!-- Appearance ---------------------------------------------------- -->
-    <div class="tab-panel">
-        <div class="card">
-            <div class="card-header"><h3 class="m-0">Appearance<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="How the panel looks when it opens. Leave anything blank to inherit the site theme, which is usually what you want so the menu matches everything around it.">?</button></h3></div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-accent">Accent<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The colour used for hover and the active item.">?</button></label>
-                            <select class="form-select" id="ctx-accent">
+            <!-- Appearance -->
+            <div class="tab-panel">
+                <div class="cmx-card">
+                    <div class="cmx-card-title">Appearance
+                        <span data-help="How the panel looks when it opens. Leave anything on its default to inherit the site theme - usually what you want, so the menu matches everything around it."></span></div>
+                    <div class="cmx-grid">
+                        <div>
+                            <label class="form-label" for="ctx-accent">Accent
+                                <span data-help="Tints the border and the hover wash. Labels keep the theme's text colour so they stay readable."></span></label>
+                            <select class="form-select" id="ctx-accent" data-model="accent.value">
                                 <option value="">Theme default</option>
                                 <option value="primary">Primary</option>
                                 <option value="success">Success</option>
@@ -114,29 +125,11 @@
                                 <option value="warning">Warning</option>
                                 <option value="info">Info</option>
                             </select>
-                            <small class="text-muted">Tints the border and hover wash. Labels keep the theme's text colour so they stay readable.</small>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-transition">Transition</label>
-                            <select class="form-select" id="ctx-transition">
-                                <option value="">Default (scale)</option>
-                                <option value="fade">Fade</option>
-                                <option value="slide">Slide</option>
-                                <option value="none">None</option>
-                            </select>
+                            <small class="cmx-err" data-bind-hidden="!err.value.accent" data-bind-text="err.value.accent"></small>
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-density">Density</label>
-                            <select class="form-select" id="ctx-density">
-                                <option value="">Comfortable</option>
-                                <option value="compact">Compact</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-6">
-                        <div class="form-group">
+                        <div>
                             <label class="form-label" for="ctx-radius">Corner radius</label>
-                            <select class="form-select" id="ctx-radius">
+                            <select class="form-select" id="ctx-radius" data-model="radius.value">
                                 <option value="">Default</option>
                                 <option value="none">Square</option>
                                 <option value="sm">Small</option>
@@ -145,9 +138,18 @@
                                 <option value="xl">Extra large</option>
                             </select>
                         </div>
-                        <div class="form-group">
+                        <div>
+                            <label class="form-label" for="ctx-transition">Transition</label>
+                            <select class="form-select" id="ctx-transition" data-model="transition.value">
+                                <option value="">Default (scale)</option>
+                                <option value="fade">Fade</option>
+                                <option value="slide">Slide</option>
+                                <option value="none">None</option>
+                            </select>
+                        </div>
+                        <div>
                             <label class="form-label" for="ctx-shadow">Shadow</label>
-                            <select class="form-select" id="ctx-shadow">
+                            <select class="form-select" id="ctx-shadow" data-model="shadow.value">
                                 <option value="">Default</option>
                                 <option value="none">None</option>
                                 <option value="sm">Small</option>
@@ -156,57 +158,115 @@
                                 <option value="xl">Extra large</option>
                             </select>
                         </div>
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-opacity">Opacity<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Below 100 the panel lets the page show through. Anything under about 80 gets hard to read over busy content.">?</button></label>
-                            <input class="form-input" id="ctx-opacity" type="number" min="20" max="100" placeholder="100">
-                            <small class="text-muted">Below 100 gives a translucent panel with a blurred backdrop. Text stays fully opaque.</small>
+                        <div>
+                            <label class="form-label" for="ctx-density">Density</label>
+                            <select class="form-select" id="ctx-density" data-model="density.value">
+                                <option value="">Comfortable</option>
+                                <option value="compact">Compact</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="form-label" for="ctx-opacity">Opacity
+                                <span data-help="Below 100 the panel lets the page show through, with a blurred backdrop; text stays fully opaque. Much under 80 gets hard to read over busy content."></span></label>
+                            <input class="form-input" id="ctx-opacity" type="number" min="20" max="100" placeholder="100" data-model="opacity.value">
+                            <small class="cmx-err" data-bind-hidden="!err.value.opacity" data-bind-text="err.value.opacity"></small>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <!-- Scope --------------------------------------------------------- -->
-    <div class="tab-panel">
-        <div class="card">
-            <div class="card-header"><h3 class="m-0">Scope<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Which pages carry this menu. Leave BOTH blank and it applies site-wide. A menu that does not apply to a page is not sent to that page at all.">?</button></h3></div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-pages">Pages<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated URL paths. Supports * as a wildcard, so /shop/* covers everything under /shop. Blank means every page.">?</button></label>
-                            <input class="form-input" id="ctx-pages" type="text" placeholder="/shop/*, /about">
-                            <small class="text-muted">Comma separated. Supports a trailing <code>/*</code>. Leave empty for site-wide.</small>
+            <!-- Scope -->
+            <div class="tab-panel">
+                <div class="cmx-card">
+                    <div class="cmx-card-title">Scope
+                        <span data-help="Which pages carry this menu. Leave BOTH blank and it applies site-wide. A menu that does not apply to a page is not sent to that page at all."></span></div>
+                    <div class="cmx-grid">
+                        <div>
+                            <label class="form-label" for="ctx-pages">Pages
+                                <span data-help="Comma separated URL paths. A trailing /* covers everything under it, so /shop/* covers the whole shop. Blank means every page."></span></label>
+                            <input class="form-input font-mono" id="ctx-pages" type="text" placeholder="/shop/*, /about" data-model="pages.value">
                         </div>
-                    </div>
-                    <div class="col-6">
-                        <div class="form-group">
-                            <label class="form-label" for="ctx-projects">Projects<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="Comma separated project slugs. The menu then applies only to pages belonging to those projects.">?</button></label>
-                            <input class="form-input" id="ctx-projects" type="text" placeholder="core, shop">
-                            <small class="text-muted">Comma separated project slugs.</small>
+                        <div>
+                            <label class="form-label" for="ctx-projects">Projects
+                                <span data-help="Comma separated project slugs. The menu then applies only to pages belonging to those projects."></span></label>
+                            <input class="form-input font-mono" id="ctx-projects" type="text" placeholder="core, shop" data-model="projects.value">
                         </div>
                     </div>
+                    <p class="cmx-note" data-bind-text="scopeText.value"></p>
                 </div>
             </div>
         </div>
-    </div>
-</div>
-
-  </div><!-- /col-8 -->
+      </div><!-- /col-8 -->
 
-  <!-- One preview, beside the tabs rather than inside them: four copies would
-       be four elements sharing #ctx-preview, and the menu binds by selector.
-       Sticky, so it stays put while a long Items tab scrolls past it. -->
-  <div class="col-4">
-    <div class="card ctx-preview-card">
-      <div class="card-header"><h3 class="m-0">Try it<button type="button" class="ctx-help" aria-label="What is this?" data-tooltip="The real menu, built from what you have entered, updating as you type. This is the component itself rather than a drawing of it.">?</button></h3></div>
-      <div class="card-body">
-        <p class="text-muted">Right-click the panel below to see this menu as configured.</p>
-        <div id="ctx-preview" class="p-4 text-center" style="border:1px dashed var(--dm-border); border-radius:var(--dm-radius-md);">
-          Right-click to preview
+      <!-- One preview, beside the tabs rather than inside them: four copies would be four elements sharing
+           #ctx-preview, and the menu binds by selector. Sticky, so it stays put while a long Items tab scrolls. -->
+      <div class="col-4">
+        <div class="cmx-card ctx-preview-card">
+            <div class="cmx-card-title">Try it
+                <span data-help="The real menu, built from what you have entered and updating as you type - the component itself, not a drawing of it. Its actions do nothing here."></span></div>
+            <div class="cmx-chips" data-each="chips.value key=text"></div>
+            <div id="ctx-preview" class="cmx-preview" tabindex="0">
+                <span data-bind-text="previewText.value">Right-click to preview</span>
+            </div>
         </div>
       </div>
-    </div>
-  </div>
-</div><!-- /ctx-workspace -->
+    </div><!-- /ctx-workspace -->
+</div>
+
+<style>
+.cmx { display: flex; flex-direction: column; gap: .75rem; }
+.cmx [hidden], .cmx-form [hidden] { display: none !important; }
+.cmx-intro { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cmx-alert { margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-danger) 12%, transparent); color: var(--dm-text); border: 1px solid color-mix(in srgb, var(--dm-danger) 35%, transparent); }
+.cmx-alert small, .cmx-server-errors div { display: block; font-size: var(--dm-text-sm); }
+.cmx-unsaved { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, var(--dm-surface)); border: 1px solid color-mix(in srgb, var(--dm-warning) 40%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.cmx-unsaved .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cmx-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dm-warning); flex-shrink: 0; }
+.cmx-spacer { flex: 1; }
+.cmx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .7rem; margin-top: .75rem; background: var(--dm-surface); }
+.cmx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.cmx-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cmx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+.cmx-wide { grid-column: 1 / -1; }
+.cmx .form-label, .cmx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.cmx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+p.cmx-err { margin: 0; }
+.cmx-hint, .cmx-hint-inline { color: var(--dm-text-muted); font-size: var(--dm-text-xs); font-weight: 400; }
+.cmx-hint { display: block; margin-top: .25rem; }
+.cmx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cmx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.cmx-setting .form-label { margin: 0; }
+.cmx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .15rem; }
+.cmx-tab-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dm-danger); margin-left: .25rem; vertical-align: middle; }
+.cmx-list { display: flex; flex-direction: column; }
+.cmx-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.cmx-row:last-child { border-bottom: 0; }
+.cmx-row:hover, .cmx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cmx-row.is-divider .cmx-main strong { color: var(--dm-text-muted); letter-spacing: .1em; font-weight: 400; }
+.cmx-row.is-header .cmx-main strong { text-transform: uppercase; font-size: var(--dm-text-xs); letter-spacing: .05em; color: var(--dm-text-muted); }
+.cmx-row.is-bad { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.cmx-icon { width: 1.4rem; display: inline-flex; justify-content: center; color: var(--dm-text-muted); flex-shrink: 0; }
+.cmx-type { font-size: var(--dm-text-xs); color: var(--dm-text-muted); min-width: 4rem; flex-shrink: 0; }
+.cmx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.cmx-main strong, .cmx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.cmx-main small.cmx-bad { color: var(--dm-danger); }
+.cmx-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); }
+.cmx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.cmx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.cmx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.cmx-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
+.cmx-move { display: inline-flex; gap: .1rem; flex-shrink: 0; }
+.cmx-move button, .cmx-kebab { border: 0; background: none; cursor: pointer; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .35rem; font-size: var(--dm-text-base); line-height: 1.6; }
+.cmx-move button:hover:not(:disabled), .cmx-kebab:hover { color: var(--dm-primary); }
+.cmx-move button:disabled { opacity: .3; cursor: default; }
+.cmx-kebab { font-size: var(--dm-text-lg); }
+.cmx-preview { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--dm-border); border-radius: var(--dm-radius-md); color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+/* The item panel (slideover) */
+.cmx-form { display: flex; flex-direction: column; gap: .85rem; }
+.cmx-form .cmx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.cmx-form .cmx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 640px) { .cmx-grid { grid-template-columns: 1fr; } .cmx-type { display: none; } }
+</style>