@linxin666/dsh-client-ui-skin-center 0.4.2 → 0.4.4

package/lib/client.js

@@ -7,7 +7,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region \0dsh-css:src/client/skin-center.module.css.mjs
-		const css = "body[data-dsh-skin-center] .TJMolG_sectionList{margin:0;padding:0;list-style:none}body[data-dsh-skin-center] .TJMolG_pluginCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}body[data-dsh-skin-center] .TJMolG_pluginCard:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_cardHeaderStatic{align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}body[data-dsh-skin-center] .TJMolG_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_pluginName{color:var(--dsw-alias-label-primary);align-items:baseline;gap:8px;font-size:15px;font-weight:600;line-height:1.4;display:flex}body[data-dsh-skin-center] .TJMolG_cardDescription{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_cardBody{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:12px;margin:0 16px;padding:12px 0 8px;display:flex}body[data-dsh-skin-center] .TJMolG_head{flex-direction:column;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_titleBadge{color:var(--dsw-alias-label-secondary,#6b7280);font-size:11px;font-weight:500}body[data-dsh-skin-center] .TJMolG_intro{color:var(--dsw-alias-label-secondary);font-size:13px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_themeRow{align-items:center;gap:8px;margin-top:2px;display:flex}body[data-dsh-skin-center] .TJMolG_themeLabel{color:var(--dsw-alias-label-secondary,#6b7280);margin-right:2px;font-size:12px}body[data-dsh-skin-center] .TJMolG_themeButton{font:inherit;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;line-height:1.5;transition:background .12s,border-color .12s,color .12s}body[data-dsh-skin-center] .TJMolG_themeButton:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_themeButton:active{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_themeButton:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_themeButtonActive{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_list{flex-direction:column;gap:10px;display:flex}body[data-dsh-skin-center] .TJMolG_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;flex-direction:column;gap:6px;padding:12px;transition:border-color .16s;display:flex}body[data-dsh-skin-center] .TJMolG_card:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_cardHead{align-items:center;gap:10px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_swatch{width:14px;height:14px;box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);border-radius:50%;flex:none}body[data-dsh-skin-center] .TJMolG_cardName{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px;font-weight:600;overflow:hidden}body[data-dsh-skin-center] .TJMolG_cardTagline{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px;line-height:1.45}body[data-dsh-skin-center] .TJMolG_badge{letter-spacing:.02em;border-radius:999px;flex:none;min-width:0;margin-left:auto;padding:2px 8px;font-size:11px;font-weight:600}body[data-dsh-skin-center] .TJMolG_badgeActive{color:var(--dsw-alias-state-success-primary,#0f6b3a);background:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_badgeTrying{color:var(--dsw-alias-brand-primary,#1e63b8);background:var(--dsw-alias-button-primary-dimmed,#e2edfc)}body[data-dsh-skin-center] .TJMolG_actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_button{font:inherit;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;line-height:1.5;transition:background .12s,border-color .12s,color .12s}body[data-dsh-skin-center] .TJMolG_button:hover:not(:disabled){border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_button:active:not(:disabled){border-color:var(--dsw-alias-button-primary-hover,#1e63b8);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_buttonPrimary{border-color:var(--dsw-alias-button-info-fill);background:var(--dsw-alias-button-info-fill);color:var(--dsw-alias-bg-layer-3)}body[data-dsh-skin-center] .TJMolG_buttonPrimary:hover:not(:disabled),body[data-dsh-skin-center] .TJMolG_buttonPrimary:active:not(:disabled){opacity:.88}body[data-dsh-skin-center] .TJMolG_buttonDanger{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-state-danger-primary,#d93025);background:0 0}body[data-dsh-skin-center] .TJMolG_buttonDanger:hover:not(:disabled){border-color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-tertiary,#d9302514)}body[data-dsh-skin-center] .TJMolG_buttonDangerConfirm{border-color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-primary,#d93025);color:#fff}body[data-dsh-skin-center] .TJMolG_toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 2px;display:flex}body[data-dsh-skin-center] .TJMolG_verifySummary{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:6px 12px;font-size:12px;line-height:1.4}body[data-dsh-skin-center] .TJMolG_verifySummarySuccess{color:var(--dsw-alias-state-success-primary,#0f6b3a);border-color:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_verifySummaryWarning{color:var(--dsw-alias-state-warning-primary,#b06000);border-color:var(--dsw-alias-state-warning-tertiary,#feebd3)}body[data-dsh-skin-center] .TJMolG_badgeSuccess{color:var(--dsw-alias-state-success-primary,#0f6b3a);background:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_badgeWarning{color:var(--dsw-alias-state-warning-primary,#b06000);background:var(--dsw-alias-state-warning-tertiary,#feebd3)}body[data-dsh-skin-center] .TJMolG_badgeDanger{color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-tertiary,#d930251f)}body[data-dsh-skin-center] .TJMolG_integrityNote{color:var(--dsw-alias-state-warning-primary,#b06000);font-size:11px;line-height:1.4}body[data-dsh-skin-center] .TJMolG_buttonGhost{opacity:.5;background:0 0;border-color:#0000}body[data-dsh-skin-center] .TJMolG_button:disabled{opacity:.5;cursor:default}body[data-dsh-skin-center] .TJMolG_error{color:var(--dsw-alias-state-error-primary,#b42318);font-size:12px}body[data-dsh-skin-center] .TJMolG_enableRow{flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_enableLabel{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500}body[data-dsh-skin-center] .TJMolG_enableHint{min-width:100%;color:var(--dsw-alias-label-secondary,#6b7280);flex:1;margin:0;font-size:12px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_switch{border:1px solid var(--dsw-alias-border-l3,#cbd5e1);background:var(--dsw-alias-bg-layer-3,#e2e8f0);cursor:pointer;border-radius:999px;flex:none;align-items:center;width:40px;height:22px;padding:2px;transition:background .12s,border-color .12s;display:inline-flex;position:relative}body[data-dsh-skin-center] .TJMolG_switchOn{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-brand-primary,#2b7cd9)}body[data-dsh-skin-center] .TJMolG_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_switchThumb{background:var(--dsw-alias-label-primary-foreground,#fff);width:18px;height:18px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);border-radius:50%;transition:transform .12s;display:block;transform:translate(0)}body[data-dsh-skin-center] .TJMolG_switchOn .TJMolG_switchThumb{transform:translate(18px)}body[data-dsh-skin-center] .TJMolG_offNote{color:var(--dsw-alias-label-secondary,#6b7280);margin:0;font-size:12.5px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_backgroundRow{flex-direction:column;gap:6px;padding:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_backgroundHead{align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_backgroundLabel{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500}body[data-dsh-skin-center] .TJMolG_backgroundValue{font-variant-numeric:tabular-nums;color:var(--dsw-alias-brand-primary,#2b7cd9);flex:none;margin-left:auto;font-size:12px}body[data-dsh-skin-center] .TJMolG_backgroundRange{background:var(--dsw-alias-label-tertiary,#9aa4b5);background:color-mix(in srgb, var(--dsw-alias-label-tertiary,#9aa4b5) 45%, transparent);width:100%;height:4px;box-shadow:0 0 0 1px var(--dsw-alias-border-l3,#cbd5e1);-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:999px;margin:0}body[data-dsh-skin-center] .TJMolG_backgroundRange::-webkit-slider-runnable-track{background:var(--dsw-alias-bg-layer-3,#e2e8f0);border-radius:999px;height:4px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-moz-range-track{background:var(--dsw-alias-bg-layer-3,#e2e8f0);border-radius:999px;height:4px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-label-primary-foreground,#fff);background:var(--dsw-alias-brand-primary,#2b7cd9);width:14px;height:14px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);cursor:pointer;border-radius:50%;margin-top:-5px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-moz-range-thumb{border:2px solid var(--dsw-alias-label-primary-foreground,#fff);background:var(--dsw-alias-brand-primary,#2b7cd9);width:12px;height:12px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);cursor:pointer;border-radius:50%}body[data-dsh-skin-center] .TJMolG_backgroundRange:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_backgroundHint{color:var(--dsw-alias-label-secondary,#6b7280);font-size:12px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_backgroundHintMuted{color:var(--dsw-alias-label-tertiary,#9aa4b5);font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){body[data-dsh-skin-center] .TJMolG_pluginCard,body[data-dsh-skin-center] .TJMolG_card,body[data-dsh-skin-center] .TJMolG_themeButton,body[data-dsh-skin-center] .TJMolG_button,body[data-dsh-skin-center] .TJMolG_switch,body[data-dsh-skin-center] .TJMolG_switchThumb{transition:none}}body[data-dsh-skin-center] .TJMolG_wallpaperSection{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:10px;padding-top:10px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperStatus{color:var(--dsw-alias-label-secondary,#6b7280);align-items:center;gap:8px;font-size:12px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperStatusError{color:var(--dsw-alias-state-danger,#c53030)}body[data-dsh-skin-center] .TJMolG_wallpaperControls{flex-direction:column;gap:10px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperGrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}body[data-dsh-skin-center] .TJMolG_wallpaperCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;flex-direction:column;gap:6px;padding:8px;transition:border-color .16s;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperCard:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_wallpaperThumbWrap{aspect-ratio:16/9;background:var(--dsw-alias-bg-layer-1,#f1f5f9);border-radius:6px;position:relative;overflow:hidden}body[data-dsh-skin-center] .TJMolG_wallpaperThumb{object-fit:cover;width:100%;height:100%;display:block}body[data-dsh-skin-center] .TJMolG_wallpaperThumbEmpty{width:100%;height:100%}body[data-dsh-skin-center] .TJMolG_wallpaperType{color:var(--dsw-alias-label-primary,#172a45);background:var(--dsw-alias-bg-layer-2,#ffffffd9);border-radius:4px;padding:3px 6px;font-size:10.5px;line-height:1;position:absolute;top:6px;left:6px}body[data-dsh-skin-center] .TJMolG_wallpaperThumbWrap .TJMolG_badge{position:absolute;top:6px;right:6px}body[data-dsh-skin-center] .TJMolG_wallpaperName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden}body[data-dsh-skin-center] .TJMolG_wallpaperActions{flex-wrap:wrap;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeCard{overflow:hidden}body[data-dsh-skin-center] .TJMolG_customThemeEditor{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex-direction:column;gap:14px;margin:2px -2px -2px;padding:14px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeScheme{flex-wrap:wrap;align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeFields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}body[data-dsh-skin-center] .TJMolG_customThemeField,body[data-dsh-skin-center] .TJMolG_customThemeContrast{flex-direction:column;gap:7px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeFieldLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500}body[data-dsh-skin-center] .TJMolG_customThemeInputRow{align-items:center;gap:7px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeColor{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);cursor:pointer;border-radius:7px;flex:none;width:34px;height:30px;padding:2px}body[data-dsh-skin-center] .TJMolG_customThemeHex{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-input-major);width:100%;min-width:0;height:30px;color:var(--dsw-alias-label-primary);font:inherit;border-radius:7px;outline:none;padding:0 9px;font-size:12px}body[data-dsh-skin-center] .TJMolG_customThemeHex:focus,body[data-dsh-skin-center] .TJMolG_customThemeColor:focus-visible{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px var(--dsw-alias-button-primary-dimmed)}body[data-dsh-skin-center] .TJMolG_customThemeFooter{justify-content:space-between;align-items:center;gap:12px;padding-top:2px;display:flex}@media (width<=680px){body[data-dsh-skin-center] .TJMolG_customThemeFields{grid-template-columns:1fr}body[data-dsh-skin-center] .TJMolG_customThemeFooter{flex-direction:column;align-items:flex-start}}body[data-dsh-skin-center] .TJMolG_wallpaperToolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_ratingFilterGroup{align-items:center;gap:4px;display:flex}body[data-dsh-skin-center] .TJMolG_ratingFilterButton{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);cursor:pointer;border-radius:6px;padding:4px 10px;font-size:12px;transition:all .15s}body[data-dsh-skin-center] .TJMolG_ratingFilterButton:hover{background:var(--dsw-alias-interactive-bg-hover,#ffffff14);color:var(--dsw-alias-label-primary)}body[data-dsh-skin-center] .TJMolG_ratingFilterActive{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff;border-color:#0000}body[data-dsh-skin-center] .TJMolG_ratingFilterActive:hover{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff}body[data-dsh-skin-center] .TJMolG_wallpaperRating{text-transform:uppercase;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:600;line-height:1;position:absolute;bottom:6px;right:6px}body[data-dsh-skin-center] .TJMolG_ratingG{color:var(--dsw-alias-label-secondary,#94a3b8);background:var(--dsw-alias-bg-layer-2,#0009)}body[data-dsh-skin-center] .TJMolG_ratingPg13{color:#fbbf24;background:#000000b3;border:1px solid #fbbf2466}body[data-dsh-skin-center] .TJMolG_ratingR18{color:#fff;background:#dc2626;font-weight:700;box-shadow:0 1px 4px #dc262666}body[data-dsh-skin-center] .TJMolG_wallpaperPagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:16px 0 8px;display:flex}body[data-dsh-skin-center] .TJMolG_pageButton{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);cursor:pointer;text-align:center;border-radius:6px;min-width:30px;padding:4px 10px;font-size:12px;transition:all .15s}body[data-dsh-skin-center] .TJMolG_pageButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,#ffffff14);color:var(--dsw-alias-label-primary)}body[data-dsh-skin-center] .TJMolG_pageButton:disabled{opacity:.4;cursor:not-allowed}body[data-dsh-skin-center] .TJMolG_pageButtonActive{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff;border-color:#0000}body[data-dsh-skin-center] .TJMolG_pageEllipsis{color:var(--dsw-alias-label-dimmed,#888);user-select:none;padding:0 4px;font-size:12px}body[data-dsh-skin-center] .TJMolG_pageJumpForm{align-items:center;gap:4px;margin-left:8px;display:inline-flex}body[data-dsh-skin-center] .TJMolG_pageJumpInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-input-major,#0003);width:44px;height:26px;color:var(--dsw-alias-label-primary);text-align:center;border-radius:6px;outline:none;padding:0 4px;font-size:12px}body[data-dsh-skin-center] .TJMolG_pageJumpInput:focus{border-color:var(--dsw-alias-brand-primary)}body[data-dsh-skin-center] .TJMolG_pageTotalInfo{color:var(--dsw-alias-label-dimmed,#888);margin-left:6px;font-size:12px}";
+		const css = "body[data-dsh-skin-center] .TJMolG_sectionList{margin:0;padding:0;list-style:none}body[data-dsh-skin-center] .TJMolG_pluginCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}body[data-dsh-skin-center] .TJMolG_pluginCard:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_cardHeaderStatic{align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}body[data-dsh-skin-center] .TJMolG_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_pluginName{color:var(--dsw-alias-label-primary);align-items:baseline;gap:8px;font-size:15px;font-weight:600;line-height:1.4;display:flex}body[data-dsh-skin-center] .TJMolG_cardDescription{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_cardBody{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:12px;margin:0 16px;padding:12px 0 8px;display:flex}body[data-dsh-skin-center] .TJMolG_head{flex-direction:column;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_titleBadge{color:var(--dsw-alias-label-secondary,#6b7280);font-size:11px;font-weight:500}body[data-dsh-skin-center] .TJMolG_intro{color:var(--dsw-alias-label-secondary);font-size:13px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_themeRow{align-items:center;gap:8px;margin-top:2px;display:flex}body[data-dsh-skin-center] .TJMolG_themeLabel{color:var(--dsw-alias-label-secondary,#6b7280);margin-right:2px;font-size:12px}body[data-dsh-skin-center] .TJMolG_themeButton{font:inherit;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;line-height:1.5;transition:background .12s,border-color .12s,color .12s}body[data-dsh-skin-center] .TJMolG_themeButton:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_themeButton:active{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_themeButton:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_themeButtonActive{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_list{flex-direction:column;gap:10px;display:flex}body[data-dsh-skin-center] .TJMolG_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;flex-direction:column;gap:6px;padding:12px;transition:border-color .16s;display:flex}body[data-dsh-skin-center] .TJMolG_card:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_cardHead{align-items:center;gap:10px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_swatch{width:14px;height:14px;box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);border-radius:50%;flex:none}body[data-dsh-skin-center] .TJMolG_cardName{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px;font-weight:600;overflow:hidden}body[data-dsh-skin-center] .TJMolG_cardTagline{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px;line-height:1.45}body[data-dsh-skin-center] .TJMolG_badge{letter-spacing:.02em;border-radius:999px;flex:none;min-width:0;margin-left:auto;padding:2px 8px;font-size:11px;font-weight:600}body[data-dsh-skin-center] .TJMolG_badgeActive{color:var(--dsw-alias-state-success-primary,#0f6b3a);background:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_badgeTrying{color:var(--dsw-alias-brand-primary,#1e63b8);background:var(--dsw-alias-button-primary-dimmed,#e2edfc)}body[data-dsh-skin-center] .TJMolG_actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_button{font:inherit;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;line-height:1.5;transition:background .12s,border-color .12s,color .12s}body[data-dsh-skin-center] .TJMolG_button:hover:not(:disabled){border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_button:active:not(:disabled){border-color:var(--dsw-alias-button-primary-hover,#1e63b8);background:var(--dsw-alias-button-primary-dimmed,#e8f1fc);color:var(--dsw-alias-brand-primary,#1e63b8)}body[data-dsh-skin-center] .TJMolG_button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_buttonPrimary{border-color:var(--dsw-alias-button-info-fill);background:var(--dsw-alias-button-info-fill);color:var(--dsw-alias-bg-layer-3)}body[data-dsh-skin-center] .TJMolG_buttonPrimary:hover:not(:disabled),body[data-dsh-skin-center] .TJMolG_buttonPrimary:active:not(:disabled){opacity:.88}body[data-dsh-skin-center] .TJMolG_buttonDanger{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-state-danger-primary,#d93025);background:0 0}body[data-dsh-skin-center] .TJMolG_buttonDanger:hover:not(:disabled){border-color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-tertiary,#d9302514)}body[data-dsh-skin-center] .TJMolG_buttonDangerConfirm{border-color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-primary,#d93025);color:#fff}body[data-dsh-skin-center] .TJMolG_toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 2px;display:flex}body[data-dsh-skin-center] .TJMolG_verifySummary{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:6px 12px;font-size:12px;line-height:1.4}body[data-dsh-skin-center] .TJMolG_verifySummarySuccess{color:var(--dsw-alias-state-success-primary,#0f6b3a);border-color:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_verifySummaryWarning{color:var(--dsw-alias-state-warning-primary,#b06000);border-color:var(--dsw-alias-state-warning-tertiary,#feebd3)}body[data-dsh-skin-center] .TJMolG_badgeSuccess{color:var(--dsw-alias-state-success-primary,#0f6b3a);background:var(--dsw-alias-state-success-tertiary,#dcf3e5)}body[data-dsh-skin-center] .TJMolG_badgeWarning{color:var(--dsw-alias-state-warning-primary,#b06000);background:var(--dsw-alias-state-warning-tertiary,#feebd3)}body[data-dsh-skin-center] .TJMolG_badgeDanger{color:var(--dsw-alias-state-danger-primary,#d93025);background:var(--dsw-alias-state-danger-tertiary,#d930251f)}body[data-dsh-skin-center] .TJMolG_integrityNote{color:var(--dsw-alias-state-warning-primary,#b06000);font-size:11px;line-height:1.4}body[data-dsh-skin-center] .TJMolG_buttonGhost{opacity:.5;background:0 0;border-color:#0000}body[data-dsh-skin-center] .TJMolG_button:disabled{opacity:.5;cursor:default}body[data-dsh-skin-center] .TJMolG_error{color:var(--dsw-alias-state-error-primary,#b42318);font-size:12px}body[data-dsh-skin-center] .TJMolG_enableRow{flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_enableLabel{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500}body[data-dsh-skin-center] .TJMolG_enableHint{min-width:100%;color:var(--dsw-alias-label-secondary,#6b7280);flex:1;margin:0;font-size:12px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_switch{border:1px solid var(--dsw-alias-border-l3,#cbd5e1);background:var(--dsw-alias-bg-layer-3,#e2e8f0);cursor:pointer;border-radius:999px;flex:none;align-items:center;width:40px;height:22px;padding:2px;transition:background .12s,border-color .12s;display:inline-flex;position:relative}body[data-dsh-skin-center] .TJMolG_switchOn{border-color:var(--dsw-alias-brand-primary,#2b7cd9);background:var(--dsw-alias-brand-primary,#2b7cd9)}body[data-dsh-skin-center] .TJMolG_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_switchThumb{background:var(--dsw-alias-label-primary-foreground,#fff);width:18px;height:18px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);border-radius:50%;transition:transform .12s;display:block;transform:translate(0)}body[data-dsh-skin-center] .TJMolG_switchOn .TJMolG_switchThumb{transform:translate(18px)}body[data-dsh-skin-center] .TJMolG_offNote{color:var(--dsw-alias-label-secondary,#6b7280);margin:0;font-size:12.5px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_backgroundRow{flex-direction:column;gap:6px;padding:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_backgroundHead{align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_backgroundLabel{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500}body[data-dsh-skin-center] .TJMolG_backgroundValue{font-variant-numeric:tabular-nums;color:var(--dsw-alias-brand-primary,#2b7cd9);flex:none;margin-left:auto;font-size:12px}body[data-dsh-skin-center] .TJMolG_backgroundRange{background:var(--dsw-alias-label-tertiary,#9aa4b5);background:color-mix(in srgb, var(--dsw-alias-label-tertiary,#9aa4b5) 45%, transparent);width:100%;height:4px;box-shadow:0 0 0 1px var(--dsw-alias-border-l3,#cbd5e1);-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:999px;margin:0}body[data-dsh-skin-center] .TJMolG_backgroundRange::-webkit-slider-runnable-track{background:var(--dsw-alias-bg-layer-3,#e2e8f0);border-radius:999px;height:4px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-moz-range-track{background:var(--dsw-alias-bg-layer-3,#e2e8f0);border-radius:999px;height:4px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-label-primary-foreground,#fff);background:var(--dsw-alias-brand-primary,#2b7cd9);width:14px;height:14px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);cursor:pointer;border-radius:50%;margin-top:-5px}body[data-dsh-skin-center] .TJMolG_backgroundRange::-moz-range-thumb{border:2px solid var(--dsw-alias-label-primary-foreground,#fff);background:var(--dsw-alias-brand-primary,#2b7cd9);width:12px;height:12px;box-shadow:0 0 0 1px var(--dsw-alias-border-l4,#0f172a1f);cursor:pointer;border-radius:50%}body[data-dsh-skin-center] .TJMolG_backgroundRange:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2b7cd9);outline-offset:2px}body[data-dsh-skin-center] .TJMolG_backgroundHint{color:var(--dsw-alias-label-secondary,#6b7280);font-size:12px;line-height:1.5}body[data-dsh-skin-center] .TJMolG_backgroundHintMuted{color:var(--dsw-alias-label-tertiary,#9aa4b5);font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){body[data-dsh-skin-center] .TJMolG_pluginCard,body[data-dsh-skin-center] .TJMolG_card,body[data-dsh-skin-center] .TJMolG_themeButton,body[data-dsh-skin-center] .TJMolG_button,body[data-dsh-skin-center] .TJMolG_switch,body[data-dsh-skin-center] .TJMolG_switchThumb{transition:none}}body[data-dsh-skin-center] .TJMolG_wallpaperSection{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:10px;padding-top:10px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperStatus{color:var(--dsw-alias-label-secondary,#6b7280);align-items:center;gap:8px;font-size:12px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperStatusError{color:var(--dsw-alias-state-danger,#c53030)}body[data-dsh-skin-center] .TJMolG_wallpaperControls{flex-direction:column;gap:10px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperGrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}body[data-dsh-skin-center] .TJMolG_wallpaperCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;flex-direction:column;gap:6px;padding:8px;transition:border-color .16s;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperCard:hover{border-color:var(--dsw-alias-label-dimmed)}body[data-dsh-skin-center] .TJMolG_wallpaperThumbWrap{aspect-ratio:16/9;background:var(--dsw-alias-bg-layer-1,#f1f5f9);border-radius:6px;position:relative;overflow:hidden}body[data-dsh-skin-center] .TJMolG_wallpaperThumb{object-fit:cover;width:100%;height:100%;display:block}body[data-dsh-skin-center] .TJMolG_wallpaperThumbEmpty{width:100%;height:100%}body[data-dsh-skin-center] .TJMolG_wallpaperType{color:var(--dsw-alias-label-primary,#172a45);background:var(--dsw-alias-bg-layer-2,#ffffffd9);border-radius:4px;padding:3px 6px;font-size:10.5px;line-height:1;position:absolute;top:6px;left:6px}body[data-dsh-skin-center] .TJMolG_wallpaperThumbWrap .TJMolG_badge{position:absolute;top:6px;right:6px}body[data-dsh-skin-center] .TJMolG_wallpaperName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden}body[data-dsh-skin-center] .TJMolG_wallpaperActions{flex-wrap:wrap;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeCard{overflow:hidden}body[data-dsh-skin-center] .TJMolG_customThemeEditor{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex-direction:column;gap:14px;margin:2px -2px -2px;padding:14px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeScheme{flex-wrap:wrap;align-items:center;gap:8px;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeFields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}body[data-dsh-skin-center] .TJMolG_customThemeField,body[data-dsh-skin-center] .TJMolG_customThemeContrast{flex-direction:column;gap:7px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeFieldLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500}body[data-dsh-skin-center] .TJMolG_customThemeInputRow{align-items:center;gap:7px;min-width:0;display:flex}body[data-dsh-skin-center] .TJMolG_customThemeColor{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);cursor:pointer;border-radius:7px;flex:none;width:34px;height:30px;padding:2px}body[data-dsh-skin-center] .TJMolG_customThemeHex{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-input-major);width:100%;min-width:0;height:30px;color:var(--dsw-alias-label-primary);font:inherit;border-radius:7px;outline:none;padding:0 9px;font-size:12px}body[data-dsh-skin-center] .TJMolG_customThemeHex:focus,body[data-dsh-skin-center] .TJMolG_customThemeColor:focus-visible{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px var(--dsw-alias-button-primary-dimmed)}body[data-dsh-skin-center] .TJMolG_customThemeFooter{justify-content:space-between;align-items:center;gap:12px;padding-top:2px;display:flex}@media (width<=680px){body[data-dsh-skin-center] .TJMolG_customThemeFields{grid-template-columns:1fr}body[data-dsh-skin-center] .TJMolG_customThemeFooter{flex-direction:column;align-items:flex-start}}body[data-dsh-skin-center] .TJMolG_wallpaperToolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;display:flex}body[data-dsh-skin-center] .TJMolG_ratingFilterGroup{align-items:center;gap:4px;display:flex}body[data-dsh-skin-center] .TJMolG_ratingFilterButton{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);cursor:pointer;border-radius:6px;padding:4px 10px;font-size:12px;transition:all .15s}body[data-dsh-skin-center] .TJMolG_ratingFilterButton:hover{background:var(--dsw-alias-interactive-bg-hover,#ffffff14);color:var(--dsw-alias-label-primary)}body[data-dsh-skin-center] .TJMolG_ratingFilterActive{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff;border-color:#0000}body[data-dsh-skin-center] .TJMolG_ratingFilterActive:hover{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff}body[data-dsh-skin-center] .TJMolG_wallpaperRating{text-transform:uppercase;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:600;line-height:1;position:absolute;bottom:6px;right:6px}body[data-dsh-skin-center] .TJMolG_ratingG{color:var(--dsw-alias-label-secondary,#94a3b8);background:var(--dsw-alias-bg-layer-2,#0009)}body[data-dsh-skin-center] .TJMolG_ratingPg13{color:#fbbf24;background:#000000b3;border:1px solid #fbbf2466}body[data-dsh-skin-center] .TJMolG_ratingR18{color:#fff;background:#dc2626;font-weight:700;box-shadow:0 1px 4px #dc262666}body[data-dsh-skin-center] .TJMolG_wallpaperPagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:16px 0 8px;display:flex}body[data-dsh-skin-center] .TJMolG_pageButton{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);cursor:pointer;text-align:center;border-radius:6px;min-width:30px;padding:4px 10px;font-size:12px;transition:all .15s}body[data-dsh-skin-center] .TJMolG_pageButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,#ffffff14);color:var(--dsw-alias-label-primary)}body[data-dsh-skin-center] .TJMolG_pageButton:disabled{opacity:.4;cursor:not-allowed}body[data-dsh-skin-center] .TJMolG_pageButtonActive{background:var(--dsw-alias-brand-primary,#2563eb);color:#fff;border-color:#0000}body[data-dsh-skin-center] .TJMolG_pageEllipsis{color:var(--dsw-alias-label-dimmed,#888);user-select:none;padding:0 4px;font-size:12px}body[data-dsh-skin-center] .TJMolG_pageJumpForm{align-items:center;gap:4px;margin-left:8px;display:inline-flex}body[data-dsh-skin-center] .TJMolG_pageJumpInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-input-major,#0003);width:44px;height:26px;color:var(--dsw-alias-label-primary);text-align:center;border-radius:6px;outline:none;padding:0 4px;font-size:12px}body[data-dsh-skin-center] .TJMolG_pageJumpInput:focus{border-color:var(--dsw-alias-brand-primary)}body[data-dsh-skin-center] .TJMolG_pageTotalInfo{color:var(--dsw-alias-label-dimmed,#888);margin-left:6px;font-size:12px}body[data-dsh-skin-center] .TJMolG_wallpaperDirs{flex-direction:column;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperDir{background:var(--dsw-alias-bg-layer-2,#7f7f7f14);border-radius:6px;align-items:center;gap:6px;padding:4px 6px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperDirPath{min-width:0;color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;overflow:hidden}body[data-dsh-skin-center] .TJMolG_wallpaperDirRemove{width:20px;height:20px;color:var(--dsw-alias-label-secondary,#6b7280);cursor:pointer;background:0 0;border:0;border-radius:4px;flex:none;font-size:13px;line-height:1}body[data-dsh-skin-center] .TJMolG_wallpaperDirRemove:hover{color:var(--dsw-alias-state-danger,#c53030)}body[data-dsh-skin-center] .TJMolG_wallpaperDirAdd{align-items:center;gap:6px;display:flex}body[data-dsh-skin-center] .TJMolG_wallpaperDirInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-input-major,#0003);min-width:0;height:28px;color:var(--dsw-alias-label-primary);border-radius:6px;outline:none;flex:1;padding:0 8px;font-size:12px}body[data-dsh-skin-center] .TJMolG_wallpaperDirInput:focus{border-color:var(--dsw-alias-brand-primary)}body[data-dsh-skin-center] .TJMolG_dirBrowserOverlay{z-index:60;background:#0000006b;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}body[data-dsh-skin-center] .TJMolG_dirBrowser{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1,#1c1c1e);width:min(520px,100%);max-height:min(72vh,560px);color:var(--dsw-alias-label-primary);border-radius:12px;outline:none;flex-direction:column;gap:10px;padding:14px;display:flex;box-shadow:0 18px 48px #00000047}body[data-dsh-skin-center] .TJMolG_dirBrowserTitle{font-size:13px;font-weight:600}body[data-dsh-skin-center] .TJMolG_dirBrowserCrumbs{color:var(--dsw-alias-label-secondary,#6b7280);flex-wrap:wrap;align-items:center;gap:2px;font-size:12px;display:flex}body[data-dsh-skin-center] .TJMolG_dirBrowserCrumb{align-items:center;gap:2px;max-width:180px;display:inline-flex}body[data-dsh-skin-center] .TJMolG_dirBrowserCrumbSep{color:var(--dsw-alias-label-dimmed,#888)}body[data-dsh-skin-center] .TJMolG_dirBrowserCrumbButton{max-width:100%;color:inherit;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;border-radius:4px;padding:2px 4px;font-size:12px;overflow:hidden}body[data-dsh-skin-center] .TJMolG_dirBrowserCrumbButton:hover{background:var(--dsw-alias-bg-layer-2,#7f7f7f1f);color:var(--dsw-alias-label-primary)}body[data-dsh-skin-center] .TJMolG_dirBrowserList{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;flex-direction:column;flex:1;gap:2px;min-height:140px;padding:4px;display:flex;overflow:auto}body[data-dsh-skin-center] .TJMolG_dirBrowserEntry{color:var(--dsw-alias-label-primary);text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;border-radius:6px;padding:7px 8px;font-size:12.5px;overflow:hidden}body[data-dsh-skin-center] .TJMolG_dirBrowserEntry:hover{background:var(--dsw-alias-bg-layer-2,#7f7f7f1f)}body[data-dsh-skin-center] .TJMolG_dirBrowserNote{color:var(--dsw-alias-label-secondary,#6b7280);padding:6px 8px;font-size:12px}body[data-dsh-skin-center] .TJMolG_dirBrowserError{color:var(--dsw-alias-state-danger,#c53030);word-break:break-all;padding:6px 8px;font-size:12px}body[data-dsh-skin-center] .TJMolG_dirBrowserHidden{color:var(--dsw-alias-label-secondary,#6b7280);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}body[data-dsh-skin-center] .TJMolG_dirBrowserActions{justify-content:flex-end;gap:8px;display:flex}";
 		const tagId = "@linxin666/dsh-client-ui-skin-center/src/client/skin-center.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -54,6 +54,19 @@ window.__ModuleLoader__.load({
 			"customThemeHex": "TJMolG_customThemeHex",
 			"customThemeInputRow": "TJMolG_customThemeInputRow",
 			"customThemeScheme": "TJMolG_customThemeScheme",
+			"dirBrowser": "TJMolG_dirBrowser",
+			"dirBrowserActions": "TJMolG_dirBrowserActions",
+			"dirBrowserCrumb": "TJMolG_dirBrowserCrumb",
+			"dirBrowserCrumbButton": "TJMolG_dirBrowserCrumbButton",
+			"dirBrowserCrumbSep": "TJMolG_dirBrowserCrumbSep",
+			"dirBrowserCrumbs": "TJMolG_dirBrowserCrumbs",
+			"dirBrowserEntry": "TJMolG_dirBrowserEntry",
+			"dirBrowserError": "TJMolG_dirBrowserError",
+			"dirBrowserHidden": "TJMolG_dirBrowserHidden",
+			"dirBrowserList": "TJMolG_dirBrowserList",
+			"dirBrowserNote": "TJMolG_dirBrowserNote",
+			"dirBrowserOverlay": "TJMolG_dirBrowserOverlay",
+			"dirBrowserTitle": "TJMolG_dirBrowserTitle",
 			"enableHint": "TJMolG_enableHint",
 			"enableLabel": "TJMolG_enableLabel",
 			"enableRow": "TJMolG_enableRow",
@@ -95,6 +108,12 @@ window.__ModuleLoader__.load({
 			"wallpaperActions": "TJMolG_wallpaperActions",
 			"wallpaperCard": "TJMolG_wallpaperCard",
 			"wallpaperControls": "TJMolG_wallpaperControls",
+			"wallpaperDir": "TJMolG_wallpaperDir",
+			"wallpaperDirAdd": "TJMolG_wallpaperDirAdd",
+			"wallpaperDirInput": "TJMolG_wallpaperDirInput",
+			"wallpaperDirPath": "TJMolG_wallpaperDirPath",
+			"wallpaperDirRemove": "TJMolG_wallpaperDirRemove",
+			"wallpaperDirs": "TJMolG_wallpaperDirs",
 			"wallpaperGrid": "TJMolG_wallpaperGrid",
 			"wallpaperName": "TJMolG_wallpaperName",
 			"wallpaperPagination": "TJMolG_wallpaperPagination",
@@ -385,6 +404,31 @@ window.__ModuleLoader__.load({
 		const BACKDROP_ACTIVE_ATTR = "data-dsh-backdrop-active";
 		/** The shared composer-seat neutralizer style's own attribute. */
 		const SCENE_NEUTRALIZER_ATTR = "data-dsh-scene-neutralizer";
+		/**
+		* Attribute of the composer frost follower: a body-level, fixed, empty element
+		* sized to the input card's border box while a scene is active.
+		*
+		* It exists because the frost must NOT be painted on the card. A non-none
+		* backdrop-filter (like transform, filter, contain or perspective) makes an
+		* element the CONTAINING BLOCK for its fixed-position descendants, and the
+		* official shell renders its tooltips inside the composer card: the composer
+		* send arrow's bubble is position: fixed, so with the frost on the card it
+		* resolved its viewport coordinates against the card, landed far outside it
+		* but still inside the conversation scrollport, added its own height to
+		* scrollHeight, and every hover clamped the scroll to the new bottom — the
+		* whole conversation jumped by hundreds of pixels and snapped back on the
+		* next frame (issue #1724). Documented throughout the catalog skins as the
+		* reason a card ancestor never carries a filter.
+		*
+		* A body-level sibling is not an ancestor of the card, so it may carry the
+		* blur; because nested backdrop-filters do not compose, the card itself must
+		* stay filter-free for the follower's blur to read through its translucent
+		* fill. The element is empty and pointer-events:none, and it is a sibling of
+		* the app root, never inside the scrollport.
+		*/
+		const COMPOSER_FROST_ATTR = "data-dsh-composer-frost";
+		/** Stacking rung of the follower: above the skin art layers, below the shell. */
+		const COMPOSER_FROST_Z_INDEX = "-1";
 		/** Conversation-content marker: set while the active conversation has rows. */
 		const CONVERSATION_CONTENT_ATTR = "data-dsh-conversation-content";
 		/**
@@ -435,6 +479,7 @@ window.__ModuleLoader__.load({
 				ensureSceneNeutralizer(doc);
 				startContentObserver(doc);
 			} else stopContentObserver(doc);
+			syncComposerFrost(doc);
 		}
 		/**
 		* Track whether the active conversation scrollport has message rows for the
@@ -446,6 +491,7 @@ window.__ModuleLoader__.load({
 			const has = doc.body !== null && doc.body.querySelector(ACTIVE_CONVERSATION_CONTENT_SELECTOR) !== null;
 			applyMarker(doc.body, CONVERSATION_CONTENT_ATTR, has);
 			applyMarker(doc.documentElement, CONVERSATION_CONTENT_ATTR, has);
+			syncComposerFrost(doc);
 		}
 		/**
 		* Coalesce the mutation bursts of a streaming conversation into one content
@@ -493,12 +539,17 @@ window.__ModuleLoader__.load({
 			}
 			applyMarker(doc.body, CONVERSATION_CONTENT_ATTR, false);
 			applyMarker(doc.documentElement, CONVERSATION_CONTENT_ATTR, false);
+			syncComposerFrost(doc);
 		}
 		/**
 		* Install the shared composer-seat neutralizer, keyed by head presence so a
 		* cleared head (tests) or a re-mount re-creates it. Without the marker the
 		* rules are inert, so the style can outlive a single mount without changing
 		* any other look.
+		*
+		* The composer card is deliberately absent from this sheet: its frost rides
+		* {@link COMPOSER_FROST_ATTR} instead, because no rule here may put a
+		* containing-block property back on the card (issue #1724).
 		*/
 		function ensureSceneNeutralizer(doc) {
 			if (doc.head === null) return;
@@ -512,17 +563,156 @@ window.__ModuleLoader__.load({
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
     }
-    html[data-dsh-backdrop-active][data-dsh-conversation-content] [data-composer-card] {
+    html[data-dsh-backdrop-active][data-dsh-conversation-content] [${COMPOSER_FROST_ATTR}] {
       backdrop-filter: blur(var(--dsh-input-card-blur, 10px)) !important;
       -webkit-backdrop-filter: blur(var(--dsh-input-card-blur, 10px)) !important;
     }
   `;
 			doc.head.appendChild(style);
 		}
+		const frostFollowers = /* @__PURE__ */ new WeakMap();
+		/** The composer card the frost tracks, or null while none is mounted. */
+		function composerCardOf(doc) {
+			return doc.body === null ? null : doc.body.querySelector("[data-composer-card]");
+		}
+		/**
+		* Create the follower on first use and keep it sized to the composer card.
+		*
+		* The element is empty, fixed and inert: it paints nothing of its own, and it
+		* receives no pointer events, so it can never take a tap from the composer or
+		* the sidebar. Sizing uses one measure per animation frame (the shape
+		* shell-rendering.ts uses for the composer height) rather than a per-mutation
+		* read, and writes only when the box actually changed.
+		*/
+		function syncFrostFollower(doc) {
+			const follower = frostFollowers.get(doc);
+			if (follower === void 0) return;
+			const card = composerCardOf(doc);
+			if (card === null) return;
+			if (follower.observed !== card) {
+				if (follower.observed !== null) follower.resizeObserver?.unobserve(follower.observed);
+				follower.observed = card;
+				follower.resizeObserver?.observe(card);
+				follower.applied = "";
+			}
+			const rect = card.getBoundingClientRect();
+			if (rect.width <= 0 || rect.height <= 0) return;
+			const radius = doc.defaultView?.getComputedStyle(card).borderRadius ?? "";
+			const box = [
+				rect.top,
+				rect.left,
+				rect.width,
+				rect.height,
+				radius
+			].map((value) => typeof value === "number" ? Math.round(value) : value).join("|");
+			if (box === follower.applied) return;
+			follower.applied = box;
+			const style = follower.el.style;
+			style.top = `${Math.round(rect.top)}px`;
+			style.left = `${Math.round(rect.left)}px`;
+			style.width = `${Math.round(rect.width)}px`;
+			style.height = `${Math.round(rect.height)}px`;
+			style.borderRadius = radius;
+		}
+		/** Coalesce a burst of geometry changes into one measurement per frame. */
+		function scheduleFrostSync(doc) {
+			const follower = frostFollowers.get(doc);
+			if (follower === void 0 || follower.frame !== null) return;
+			const win = doc.defaultView;
+			if (win === null || typeof win.requestAnimationFrame !== "function") {
+				syncFrostFollower(doc);
+				return;
+			}
+			follower.frame = win.requestAnimationFrame(() => {
+				follower.frame = null;
+				if (!frostFollowers.has(doc)) return;
+				syncFrostFollower(doc);
+			});
+		}
+		/** Mount the follower while a scene is visible and start tracking the card. */
+		function startFrostFollower(doc) {
+			if (frostFollowers.has(doc) || doc.body === null) return;
+			const el = doc.createElement("div");
+			el.setAttribute(COMPOSER_FROST_ATTR, "");
+			el.setAttribute("aria-hidden", "true");
+			const style = el.style;
+			style.position = "fixed";
+			style.pointerEvents = "none";
+			style.zIndex = COMPOSER_FROST_Z_INDEX;
+			style.borderRadius = "inherit";
+			const follower = {
+				el,
+				resizeObserver: null,
+				observed: null,
+				onResize: null,
+				frame: null,
+				applied: ""
+			};
+			doc.body.appendChild(el);
+			frostFollowers.set(doc, follower);
+			const win = doc.defaultView;
+			if (win !== null && typeof win.ResizeObserver === "function") follower.resizeObserver = new win.ResizeObserver(() => scheduleFrostSync(doc));
+			if (win !== null && typeof win.addEventListener === "function") {
+				follower.onResize = () => scheduleFrostSync(doc);
+				win.addEventListener("resize", follower.onResize);
+			}
+			syncFrostFollower(doc);
+		}
+		/** Remove the follower and stop every loop that fed it. */
+		function stopFrostFollower(doc) {
+			const follower = frostFollowers.get(doc);
+			if (follower === void 0) return;
+			frostFollowers.delete(doc);
+			const win = doc.defaultView;
+			if (follower.frame !== null && win !== null && typeof win.cancelAnimationFrame === "function") {
+				win.cancelAnimationFrame(follower.frame);
+				follower.frame = null;
+			}
+			follower.resizeObserver?.disconnect();
+			follower.resizeObserver = null;
+			if (follower.onResize !== null) {
+				win?.removeEventListener("resize", follower.onResize);
+				follower.onResize = null;
+			}
+			follower.el.remove();
+		}
+		/**
+		* Attach the composer frost to the current scene state. Called from the shared
+		* marker sync so the follower exists exactly while a backdrop is visible and
+		* the conversation has content — the same gate the card's old frost rule used.
+		*
+		* The follower tracks the card through a ResizeObserver on the card itself and
+		* one interval-free re-schedule on every re-mount, so a conversation switch
+		* that replaces the composer keeps the frost aligned without a polling loop.
+		*/
+		function syncComposerFrost(doc) {
+			if (!(doc.body !== null && doc.body.hasAttribute("data-dsh-backdrop-active") && doc.body.hasAttribute("data-dsh-conversation-content"))) {
+				stopFrostFollower(doc);
+				return;
+			}
+			startFrostFollower(doc);
+		}
 		//#endregion
 		//#region src/client/wallpaper.ts
 		/** The section key the Host schema declares (mirrors src/index.ts). */
 		const SKIN_WALLPAPER_NS = "skin-wallpaper";
+		/**
+		* Map one remote.directoryPicker.pick result onto the outcome the panel
+		* switches on. The composed picker refuses the verb with
+		* directory-picker/unavailable when it serves the browse capability, so
+		* that code is a capability answer, not a failure; every other error still
+		* rejects (a transport or assembly fault must never look like a cancel).
+		* @param result - the Remote result of the pick call.
+		* @returns the pick outcome; throws the Host's message on any other failure.
+		*/
+		function mapDirPickResult(result) {
+			if (result.ok) return result.value === null ? { kind: "cancelled" } : {
+				kind: "picked",
+				path: result.value
+			};
+			if (result.error.code === "directory-picker/unavailable") return { kind: "unavailable" };
+			throw new Error(result.error.message);
+		}
 		const clamp = (value, min, max) => Math.max(min, Math.min(max, Math.round(value)));
 		/** Style one fixed, non-interactive, under-everything wallpaper layer. */
 		function styleLayer(element, zIndex, layer) {
@@ -569,6 +759,19 @@ window.__ModuleLoader__.load({
 			return Number.isFinite(numericZIndex) && numericZIndex > MAX_SURFACE_OVERLAY_Z_INDEX;
 		}
 		/**
+		* Whether one media-layer child is the sandboxed scene-player frame.
+		*
+		* Read from the node (tagName) instead of `instanceof HTMLIFrameElement`: the
+		* ambient globals belong to the app's realm, and the wallpaper paths run
+		* against elements from documents whose realm those bindings cannot see, where
+		* the `instanceof` reference throws rather than answering false.
+		* @param node - the candidate element.
+		* @returns true when it is an iframe.
+		*/
+		function isScenePlayer(node) {
+			return node !== null && node.tagName === "IFRAME";
+		}
+		/**
 		* Default shell-surface detector for WE wallpaper neutralization (#712). A
 		* target must cover most of the visible viewport and paint a nontransparent
 		* background. It deliberately avoids equality against a theme token because
@@ -940,7 +1143,7 @@ window.__ModuleLoader__.load({
 			}
 			recoverScenePlayer() {
 				const scenePlayer = this.mediaLayer?.firstElementChild ?? null;
-				if (!(scenePlayer instanceof HTMLIFrameElement) || scenePlayer.dataset.dshScenePlayer !== "") return;
+				if (!isScenePlayer(scenePlayer) || scenePlayer.dataset.dshScenePlayer !== "") return;
 				try {
 					scenePlayer.contentWindow?.postMessage({ type: "dsh-recover-renderer" }, "*");
 				} catch {}
@@ -1005,7 +1208,7 @@ window.__ModuleLoader__.load({
 			};
 			onSceneMessage = (event) => {
 				const scenePlayer = this.mediaLayer?.firstElementChild ?? null;
-				if (!(scenePlayer instanceof HTMLIFrameElement) || scenePlayer.dataset.dshScenePlayer !== "") return;
+				if (!isScenePlayer(scenePlayer) || scenePlayer.dataset.dshScenePlayer !== "") return;
 				if (event.source !== scenePlayer.contentWindow) return;
 				if (event.data?.type !== "dsh-scene-needs-reload") return;
 				scenePlayer.src = scenePlayer.src;
@@ -1017,7 +1220,7 @@ window.__ModuleLoader__.load({
 					else this.videoElement.play()?.catch(() => {});
 				}
 				const scenePlayer = this.mediaLayer?.firstElementChild ?? null;
-				if (scenePlayer instanceof HTMLIFrameElement && scenePlayer.dataset.dshScenePlayer === "") try {
+				if (isScenePlayer(scenePlayer) && scenePlayer.dataset.dshScenePlayer === "") try {
 					scenePlayer.contentWindow?.postMessage({
 						type: "dsh-set-pause",
 						paused: this.doc.hidden
@@ -1107,7 +1310,8 @@ window.__ModuleLoader__.load({
 					const child = this.buildMedia(descriptor);
 					if (child !== null) {
 						this.mediaLayer.appendChild(child);
-						if (child instanceof HTMLVideoElement && child.paused) child.play()?.catch(() => {});
+						const VideoCtor = this.doc.defaultView?.HTMLVideoElement;
+						if (VideoCtor !== void 0 && child instanceof VideoCtor && child.paused) child.play()?.catch(() => {});
 					}
 				} else {
 					const child = this.mediaLayer.firstElementChild;
@@ -1124,8 +1328,8 @@ window.__ModuleLoader__.load({
 			/** Push the current sizing mode onto the mounted media element. */
 			applyFit() {
 				const child = this.mediaLayer?.firstElementChild ?? null;
-				if (child instanceof HTMLElement) styleCover(child, this.fitValue);
-				if (child instanceof HTMLIFrameElement && child.dataset.dshScenePlayer === "") try {
+				if (child !== null && child.nodeType === 1) styleCover(child, this.fitValue);
+				if (child !== null && isScenePlayer(child) && child.dataset.dshScenePlayer === "") try {
 					child.contentWindow?.postMessage({
 						type: "dsh-set-fit",
 						fit: this.fitValue
@@ -1293,7 +1497,7 @@ window.__ModuleLoader__.load({
 					while (stack.length > 0) {
 						const node = stack.pop();
 						if (node === void 0) continue;
-						if (node instanceof HTMLElement && !node.hasAttribute("data-dsh-wallpaper-surface") && isSurface(node)) {
+						if (node.nodeType === 1 && !node.hasAttribute("data-dsh-wallpaper-surface") && isSurface(node)) {
 							node.setAttribute("data-dsh-wallpaper-surface", "");
 							this.taggedSurfaces.add(node);
 						}
@@ -1311,7 +1515,7 @@ window.__ModuleLoader__.load({
 				while (stack.length > 0) {
 					const node = stack.pop();
 					if (node === void 0) continue;
-					if (node instanceof HTMLElement && !node.hasAttribute("data-dsh-wallpaper-surface") && isFade(node, this.doc)) {
+					if (node.nodeType === 1 && !node.hasAttribute("data-dsh-wallpaper-surface") && isFade(node, this.doc)) {
 						node.setAttribute("data-dsh-wallpaper-surface", "");
 						this.taggedSurfaces.add(node);
 					}
@@ -1335,12 +1539,24 @@ window.__ModuleLoader__.load({
 					subtree: true
 				});
 			}
-			/** Incrementally tag added subtrees and untag removed subtrees. */
+			/**
+			* Incrementally tag added subtrees and untag removed subtrees.
+			*
+			* Elements are recognised by nodeType, never by `instanceof HTMLElement`.
+			* Decision: element KIND is read from the node (nodeType / tagName), and a
+			* constructor test, where one is genuinely needed, comes from the owning
+			* document's window (`doc.defaultView.HTMLVideoElement`) — the same rule the
+			* video resume path below already follows. The ambient globals are a single
+			* realm's bindings: they do not describe elements from another document, and
+			* code that reached for them here threw a bare ReferenceError out of an
+			* observer callback. This is a deliberate repository-wide convention, not a
+			* workaround for one sandbox.
+			*/
 			handleSurfaceMutations(records) {
 				if (this.disposed || (this.previewing ?? this.applied) === null) return;
 				for (const record of records) {
-					for (const node of record.addedNodes) if (node instanceof HTMLElement) this.tagAddedSubtree(node);
-					for (const node of record.removedNodes) if (node instanceof HTMLElement) this.untagRemovedSubtree(node);
+					for (const node of record.addedNodes) if (node.nodeType === 1) this.tagAddedSubtree(node);
+					for (const node of record.removedNodes) if (node.nodeType === 1) this.untagRemovedSubtree(node);
 				}
 			}
 			/** Tag newly added elements that qualify as full-viewport surfaces or workspace fades. */
@@ -1359,7 +1575,7 @@ window.__ModuleLoader__.load({
 							this.taggedSurfaces.add(node);
 						}
 					}
-					for (const child of Array.from(node.children)) if (child instanceof HTMLElement) stack.push(child);
+					for (const child of Array.from(node.children)) if (child.nodeType === 1) stack.push(child);
 				}
 			}
 			/** Remove tags from a removed subtree and drop its references. */
@@ -1372,7 +1588,7 @@ window.__ModuleLoader__.load({
 						node.removeAttribute("data-dsh-wallpaper-surface");
 						this.taggedSurfaces.delete(node);
 					}
-					for (const child of Array.from(node.children)) if (child instanceof HTMLElement) stack.push(child);
+					for (const child of Array.from(node.children)) if (child.nodeType === 1) stack.push(child);
 				}
 			}
 			untagSurfaces() {
@@ -1442,6 +1658,167 @@ window.__ModuleLoader__.load({
 			wallpaper.subscribe(restore);
 		}
 		//#endregion
+		//#region src/client/DirBrowserDialog.tsx
+		/**
+		* In-app folder browser: the picking surface for a Host whose directory
+		* picker composes the browse backend. The adaptive chooser resolves that
+		* backend whenever the web server binds beyond loopback (LAN / remote GUI
+		* access) or the host is launched over SSH, because no OS chooser can reach
+		* such a client; the picker then refuses `pick` and serves listing
+		* primitives instead.
+		*
+		* The dialog drives those primitives one level at a time and owns no path
+		* joining: every crumb and every row is an absolute host path the backend
+		* reported, so a client on another machine still picks a real host folder.
+		* Escape and a backdrop click close it; the chosen path goes back through
+		* `onPick` and the caller persists it.
+		*
+		* @module @linxin666/dsh-client-ui-skin-center/DirBrowserDialog
+		*/
+		/** Render the in-app folder browser over the picker's browse primitives. */
+		function DirBrowserDialog({ t, listDir, onPick, onClose }) {
+			const [listing, setListing] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(true);
+			const [showHidden, setShowHidden] = (0, react.useState)(false);
+			const alive = (0, react.useRef)(true);
+			const panel = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				alive.current = true;
+				return () => {
+					alive.current = false;
+				};
+			}, []);
+			/** Load one level; an absent path loads the host account's home. */
+			const open = (0, react.useCallback)((path) => {
+				setBusy(true);
+				setError(null);
+				listDir(path).then((next) => {
+					if (!alive.current) return;
+					setBusy(false);
+					setListing(next);
+				}, (reason) => {
+					if (!alive.current) return;
+					setBusy(false);
+					setError(reason instanceof Error ? reason.message : String(reason));
+				});
+			}, [listDir]);
+			(0, react.useEffect)(() => {
+				open();
+			}, [open]);
+			(0, react.useEffect)(() => {
+				panel.current?.focus();
+				const onKey = (event) => {
+					if (event.key === "Escape") onClose();
+				};
+				document.addEventListener("keydown", onKey);
+				return () => {
+					document.removeEventListener("keydown", onKey);
+				};
+			}, [onClose]);
+			const entries = (listing?.entries ?? []).filter((entry) => showHidden || !entry.hidden);
+			const failed = error !== null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: skin_center_module_css_default.dirBrowserOverlay,
+				onMouseDown: (event) => {
+					if (event.target === event.currentTarget) onClose();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: skin_center_module_css_default.dirBrowser,
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": t("wallpaperDirBrowseTitle"),
+					tabIndex: -1,
+					ref: panel,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: skin_center_module_css_default.dirBrowserTitle,
+							children: t("wallpaperDirBrowseTitle")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: skin_center_module_css_default.dirBrowserCrumbs,
+							children: (listing?.crumbs ?? []).map((crumb, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: skin_center_module_css_default.dirBrowserCrumb,
+								children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: skin_center_module_css_default.dirBrowserCrumbSep,
+									children: "/"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: skin_center_module_css_default.dirBrowserCrumbButton,
+									title: crumb.path,
+									onClick: () => {
+										open(crumb.path);
+									},
+									children: crumb.name
+								})]
+							}, crumb.path))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.dirBrowserList,
+							children: [
+								busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: skin_center_module_css_default.dirBrowserNote,
+									children: t("loading")
+								}),
+								!busy && failed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.dirBrowserError,
+									children: [
+										t("wallpaperDirBrowseFailed"),
+										": ",
+										error
+									]
+								}),
+								!busy && !failed && entries.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: skin_center_module_css_default.dirBrowserNote,
+									children: t("wallpaperDirBrowseEmpty")
+								}),
+								!busy && !failed && entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: skin_center_module_css_default.dirBrowserEntry,
+									title: entry.path,
+									onClick: () => {
+										open(entry.path);
+									},
+									children: entry.name
+								}, entry.path)),
+								!busy && !failed && listing?.truncated === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: skin_center_module_css_default.dirBrowserNote,
+									children: t("wallpaperDirBrowseTruncated")
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: skin_center_module_css_default.dirBrowserHidden,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								checked: showHidden,
+								onChange: (event) => {
+									setShowHidden(event.target.checked);
+								}
+							}), t("wallpaperDirBrowseHidden")]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.dirBrowserActions,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: skin_center_module_css_default.button,
+								onClick: onClose,
+								children: t("cancel")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: skin_center_module_css_default.button,
+								disabled: listing === null,
+								onClick: () => {
+									if (listing !== null) onPick(listing.path);
+								},
+								children: t("wallpaperDirBrowseChoose")
+							})]
+						})
+					]
+				})
+			});
+		}
+		//#endregion
 		//#region src/client/SliderControl.tsx
 		/**
 		* A drag-smooth range slider that decouples the visible value from the
@@ -1627,7 +2004,6 @@ window.__ModuleLoader__.load({
 				case "video": return "wallpaperTypeVideo";
 				case "web": return "wallpaperTypeWeb";
 				case "scene": return "wallpaperTypeScene";
-				case "image": return "wallpaperTypeImage";
 				default: return "wallpaperTypeApp";
 			}
 		}
@@ -1674,12 +2050,12 @@ window.__ModuleLoader__.load({
 			const [shownVolume, setShownVolume] = useLiveValue$1(volume);
 			const [dirInput, setDirInput] = (0, react.useState)("");
 			const [picking, setPicking] = (0, react.useState)(false);
+			const [browsing, setBrowsing] = (0, react.useState)(false);
 			const [page, setPage] = (0, react.useState)(1);
 			const [ratingFilter, setRatingFilter] = (0, react.useState)("g");
 			const [jumpInput, setJumpInput] = (0, react.useState)("");
 			const [items, setItems] = (0, react.useState)(null);
 			const [installDir, setInstallDir] = (0, react.useState)(null);
-			const [systemCount, setSystemCount] = (0, react.useState)(0);
 			const [loadError, setLoadError] = (0, react.useState)(null);
 			const [actionError, setActionError] = (0, react.useState)(null);
 			const [workingId, setWorkingId] = (0, react.useState)(null);
@@ -1704,7 +2080,6 @@ window.__ModuleLoader__.load({
 					setItems(payload.wallpapers);
 					setPage(1);
 					setInstallDir(typeof payload.installDir === "string" ? payload.installDir : null);
-					setSystemCount(typeof payload.systemCount === "number" ? payload.systemCount : 0);
 					const selected = wallpaper.selection();
 					wallpaper.sync(resolveSelection(payload.wallpapers, selected) ?? null);
 				}).catch((error) => {
@@ -1729,18 +2104,33 @@ window.__ModuleLoader__.load({
 					load();
 				});
 			};
-			/** Open the host's native folder picker and add the chosen directory. */
+			/**
+			* Add one picked folder. A native-capability host opens the OS chooser; a
+			* browse-capability host (the adaptive chooser picks it whenever the web
+			* server binds beyond loopback, e.g. LAN remote access) refuses the pick
+			* and gets the in-app browser over the picker's own listing primitives.
+			* Without either capability the manual input stays the fallback.
+			*/
 			const browseDir = () => {
 				const pick = wallpaper.pickDir;
 				if (pick === void 0) return;
 				setActionError(null);
 				setPicking(true);
-				pick().then((path) => {
+				pick().then((outcome) => {
 					if (!mounted.current) return;
 					setPicking(false);
-					if (path === null || path.trim() === "") return;
-					wallpaper.addDir(path);
-					load();
+					if (outcome.kind === "picked") {
+						if (outcome.path.trim() === "") return;
+						wallpaper.addDir(outcome.path);
+						load();
+						return;
+					}
+					if (outcome.kind === "cancelled") return;
+					if (wallpaper.listDir !== void 0) {
+						setBrowsing(true);
+						return;
+					}
+					setActionError(t("wallpaperDirBrowseFailed"));
 				}).catch((error) => {
 					if (!mounted.current) return;
 					setPicking(false);
@@ -1778,572 +2168,583 @@ window.__ModuleLoader__.load({
 			const activeSelection = selection;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: skin_center_module_css_default.wallpaperSection,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: skin_center_module_css_default.enableRow,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: skin_center_module_css_default.enableLabel,
-							title: t("wallpaperEnable"),
-							children: t("wallpaperTitle")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							role: "switch",
-							"aria-checked": enabled,
-							"aria-label": t("wallpaperEnable"),
-							className: enabled ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
-							onClick: () => {
-								wallpaper.setEnabled(!enabled);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: skin_center_module_css_default.enableHint,
-							children: t("wallpaperHint")
-						})
-					]
-				}), enabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.wallpaperStatus,
-						children: [loadError !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: skin_center_module_css_default.wallpaperStatusError,
-							children: [
-								t("wallpaperLoadError"),
-								": ",
-								loadError
-							]
-						}) : items === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("loading") }) : installDir !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							t("wallpaperLibraryFound"),
-							" · ",
-							items.length
-						] }) : systemCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							t("wallpaperLibrarySystem"),
-							" · ",
-							items.length
-						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							t("wallpaperLibraryManual"),
-							" · ",
-							items.length
-						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: skin_center_module_css_default.button,
-							onClick: load,
-							children: t("wallpaperRefresh")
-						})]
-					}),
-					activeSelection !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.wallpaperControls,
+						className: skin_center_module_css_default.enableRow,
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.themeRow,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: skin_center_module_css_default.themeLabel,
-										children: t("wallpaperMode")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: skin_center_module_css_default.themeButton + (mode === "live" ? " " + skin_center_module_css_default.themeButtonActive : ""),
-										onClick: () => {
-											wallpaper.setMode("live");
-										},
-										children: t("wallpaperModeLive")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: skin_center_module_css_default.themeButton + (mode === "frame" ? " " + skin_center_module_css_default.themeButtonActive : ""),
-										onClick: () => {
-											wallpaper.setMode("frame");
-										},
-										children: t("wallpaperModeFrame")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonGhost,
-										onClick: () => {
-											wallpaper.clearSelection();
-										},
-										children: t("wallpaperClear")
-									})
-								]
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: skin_center_module_css_default.enableLabel,
+								title: t("wallpaperEnable"),
+								children: t("wallpaperTitle")
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.themeRow,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								role: "switch",
+								"aria-checked": enabled,
+								"aria-label": t("wallpaperEnable"),
+								className: enabled ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
+								onClick: () => {
+									wallpaper.setEnabled(!enabled);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: skin_center_module_css_default.enableHint,
+								children: t("wallpaperHint")
+							})
+						]
+					}),
+					enabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.wallpaperStatus,
+							children: [loadError !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: skin_center_module_css_default.wallpaperStatusError,
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: skin_center_module_css_default.themeLabel,
-										children: t("wallpaperFit")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: skin_center_module_css_default.themeButton + (fit === "cover" ? " " + skin_center_module_css_default.themeButtonActive : ""),
-										onClick: () => {
-											wallpaper.setFit("cover");
-										},
-										children: t("wallpaperFitCover")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									t("wallpaperLoadError"),
+									": ",
+									loadError
+								]
+							}) : items === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("loading") }) : installDir !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								t("wallpaperLibraryFound"),
+								" · ",
+								items.length
+							] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								t("wallpaperLibraryManual"),
+								" · ",
+								items.length
+							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: skin_center_module_css_default.button,
+								onClick: load,
+								children: t("wallpaperRefresh")
+							})]
+						}),
+						activeSelection !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.wallpaperControls,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.themeRow,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: skin_center_module_css_default.themeLabel,
+											children: t("wallpaperMode")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.themeButton + (mode === "live" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+											onClick: () => {
+												wallpaper.setMode("live");
+											},
+											children: t("wallpaperModeLive")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.themeButton + (mode === "frame" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+											onClick: () => {
+												wallpaper.setMode("frame");
+											},
+											children: t("wallpaperModeFrame")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonGhost,
+											onClick: () => {
+												wallpaper.clearSelection();
+											},
+											children: t("wallpaperClear")
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.themeRow,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: skin_center_module_css_default.themeLabel,
+											children: t("wallpaperFit")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.themeButton + (fit === "cover" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+											onClick: () => {
+												wallpaper.setFit("cover");
+											},
+											children: t("wallpaperFitCover")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.themeButton + (fit === "contain" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+											onClick: () => {
+												wallpaper.setFit("contain");
+											},
+											children: t("wallpaperFitContain")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.themeButton + (fit === "fill" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+											onClick: () => {
+												wallpaper.setFit("fill");
+											},
+											children: t("wallpaperFitFill")
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.backgroundRow,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: skin_center_module_css_default.backgroundHead,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: skin_center_module_css_default.backgroundLabel,
+												children: t("wallpaperDim")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: skin_center_module_css_default.backgroundValue,
+												"aria-hidden": "true",
+												children: [shownDim, "%"]
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
+											className: skin_center_module_css_default.backgroundRange,
+											min: 0,
+											max: 90,
+											step: 5,
+											value: dim,
+											ariaValuetext: shownDim + "%",
+											ariaLabel: t("wallpaperDim"),
+											onChanging: setShownDim,
+											onChange: (value) => {
+												wallpaper.setDim(value);
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: skin_center_module_css_default.backgroundHead,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: skin_center_module_css_default.backgroundLabel,
+												children: t("wallpaperOpacity")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: skin_center_module_css_default.backgroundValue,
+												"aria-hidden": "true",
+												children: [shownOpacity, "%"]
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
+											className: skin_center_module_css_default.backgroundRange,
+											min: 0,
+											max: 100,
+											step: 5,
+											value: opacity,
+											ariaValuetext: shownOpacity + "%",
+											ariaLabel: t("wallpaperOpacity"),
+											onChanging: setShownOpacity,
+											onChange: (value) => {
+												wallpaper.setOpacity(value);
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: skin_center_module_css_default.backgroundHead,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: skin_center_module_css_default.backgroundLabel,
+												children: t("wallpaperBlur")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: skin_center_module_css_default.backgroundValue,
+												"aria-hidden": "true",
+												children: [shownBlur, "px"]
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
+											className: skin_center_module_css_default.backgroundRange,
+											min: 0,
+											max: 60,
+											step: 1,
+											value: blur,
+											ariaValuetext: shownBlur + "px",
+											ariaLabel: t("wallpaperBlur"),
+											onChanging: setShownBlur,
+											onChange: (value) => {
+												wallpaper.setBlur(value);
+											}
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.enableRow,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: skin_center_module_css_default.enableLabel,
+										children: t("wallpaperPauseHidden")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: skin_center_module_css_default.themeButton + (fit === "contain" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+										role: "switch",
+										"aria-checked": pauseOnHidden,
+										"aria-label": t("wallpaperPauseHidden"),
+										className: pauseOnHidden ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
 										onClick: () => {
-											wallpaper.setFit("contain");
+											wallpaper.setPauseOnHidden(!pauseOnHidden);
 										},
-										children: t("wallpaperFitContain")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.enableRow,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: skin_center_module_css_default.enableLabel,
+										title: t("wallpaperSoundHint"),
+										children: t("wallpaperSound")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: skin_center_module_css_default.themeButton + (fit === "fill" ? " " + skin_center_module_css_default.themeButtonActive : ""),
+										role: "switch",
+										"aria-checked": sound,
+										"aria-label": t("wallpaperSound"),
+										className: sound ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
 										onClick: () => {
-											wallpaper.setFit("fill");
+											wallpaper.setSound(!sound);
 										},
-										children: t("wallpaperFitFill")
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.backgroundRow,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: skin_center_module_css_default.backgroundHead,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: skin_center_module_css_default.backgroundLabel,
-											children: t("wallpaperDim")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: skin_center_module_css_default.backgroundValue,
-											"aria-hidden": "true",
-											children: [shownDim, "%"]
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
-										className: skin_center_module_css_default.backgroundRange,
-										min: 0,
-										max: 90,
-										step: 5,
-										value: dim,
-										ariaValuetext: shownDim + "%",
-										ariaLabel: t("wallpaperDim"),
-										onChanging: setShownDim,
-										onChange: (value) => {
-											wallpaper.setDim(value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: skin_center_module_css_default.backgroundHead,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: skin_center_module_css_default.backgroundLabel,
-											children: t("wallpaperOpacity")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: skin_center_module_css_default.backgroundValue,
-											"aria-hidden": "true",
-											children: [shownOpacity, "%"]
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
-										className: skin_center_module_css_default.backgroundRange,
-										min: 0,
-										max: 100,
-										step: 5,
-										value: opacity,
-										ariaValuetext: shownOpacity + "%",
-										ariaLabel: t("wallpaperOpacity"),
-										onChanging: setShownOpacity,
-										onChange: (value) => {
-											wallpaper.setOpacity(value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: skin_center_module_css_default.backgroundHead,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: skin_center_module_css_default.backgroundLabel,
-											children: t("wallpaperBlur")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: skin_center_module_css_default.backgroundValue,
-											"aria-hidden": "true",
-											children: [shownBlur, "px"]
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
-										className: skin_center_module_css_default.backgroundRange,
-										min: 0,
-										max: 60,
-										step: 1,
-										value: blur,
-										ariaValuetext: shownBlur + "px",
-										ariaLabel: t("wallpaperBlur"),
-										onChanging: setShownBlur,
-										onChange: (value) => {
-											wallpaper.setBlur(value);
-										}
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.enableRow,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: skin_center_module_css_default.enableLabel,
-									children: t("wallpaperPauseHidden")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									role: "switch",
-									"aria-checked": pauseOnHidden,
-									"aria-label": t("wallpaperPauseHidden"),
-									className: pauseOnHidden ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
-									onClick: () => {
-										wallpaper.setPauseOnHidden(!pauseOnHidden);
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.enableRow,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: skin_center_module_css_default.enableLabel,
-									title: t("wallpaperSoundHint"),
-									children: t("wallpaperSound")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									role: "switch",
-									"aria-checked": sound,
-									"aria-label": t("wallpaperSound"),
-									className: sound ? skin_center_module_css_default.switch + " " + skin_center_module_css_default.switchOn : skin_center_module_css_default.switch,
-									onClick: () => {
-										wallpaper.setSound(!sound);
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
-								})]
-							}),
-							sound && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.backgroundRow,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: skin_center_module_css_default.backgroundHead,
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: skin_center_module_css_default.backgroundLabel,
-										children: t("wallpaperVolume")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: skin_center_module_css_default.backgroundValue,
-										"aria-hidden": "true",
-										children: [shownVolume, "%"]
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: skin_center_module_css_default.switchThumb })
 									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
-									className: skin_center_module_css_default.backgroundRange,
-									min: 0,
-									max: 100,
-									step: 5,
-									value: volume,
-									ariaValuetext: shownVolume + "%",
-									ariaLabel: t("wallpaperVolume"),
-									onChanging: setShownVolume,
-									onChange: (value) => {
-										wallpaper.setVolume(value);
-									}
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.wallpaperDirs,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: skin_center_module_css_default.themeLabel,
-								children: t("wallpaperDirs")
-							}),
-							dirs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: skin_center_module_css_default.backgroundHintMuted,
-								children: t("wallpaperDirsEmpty")
-							}),
-							dirs.map((dir) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: skin_center_module_css_default.wallpaperDir,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: skin_center_module_css_default.wallpaperDirPath,
-									title: dir,
-									children: dir
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: skin_center_module_css_default.wallpaperDirRemove,
-									"aria-label": t("wallpaperRemove"),
-									onClick: () => {
-										wallpaper.removeDir(dir);
-										load();
-									},
-									children: "×"
-								})]
-							}, dir)),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: skin_center_module_css_default.wallpaperDirAdd,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										className: skin_center_module_css_default.wallpaperDirInput,
-										type: "text",
-										value: dirInput,
-										placeholder: t("wallpaperDirPlaceholder"),
-										onChange: (event) => {
-											setDirInput(event.target.value);
+								}),
+								sound && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.backgroundRow,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: skin_center_module_css_default.backgroundHead,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: skin_center_module_css_default.backgroundLabel,
+											children: t("wallpaperVolume")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: skin_center_module_css_default.backgroundValue,
+											"aria-hidden": "true",
+											children: [shownVolume, "%"]
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, {
+										className: skin_center_module_css_default.backgroundRange,
+										min: 0,
+										max: 100,
+										step: 5,
+										value: volume,
+										ariaValuetext: shownVolume + "%",
+										ariaLabel: t("wallpaperVolume"),
+										onChanging: setShownVolume,
+										onChange: (value) => {
+											wallpaper.setVolume(value);
+										}
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.wallpaperDirs,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: skin_center_module_css_default.themeLabel,
+									children: t("wallpaperDirs")
+								}),
+								dirs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: skin_center_module_css_default.backgroundHintMuted,
+									children: t("wallpaperDirsEmpty")
+								}),
+								dirs.map((dir) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: skin_center_module_css_default.wallpaperDir,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: skin_center_module_css_default.wallpaperDirPath,
+										title: dir,
+										children: dir
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: skin_center_module_css_default.wallpaperDirRemove,
+										"aria-label": t("wallpaperRemove"),
+										onClick: () => {
+											wallpaper.removeDir(dir);
+											load();
 										},
-										onKeyDown: (event) => {
-											if (event.key === "Enter" && dirInput.trim() !== "") {
+										children: "×"
+									})]
+								}, dir)),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: skin_center_module_css_default.wallpaperDirAdd,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: skin_center_module_css_default.wallpaperDirInput,
+											type: "text",
+											value: dirInput,
+											placeholder: t("wallpaperDirPlaceholder"),
+											onChange: (event) => {
+												setDirInput(event.target.value);
+											},
+											onKeyDown: (event) => {
+												if (event.key === "Enter" && dirInput.trim() !== "") {
+													wallpaper.addDir(dirInput);
+													setDirInput("");
+													load();
+												}
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.button,
+											disabled: dirInput.trim() === "",
+											onClick: () => {
 												wallpaper.addDir(dirInput);
 												setDirInput("");
 												load();
-											}
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											},
+											children: t("wallpaperDirAdd")
+										}),
+										wallpaper.pickDir !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: skin_center_module_css_default.button,
+											disabled: picking,
+											title: t("wallpaperDirBrowseHint"),
+											onClick: browseDir,
+											children: picking ? t("loading") : t("wallpaperDirBrowse")
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: skin_center_module_css_default.backgroundHintMuted,
+									children: t("wallpaperDirsHint")
+								})
+							]
+						}),
+						actionError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: skin_center_module_css_default.error,
+							children: actionError
+						}),
+						writeError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.error,
+							role: "alert",
+							children: [
+								t("wallpaperSaveFailed"),
+								": ",
+								writeError
+							]
+						}),
+						items !== null && items.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.wallpaperToolbar,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: skin_center_module_css_default.ratingFilterGroup,
+								role: "tablist",
+								"aria-label": t("wallpaperTitle"),
+								children: [
+									"g",
+									"pg13",
+									"r18"
+								].map((filter) => {
+									const active = ratingFilter === filter;
+									const key = filter === "g" ? "wallpaperRatingG" : filter === "pg13" ? "wallpaperRatingPg13" : "wallpaperRatingR18";
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: skin_center_module_css_default.button,
-										disabled: dirInput.trim() === "",
+										role: "tab",
+										"aria-selected": active,
+										className: skin_center_module_css_default.ratingFilterButton + (active ? " " + skin_center_module_css_default.ratingFilterActive : ""),
 										onClick: () => {
-											wallpaper.addDir(dirInput);
-											setDirInput("");
-											load();
+											onSelectRatingFilter(filter);
 										},
-										children: t("wallpaperDirAdd")
-									}),
-									wallpaper.pickDir !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: skin_center_module_css_default.button,
-										disabled: picking,
-										title: t("wallpaperDirBrowseHint"),
-										onClick: browseDir,
-										children: picking ? t("loading") : t("wallpaperDirBrowse")
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: skin_center_module_css_default.backgroundHintMuted,
-								children: t("wallpaperDirsHint")
+										children: t(key)
+									}, filter);
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: skin_center_module_css_default.pageTotalInfo,
+								children: t("wallpaperPageTotal", {
+									page: String(currentPage),
+									total: String(totalPages)
+								})
+							})]
+						}),
+						items !== null && pagedItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: skin_center_module_css_default.wallpaperGrid,
+							children: pagedItems.map((item) => {
+								const isApplied = item.id === activeSelection;
+								const isMounted = item.id === activeId;
+								const busy = workingId === item.id;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: skin_center_module_css_default.wallpaperCard,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: skin_center_module_css_default.wallpaperThumbWrap,
+											children: [
+												item.previewUrl !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+													className: skin_center_module_css_default.wallpaperThumb,
+													src: item.previewUrl,
+													alt: "",
+													loading: "lazy"
+												}) : item.videoUrl !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+													className: skin_center_module_css_default.wallpaperThumb,
+													src: item.videoUrl,
+													preload: "metadata",
+													muted: true,
+													playsInline: true,
+													"aria-hidden": "true"
+												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: skin_center_module_css_default.wallpaperThumbEmpty,
+													"aria-hidden": "true"
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: skin_center_module_css_default.wallpaperType,
+													children: t(typeKey(item))
+												}),
+												item.rating === "r18" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingR18,
+													children: "R18"
+												}) : item.rating === "pg13" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingPg13,
+													children: "PG-13"
+												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingG,
+													children: "G"
+												}),
+												isMounted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: skin_center_module_css_default.badge + " " + (trying ? skin_center_module_css_default.badgeTrying : skin_center_module_css_default.badgeActive),
+													children: trying ? t("tryingOn") : t("active")
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: skin_center_module_css_default.wallpaperName,
+											title: item.title,
+											children: item.title
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: skin_center_module_css_default.wallpaperActions,
+											children: [
+												isMounted && trying ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonPrimary,
+													onClick: () => {
+														wallpaper.exitTryOn();
+													},
+													children: t("exitTryOn")
+												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonPrimary,
+													disabled: !renderable(item) || isMounted && isApplied || busy,
+													onClick: () => {
+														wallpaper.tryOn(descriptorOf(item));
+													},
+													children: t("tryOn")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button,
+													disabled: !renderable(item) || isApplied || busy,
+													onClick: () => {
+														wallpaper.applySelection(descriptorOf(item));
+													},
+													children: isApplied ? t("active") : t("apply")
+												}),
+												item.source === "imported" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.updateAvailable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button,
+													disabled: busy,
+													title: t("wallpaperUpdateAvailable"),
+													onClick: () => {
+														runAction(item.id, "/reimport");
+													},
+													children: busy ? t("loading") : t("wallpaperReimport")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonGhost,
+													disabled: busy,
+													onClick: () => {
+														runAction(item.id, "/remove", () => {
+															if (wallpaper.selection() === item.id) wallpaper.clearSelection();
+														});
+													},
+													children: t("wallpaperRemove")
+												})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: skin_center_module_css_default.button,
+													disabled: busy,
+													title: t("wallpaperImportHint"),
+													onClick: () => {
+														runAction(item.id, "/import");
+													},
+													children: busy ? t("loading") : t("wallpaperImport")
+												})
+											]
+										})
+									]
+								}, item.id);
 							})
-						]
-					}),
-					actionError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: skin_center_module_css_default.error,
-						children: actionError
-					}),
-					writeError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.error,
-						role: "alert",
-						children: [
-							t("wallpaperSaveFailed"),
-							": ",
-							writeError
-						]
-					}),
-					items !== null && items.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.wallpaperToolbar,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: skin_center_module_css_default.ratingFilterGroup,
-							role: "tablist",
+						}),
+						totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: skin_center_module_css_default.wallpaperPagination,
+							role: "navigation",
 							"aria-label": t("wallpaperTitle"),
 							children: [
-								"g",
-								"pg13",
-								"r18"
-							].map((filter) => {
-								const active = ratingFilter === filter;
-								const key = filter === "g" ? "wallpaperRatingG" : filter === "pg13" ? "wallpaperRatingPg13" : "wallpaperRatingR18";
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									role: "tab",
-									"aria-selected": active,
-									className: skin_center_module_css_default.ratingFilterButton + (active ? " " + skin_center_module_css_default.ratingFilterActive : ""),
+									className: skin_center_module_css_default.pageButton,
+									disabled: currentPage <= 1,
 									onClick: () => {
-										onSelectRatingFilter(filter);
+										setPage((p) => Math.max(1, p - 1));
 									},
-									children: t(key)
-								}, filter);
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: skin_center_module_css_default.pageTotalInfo,
-							children: t("wallpaperPageTotal", {
-								page: String(currentPage),
-								total: String(totalPages)
-							})
-						})]
-					}),
-					items !== null && pagedItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: skin_center_module_css_default.wallpaperGrid,
-						children: pagedItems.map((item) => {
-							const isApplied = item.id === activeSelection;
-							const isMounted = item.id === activeId;
-							const busy = workingId === item.id;
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: skin_center_module_css_default.wallpaperCard,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: skin_center_module_css_default.wallpaperThumbWrap,
-										children: [
-											item.previewUrl !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-												className: skin_center_module_css_default.wallpaperThumb,
-												src: item.previewUrl,
-												alt: "",
-												loading: "lazy"
-											}) : item.videoUrl !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-												className: skin_center_module_css_default.wallpaperThumb,
-												src: item.videoUrl,
-												preload: "metadata",
-												muted: true,
-												playsInline: true,
-												"aria-hidden": "true"
-											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: skin_center_module_css_default.wallpaperThumbEmpty,
-												"aria-hidden": "true"
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: skin_center_module_css_default.wallpaperType,
-												children: t(typeKey(item))
-											}),
-											item.rating === "r18" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingR18,
-												children: "R18"
-											}) : item.rating === "pg13" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingPg13,
-												children: "PG-13"
-											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: skin_center_module_css_default.wallpaperRating + " " + skin_center_module_css_default.ratingG,
-												children: "G"
-											}),
-											isMounted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: skin_center_module_css_default.badge + " " + (trying ? skin_center_module_css_default.badgeTrying : skin_center_module_css_default.badgeActive),
-												children: trying ? t("tryingOn") : t("active")
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: skin_center_module_css_default.wallpaperName,
-										title: item.title,
-										children: item.title
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: skin_center_module_css_default.wallpaperActions,
-										children: [
-											isMounted && trying ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonPrimary,
-												onClick: () => {
-													wallpaper.exitTryOn();
-												},
-												children: t("exitTryOn")
-											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonPrimary,
-												disabled: !renderable(item) || isMounted && isApplied || busy,
-												onClick: () => {
-													wallpaper.tryOn(descriptorOf(item));
-												},
-												children: t("tryOn")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button,
-												disabled: !renderable(item) || isApplied || busy,
-												onClick: () => {
-													wallpaper.applySelection(descriptorOf(item));
-												},
-												children: isApplied ? t("active") : t("apply")
-											}),
-											item.source === "imported" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.updateAvailable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button,
-												disabled: busy,
-												title: t("wallpaperUpdateAvailable"),
-												onClick: () => {
-													runAction(item.id, "/reimport");
-												},
-												children: busy ? t("loading") : t("wallpaperReimport")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button + " " + skin_center_module_css_default.buttonGhost,
-												disabled: busy,
-												onClick: () => {
-													runAction(item.id, "/remove", () => {
-														if (wallpaper.selection() === item.id) wallpaper.clearSelection();
-													});
-												},
-												children: t("wallpaperRemove")
-											})] }) : item.source === "system" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: skin_center_module_css_default.button,
-												disabled: busy,
-												title: t("wallpaperImportHint"),
-												onClick: () => {
-													runAction(item.id, "/import");
-												},
-												children: busy ? t("loading") : t("wallpaperImport")
-											})
-										]
-									})
-								]
-							}, item.id);
-						})
-					}),
-					totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: skin_center_module_css_default.wallpaperPagination,
-						role: "navigation",
-						"aria-label": t("wallpaperTitle"),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: skin_center_module_css_default.pageButton,
-								disabled: currentPage <= 1,
-								onClick: () => {
-									setPage((p) => Math.max(1, p - 1));
-								},
-								"aria-label": t("wallpaperPagePrev"),
-								children: t("wallpaperPagePrev")
-							}),
-							paginationRange(currentPage, totalPages).map((p, idx) => {
-								if (p === "ellipsis") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: skin_center_module_css_default.pageEllipsis,
-									children: "…"
-								}, "ellipsis-" + String(idx));
-								const isActive = p === currentPage;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									"aria-label": t("wallpaperPagePrev"),
+									children: t("wallpaperPagePrev")
+								}),
+								paginationRange(currentPage, totalPages).map((p, idx) => {
+									if (p === "ellipsis") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: skin_center_module_css_default.pageEllipsis,
+										children: "…"
+									}, "ellipsis-" + String(idx));
+									const isActive = p === currentPage;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: skin_center_module_css_default.pageButton + (isActive ? " " + skin_center_module_css_default.pageButtonActive : ""),
+										"aria-current": isActive ? "page" : void 0,
+										onClick: () => {
+											setPage(p);
+										},
+										children: p
+									}, p);
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									className: skin_center_module_css_default.pageButton + (isActive ? " " + skin_center_module_css_default.pageButtonActive : ""),
-									"aria-current": isActive ? "page" : void 0,
+									className: skin_center_module_css_default.pageButton,
+									disabled: currentPage >= totalPages,
 									onClick: () => {
-										setPage(p);
+										setPage((p) => Math.min(totalPages, p + 1));
 									},
-									children: p
-								}, p);
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: skin_center_module_css_default.pageButton,
-								disabled: currentPage >= totalPages,
-								onClick: () => {
-									setPage((p) => Math.min(totalPages, p + 1));
-								},
-								"aria-label": t("wallpaperPageNext"),
-								children: t("wallpaperPageNext")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-								className: skin_center_module_css_default.pageJumpForm,
-								onSubmit: (e) => {
-									e.preventDefault();
-									handleJump();
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									type: "text",
-									className: skin_center_module_css_default.pageJumpInput,
-									value: jumpInput,
-									"aria-label": t("wallpaperPageJump"),
-									onChange: (e) => {
-										setJumpInput(e.target.value);
-									}
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "submit",
-									className: skin_center_module_css_default.pageButton,
-									disabled: jumpInput.trim() === "",
-									children: t("wallpaperPageJump")
-								})]
-							})
-						]
-					}),
-					items !== null && (items.length === 0 || pagedItems.length === 0) && loadError === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: skin_center_module_css_default.backgroundHintMuted,
-						children: t("wallpaperEmpty")
+									"aria-label": t("wallpaperPageNext"),
+									children: t("wallpaperPageNext")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+									className: skin_center_module_css_default.pageJumpForm,
+									onSubmit: (e) => {
+										e.preventDefault();
+										handleJump();
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										className: skin_center_module_css_default.pageJumpInput,
+										value: jumpInput,
+										"aria-label": t("wallpaperPageJump"),
+										onChange: (e) => {
+											setJumpInput(e.target.value);
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "submit",
+										className: skin_center_module_css_default.pageButton,
+										disabled: jumpInput.trim() === "",
+										children: t("wallpaperPageJump")
+									})]
+								})
+							]
+						}),
+						items !== null && (items.length === 0 || pagedItems.length === 0) && loadError === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: skin_center_module_css_default.backgroundHintMuted,
+							children: t("wallpaperEmpty")
+						})
+					] }),
+					browsing && wallpaper.listDir !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DirBrowserDialog, {
+						t,
+						listDir: wallpaper.listDir,
+						onPick: (path) => {
+							setBrowsing(false);
+							wallpaper.addDir(path);
+							load();
+						},
+						onClose: () => {
+							setBrowsing(false);
+						}
 					})
-				] })]
+				]
 			});
 		}
 		//#endregion
@@ -3609,11 +4010,10 @@ window.__ModuleLoader__.load({
 			backgroundHintInert: "Only applies to skins that paint a backdrop (Blue Fantasy / Whale Song). Applies to the official default automatically once such a skin is active.",
 			wallpaperTitle: "Wallpaper Engine",
 			wallpaperEnable: "Enable wallpapers",
-			wallpaperHint: "Use your local Wallpaper Engine library as the GUI backdrop: video, web, and scene wallpapers render live (scene wallpapers need WebGL).",
+			wallpaperHint: "Use your local Wallpaper Engine library as the GUI backdrop: video, web, and scene wallpapers render live (scene wallpapers need WebGL). On macOS there is no Wallpaper Engine library, so the feature starts off — turn it on, then add a folder of videos.",
 			wallpaperLoadError: "Wallpaper library failed to load",
 			wallpaperLibraryFound: "Wallpaper Engine library detected",
-			wallpaperLibraryManual: "Manual folders only (no Wallpaper Engine install found; set folders in the skin-wallpaper settings)",
-			wallpaperLibrarySystem: "macOS wallpapers detected (aerials and Desktop Pictures)",
+			wallpaperLibraryManual: "Folders you added",
 			wallpaperRefresh: "Refresh",
 			wallpaperMode: "Render mode",
 			wallpaperModeLive: "Live",
@@ -3635,21 +4035,25 @@ window.__ModuleLoader__.load({
 			wallpaperReimport: "Update",
 			wallpaperRemove: "Remove",
 			wallpaperUpdateAvailable: "The workshop original changed since import — update the local copy",
-			wallpaperEmpty: "No wallpapers found. Subscribe in the Wallpaper Engine workshop, or add manual folders to the skin-wallpaper settings.",
+			wallpaperEmpty: "No wallpapers found. Add a folder of videos below, or subscribe in the Wallpaper Engine workshop on Windows.",
 			wallpaperTypeVideo: "Video",
 			wallpaperTypeWeb: "Web",
 			wallpaperTypeScene: "Scene (static)",
 			wallpaperTypeApp: "Unsupported",
-			wallpaperTypeImage: "Image",
 			wallpaperLoadMore: "Load more",
 			wallpaperDirs: "Manual folders",
-			wallpaperDirsEmpty: "No manual folders yet.",
-			wallpaperDirsHint: "No Wallpaper Engine (e.g. macOS)? Point a folder at any .mp4/.webm files, a wallpaper project folder, or a folder of projects — they become your wallpaper library.",
+			wallpaperDirsEmpty: "No folders yet — add one to load its videos.",
+			wallpaperDirsHint: "On macOS: pick a folder of .mp4/.webm videos (or a wallpaper project folder). On Windows, folders extend the auto-detected Wallpaper Engine library.",
 			wallpaperDirPlaceholder: "/path/to/wallpapers or ~/Movies/wallpapers",
 			wallpaperDirAdd: "Add",
 			wallpaperDirBrowse: "Browse…",
 			wallpaperDirBrowseHint: "Pick a folder with the system file manager (Finder / Explorer)",
 			wallpaperDirBrowseFailed: "Could not open the system folder picker — type the path manually instead",
+			wallpaperDirBrowseTitle: "Select a folder",
+			wallpaperDirBrowseChoose: "Use this folder",
+			wallpaperDirBrowseEmpty: "No subfolders",
+			wallpaperDirBrowseHidden: "Show hidden folders",
+			wallpaperDirBrowseTruncated: "Too many folders to list; only the beginning is shown.",
 			wallpaperSaveFailed: "Could not save wallpaper settings.",
 			wallpaperRatingAll: "All",
 			wallpaperRatingG: "G",
@@ -3732,11 +4136,10 @@ window.__ModuleLoader__.load({
 			backgroundHintInert: "仅对带背景图插画的皮肤（蓝色幻想 / 鲸吟）生效；官方默认无背景图，该滑块对这些皮肤自动生效。",
 			wallpaperTitle: "Wallpaper Engine",
 			wallpaperEnable: "启用动态壁纸",
-			wallpaperHint: "把本机 Wallpaper Engine 壁纸库用作 GUI 背景：视频、网页与场景壁纸均动态渲染（场景壁纸需要 WebGL）。",
+			wallpaperHint: "把本机 Wallpaper Engine 壁纸库用作 GUI 背景：视频、网页与场景壁纸均动态渲染（场景壁纸需要 WebGL）。macOS 没有 Wallpaper Engine 壁纸库，该功能默认关闭；开启后添加一个存放视频的目录即可。",
 			wallpaperLoadError: "壁纸库加载失败",
 			wallpaperLibraryFound: "已检测到 Wallpaper Engine 壁纸库",
-			wallpaperLibraryManual: "仅手动目录（未检测到 Wallpaper Engine 安装，可在 skin-wallpaper 设置里添加目录）",
-			wallpaperLibrarySystem: "已检测到 macOS 系统壁纸（航拍与桌面图片）",
+			wallpaperLibraryManual: "来自你添加的目录",
 			wallpaperRefresh: "刷新",
 			wallpaperMode: "渲染模式",
 			wallpaperModeLive: "动态",
@@ -3758,21 +4161,25 @@ window.__ModuleLoader__.load({
 			wallpaperReimport: "更新",
 			wallpaperRemove: "移除",
 			wallpaperUpdateAvailable: "工坊原件在导入后有更新——同步更新本地副本",
-			wallpaperEmpty: "未发现壁纸。可先在 Wallpaper Engine 创意工坊订阅，或在 skin-wallpaper 设置里添加手动目录。",
+			wallpaperEmpty: "未发现壁纸。请在下方添加一个存放视频的目录；Windows 上也可先在 Wallpaper Engine 创意工坊订阅。",
 			wallpaperTypeVideo: "视频",
 			wallpaperTypeWeb: "网页",
 			wallpaperTypeScene: "场景(静态)",
 			wallpaperTypeApp: "不支持",
-			wallpaperTypeImage: "静态图片",
 			wallpaperLoadMore: "加载更多",
 			wallpaperDirs: "手动目录",
-			wallpaperDirsEmpty: "还没有手动目录。",
-			wallpaperDirsHint: "没有 Wallpaper Engine（如 macOS）？把任意 .mp4/.webm 视频、单个壁纸项目文件夹或项目合集文件夹加进来，就是你的壁纸库。",
+			wallpaperDirsEmpty: "还没有目录——添加一个以加载其中的视频。",
+			wallpaperDirsHint: "macOS：选择一个存放 .mp4/.webm 视频的目录（或单个壁纸项目文件夹）。Windows：这里添加的目录会扩展自动检测到的 Wallpaper Engine 壁纸库。",
 			wallpaperDirPlaceholder: "/path/to/wallpapers 或 ~/Movies/wallpapers",
 			wallpaperDirAdd: "添加",
 			wallpaperDirBrowse: "浏览…",
 			wallpaperDirBrowseHint: "通过系统文件管理器（访达 / 资源管理器）选择文件夹",
 			wallpaperDirBrowseFailed: "无法打开系统目录选择框——请手动输入路径",
+			wallpaperDirBrowseTitle: "选择文件夹",
+			wallpaperDirBrowseChoose: "使用此目录",
+			wallpaperDirBrowseEmpty: "没有子目录",
+			wallpaperDirBrowseHidden: "显示隐藏目录",
+			wallpaperDirBrowseTruncated: "目录过多，仅显示开头部分。",
 			wallpaperSaveFailed: "壁纸设置保存失败。",
 			wallpaperRatingAll: "全部",
 			wallpaperRatingG: "G",
@@ -3993,14 +4400,14 @@ window.__ModuleLoader__.load({
 				note: "sidebar new-session action (compat seam shields skins from localized labels)"
 			},
 			{
-				selector: "[data-dsh-taskboard-view], [data-dsh-taskboard-board], [data-dsh-taskboard-entry]",
+				selector: "[data-dsh-taskboard-view], [data-dsh-taskboard-board]",
 				attrs: [["data-dsh-plugin", "task-board"]],
-				note: "task-board panel/board/sidebar entry"
+				note: "task-board panel/board (the sidebar row is shell-owned: its glyph carries data-dsh-panel-entry and the family rule below stamps the row)"
 			},
 			{
-				selector: "[data-dsh-ssh-view], [data-dsh-ssh-entry]",
+				selector: "[data-dsh-ssh-view]",
 				attrs: [["data-dsh-plugin", "ssh"]],
-				note: "ssh panel/sidebar entry"
+				note: "ssh panel (the sidebar row is shell-owned: its glyph carries data-dsh-panel-entry and the family rule below stamps the row)"
 			},
 			{
 				selector: "[data-gitgraph-chip-anchor], [data-gitgraph-dialog]",
@@ -4013,11 +4420,57 @@ window.__ModuleLoader__.load({
 				note: "pet global root"
 			},
 			{
-				selector: "[data-dsh-taskboard-entry], [data-dsh-ssh-entry]",
+				selector: "[class*=\"panelRow\"]:has([data-dsh-panel-entry])",
 				attrs: [["data-dsh-part", "sidebar-entry"]],
-				note: "shared injected sidebar entry rows"
+				note: "a plugin-registered sidebar row (sidebar.panellist): the shell owns the row box and stamps no hook of its own, so the row is recognised by its css-module class plus the glyph identity the registering plugin outputs — same compat technique as newSession"
 			}
 		];
+		/**
+		* The anchors the rule table keys on, as one attribute filter for the
+		* observer: a glyph or row anchor that is SET on an element already in the
+		* tree must re-anchor its ancestors exactly like a newly inserted one.
+		*/
+		const ANCHOR_ATTRIBUTES = [
+			"data-dsh-panel-entry",
+			"data-dsh-surface",
+			"data-dsh-part",
+			"data-dsh-plugin",
+			"data-slot",
+			"data-chat-flow-kind",
+			"data-conversation-scroll",
+			"data-turn-tail",
+			"data-composer-input",
+			"data-queue-dock",
+			"data-rightbar-col",
+			"data-shell-overlay",
+			"data-dsh-taskboard-view",
+			"data-dsh-taskboard-board",
+			"data-dsh-ssh-view",
+			"data-dsh-pet-root",
+			"data-gitgraph-chip-anchor",
+			"data-gitgraph-dialog",
+			"data-decoration",
+			"data-streaming",
+			"data-side",
+			"data-phase"
+		];
+		/**
+		* Safety bound of the ancestor walk, NOT a depth ceiling.
+		*
+		* The walk's normal terminator is the observed root: every node the observer
+		* can report is inside document.body, so the walk returns there (measured —
+		* with this bound removed the walk still stops at body on every delivery).
+		* This constant only fires for a change inside a subtree that is not connected
+		* to the observed root at all, where there is no ancestor to anchor yet and
+		* the node's own childList delivery stamps it once it IS attached.
+		*
+		* It is deliberately far above any real markup depth (the shell's own sidebar
+		* row is three hops deep) instead of a small number that would silently leave
+		* a deeper row unanchored — which is the very defect this walk exists to fix
+		* (issue #1732). A measured sweep anchors through 23 wrapper levels and misses
+		* from 24, i.e. only past the point where the tree is pathological.
+		*/
+		const ANCESTOR_HOPS = 24;
 		function createSemanticAdapter(doc) {
 			const rules = SEMANTIC_RULES_V1.map((rule) => ({
 				rule,
@@ -4061,6 +4514,25 @@ window.__ModuleLoader__.load({
 				for (const live of rules) live.matchedInPass = 0;
 				if (doc.documentElement) applyToTree(doc.documentElement);
 			};
+			/**
+			* Re-anchor one changed node and its ancestor chain.
+			*
+			* applyToTree only walks DOWNWARD: a rule whose selector matches an ancestor
+			* of the changed node (the panel-list row is recognised by the glyph INSIDE
+			* it) is never re-evaluated when that descendant arrives. React mounts the
+			* row first and the registering plugin's glyph a tick later, so without this
+			* the row keeps no anchor at all until something forces a full pass
+			* (issue #1732). The walk is bounded and stops at the document root.
+			*/
+			const reanchorAround = (node) => {
+				const root = doc.body ?? doc.documentElement;
+				let current = node;
+				for (let hop = 0; current !== null && hop <= ANCESTOR_HOPS; hop += 1) {
+					for (const live of rules) if (live.usable) applyRule(live, current);
+					if (current === root || current === doc.documentElement) return;
+					current = current.parentElement;
+				}
+			};
 			return {
 				get running() {
 					return running;
@@ -4071,12 +4543,23 @@ window.__ModuleLoader__.load({
 					fullPass();
 					observer = new doc.defaultView.MutationObserver((records) => {
 						try {
-							for (const record of records) for (const node of Array.from(record.addedNodes)) if (node.nodeType === 1) applyToTree(node);
+							for (const record of records) {
+								for (const node of Array.from(record.addedNodes)) {
+									if (node.nodeType !== 1) continue;
+									const el = node;
+									applyToTree(el);
+									reanchorAround(el.parentElement ?? el);
+								}
+								const target = record.target.nodeType === 1 ? record.target : null;
+								if (target !== null && record.type === "attributes") reanchorAround(target);
+							}
 						} catch {}
 					});
 					observer.observe(doc.body ?? doc.documentElement, {
 						childList: true,
-						subtree: true
+						subtree: true,
+						attributes: true,
+						attributeFilter: [...ANCHOR_ATTRIBUTES]
 					});
 				},
 				stop() {
@@ -4145,11 +4628,24 @@ window.__ModuleLoader__.load({
       opacity: 1 !important;
     }
     ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.input.dock\"] > *")},
-    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] > *")} {
+    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] > *")},
+    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] + *")} {
       /* One skin-driven accessory surface for task and statistics docks. Skins
          automatically follow their existing semantic theme tokens and may
          override the --dsh-composer-accessory-* variables for a stronger
-         signature without coupling this adapter to a specific catalog skin. */
+         signature without coupling this adapter to a specific catalog skin.
+
+         The third head covers an accessory that is a SIBLING of the dock slot
+         host rather than a child of it. The slot host is display: contents, so
+         the shell lays its children out as items of the surrounding dock row
+         and the child heads reach them; 0.1.7's context meter was placed beside
+         that host instead of inside it, so it shared the row with the
+         statistics pill but stayed bare (issue #1715) -- one line, two looks.
+         The adjacent-sibling head keeps the row uniform without naming any
+         hashed class or localized label, and covers whatever future accessory
+         the shell seats next to the dock. The plate lands on the accessory's
+         own seat, never on a trigger inside it, so a component's own hover
+         feedback keeps painting on top. */
       background: var(--dsh-composer-accessory-bg, var(--dsw-specific-tip, var(--dsw-alias-bg-layer-1))) !important;
       color: var(--dsh-composer-accessory-color, var(--dsw-alias-label-tertiary)) !important;
       border: var(--dsh-composer-accessory-border, none) !important;
@@ -4158,7 +4654,11 @@ window.__ModuleLoader__.load({
       backdrop-filter: blur(var(--dsh-composer-accessory-blur, var(--dsh-input-card-blur, 10px))) !important;
       -webkit-backdrop-filter: blur(var(--dsh-composer-accessory-blur, var(--dsh-input-card-blur, 10px))) !important;
     }
-    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] > *")} {
+    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] > *")},
+    ${scoped("[data-phase=\"active\"] [data-slot=\"conversation.composer.dock\"] + *")} {
+      /* Same metrics for a dock child and for the sibling seat beside the dock
+         slot host, so the two accessories of one row end up the same height:
+         the plate must not make one of them look like a different control. */
       margin-top: var(--dsh-composer-accessory-gap, 4px);
       margin-bottom: var(--dsh-composer-accessory-gap, 4px);
       padding-top: 2px;
@@ -4770,6 +5270,7 @@ window.__ModuleLoader__.load({
 			let catalog = null;
 			let diagnostics = [];
 			const listeners = /* @__PURE__ */ new Set();
+			const teardowns = /* @__PURE__ */ new Set();
 			const emit = () => {
 				for (const listener of listeners) listener();
 			};
@@ -4784,6 +5285,10 @@ window.__ModuleLoader__.load({
 			const store = {
 				controller,
 				adapter,
+				doc,
+				window: doc.defaultView ?? window,
+				apiBase,
+				fetchImpl,
 				catalog: () => catalog,
 				diagnostics: () => diagnostics,
 				refreshCatalog,
@@ -4802,6 +5307,9 @@ window.__ModuleLoader__.load({
 					adapter.stop();
 					disposeShellRendering();
 					controller.shutdown();
+					for (const teardown of [...teardowns]) teardown();
+					teardowns.clear();
+					listeners.clear();
 				}
 			};
 			{
@@ -4829,20 +5337,133 @@ window.__ModuleLoader__.load({
 					await controller.switchTo(null, null).catch(() => {});
 				}
 			})();
-			if (typeof doc.defaultView !== "undefined" && doc.defaultView !== null) {
-				const win = doc.defaultView;
-				const onSkinApplied = (e) => {
-					const detail = e.detail;
-					if (detail && typeof detail.id === "string") refreshCatalog().then(async () => {
-						const entry = store.find(detail.id);
-						if (entry !== null) await controller.switchTo(detail.id, entry);
-					});
-				};
-				win.addEventListener("dsh-skin-applied", onSkinApplied);
-				listeners.add(() => win.removeEventListener("dsh-skin-applied", onSkinApplied));
-			}
+			teardowns.add(trackSkinAppliedEvents(store));
 			return store;
 		}
+		/**
+		* Install the skin-applied contract: a window event carrying the applied skin
+		* id makes this page converge on that skin immediately.
+		*
+		* The v1 runtime booted through a full document reload, so any page that
+		* switched the skin could assume the next load picked the new selection up -
+		* the workshop card simply reloaded. The v2 runtime applies in place, so the
+		* page that is already open has to converge on the write, and the workshop
+		* installs the skin files itself. Legacy-bridge pages announce through that
+		* reload event; wiring it here keeps one converge path instead of two.
+		* @param store - the runtime store the event converges.
+		* @param win - the window whose document the runtime owns.
+		* @returns the idempotent listener teardown.
+		*/
+		function trackSkinAppliedEvents(store) {
+			const win = store.window;
+			const onApplied = (event) => {
+				const detail = event.detail;
+				if (detail === null || typeof detail !== "object") return;
+				const id = detail.id;
+				if (typeof id !== "string" || id === "") return;
+				convergeOnSkin(store, id);
+			};
+			win.addEventListener("dsh-skin-applied", onApplied);
+			return () => {
+				win.removeEventListener("dsh-skin-applied", onApplied);
+			};
+		}
+		/** Polling cadence for a selection changed outside this page. */
+		const SELECTION_POLL_MS = 2e3;
+		/** Read the persisted selection; undefined when the endpoint cannot answer. */
+		async function readPersistedSelection(store) {
+			let res;
+			try {
+				res = await store.fetchImpl(`${store.apiBase}/active`);
+			} catch {
+				return;
+			}
+			if (!res.ok) return void 0;
+			let payload;
+			try {
+				payload = await res.json();
+			} catch {
+				return;
+			}
+			if (payload.ok !== true) return void 0;
+			return typeof payload.active === "string" && payload.active !== "" ? payload.active : null;
+		}
+		/**
+		* Converge on the skin the persisted selection names, re-reading the catalog
+		* first when the id is not in the current snapshot (a workshop install lands
+		* after the page read the catalog).
+		*/
+		async function convergeOnSelection(store, id) {
+			if (id !== null && store.find(id) === null) try {
+				await store.refreshCatalog();
+			} catch {}
+			if (id === null) {
+				await store.controller.switchTo(null, null);
+				return;
+			}
+			const entry = store.find(id);
+			if (entry === null) return;
+			await store.controller.switchTo(id, entry);
+		}
+		/** Converge on an announced skin id, re-reading the catalog when it is new. */
+		async function convergeOnSkin(store, id) {
+			await convergeOnSelection(store, id);
+		}
+		/**
+		* Follow the persisted selection while this page is open.
+		*
+		* Applying a skin and saving that choice are one action in the GUI, but the
+		* choice is persisted for the NEXT page load. The conventional route is the
+		* official settings form: it writes the settings row this plugin owns, the
+		* Host applies it, and nothing inside this page is told. That row is seeded
+		* from the skin center's own configuration, so the two are the same choice
+		* written twice, and this page reads it back rather than assuming it owns
+		* every write (issue #1740).
+		*
+		* The poll only reads: it never writes the selection back, it skips a value
+		* already applied, and it stops while the page is hidden.
+		* @param store - the booted runtime store.
+		* @param intervalMs - polling cadence in milliseconds.
+		* @returns the idempotent teardown of the poll.
+		*/
+		function watchPersistedSelection(store, intervalMs = SELECTION_POLL_MS) {
+			let applied;
+			let timer = null;
+			let stopped = false;
+			const tick = async () => {
+				if (stopped) return;
+				const next = await readPersistedSelection(store);
+				if (stopped || next === void 0 || next === applied) return;
+				applied = next;
+				await convergeOnSelection(store, next);
+			};
+			const stopTimer = () => {
+				if (timer !== null) store.window.clearInterval(timer);
+				timer = null;
+			};
+			const startTimer = () => {
+				if (stopped || timer !== null) return;
+				timer = store.window.setInterval(() => {
+					tick();
+				}, intervalMs);
+			};
+			(async () => {
+				applied = await readPersistedSelection(store);
+				if (!stopped) startTimer();
+			})();
+			const onVisibility = () => {
+				if (store.doc.visibilityState === "visible") {
+					startTimer();
+					tick();
+				} else stopTimer();
+			};
+			store.doc.addEventListener("visibilitychange", onVisibility);
+			return () => {
+				stopped = true;
+				stopTimer();
+				store.doc.removeEventListener("visibilitychange", onVisibility);
+			};
+		}
 		//#endregion
 		//#region src/client/preview-coordinator.ts
 		var PreviewCoordinator = class {
@@ -5106,6 +5727,13 @@ window.__ModuleLoader__.load({
 				if (!this.config.applied) throw new Error("custom theme activation was not persisted");
 			}
 			async deactivate() {
+				if (!this.config.applied) {
+					this.previewingValue = false;
+					this.suspended = false;
+					this.syncDom();
+					this.publish();
+					return;
+				}
 				this.config = {
 					...this.config,
 					applied: false
@@ -5114,6 +5742,7 @@ window.__ModuleLoader__.load({
 				this.suspended = false;
 				this.syncDom();
 				this.publish();
+				if (this.scope.getSnapshot().status === "unavailable") return;
 				await this.queueWrite("applied", false);
 				if (this.config.applied) throw new Error("custom theme deactivation was not persisted");
 			}
@@ -5171,6 +5800,19 @@ window.__ModuleLoader__.load({
 				};
 				this.publish();
 			}
+			/**
+			* Identity of the settings section a refused write addressed, for the error a
+			* user sees. It carries the Host's own status and revision — which entry
+			* answered, whether it can be written, and at which revision — and never any
+			* stored configuration value, so a refused save can be diagnosed from the
+			* message alone without exposing what the user configured.
+			* @returns a short diagnostic fragment naming the section and its state.
+			*/
+			sectionState() {
+				const snapshot = this.scope.getSnapshot();
+				const revision = snapshot.revision === void 0 ? "none" : String(snapshot.revision);
+				return `${SKIN_CUSTOM_THEME_NS}: status ${snapshot.status}, writable ${String(snapshot.writable)}, mode ${snapshot.mode}, revision ${revision}`;
+			}
 			queueWrite(field, value) {
 				this.pendingWrites += 1;
 				const pending = new Promise((resolve, reject) => {
@@ -5192,7 +5834,7 @@ window.__ModuleLoader__.load({
 					const write = this.writeQueue.shift();
 					if (write === void 0) break;
 					try {
-						if (!await this.scope.set(write.field, write.value)) throw new Error("the Host did not accept the custom theme setting");
+						if (!await this.scope.set(write.field, write.value)) throw new Error(`the Host did not accept the custom theme setting (${this.sectionState()})`);
 					} catch (error) {
 						settled.push({
 							write,
@@ -5270,6 +5912,59 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/settings-entry-id.ts
+		/** Profile entry id the family aggregate's generated row carries. */
+		const AGGREGATE_ENTRY_ID = "web-ui-skin-center";
+		/**
+		* This package's own declared plugin name, which is also the entry id its
+		* standalone bundle patch row carries (cordis.patch.yml) and the `name` the
+		* plugin exports (src/index.ts). It is the one safe guess when the describe
+		* mirror cannot answer, because it names the row this package itself installs
+		* rather than a row that belongs to a different package.
+		*/
+		const OWN_ENTRY_ID = "ui-skin-center";
+		/**
+		* Profile entry ids this package's rows can be served under: its own standalone
+		* row, the family aggregate's generated row, and the legacy background
+		* namespace a profile that named the row after it still serves. The served
+		* mirror decides which one is real; this list only ranks the candidates.
+		*/
+		const SKIN_CENTER_ENTRY_IDS = [
+			OWN_ENTRY_ID,
+			AGGREGATE_ENTRY_ID,
+			"skin-background"
+		];
+		/**
+		* The entry id of the first skin-center row the Host says it serves, or `null`
+		* when the mirror cannot say. `null` means "unknown", never "none": the mirror
+		* is asynchronous, so an unreadable snapshot is a pre-boot window, not proof
+		* that this package is absent.
+		* @param forms - the shared configuration forms service.
+		* @param candidates - entry ids to look for, in preference order.
+		* @returns the served entry id, or `null` when the mirror cannot answer.
+		*/
+		function servedEntryId(forms, candidates = SKIN_CENTER_ENTRY_IDS) {
+			let served;
+			try {
+				served = forms.describe().getSnapshot().view?.namespaces.map((view) => view.ns);
+			} catch {
+				served = void 0;
+			}
+			if (served === void 0) return null;
+			return candidates.find((id) => served.includes(id)) ?? null;
+		}
+		/**
+		* The entry id to bind, which is this package's OWN row whenever the mirror
+		* cannot name a skin-center row. Addressing another package's row is the #17
+		* failure; addressing this one's own row is safe because an entry that is not
+		* served reports itself `unavailable` instead of silently accepting a write.
+		* @param forms - the shared configuration forms service.
+		* @returns the entry id whose form the plugin should address.
+		*/
+		function boundEntryId(forms) {
+			return servedEntryId(forms) ?? OWN_ENTRY_ID;
+		}
+		//#endregion
 		//#region src/client/telemetry.ts
 		const VISITOR_KEY = "dsh-web-ui-telemetry-visitor";
 		const DAY_KEY_PREFIX = "dsh-web-ui-telemetry-day:";
@@ -5277,7 +5972,7 @@ window.__ModuleLoader__.load({
 		/** The building package's version, when the bundle carries it. */
 		function bakedVersion() {
 			try {
-				return "0.4.2";
+				return "0.4.4";
 			} catch {
 				return;
 			}
@@ -5344,30 +6039,6 @@ window.__ModuleLoader__.load({
 		/** Locale namespace owned by this plugin. */
 		const NS = "skinCenter";
 		/**
-		* Profile entry id the family aggregate's generated row carries.
-		*/
-		const AGGREGATE_ENTRY_ID = "web-ui-skin-center";
-		/**
-		* Profile entry ids this package's two patch rows carry: the aggregate's
-		* generated row and the standalone bundle patch's row (`ui-skin-center`), plus
-		* the legacy background namespace as the last resort.
-		*/
-		const SKIN_CENTER_ENTRY_IDS = [
-			AGGREGATE_ENTRY_ID,
-			"ui-skin-center",
-			SKIN_BACKGROUND_NS
-		];
-		function servedEntryId(forms) {
-			let served;
-			try {
-				served = forms.describe().getSnapshot().view?.namespaces.map((view) => view.ns);
-			} catch {
-				served = void 0;
-			}
-			if (served === void 0) return AGGREGATE_ENTRY_ID;
-			return SKIN_CENTER_ENTRY_IDS.find((id) => served.includes(id)) ?? "skin-background";
-		}
-		/**
 		* The configuration form of this plugin's own profile entry.
 		*
 		* `ctx.configForms` addresses one form per profile entry id and carries no
@@ -5375,9 +6046,15 @@ window.__ModuleLoader__.load({
 		* namespace-to-entry mapping the settings group owns: `skin-background` is
 		* the namespace this package has always owned, and the bridge resolves it to
 		* whichever entry id the profile gave this row. A deployment without the
-		* group serves no such mapping — the family namespace then stands in for the
-		* entry id (a profile that names the row after it serves the same form), and
-		* a page that serves neither reports the form unavailable, which each feature
+		* group serves no such mapping, so the shared forms service is asked which row
+		* it actually serves. Guessing ANOTHER package's entry id is what produced
+		* dsh-skins#17: a standalone install (`ui-skin-center`) bound the aggregate's row
+		* (`web-ui-skin-center`) whenever the describe mirror had not landed yet, and
+		* every `settings.mutate` then addressed an entry the Host does not serve, so
+		* applying and restoring a skin both failed with a rejected write and a
+		* rolled-back switch. The mirror is the only authority on the entry id, so the
+		* one guess that survives an unreadable mirror is this package's OWN row: an
+		* entry that is not served reports itself unavailable, which each feature
 		* already handles by keeping its defaults and reporting a failed save.
 		* @param ctx - client root context.
 		* @returns the entry form carrying every preference family.
@@ -5385,16 +6062,40 @@ window.__ModuleLoader__.load({
 		function bindConfigForm(ctx) {
 			const binder = ctx.get("webUiSettings");
 			if (binder !== void 0 && typeof binder.bind === "function") return binder.bind({ namespace: SKIN_BACKGROUND_NS });
-			return ctx.configForms.get(servedEntryId(ctx.configForms));
+			return ctx.configForms.get(boundEntryId(ctx.configForms));
 		}
-		/** Required services: slots + locale (plugin card), theme (preview toggle), configForms (settings sections), and remote (wallpaper directory picker). */
+		/**
+		* Required services: slots + locale (plugin card), theme (preview toggle),
+		* configForms (settings sections), and the Remote faces the wallpaper feature
+		* calls.
+		*
+		* `remote.directoryPicker` is named explicitly because a generated Remote
+		* namespace is its own Cordis service (`remote.<namespace>`), NOT a property
+		* of `remote`: `ctx.remote.x` is only readable while `remote.x` is injected,
+		* otherwise cordis' context proxy throws
+		* `cannot get property "remote.x" without inject`. `connection` owns the
+		* carrier the namespace service rides on, so it is required first.
+		*
+		* The skin center is mounted inside the dsh-web-all aggregate, whose client
+		* children bring their own nested fiber; naming the namespace here parks this
+		* plugin until the picker namespace is really mounted, which is what makes
+		* `pickDir` available on a Host that serves it (and keeps the browse button
+		* off a deployment that does not).
+		*
+		* Both composed backends register the same namespace, so the namespace's
+		* presence says nothing about which interaction the Host serves: a native
+		* backend opens the OS chooser, a browse backend refuses `pick` and serves
+		* listing primitives instead. The panel decides on the answer, not on
+		* presence (see WallpaperPanel's folder browser).
+		*/
 		const inject = [
 			"slots",
 			"locale",
 			"theme",
 			"configForms",
 			"connection",
-			"remote"
+			"remote",
+			"remote.directoryPicker"
 		];
 		/** Self-report item for the install heartbeat. */
 		const SELF_ITEM = [{ name: "@linxin666/dsh-client-ui-skin-center" }];
@@ -5512,6 +6213,7 @@ window.__ModuleLoader__.load({
 			installBootRestore(wallpaper);
 			const runtime = bootSkinRuntime({ suppressBackgroundMedia: () => wallpaper.enabled() && wallpaper.isDisplaying() });
 			ctx.effect(() => () => runtime.shutdown(), "ui-skin-center: runtime shutdown");
+			ctx.effect(() => watchPersistedSelection(runtime), "ui-skin-center: follow the persisted selection");
 			ctx.effect(() => wallpaper.subscribe(() => {
 				runtime.controller.refresh();
 			}), "ui-skin-center: wallpaper priority refresh");
@@ -5558,8 +6260,9 @@ window.__ModuleLoader__.load({
 					dirs: () => wallpaper.dirs(),
 					addDir: (dir) => wallpaper.addDir(dir),
 					removeDir: (dir) => wallpaper.removeDir(dir),
-					pickDir: async () => {
-						const result = await ctx.remote.directoryPicker.pick();
+					pickDir: async () => mapDirPickResult(await ctx.remote.directoryPicker.pick()),
+					listDir: async (path) => {
+						const result = await ctx.remote.directoryPicker.list(path);
 						if (!result.ok) throw new Error(result.error.message);
 						return result.value;
 					},