domma-cms 0.74.0 → 0.75.0

package/admin/js/templates/media.html

@@ -1,16 +1,102 @@
-<div class="view-header">
-    <h1><span data-icon="image"></span> Media</h1>
-    <div class="view-header-actions">
-        <input id="file-input" type="file" multiple accept="image/*,video/*,.pdf,.svg" style="display:none">
-        <button id="upload-btn" class="btn btn-primary"><span data-icon="upload"></span> Upload</button>
+<!-- Media. Bound with M.applyBindings - see admin/views/media.js, which also inserts the tile template
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the Tool
+     banner above is the heading, and Upload is a banner action. -->
+<div class="mdx">
+    <input class="mdx-file-input" type="file" multiple accept="image/*,video/*,audio/*,.pdf,.svg,.txt,.csv,.doc,.docx,.xls,.xlsx" hidden>
+    <p class="mdx-note">Files for your pages, stored in <code>content/media/</code>. Drop files anywhere on this screen to
+        upload them.
+        <span data-help-title="Media" data-help="Upload with the button in the banner, or drop files onto this screen. Click a file for its details - its address, a snippet to paste into a page, a rename box, and the image editor for pictures. Right-click a file (or ⋮, or Shift+F10) for the same actions without opening it. Uploading a file with the same name as one already here replaces it; you are asked first."></span></p>
+    <p class="mdx-busy" data-bind-hidden="!busyText.value"><span class="mdx-spinner" aria-hidden="true"></span><span data-bind-text="busyText.value"></span></p>
+
+    <div class="mdx-card" data-bind-class="dragging.value && 'is-drop'">
+        <div class="mdx-bar">
+            <div class="mdx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="kindAll" data-bind-class="kind.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="kindImage" data-bind-class="kind.value === 'image' && 'is-on'" data-bind-hidden="!counts.value.image">Images <b data-bind-text="counts.value.image"></b></button>
+                <button type="button" data-on-click="kindVideo" data-bind-class="kind.value === 'video' && 'is-on'" data-bind-hidden="!counts.value.video">Video <b data-bind-text="counts.value.video"></b></button>
+                <button type="button" data-on-click="kindAudio" data-bind-class="kind.value === 'audio' && 'is-on'" data-bind-hidden="!counts.value.audio">Audio <b data-bind-text="counts.value.audio"></b></button>
+                <button type="button" data-on-click="kindDocument" data-bind-class="kind.value === 'document' && 'is-on'" data-bind-hidden="!counts.value.document">Documents <b data-bind-text="counts.value.document"></b></button>
+                <button type="button" data-on-click="kindOther" data-bind-class="kind.value === 'other' && 'is-on'" data-bind-hidden="!counts.value.other">Other <b data-bind-text="counts.value.other"></b></button>
+            </div>
+            <input type="search" class="form-input mdx-search" placeholder="Search file names…" aria-label="Search file names" data-model="query.value">
+            <select class="form-input mdx-sort" aria-label="Sort" data-model="sort.value">
+                <option value="newest">Newest first</option>
+                <option value="oldest">Oldest first</option>
+                <option value="name">Name</option>
+                <option value="size">Largest first</option>
+            </select>
+            <span class="mdx-total" data-bind-text="totalText.value"></span>
+        </div>
+        <p class="mdx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mdx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <div class="mdx-empty" data-bind-hidden="loading.value || loadError.value || tiles.value.length">
+            <span data-icon="upload" data-icon-size="28"></span>
+            <span data-bind-text="emptyText.value"></span>
+        </div>
+        <div class="mdx-grid" data-each="tiles.value key=name"></div>
+        <div class="mdx-drop" aria-hidden="true"><span data-icon="upload" data-icon-size="28"></span> Drop to upload</div>
     </div>
 </div>
 
-<p class="text-muted mb-4">
-    Uploaded files are stored in <code>content/media/</code>.
-    Use the copy button to get a URL you can embed in your pages.
-</p>
-
-<div id="media-grid" class="media-grid">
-    <p class="text-muted">Loading…</p>
-</div>
+<style>
+.mdx { display: flex; flex-direction: column; gap: .75rem; }
+.mdx [hidden], .mdx-panel [hidden] { display: none !important; }
+.mdx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mdx-note.is-bad { color: var(--dm-danger); }
+.mdx-busy { margin: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 12%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.mdx-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dm-primary) 30%, transparent);
+    border-top-color: var(--dm-primary); animation: mdx-spin .8s linear infinite; flex-shrink: 0; }
+@keyframes mdx-spin { to { transform: rotate(360deg); } }
+.mdx-card { position: relative; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .75rem; }
+.mdx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.mdx-search { flex: 1; min-width: 10rem; max-width: 20rem; }
+.mdx-sort { width: auto; }
+.mdx-total { margin-left: auto; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mdx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.mdx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.mdx-seg button + button { border-left: 1px solid var(--dm-border); }
+.mdx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.mdx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.mdx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.mdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
+.mdx-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+    background: var(--dm-surface); overflow: hidden; cursor: pointer; outline: none; }
+.mdx-tile:hover, .mdx-tile:focus-visible { border-color: var(--dm-primary); box-shadow: 0 0 0 1px var(--dm-primary); }
+.mdx-thumb { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
+    background: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface)); color: var(--dm-text-muted); }
+.mdx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.mdx-glyph { display: inline-flex; }
+.mdx-info { display: flex; flex-direction: column; padding: .45rem .55rem .5rem; min-width: 0; }
+.mdx-name { font-weight: 600; font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mdx-meta { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.mdx-chip { position: absolute; top: .4rem; left: .4rem; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-surface) 85%, transparent); color: var(--dm-text); border: 1px solid var(--dm-border); }
+.mdx-kebab { position: absolute; top: .3rem; right: .3rem; border: 1px solid var(--dm-border); background: color-mix(in srgb, var(--dm-surface) 85%, transparent);
+    cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text); border-radius: var(--dm-radius-sm); padding: 0 .35rem; }
+.mdx-kebab:hover { color: var(--dm-primary); }
+.mdx-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--dm-text-muted);
+    border: 2px dashed var(--dm-border); border-radius: var(--dm-radius-md); text-align: center; }
+.mdx-drop { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: .5rem; font-weight: 600;
+    border: 2px dashed var(--dm-primary); border-radius: var(--dm-radius-md); color: var(--dm-primary);
+    background: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-surface)); z-index: 2; pointer-events: none; }
+.mdx-card.is-drop .mdx-drop { display: flex; }
+/* The details slideover */
+.mdx-panel { display: flex; flex-direction: column; gap: .85rem; }
+.mdx-preview { display: flex; align-items: center; justify-content: center; min-height: 10rem; max-height: 22rem; overflow: hidden;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface)); color: var(--dm-text-muted); }
+.mdx-preview img, .mdx-preview video { max-width: 100%; max-height: 22rem; display: block; }
+.mdx-preview audio { width: 100%; margin: 1rem; }
+.mdx-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: var(--dm-text-sm); }
+.mdx-facts dt { color: var(--dm-text-muted); }
+.mdx-facts dd { margin: 0; overflow-wrap: anywhere; }
+.mdx-copy { display: flex; gap: .4rem; }
+.mdx-copy input { flex: 1; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.mdx-panel .form-label { display: flex; align-items: center; gap: .3rem; }
+.mdx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mdx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mdx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.mdx-actions .btn, .mdx-copy .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.mdx-spacer { flex: 1; }
+@media (max-width: 640px) { .mdx-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } .mdx-total { margin-left: 0; } }
+</style>

package/admin/js/templates/menus.html

@@ -1,14 +1,60 @@
-<div class="page-header">
-    <h2><span data-icon="menu"></span> Menus</h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menu-locations"><span data-icon="map"></span> Manage locations</a>
-        <a class="btn btn-primary" href="#/menus/new"><span data-icon="plus"></span> New menu</a>
-    </div>
-</div>
-<p class="text-muted mb-4">Multi-named menus for the public site, footers, and any plugin-registered slot.</p>
+<!-- Menus. Bound with M.applyBindings - see admin/views/menus.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, and New menu / Locations are banner actions. -->
+<div class="mnx">
+    <p class="mnx-note">Menus for the site's navbar and footers, the admin sidebar, floating overlays, and any slot a
+        plugin adds.
+        <span data-help-title="Menus and locations" data-help="A menu is a list of links. A location (a slot) is where one is shown: the navbar, the footers, the admin sidebar, a page overlay, or a plugin's slot. Locations maps each slot to a menu site-wide; a menu's own binding can take a slot over on chosen pages or projects instead. Any menu can also be shown inside page content with its [menu] shortcode."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="menus-table"></div>
+    <div class="mnx-card">
+        <div class="mnx-bar">
+            <div class="mnx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showPlaced" data-bind-class="filter.value === 'placed' && 'is-on'">In a location <b data-bind-text="counts.value.placed"></b></button>
+                <button type="button" data-on-click="showUnplaced" data-bind-class="filter.value === 'unplaced' && 'is-on'">Not in a location <b data-bind-text="counts.value.unplaced"></b></button>
+            </div>
+            <input type="search" class="form-input mnx-search" placeholder="Search menus…" aria-label="Search menus" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a menu to edit it. Right-click it (or ⋮, or Shift+F10) to duplicate it, copy its [menu] shortcode, open Locations, or delete it. A menu that a location uses cannot be deleted until it is taken out of the location. 'Not in a location' does not mean unused - a page may show it with its shortcode."></span>
+        </div>
+        <p class="mnx-note" data-bind-hidden="!projectText.value" data-bind-text="projectText.value"></p>
+        <p class="mnx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mnx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="mnx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="mnx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.mnx { display: flex; flex-direction: column; gap: .75rem; }
+.mnx [hidden] { display: none !important; }
+.mnx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mnx-note.is-bad { color: var(--dm-danger); }
+.mnx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.mnx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.mnx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.mnx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.mnx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.mnx-seg button + button { border-left: 1px solid var(--dm-border); }
+.mnx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.mnx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.mnx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.mnx-list { display: flex; flex-direction: column; }
+.mnx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.mnx-row:last-child { border-bottom: 0; }
+.mnx-row:hover, .mnx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.mnx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.mnx-row.is-unplaced .mnx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.mnx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.mnx-main strong, .mnx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mnx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.mnx-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; flex-shrink: 0; max-width: 45%; }
+.mnx-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); }
+.mnx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.mnx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 16%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.mnx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.mnx-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; }
+.mnx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .mnx-chips { display: none; } }
+</style>

package/admin/js/templates/pages.html

@@ -1,27 +1,82 @@
-<div class="view-header">
-    <h1><span data-icon="file-text"></span> Pages</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;margin-left:auto;">
-        <input id="pages-search" type="text" class="form-input form-input-sm" placeholder="Search pages…"
-               style="width:220px;">
-        <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
-    </div>
-</div>
+<!-- Pages. Bound with M.applyBindings - see admin/views/pages.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, and New page is a banner action. -->
+<div class="pgx">
+    <p class="pgx-notice" data-bind-hidden="!projectNote.value">
+        <span data-bind-text="projectNote.value"></span> <a href="#/pages">Show all pages</a>
+    </p>
 
-<div class="toolbar mb-3" style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
-    <select id="status-filter" class="form-select form-select-sm" style="width:auto">
-        <option value="">All statuses</option>
-        <option value="published">Published</option>
-        <option value="draft">Draft</option>
-    </select>
-    <div class="btn-group" style="margin-left:auto;">
-        <button id="view-table-btn" class="btn btn-sm btn-primary" data-tooltip="Table view"><span data-icon="list"></span></button>
-        <button id="view-tree-btn" class="btn btn-sm btn-ghost" data-tooltip="Tree view"><span data-icon="tree"></span></button>
+    <div class="pgx-card">
+        <div class="pgx-bar">
+            <div class="pgx-seg" role="group" aria-label="Status">
+                <button type="button" data-on-click="showAll" data-bind-class="status.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showPublished" data-bind-class="status.value === 'published' && 'is-on'">Published <b data-bind-text="counts.value.published"></b></button>
+                <button type="button" data-on-click="showDrafts" data-bind-class="status.value === 'draft' && 'is-on'">Drafts <b data-bind-text="counts.value.draft"></b></button>
+            </div>
+            <input type="search" class="form-input pgx-search" placeholder="Search title, URL, tag or layout…" aria-label="Search pages" data-model="query.value">
+            <select class="form-input pgx-sort" aria-label="Sort" data-model="sort.value" data-bind-hidden="mode.value === 'tree'">
+                <option value="order">Navigation order</option>
+                <option value="updated">Recently changed</option>
+                <option value="title">Title</option>
+                <option value="url">URL</option>
+            </select>
+            <span class="pgx-spacer"></span>
+            <div class="pgx-seg" role="group" aria-label="View">
+                <button type="button" data-on-click="showList" data-bind-class="mode.value === 'list' && 'is-on'" title="List">List</button>
+                <button type="button" data-on-click="showTree" data-bind-class="mode.value === 'tree' && 'is-on'" title="Tree - pages under the page whose URL they sit beneath">Tree</button>
+            </div>
+            <span data-help-title="Pages" data-help="Click a page to edit it. Right-click it (or ⋮, or Shift+F10) to view it on the site, copy its address, trim its revision history or delete it. Drafts are not public: visitors get a 404, while anyone who can edit pages sees them with a Draft banner. Tree shows each page under the page whose address it sits beneath. Your filter, sort and view are remembered."></span>
+        </div>
+        <p class="pgx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="pgx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="pgx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="pgx-list" data-each="rows.value key=urlPath" data-bind-hidden="mode.value === 'tree'"></div>
+        <div class="pgx-tree" data-bind-hidden="mode.value !== 'tree' || !rows.value.length"></div>
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="pages-table"></div>
-        <div id="pages-tree" style="display:none;"></div>
-    </div>
-</div>
+<style>
+.pgx { display: flex; flex-direction: column; gap: .75rem; }
+.pgx [hidden], .pgx-form [hidden] { display: none !important; }
+.pgx-notice { margin: 0; padding: .5rem .75rem; border-radius: var(--dm-radius-md); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); }
+.pgx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pgx-note.is-bad { color: var(--dm-danger); }
+.pgx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.pgx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.pgx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.pgx-sort { width: auto; }
+.pgx-spacer { flex: 1; }
+.pgx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.pgx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.pgx-seg button + button { border-left: 1px solid var(--dm-border); }
+.pgx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.pgx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.pgx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.pgx-list { display: flex; flex-direction: column; }
+.pgx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.pgx-row:last-child { border-bottom: 0; }
+.pgx-row:hover, .pgx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pgx-row.is-draft .pgx-main strong { color: var(--dm-text-muted); }
+.pgx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.pgx-main strong, .pgx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pgx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.pgx-tags { color: var(--dm-info, var(--dm-primary)); }
+.pgx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.pgx-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); }
+.pgx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.pgx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pgx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.pgx-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; }
+.pgx-kebab:hover { color: var(--dm-primary); }
+.pgx-tree { padding: .25rem 0; }
+/* The prune slideover */
+.pgx-form { display: flex; flex-direction: column; gap: .85rem; }
+.pgx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.pgx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pgx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pgx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.pgx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .pgx-chips { display: none; } }
+</style>