domma-cms 0.76.0 → 0.77.0

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

@@ -1,98 +1,173 @@
-<div class="view-header">
-    <h1><span data-icon="shield"></span> <span id="role-title">Edit Role</span></h1>
-    <div>
-        <a href="#/roles" class="btn btn-secondary"><span data-icon="arrow-left"></span> Back</a>
-        <button id="btn-save-role" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+<!-- Role editor. Bound with M.applyBindings - see admin/views/role-editor.js, which also inserts the row
+     templates (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the
+     Tool banner is the heading ("Roles › <role>"), with Save and Back to roles in it. -->
+<div class="rex">
+    <div class="rex-bar" data-bind-hidden="!dirty.value">
+        <span class="rex-chip is-warn">Unsaved</span>
+        <span class="rex-note">Changes to this role are not saved yet.</span>
+        <span class="rex-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="cannot.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-</div>
-
-<div class="tabs" id="role-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">General</button>
-        <button class="tab-item">Permissions</button>
+    <div class="rex-alert is-bad" data-bind-hidden="!risks.value.length">
+        <strong>Careful - this is your own role.</strong>
+        <ul class="rex-risks" data-each="riskRows.value key=id"></ul>
     </div>
-    <div class="tab-content">
-        <!-- General Tab -->
-        <div class="tab-panel active" id="panel-general">
-            <div class="card">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Name (slug)</label>
-                                <input id="role-name" type="text" class="form-input" placeholder="e.g. moderator">
-                                <p class="form-hint">Lowercase identifier. Cannot be changed for the root admin
-                                    role.</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Display Label</label>
-                                <input id="role-label" type="text" class="form-input" placeholder="e.g. Moderator">
-                            </div>
-                        </div>
+    <p class="rex-alert" data-bind-hidden="!isRoot">
+        The root role holds every permission - core and plugins - whatever is ticked here, and keeps its name and level.
+    </p>
+
+    <div class="tabs rex-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">General <b class="rex-dot" data-bind-hidden="!generalDirty.value" title="Unsaved changes">•</b></button>
+            <button type="button" class="tab-item">Permissions <span class="rex-count" data-bind-text="grantedCount.value"></span>
+                <b class="rex-dot" data-bind-hidden="!permsDirty.value" title="Unsaved changes">•</b></button>
+            <button type="button" class="tab-item">What it can do</button>
+        </div>
+
+        <!-- General -->
+        <div class="tab-panel active">
+            <div class="rex-card">
+                <div class="rex-card-title">Role
+                    <span class="rex-badge-preview badge" data-bind-class="badgeClass.value" data-bind-text="previewLabel.value"></span>
+                    <span class="rex-chip" data-bind-hidden="!holdersText.value" data-bind-text="holdersText.value"></span>
+                    <span class="rex-chip" data-bind-hidden="!pluginText" data-bind-text="pluginText"></span>
+                </div>
+                <div class="rex-grid">
+                    <div>
+                        <label class="form-label" for="rex-label">Label <span class="text-danger">*</span>
+                            <span data-help="The name people see - on the user list, the role badge and this screen."></span></label>
+                        <input id="rex-label" type="text" class="form-input" maxlength="60" data-model="label.value">
+                        <small class="rex-err" data-bind-hidden="!errors.value.label" data-bind-text="errors.value.label"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rex-name">Name
+                            <span data-help-title="Name" data-help="The role's id: users hold it by this name, and routes and plugins refer to it. Renaming a role leaves the users who hold it on a name that no longer exists until you move them - the screen says how many that is."></span></label>
+                        <input id="rex-name" type="text" class="form-input font-mono" maxlength="60" data-model="name.value" data-bind-disabled="nameLockedText">
+                        <small class="rex-hint" data-bind-hidden="!nameLockedText" data-bind-text="nameLockedText"></small>
+                        <small class="rex-hint is-warn" data-bind-hidden="!renameNote.value" data-bind-text="renameNote.value"></small>
+                        <small class="rex-err" data-bind-hidden="!errors.value.name" data-bind-text="errors.value.name"></small>
                     </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Level</label>
-                                <input id="role-level" type="number" class="form-input" min="0">
-                                <p class="form-hint">Lower = more privileged. 0 is reserved for the root admin.</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Badge Colour</label>
-                                <select id="role-badge" class="form-input"></select>
-                            </div>
-                        </div>
+                    <div>
+                        <label class="form-label" for="rex-level">Level
+                            <span data-help-title="Level" data-help="Seniority: lower is more senior. A user can manage only users whose role is strictly less senior than theirs, and a page or menu item visible to a level is visible to every more senior one. 0 is the root role alone."></span></label>
+                        <input id="rex-level" type="number" class="form-input" min="1" data-model="level.value" data-bind-disabled="isRoot">
+                        <small class="rex-err" data-bind-hidden="!errors.value.level" data-bind-text="errors.value.level"></small>
                     </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Project</label>
-                                <select id="role-project" class="form-input">
-                                    <option value="">- none -</option>
-                                </select>
-                                <p class="form-hint">Tag this role to a project for grouping.</p>
-                            </div>
-                        </div>
+                    <div>
+                        <label class="form-label" for="rex-badge">Badge colour</label>
+                        <select id="rex-badge" class="form-input" data-model="badgeClass.value"></select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rex-project">Project
+                            <span data-help="Files the role under a project, for the sidebar and the project's own Roles list. It does not limit what the role can do."></span></label>
+                        <select id="rex-project" class="form-input" data-model="project.value"><option value="">- none -</option></select>
                     </div>
                 </div>
             </div>
-            <div class="card mt-3" id="role-admin-scope-card">
-                <div class="card-body">
-                    <h3 class="card-title"><span data-icon="lock"></span> Admin area</h3>
-                    <p class="form-hint">Leave both blank to let this role use every admin screen its permissions
-                        allow. Fill in the allowed screens to confine it - customers who should only ever see their
-                        own portal, say. A user is confined only if every role they hold is; My Profile is always
-                        open.</p>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Allowed screens</label>
-                                <textarea id="role-admin-allow" class="form-input" rows="4"
-                                          placeholder="/portal"></textarea>
-                                <p class="form-hint">One admin route per line. A route also allows everything under
-                                    it (<code>/portal</code> allows <code>/portal/orders</code>).</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Home screen</label>
-                                <input id="role-admin-home" type="text" class="form-input" placeholder="/portal">
-                                <p class="form-hint">Where the user lands, and where they are sent from anywhere
-                                    else. Defaults to the first allowed screen.</p>
-                            </div>
-                        </div>
+
+            <div class="rex-card" data-bind-hidden="isRoot">
+                <div class="rex-card-title"><span data-icon="lock" data-icon-size="15"></span> Admin area
+                    <span data-help-title="Admin area" data-help="Leave both blank to let this role use every admin screen its permissions allow. Fill in the allowed screens to confine it - customers who should only ever see their own portal, say. A user is confined only if EVERY role they hold is; My Profile is always open."></span>
+                    <span class="rex-chip is-warn" data-bind-hidden="!scopeText.value" data-bind-text="scopeText.value"></span></div>
+                <div class="rex-grid">
+                    <div>
+                        <label class="form-label" for="rex-allow">Allowed screens
+                            <span data-help="One admin route per line. A route also allows everything under it: /portal allows /portal/orders."></span></label>
+                        <textarea id="rex-allow" class="form-input font-mono" rows="4" placeholder="/portal" data-model="adminAllow.value"></textarea>
                     </div>
+                    <div>
+                        <label class="form-label" for="rex-home">Home screen
+                            <span data-help="Where holders land after signing in, and where they are sent from anywhere they may not go. Defaults to the first allowed screen."></span></label>
+                        <input id="rex-home" type="text" class="form-input font-mono" placeholder="/portal" data-model="adminHome.value">
+                    </div>
+                </div>
+                <small class="rex-err" data-bind-hidden="!errors.value.admin" data-bind-text="errors.value.admin"></small>
+            </div>
+        </div>
+
+        <!-- Permissions -->
+        <div class="tab-panel">
+            <div class="rex-card" data-bind-class="isRoot && 'is-locked'">
+                <div class="rex-bar-tools">
+                    <input type="search" class="form-input rex-search" placeholder="Search permissions…" aria-label="Search permissions" data-model="query.value">
+                    <div class="rex-seg" role="group" aria-label="Show">
+                        <button type="button" data-on-click="showAll" data-bind-class="show.value === 'all' && 'is-on'">All</button>
+                        <button type="button" data-on-click="showOn" data-bind-class="show.value === 'on' && 'is-on'">Granted</button>
+                        <button type="button" data-on-click="showOff" data-bind-class="show.value === 'off' && 'is-on'">Not granted</button>
+                    </div>
+                    <span data-help-title="Permissions" data-help="Click an action to grant or take it away; Full turns a whole area on or off. Right-click an area (or ⋮, or Shift+F10) for view only or none; right-click a group heading to grant or clear the whole group. Plugins add their own areas under Plugins."></span>
+                    <span class="rex-spacer"></span>
+                    <span class="rex-note" data-bind-text="grantedText.value"></span>
                 </div>
+                <p class="rex-note" data-bind-hidden="rows.value.length">Nothing matches.</p>
+                <div class="rex-matrix" data-each="rows.value key=id"></div>
             </div>
         </div>
 
-        <!-- Permissions Tab -->
-        <div class="tab-panel" id="panel-permissions">
-            <div id="permissions-container"></div>
+        <!-- What it can do -->
+        <div class="tab-panel">
+            <div class="rex-card">
+                <div class="rex-card-title">What <span data-bind-text="previewLabel.value"></span> can do
+                    <span data-help="Read back from the ticks as they are now - saved or not. Anyone holding this role and another gets both roles' permissions together."></span></div>
+                <div class="rex-summary" data-each="summary.value key=id"></div>
+            </div>
         </div>
     </div>
 </div>
+
+<style>
+.rex { display: flex; flex-direction: column; gap: .75rem; }
+.rex [hidden] { display: none !important; }
+.rex-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-warning) 10%, transparent); position: sticky; top: 0; z-index: 5; }
+.rex-bar .btn, .rex-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.rex-alert { margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); }
+.rex-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dm-danger) 35%, transparent); }
+.rex-risks { margin: .35rem 0 0; padding-left: 1.2rem; }
+.rex-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; }
+.rex-card-title { display: flex; align-items: center; gap: .45rem; font-weight: 600; flex-wrap: wrap; }
+.rex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.rex-grid .form-label { display: flex; align-items: center; gap: .3rem; }
+.rex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rex-hint.is-warn { color: var(--dm-warning); }
+.rex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.rex-spacer { flex: 1; }
+.rex-dot { color: var(--dm-warning); margin-left: .2rem; }
+.rex-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.rex-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); }
+.rex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.rex-badge-preview { font-weight: 600; }
+.rex-bar-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.rex-search { flex: 1; min-width: 10rem; max-width: 20rem; }
+.rex-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.rex-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.rex-seg button + button { border-left: 1px solid var(--dm-border); }
+.rex-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.rex-matrix { display: flex; flex-direction: column; }
+.rex-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .35rem; border-bottom: 1px solid var(--dm-border); }
+.rex-row:focus-visible, .rex-row:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.rex-row.is-group { background: color-mix(in srgb, var(--dm-text) 5%, transparent); border-top: 1px solid var(--dm-border); margin-top: .5rem; }
+.rex-row.is-group .rex-main strong { text-transform: uppercase; letter-spacing: .04em; font-size: var(--dm-text-xs); }
+.rex-icon { display: inline-flex; width: 1.6rem; justify-content: center; color: var(--dm-text-muted); flex-shrink: 0; }
+.rex-main { min-width: 11rem; flex: 0 1 16rem; display: flex; flex-direction: column; }
+.rex-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.rex-acts { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
+.rex-act, .rex-full { border: 1px solid var(--dm-border); background: none; color: var(--dm-text-muted); border-radius: 999px; padding: .15rem .6rem;
+    font: inherit; font-size: var(--dm-text-xs); cursor: pointer; }
+.rex-act[aria-pressed="true"] { background: color-mix(in srgb, var(--dm-success) 16%, transparent); border-color: color-mix(in srgb, var(--dm-success) 45%, transparent); color: var(--dm-success); font-weight: 600; }
+.rex-full[data-state="all"] { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text); }
+.rex-full[data-state="some"] { border-style: dashed; color: var(--dm-text); }
+.rex-act:disabled, .rex-full:disabled, .is-locked .rex-act { cursor: not-allowed; opacity: .6; }
+.rex-state { font-size: var(--dm-text-xs); color: var(--dm-text-muted); min-width: 6rem; text-align: right; }
+.rex-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; }
+.rex-kebab:hover { color: var(--dm-primary); }
+.rex-summary { display: flex; flex-direction: column; }
+.rex-sum { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--dm-border); }
+.rex-sum:last-child { border-bottom: 0; }
+.rex-sum strong { font-weight: 600; }
+@media (max-width: 720px) { .rex-grid { grid-template-columns: 1fr; } .rex-main { flex-basis: 100%; } .rex-state { display: none; } }
+</style>

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

@@ -1,19 +1,155 @@
-<div class="view-header">
-    <h1><span data-icon="user"></span> <span id="editor-title">New User</span></h1>
-    <div class="view-header-actions">
-        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
-    </div>
-</div>
+<!-- User editor (#/users/new, #/users/edit/:id). Bound with M.applyBindings - see
+     admin/js/views/user-editor.js, which also draws the profile fields from the user-profiles schema and inserts
+     the role / project chip templates (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner ("Users › <name>") is the heading; Back and Save are banner actions. -->
+<div class="uex">
+    <p class="uex-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+    <p class="uex-note" data-bind-hidden="!loading.value">Loading…</p>
+
+    <p class="uex-alert" data-bind-hidden="loading.value || !lockedReason.value">
+        <span data-icon="lock" data-icon-size="15"></span>
+        <span data-bind-text="lockedReason.value"></span>
+    </p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="user-form-container"></div>
+    <div class="uex-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit" data-icon-size="14"></span>
+        <span data-bind-text="dirtyText">You have unsaved changes.</span>
+        <span class="uex-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="cannotSave.value">
+            <span data-icon="check" data-icon-size="13"></span> <span data-bind-text="saveText">Save</span></button>
     </div>
-</div>
 
-<div class="card mt-4" id="profile-card" style="display:none;">
-    <div class="card-header"><h2><span data-icon="user"></span> Profile</h2></div>
-    <div class="card-body">
-        <div id="profile-form-container"></div>
+    <div class="uex-card uex-who" data-bind-hidden="loading.value || loadError.value">
+        <span class="uex-avatar" aria-hidden="true" data-bind-text="avatar.value"></span>
+        <span class="uex-who-main">
+            <strong data-bind-text="shownName.value"></strong>
+            <small data-bind-text="shownEmail.value"></small>
+            <small class="uex-facts" data-bind-text="factsText.value"></small>
+        </span>
+        <span class="uex-chips">
+            <span class="uex-chip is-primary" data-bind-hidden="!isSelf.value">You</span>
+            <span class="uex-chip is-ok" data-bind-text="roleText.value"></span>
+            <span class="uex-chip is-warn" data-bind-hidden="isActive.value">Inactive</span>
+        </span>
     </div>
+
+    <fieldset class="uex-fields" data-bind-disabled="locked.value || saving.value" data-bind-hidden="loading.value || loadError.value">
+        <div class="uex-card">
+            <div class="uex-card-title">Account
+                <span data-help="The name shown in the admin and on anything they author. The email is what they sign in with, and where password resets go - no two accounts may share one."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-name">Full name <span class="text-danger">*</span></label>
+                    <input id="uex-name" type="text" class="form-input" maxlength="100" autocomplete="off" placeholder="Jane Smith" data-model="name.value">
+                    <small class="uex-err" data-bind-hidden="!err.value.name" data-bind-text="err.value.name"></small>
+                </div>
+                <div>
+                    <label class="form-label" for="uex-email">Email <span class="text-danger">*</span></label>
+                    <input id="uex-email" type="email" class="form-input" maxlength="200" autocomplete="off" placeholder="jane@example.com" data-model="email.value">
+                    <small class="uex-err" data-bind-hidden="!emailErr.value" data-bind-text="emailErr.value"></small>
+                </div>
+                <div>
+                    <label class="form-label" for="uex-pw"><span data-bind-text="pwLabel.value">Password</span>
+                        <span data-help-title="Password" data-help="At least 8 characters. When editing, leave it empty to keep the current password. It is never kept as a draft - if you leave the screen, it is typed again."></span></label>
+                    <input id="uex-pw" type="password" data-bind-type="showPw.value ? 'text' : 'password'" class="form-input" autocomplete="new-password"
+                           data-bind-placeholder="pwPlaceholder.value" data-model="password.value">
+                    <small class="uex-err" data-bind-hidden="!err.value.password" data-bind-text="err.value.password"></small>
+                    <label class="uex-show"><input type="checkbox" data-model="showPw.value"> Show what I type</label>
+                </div>
+                <div class="uex-setting">
+                    <label class="form-label" for="uex-active">Active account
+                        <span data-help="An inactive account cannot sign in. Nothing it made is removed - switch it back on at any time. You cannot switch off your own account."></span></label>
+                    <input id="uex-active" type="checkbox" class="form-switch" data-model="isActive.value" data-bind-disabled="isSelf.value"
+                           data-bind-title="isSelf.value ? 'You cannot switch off your own account' : ''">
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card">
+            <div class="uex-card-title">Roles
+                <span data-help-title="Roles" data-help="The primary role is the badge shown beside their name, and what seniority is compared on. Additional roles add their permissions on top - someone can be, say, a recruiter AND a content editor; the most senior role they hold decides who may manage them. You can only give roles below your own; a role they already hold can always be kept."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-role">Primary role <span class="text-danger">*</span></label>
+                    <select id="uex-role" class="form-input uex-role-select" data-model="role.value"></select>
+                    <small class="uex-err" data-bind-hidden="!err.value.role" data-bind-text="err.value.role"></small>
+                </div>
+                <div class="uex-wide">
+                    <span class="form-label">Additional roles</span>
+                    <div class="uex-pick uex-roles" data-each="extraChips.value key=name"></div>
+                    <small class="uex-hint" data-bind-hidden="extraChips.value.length">No other roles to add.</small>
+                    <small class="uex-err" data-bind-hidden="!err.value.additionalRoles" data-bind-text="err.value.additionalRoles"></small>
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card" data-bind-hidden="!hasProjects.value">
+            <div class="uex-card-title">Projects
+                <span data-help-title="Projects" data-help="Owned by: where this user is filed in the sidebar's Projects section - administrative only. Access: which projects' pages, collections and forms they can see and edit - leave it all unticked for no restriction. Core is always visible."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-owner">Owned by project</label>
+                    <select id="uex-owner" name="ownedByProject" class="form-input uex-owner-select" data-model="ownedByProject.value"></select>
+                </div>
+                <div class="uex-wide">
+                    <span class="form-label">Project access</span>
+                    <div class="uex-pick uex-projects" data-each="projectChips.value key=slug"></div>
+                    <small class="uex-hint" data-bind-text="accessHint.value"></small>
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card" data-bind-hidden="!hasProfile.value">
+            <div class="uex-card-title">Profile
+                <span data-help="Extra details about this user. Which ones are asked for is set in the User Profiles collection."></span></div>
+            <div class="uex-grid uex-profile"></div>
+        </div>
+    </fieldset>
 </div>
+
+<style>
+.uex { display: flex; flex-direction: column; gap: .75rem; max-width: 60rem; }
+.uex [hidden] { display: none !important; }
+.uex-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
+.uex-fields:disabled { opacity: .75; }
+.uex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.uex-note.is-bad { color: var(--dm-danger); }
+.uex-alert { margin: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.uex-dirty { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); position: sticky; top: 0; z-index: 2; }
+.uex-dirty .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.uex-spacer { flex: 1; }
+.uex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
+.uex-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.uex-who { flex-direction: row; align-items: center; gap: .9rem; flex-wrap: wrap; }
+.uex-avatar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
+    font-weight: 700; color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 14%, transparent); }
+.uex-who-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
+.uex-who-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.uex-facts { margin-top: .15rem; }
+.uex-chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
+.uex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.uex-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.uex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.uex-chip.is-primary { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+.uex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+.uex-wide { grid-column: 1 / -1; }
+.uex .form-label { display: flex; align-items: center; gap: .3rem; }
+.uex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.uex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.uex-show { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); cursor: pointer; margin-top: .3rem; }
+.uex-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; align-self: end; padding-bottom: .4rem; }
+.uex-setting .form-label { margin: 0; }
+.uex-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
+.uex-pick-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--dm-border); border-radius: 999px; padding: .2rem .65rem;
+    background: none; color: var(--dm-text); font: inherit; font-size: var(--dm-text-sm); cursor: pointer; }
+.uex-pick-chip:hover:not(:disabled) { border-color: var(--dm-primary); }
+.uex-pick-chip.is-on { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); border-color: var(--dm-primary); color: var(--dm-primary); }
+.uex-pick-chip:disabled { opacity: .5; cursor: not-allowed; }
+.uex-pick-chip small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.uex-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin-right: .8rem; }
+@media (max-width: 640px) { .uex-grid { grid-template-columns: 1fr; } }
+</style>