domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/search.html

@@ -1,241 +1,218 @@
-<div class="view-header">
-    <h1><span data-icon="search"></span> Search</h1>
-    <div>
-        <button id="save-settings-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save
-        </button>
-    </div>
-</div>
-
-<div id="ss-settings-tabs" class="tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Settings</button>
-        <button class="tab-item">Trigger &amp; Position</button>
-        <button class="tab-item">How it works</button>
-    </div>
-    <div class="tab-content">
-
-        <!-- Settings Tab -->
-        <div class="tab-panel active" id="tab-search-settings">
-            <div class="card mb-4" style="margin-top:1rem;">
-                <div class="card-body">
+<!-- System › Search. Bound with M.applyBindings - see admin/js/views/search.js, which also inserts the
+     preview row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner above is the heading; Save and View site are banner actions. -->
+<div class="ssx">
+    <p class="ssx-alert is-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit-3" data-icon-size="16"></span>
+        <span>Unsaved changes - Save (Ctrl+S) to apply them. Leave and they are kept as a draft for next time.</span>
+        <span class="ssx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
+    <p class="ssx-alert" data-bind-hidden="!clampText.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span data-bind-text="clampText.value"></span></p>
+
+    <div class="tabs ssx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Search</button>
+            <button type="button" class="tab-item">Trigger &amp; position</button>
+            <button type="button" class="tab-item">Try it</button>
+            <button type="button" class="tab-item">How it works</button>
+        </div>
 
-                    <div class="row mb-3">
-                        <div class="col">
-                            <label class="form-check-label">
-                                <input id="field-enabled" type="checkbox">
-                                Enable search on the public site
-                            </label>
-                            <span class="form-hint">When off, no search trigger, stylesheet or script is added to public pages.</span>
-                        </div>
-                    </div>
+        <!-- Search -->
+        <div class="tab-panel active">
+            <div class="ssx-card">
+                <div class="ssx-card-title">Live now
+                    <span data-help-title="Live now" data-help="What visitors get at the moment - the saved settings, not what you are editing. Searchable pages are the published, public ones; drafts and private pages never appear in results."></span></div>
+                <div class="ssx-chips" data-each="chips.value key=text"></div>
+            </div>
 
-                    <div class="row mb-3">
-                        <div class="col">
-                            <label class="form-label">Search placeholder text</label>
-                            <input id="field-placeholder" type="text" class="form-input" placeholder="Search pages...">
-                            <span class="form-hint">Displayed inside the search input when empty.</span>
-                        </div>
+            <div class="ssx-card">
+                <div class="ssx-card-title">Search on the site</div>
+                <div class="ssx-setting">
+                    <label class="form-label" for="ssx-enabled">Enable search on the public site
+                        <span data-help="Off removes search completely - no trigger, stylesheet or script is added to public pages. Context menus offering Site search do nothing while it is off."></span></label>
+                    <input id="ssx-enabled" type="checkbox" class="form-switch" data-model="enabled.value">
+                </div>
+                <div class="ssx-grid">
+                    <div class="ssx-wide">
+                        <label class="form-label" for="ssx-placeholder">Placeholder text
+                            <span data-help="Shown inside the search box while it is empty. Up to 120 characters."></span></label>
+                        <input id="ssx-placeholder" type="text" class="form-input" maxlength="120" placeholder="Search pages..." data-model="placeholder.value">
                     </div>
+                </div>
+                <div class="ssx-setting">
+                    <label class="form-label" for="ssx-shortcut">Keyboard shortcut (Ctrl+K / ⌘K)
+                        <span data-help="Lets visitors open search from anywhere on a page with Ctrl+K (⌘K on a Mac), as well as by clicking the trigger."></span></label>
+                    <input id="ssx-shortcut" type="checkbox" class="form-switch" data-model="keyboardShortcut.value">
+                </div>
+            </div>
 
-                    <div class="row mb-3">
-                        <div class="col">
-                            <label class="form-check-label">
-                                <input id="field-keyboard-shortcut" type="checkbox">
-                                Enable keyboard shortcut (Ctrl+K / ⌘K)
-                            </label>
-                            <span class="form-hint">Allows visitors to open the search overlay using a keyboard shortcut.</span>
-                        </div>
+            <div class="ssx-card">
+                <div class="ssx-card-title">Results</div>
+                <div class="ssx-grid ssx-grid-3">
+                    <div>
+                        <label class="form-label" for="ssx-max">Max results
+                            <span data-help="The most results one search shows (1-50). They are ranked: a title match counts most, then tags, the description, and the page's text."></span></label>
+                        <input id="ssx-max" type="number" class="form-input" min="1" max="50" data-model="maxResults.value">
                     </div>
-
-                    <div class="row mb-3">
-                        <div class="col-6">
-                            <label class="form-label">Max results</label>
-                            <input id="field-max-results" type="number" class="form-input" min="1" max="50"
-                                   placeholder="10">
-                            <span class="form-hint">Maximum number of results to return per search (1-50).</span>
-                        </div>
-                        <div class="col-6">
-                            <label class="form-label">Minimum query length</label>
-                            <input id="field-min-query-length" type="number" class="form-input" min="1" max="5"
-                                   placeholder="2">
-                            <span class="form-hint">Minimum characters required before searching (1-5).</span>
-                        </div>
+                    <div>
+                        <label class="form-label" for="ssx-min">Minimum query length
+                            <span data-help="How many characters a visitor types before searching starts (1-5). 1 searches on every keystroke; 2 or 3 avoids a flood of weak matches."></span></label>
+                        <input id="ssx-min" type="number" class="form-input" min="1" max="5" data-model="minQueryLength.value">
                     </div>
-
-                    <div class="row">
-                        <div class="col-6">
-                            <label class="form-label">Debounce delay (ms)</label>
-                            <input id="field-debounce-ms" type="number" class="form-input" min="100" max="1000"
-                                   placeholder="300">
-                            <span class="form-hint">Delay after typing stops before search fires (100-1000ms).</span>
-                        </div>
+                    <div>
+                        <label class="form-label" for="ssx-debounce">Debounce delay (ms)
+                            <span data-help="How long after the last keystroke the search runs (100-1000 ms). Shorter feels more instant; longer sends fewer searches while someone is still typing."></span></label>
+                        <input id="ssx-debounce" type="number" class="form-input" min="100" max="1000" step="50" data-model="debounceMs.value">
                     </div>
-
                 </div>
             </div>
         </div>
 
-        <!-- Trigger & Position Tab -->
-        <div class="tab-panel" id="tab-trigger-position">
-            <div class="card mb-4" style="margin-top:1rem;">
-                <div class="card-body">
+        <!-- Trigger & position -->
+        <div class="tab-panel">
+            <div class="ssx-card">
+                <div class="ssx-card-title">How visitors open it
+                    <span data-help-title="Trigger" data-help="Navbar adds a search icon to the site's navigation bar. Floating button puts a fixed button on every page, in the corner or side you choose - useful when the navigation is busy or hidden on small screens."></span></div>
+                <div class="ssx-seg" role="group" aria-label="Display mode">
+                    <button type="button" data-on-click="useNavbar" data-bind-class="displayMode.value === 'navbar' && 'is-on'">
+                        <span data-icon="menu" data-icon-size="14"></span> Navbar</button>
+                    <button type="button" data-on-click="useFloating" data-bind-class="displayMode.value === 'floating' && 'is-on'">
+                        <span data-icon="search" data-icon-size="14"></span> Floating button</button>
+                </div>
+            </div>
 
-                    <div class="row mb-3">
-                        <div class="col">
-                            <label class="form-label">Display Mode</label>
-                            <div id="ss-display-mode" style="display:flex;gap:8px;flex-wrap:wrap;">
-                                <button type="button" class="btn ss-mode-btn" data-mode="navbar">
-                                    <span data-icon="menu" data-icon-size="14" style="margin-right:5px;"></span>Navbar
-                                </button>
-                                <button type="button" class="btn ss-mode-btn" data-mode="floating">
-                                    <span data-icon="search" data-icon-size="14" style="margin-right:5px;"></span>Floating
-                                    Button
-                                </button>
-                            </div>
-                            <input type="hidden" id="field-display-mode" value="navbar">
-                            <span class="form-hint">Navbar adds the icon to the site navigation. Floating button shows a fixed button on every page.</span>
-                        </div>
+            <div class="ssx-card" data-bind-hidden="displayMode.value !== 'floating'">
+                <div class="ssx-card-title">The floating button</div>
+                <div class="ssx-setting">
+                    <label class="form-label" for="ssx-icononly">Icon only
+                        <span data-help="On: a round or square icon button. Off: a pill with a Search label beside the icon (size and corners then follow the label)."></span></label>
+                    <input id="ssx-icononly" type="checkbox" class="form-switch" data-model="iconOnly.value">
+                </div>
+                <div class="ssx-button-row" data-bind-hidden="!iconOnly.value">
+                    <div class="ssx-sliders">
+                        <label class="form-label" for="ssx-size">Size <span class="ssx-readout" data-bind-text="sizeText.value"></span>
+                            <span data-help="How big the button is (32-96 px). The glyph inside scales with it. 44 px and up is comfortable to tap on a phone."></span></label>
+                        <input id="ssx-size" type="range" min="32" max="96" step="2" data-model="iconSize.value">
+                        <label class="form-label" for="ssx-radius">Corners <span class="ssx-readout" data-bind-text="radiusText.value"></span>
+                            <span data-help="0 is a square; the top of the range is a circle, and it is always half the size - so it moves when the size does."></span></label>
+                        <input id="ssx-radius" type="range" min="0" step="1" data-model="iconRadius.value">
                     </div>
-
-                    <div id="ss-pos-section" style="display:none;">
-
-                        <div class="row mb-3">
-                            <div class="col">
-                                <label class="form-check-label">
-                                    <input id="field-icon-only" type="checkbox" checked>
-                                    Icon only
-                                </label>
-                                <span class="form-hint">When unchecked, shows a "Search" label alongside the icon.</span>
-                            </div>
-                        </div>
-
-                        <div class="row mb-3" id="ss-size-row">
-                            <div class="col">
-                                <label class="form-label" for="field-icon-size">Icon size</label>
-                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
-                                    <input id="field-icon-size" type="range" min="32" max="96" step="2" value="52"
-                                           style="flex:1 1 200px;max-width:260px;">
-                                    <span id="ss-size-value" class="text-sm font-mono" style="min-width:3.5rem;">52px</span>
-                                </div>
-                                <span class="form-hint">How big the floating button is, in pixels (32-96). The search glyph inside
-                                    scales with it. 44px and up is the comfortable range for tapping on a phone.</span>
-                            </div>
-                        </div>
-
-                        <div class="row mb-3" id="ss-radius-row">
-                            <div class="col">
-                                <label class="form-label" for="field-icon-radius">Icon corner radius</label>
-                                <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
-                                    <input id="field-icon-radius" type="range" min="0" max="26" step="1" value="26"
-                                           style="flex:1 1 200px;max-width:260px;">
-                                    <span id="ss-radius-value" class="text-sm font-mono" style="min-width:3.5rem;">26px</span>
-                                    <span id="ss-radius-preview" aria-hidden="true"
-                                          style="width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
-                                                 background:var(--dm-surface);color:var(--dm-text);
-                                                 border:1px solid var(--dm-border);border-radius:26px;
-                                                 box-shadow:0 4px 16px rgba(0,0,0,.14);flex:0 0 auto;transition:border-radius .12s;">
-                                        <span data-icon="search" style="width:20px;height:20px;"></span>
-                                    </span>
-                                </div>
-                                <span class="form-hint">0 is a square, <span id="ss-radius-max-hint">26</span> a circle - the top of the
-                                    range is always half the icon size, so it moves when you change the size above. The preview is the real
-                                    button at its real size. Applies to the floating button in icon mode only - the navbar icon has no
-                                    surface to round, and the labelled variant is a pill by definition.</span>
-                            </div>
+                    <span class="ssx-button-preview" aria-hidden="true" title="The button at its real size"
+                          data-bind-style-width="sizePx.value" data-bind-style-height="sizePx.value" data-bind-style-border-radius="radiusPx.value">
+                        <span class="ssx-glyph" data-bind-style-width="glyphPx.value" data-bind-style-height="glyphPx.value"><span data-icon="search"></span></span>
+                    </span>
+                </div>
+                <div>
+                    <div class="ssx-card-title ssx-sub">Where it sits
+                        <span data-help="Click a spot on the little screen. The offsets are the distance from the edges it sits against."></span></div>
+                    <div class="ssx-where">
+                        <div class="ssx-screen" role="group" aria-label="Position">
+                            <button type="button" class="ssx-spot" style="top:6px;left:6px" data-on-click="setPos('top-left')" data-bind-class="position.value === 'top-left' && 'is-on'" title="Top left"></button>
+                            <button type="button" class="ssx-spot" style="top:6px;right:6px" data-on-click="setPos('top-right')" data-bind-class="position.value === 'top-right' && 'is-on'" title="Top right"></button>
+                            <button type="button" class="ssx-spot" style="top:calc(50% - 9px);left:6px" data-on-click="setPos('left-center')" data-bind-class="position.value === 'left-center' && 'is-on'" title="Left side"></button>
+                            <button type="button" class="ssx-spot" style="top:calc(50% - 9px);right:6px" data-on-click="setPos('right-center')" data-bind-class="position.value === 'right-center' && 'is-on'" title="Right side"></button>
+                            <button type="button" class="ssx-spot" style="bottom:6px;left:6px" data-on-click="setPos('bottom-left')" data-bind-class="position.value === 'bottom-left' && 'is-on'" title="Bottom left"></button>
+                            <button type="button" class="ssx-spot" style="bottom:6px;right:6px" data-on-click="setPos('bottom-right')" data-bind-class="position.value === 'bottom-right' && 'is-on'" title="Bottom right"></button>
                         </div>
-
-                        <div class="row" style="align-items:flex-start;gap:0;">
-
-                            <div class="col-auto" style="margin-right:1.5rem;margin-bottom:1rem;">
-                                <label class="form-label" style="margin-bottom:.6rem;">Position</label>
-                                <div id="ss-pos-grid"
-                                     style="display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:10px;overflow:hidden;background:var(--border-color,rgba(255,255,255,.07));width:fit-content;">
-
-                                    <div class="ss-pos-btn" data-pos="top-left"
-                                         style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-right:1px solid var(--border-color,rgba(255,255,255,.08));border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
-                                        <span style="font-weight:600;">↖ Left</span>
-                                    </div>
-                                    <div class="ss-pos-btn" data-pos="top-right"
-                                         style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
-                                        <span style="font-weight:600;">Right ↗</span>
-                                    </div>
-
-                                    <div class="ss-pos-btn" data-pos="left-center"
-                                         style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-right:1px solid var(--border-color,rgba(255,255,255,.08));border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Side</span>
-                                        <span style="font-weight:600;">← Left</span>
-                                    </div>
-                                    <div class="ss-pos-btn" data-pos="right-center"
-                                         style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Side</span>
-                                        <span style="font-weight:600;">Right →</span>
-                                    </div>
-
-                                    <div class="ss-pos-btn" data-pos="bottom-left"
-                                         style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-right:1px solid var(--border-color,rgba(255,255,255,.08));gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-weight:600;">↙ Left</span>
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
-                                    </div>
-                                    <div class="ss-pos-btn" data-pos="bottom-right"
-                                         style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:84px;">
-                                        <span style="font-weight:600;">Right ↘</span>
-                                        <span style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
-                                    </div>
-
-                                </div>
-                                <input type="hidden" id="field-position" value="bottom-right">
-                            </div>
-
-                            <div class="col-sm-3">
-                                <label class="form-label">Edge offset</label>
-                                <div style="display:flex;flex-direction:column;gap:.55rem;">
-                                    <div style="display:flex;align-items:center;gap:.4rem;">
-                                        <span style="font-size:.75rem;color:var(--text-muted,#888);width:22px;">H</span>
-                                        <input id="field-offset-x" type="number" class="form-input" min="0" max="500"
-                                               placeholder="32" style="max-width:80px;">
-                                        <span class="text-muted" style="font-size:.8rem;">px</span>
-                                    </div>
-                                    <div style="display:flex;align-items:center;gap:.4rem;">
-                                        <span style="font-size:.75rem;color:var(--text-muted,#888);width:22px;">V</span>
-                                        <input id="field-offset-y" type="number" class="form-input" min="0" max="500"
-                                               placeholder="32" style="max-width:80px;">
-                                        <span class="text-muted" style="font-size:.8rem;">px</span>
-                                    </div>
-                                </div>
-                                <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.75rem;">Distance
-                                    from the screen edge.</p>
-                            </div>
-
+                        <div class="ssx-offsets">
+                            <strong data-bind-text="positionText.value"></strong>
+                            <label class="form-label" for="ssx-offx">From the side (px)</label>
+                            <input id="ssx-offx" type="number" class="form-input" min="0" max="500" data-model="offsetX.value">
+                            <label class="form-label" for="ssx-offy">From the top or bottom (px)</label>
+                            <input id="ssx-offy" type="number" class="form-input" min="0" max="500" data-model="offsetY.value">
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
 
-        <!-- How it works Tab -->
-        <div class="tab-panel" id="tab-how-it-works">
-            <div class="card mb-4" style="margin-top:1rem;">
-                <div class="card-body">
-                    <p class="text-muted mb-2">Search adds a search icon to the public navbar, or a floating button
-                        if you prefer. Visitors can click it or use the keyboard shortcut to open a full-screen overlay
-                        with live results.</p>
-                    <ul class="text-muted" style="padding-left:1.25rem;line-height:1.8;">
-                        <li>Results are weighted: title matches score highest, followed by tags, description, and page
-                            content.
-                        </li>
-                        <li>Draft pages and private pages are excluded from results.</li>
-                        <li>An authored context menu can offer "Site search" as an action, which opens the same overlay.</li>
-                        <li>Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate results, <kbd>↵</kbd> to open, <kbd>Esc</kbd> to
-                            close.
-                        </li>
-                    </ul>
-                </div>
+        <!-- Try it -->
+        <div class="tab-panel">
+            <div class="ssx-card">
+                <div class="ssx-card-title">Try a search
+                    <span data-help-title="Try it" data-help="Runs the site's own search as a visitor would - published, public pages only, ranked the same way - using the Max results you are editing, before you Save. Right-click a result (or ⋮) to open or edit the page."></span></div>
+                <input type="search" class="form-input ssx-q" placeholder="Search your pages…" aria-label="Try a search" data-model="query.value">
+                <p class="ssx-note" data-bind-hidden="!previewNote.value" data-bind-text="previewNote.value"></p>
+                <p class="ssx-note is-bad" data-bind-hidden="!previewError.value" data-bind-text="previewError.value"></p>
+                <p class="ssx-note" data-bind-hidden="!previewMeta.value" data-bind-text="previewMeta.value"></p>
+                <div class="ssx-list" data-each="results.value key=id"></div>
             </div>
         </div>
 
+        <!-- How it works -->
+        <div class="tab-panel">
+            <div class="ssx-card">
+                <div class="ssx-card-title">How search works</div>
+                <ul class="ssx-how">
+                    <li>Visitors click the trigger (or press the shortcut) and get a full-screen overlay with live results.</li>
+                    <li>Results are ranked: a title match scores highest, then tags, the description, and the page's text.</li>
+                    <li>Draft and private pages never appear in results.</li>
+                    <li>An authored context menu can offer "Site search" as an action; it opens the same overlay.</li>
+                    <li>In the overlay: <kbd>↑</kbd> <kbd>↓</kbd> move, <kbd>↵</kbd> opens, <kbd>Esc</kbd> closes.</li>
+                </ul>
+            </div>
+        </div>
     </div>
 </div>
+
+<style>
+.ssx { display: flex; flex-direction: column; gap: .75rem; }
+.ssx [hidden] { display: none !important; }
+.ssx-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.ssx-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.ssx-spacer { flex: 1; }
+.ssx-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; }
+.ssx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.ssx-sub { font-size: var(--dm-text-sm); }
+.ssx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
+.ssx-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
+.ssx-wide { grid-column: 1 / -1; }
+.ssx .form-label { display: flex; align-items: center; gap: .3rem; }
+.ssx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.ssx-setting .form-label { margin: 0; }
+.ssx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.ssx-note.is-bad { color: var(--dm-danger); }
+.ssx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
+.ssx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.ssx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.ssx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.ssx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; align-self: flex-start; }
+.ssx-seg button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; color: var(--dm-text); padding: .35rem .8rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.ssx-seg button + button { border-left: 1px solid var(--dm-border); }
+.ssx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.ssx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.ssx-button-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
+.ssx-sliders { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 240px; max-width: 320px; }
+.ssx-readout { font-family: var(--dm-font-mono, monospace); color: var(--dm-text-muted); font-weight: 400; }
+.ssx-button-preview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
+    background: var(--dm-surface); color: var(--dm-text); border: 1px solid var(--dm-border);
+    box-shadow: 0 4px 16px color-mix(in srgb, var(--dm-text) 14%, transparent); transition: border-radius .12s; }
+.ssx-glyph { display: inline-flex; }
+.ssx-glyph svg { width: 100%; height: 100%; }
+.ssx-where { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
+.ssx-screen { position: relative; width: 180px; height: 120px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-text) 4%, transparent); flex: 0 0 auto; }
+.ssx-spot { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 1px dashed var(--dm-border); background: var(--dm-surface); cursor: pointer; padding: 0; }
+.ssx-spot:hover { border-color: var(--dm-primary); }
+.ssx-spot.is-on { background: var(--dm-primary); border: 1px solid var(--dm-primary); }
+.ssx-offsets { display: flex; flex-direction: column; gap: .3rem; min-width: 12rem; }
+.ssx-offsets .form-input { max-width: 8rem; }
+.ssx-q { max-width: 32rem; }
+.ssx-list { display: flex; flex-direction: column; }
+.ssx-row { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.ssx-row:last-child { border-bottom: 0; }
+.ssx-row:hover, .ssx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.ssx-rank { min-width: 1.5rem; color: var(--dm-text-muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
+.ssx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
+.ssx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ssx-snippet { color: var(--dm-text); font-size: var(--dm-text-sm); opacity: .85; }
+.ssx-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; }
+.ssx-kebab:hover { color: var(--dm-primary); }
+.ssx-how { margin: 0; padding-left: 1.25rem; line-height: 1.8; color: var(--dm-text-muted); }
+@media (max-width: 720px) { .ssx-grid, .ssx-grid-3 { grid-template-columns: 1fr; } }
+</style>