@restregular/dsh-powerup 0.2.1 → 0.2.3

package/README.md

@@ -87,7 +87,9 @@ unload the dialog mid-flow. Use **Add plugin** with the new package version.
   `--dsw-elevation-prominent`, and the primary button uses
   `--dsw-alias-button-primary-fill` / `-hover`, so the dialog follows both
   themes instead of inventing its own palette. The registry picker and version
-  list are custom controls built from `--dsw-alias-*` tokens.
+  list are custom controls built from `--dsw-alias-*` tokens; both open as
+  fixed-position popovers anchored to their triggers, so they never grow the
+  dialog or get clipped by its scroll area.
 
 ## Development
 

package/client.js

@@ -44,7 +44,7 @@
 
       const NS = 'dsh-powerup';
       const SETTINGS_KEY = 'dsh-powerup:settings:v1';
-      const VERSION = '0.2.1';
+      const VERSION = '0.2.3';
       const MENU_GAP = 8;
       const MENU_WIDTH = 248;
 
@@ -126,6 +126,8 @@
           'update.versionsFailed': '读取版本失败：{message}',
           'update.versionsEmpty': '安装源没有返回可用版本',
           'update.latest': '最新',
+          'update.currentTag': '当前',
+          'update.currentAndLatest': '当前 · 最新',
           'update.retry': '重试',
           'update.registry': '安装源',
           'update.registryDefault': '默认安装源',
@@ -246,6 +248,8 @@
           'update.versionsFailed': 'Could not read versions: {message}',
           'update.versionsEmpty': 'The registry returned no versions',
           'update.latest': 'latest',
+          'update.currentTag': 'Current',
+          'update.currentAndLatest': 'Current · latest',
           'update.retry': 'Retry',
           'update.registry': 'Registry',
           'update.registryDefault': 'Default registry',
@@ -694,12 +698,18 @@
 .dsh-powerup-update-toggle .chevron{display:inline-flex;color:var(--dsw-alias-label-tertiary);transition:transform .16s ease}
 .dsh-powerup-update-toggle[aria-expanded=true] .chevron{transform:rotate(180deg);color:var(--dsw-alias-label-secondary)}
 .dsh-powerup-update-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg,10px);background:var(--dsw-alias-bg-layer-1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2)}
+.dsh-powerup-update-popover{position:fixed;z-index:1300;box-sizing:border-box;overflow-y:auto;pointer-events:auto;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg,10px);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2)}
+.dsh-powerup-update-popover.dsh-powerup-update-list{border-radius:var(--dsw-radius-lg,10px)}
+.dsh-powerup-update-popover.dsh-powerup-update-select-menu{display:flex;flex-direction:column;padding:4px}
 .dsh-powerup-update-list-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
 .dsh-powerup-update-version{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:0 12px;border:0;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:12.5px;line-height:18px;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
+.dsh-powerup-update-version>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dsh-powerup-update-version:hover{background:var(--dsw-alias-interactive-bg-hover)}
 .dsh-powerup-update-version[aria-selected=true]{background:var(--dsw-alias-interactive-bg-active)}
-.dsh-powerup-update-trailing{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
-.dsh-powerup-update-tag{padding:0 6px;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;background:transparent;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:16px}
+.dsh-powerup-update-version[data-current]{box-shadow:inset 2px 0 0 var(--dsw-alias-state-business-primary)}
+.dsh-powerup-update-trailing{display:inline-flex;flex:none;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
+.dsh-powerup-update-tag{padding:0 6px;border:.5px solid var(--dsw-alias-border-l2);border-radius:999px;background:transparent;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:16px;white-space:nowrap}
+.dsh-powerup-update-tag.is-current{border-color:color-mix(in srgb,var(--dsw-alias-state-business-primary) 38%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 8%,transparent);color:var(--dsw-alias-state-business-primary)}
 .dsh-powerup-update-check{display:inline-flex;color:var(--dsw-alias-state-business-primary)}
 .dsh-powerup-update-status{display:flex;align-items:center;gap:10px;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px}
 .dsh-powerup-update-spinner{flex:none;width:14px;height:14px;border:2px solid color-mix(in srgb,var(--dsw-alias-state-business-primary) 24%,transparent);border-top-color:var(--dsw-alias-state-business-primary);border-radius:50%;animation:dsh-powerup-spin .8s linear infinite}
@@ -1342,6 +1352,24 @@
         return list.sort(compareVersionsDesc);
       }
 
+      /**
+       * Which status a version row carries. The installed and the latest
+       * version can be the same; that row gets one combined tag instead of two
+       * chips sharing the trailing space.
+       * @param {string} version
+       * @param {string | null | undefined} current
+       * @param {string | null | undefined} latest
+       * @returns {'current-latest' | 'current' | 'latest' | null}
+       */
+      function versionTagKind(version, current, latest) {
+        const isCurrent = typeof current === 'string' && current !== '' && version === current;
+        const isLatest = typeof latest === 'string' && latest !== '' && version === latest;
+        if (isCurrent && isLatest) return 'current-latest';
+        if (isCurrent) return 'current';
+        if (isLatest) return 'latest';
+        return null;
+      }
+
       /**
        * Read the versions the registry publishes for one package. The
        * abbreviated metadata keeps the response small; both npm and npmmirror
@@ -1477,6 +1505,33 @@
         for (const button of [...buttons]) if (button.isConnected !== true) buttons.delete(button);
       }
 
+      /**
+       * Place a floating panel under an anchor, flipping above when the space
+       * below is short, and clamp it to the viewport.
+       * @param {{ getBoundingClientRect: () => DOMRect }} anchor
+       * @param {number} minWidth
+       * @param {number} preferredHeight
+       * @returns {{ left: number, width: number, top?: number, bottom?: number, maxHeight: number }}
+       */
+      function popoverPlacement(anchor, minWidth, preferredHeight) {
+        const rect = anchor.getBoundingClientRect();
+        const gap = 6;
+        const margin = 12;
+        const viewportWidth = typeof window === 'undefined' ? 1280 : window.innerWidth;
+        const viewportHeight = typeof window === 'undefined' ? 900 : window.innerHeight;
+        const width = Math.min(Math.max(rect.width, minWidth), Math.max(200, viewportWidth - margin * 2));
+        const left = Math.min(Math.max(margin, rect.left), Math.max(margin, viewportWidth - width - margin));
+        const spaceBelow = viewportHeight - rect.bottom - margin - gap;
+        const spaceAbove = rect.top - margin - gap;
+        const above = spaceBelow < Math.min(preferredHeight, 180) && spaceAbove > spaceBelow;
+        return {
+          left,
+          width,
+          ...(above ? { bottom: viewportHeight - rect.top + gap } : { top: rect.bottom + gap }),
+          maxHeight: Math.max(120, Math.min(preferredHeight, above ? spaceAbove : spaceBelow)),
+        };
+      }
+
       /**
        * The Plugins-page update control. It injects one icon button into each
        * third-party card of the built-in "Installed plugins" group, then owns
@@ -1491,7 +1546,10 @@
         const abortRef = useRef(null);
         const buttonsRef = useRef(new Set());
         const inputRef = useRef(null);
+        const versionRef = useRef(null);
+        const versionPanelRef = useRef(null);
         const registryRef = useRef(null);
+        const registryPanelRef = useRef(null);
         const versionSeq = useRef(0);
         const tRef = useRef((key, params) => translateCurrent(key, params));
         tRef.current = (key, params) => translateCurrent(key, params);
@@ -1523,6 +1581,17 @@
           setView(null);
         }, [view]);
 
+        /** Dismiss both floating panels without touching the dialog. */
+        const closePopovers = useCallback(() => {
+          setView((current) => current === null ? current : {
+            ...current,
+            listOpen: false,
+            listPopover: null,
+            registryOpen: false,
+            registryPopover: null,
+          });
+        }, []);
+
         const loadVersions = useCallback(async (token, name, choice, choices, resetVersion) => {
           const t = tRef.current;
           const seq = versionSeq.current + 1;
@@ -1581,8 +1650,10 @@
             versionsError: null,
             versionsRegistry: null,
             version: '',
-            listOpen: true,
+            listOpen: false,
+            listPopover: null,
             registryOpen: false,
+            registryPopover: null,
             error: null,
             formError: null,
             log: '',
@@ -1675,19 +1746,18 @@
           }
         }, [view === null ? null : view.phase]);
 
-        // Escape closes the innermost popover first: registry menu, then the
-        // version list, then the dialog itself.
+        // Escape closes the innermost floating panel first, then the dialog.
         useEffect(() => {
           if (view === null) return undefined;
           const onKeyDown = (event) => {
             if (event.key !== 'Escape') return;
             event.stopPropagation();
             if (view.registryOpen === true) {
-              setView((current) => current === null ? current : { ...current, registryOpen: false });
+              setView((current) => current === null ? current : { ...current, registryOpen: false, registryPopover: null });
               return;
             }
             if (view.phase === 'choose' && view.listOpen === true) {
-              setView((current) => current === null ? current : { ...current, listOpen: false });
+              setView((current) => current === null ? current : { ...current, listOpen: false, listPopover: null });
               return;
             }
             close();
@@ -1696,17 +1766,42 @@
           return () => document.removeEventListener('keydown', onKeyDown, true);
         }, [view, close]);
 
-        // A click outside the custom registry select closes only its menu.
+        // Clicking outside the open floating panel and its trigger dismisses it.
         useEffect(() => {
-          if (view === null || view.registryOpen !== true) return undefined;
+          if (view === null || (view.registryOpen !== true && view.listOpen !== true)) return undefined;
           const onPointerDown = (event) => {
-            const root = registryRef.current;
-            if (root !== null && event.target instanceof Node && root.contains(event.target)) return;
-            setView((current) => current === null ? current : { ...current, registryOpen: false });
+            const target = event.target;
+            if (!(target instanceof Node)) return;
+            const inside = [versionRef.current, versionPanelRef.current, registryRef.current, registryPanelRef.current]
+              .some((root) => root !== null && root.contains(target));
+            if (inside) return;
+            closePopovers();
           };
           document.addEventListener('pointerdown', onPointerDown, true);
           return () => document.removeEventListener('pointerdown', onPointerDown, true);
-        }, [view === null ? null : view.registryOpen]);
+        }, [view === null ? null : `${String(view.registryOpen)}:${String(view.listOpen)}`, closePopovers]);
+
+        // Scrolling the dialog or the page would leave a fixed panel behind;
+        // dismiss it instead. Scrolling inside the panel itself is allowed.
+        useEffect(() => {
+          if (view === null || (view.registryOpen !== true && view.listOpen !== true)) return undefined;
+          const onScroll = (event) => {
+            const target = event.target;
+            if (target instanceof Node) {
+              const insidePanel = [versionPanelRef.current, registryPanelRef.current]
+                .some((panel) => panel !== null && panel.contains(target));
+              if (insidePanel) return;
+            }
+            closePopovers();
+          };
+          const onResize = () => closePopovers();
+          document.addEventListener('scroll', onScroll, true);
+          window.addEventListener('resize', onResize);
+          return () => {
+            document.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onResize);
+          };
+        }, [view === null ? null : `${String(view.registryOpen)}:${String(view.listOpen)}`, closePopovers]);
 
         // Show pnpm output while an installation runs.
         useEffect(() => {
@@ -1731,7 +1826,7 @@
 
         const chooseVersion = (version) => {
           if (tokenRef.current === null) return;
-          setView((current) => current === null ? current : { ...current, version, listOpen: false, formError: null });
+          setView((current) => current === null ? current : { ...current, version, listOpen: false, listPopover: null, formError: null });
         };
 
         const chooseRegistry = (key) => {
@@ -1741,10 +1836,48 @@
           if (current === null) return;
           const choice = current.choices.find((item) => item.key === key);
           if (choice === undefined) return;
-          setView((state) => state === null ? state : { ...state, registryKey: key, registryOpen: false, formError: null });
+          setView((state) => state === null ? state : { ...state, registryKey: key, registryOpen: false, registryPopover: null, formError: null });
           loadVersions(token, current.name, choice, current.choices, true);
         };
 
+        /** Open or close the floating version list under the input row. */
+        const toggleVersionList = () => {
+          const current = view;
+          if (current === null || current.phase !== 'choose') return;
+          if (current.listOpen === true) {
+            setView((state) => state === null ? state : { ...state, listOpen: false, listPopover: null });
+            return;
+          }
+          const anchor = versionRef.current;
+          const popover = anchor === null ? null : popoverPlacement(anchor, 280, 260);
+          setView((state) => state === null ? state : {
+            ...state,
+            listOpen: true,
+            listPopover: popover,
+            registryOpen: false,
+            registryPopover: null,
+          });
+        };
+
+        /** Open or close the floating registry menu under its trigger. */
+        const toggleRegistry = () => {
+          const current = view;
+          if (current === null || current.phase !== 'choose') return;
+          if (current.registryOpen === true) {
+            setView((state) => state === null ? state : { ...state, registryOpen: false, registryPopover: null });
+            return;
+          }
+          const anchor = registryRef.current;
+          const popover = anchor === null ? null : popoverPlacement(anchor, 280, 220);
+          setView((state) => state === null ? state : {
+            ...state,
+            registryOpen: true,
+            registryPopover: popover,
+            listOpen: false,
+            listPopover: null,
+          });
+        };
+
         const startUpdate = async () => {
           const token = tokenRef.current;
           const current = view;
@@ -1907,6 +2040,61 @@
 
         const currentChoice = view.choices.find((item) => item.key === view.registryKey) ?? view.choices[0];
 
+        /** Rows of the floating version list, including its loading/error states. */
+        const versionRows = (() => {
+          if (view.versionsState === 'loading') {
+            return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
+              h('div', { className: 'dsh-powerup-update-status' },
+                h('span', { className: 'dsh-powerup-update-spinner', 'aria-hidden': 'true' }),
+                t('update.loadingVersions'),
+              ),
+            )];
+          }
+          if (view.versionsState === 'error') {
+            return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
+              notice('error', h(WarnIcon, { size: 14 }), null, t('update.versionsFailed', { message: view.versionsError ?? '' })),
+              h('button', {
+                type: 'button',
+                className: 'dsh-powerup-update-ghost',
+                onClick: () => loadVersions(tokenRef.current, view.name, currentChoice, view.choices, false),
+              }, t('update.retry')),
+            )];
+          }
+          if ((view.versions ?? []).length === 0) {
+            return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
+              h('p', { className: 'dsh-powerup-update-note' }, t('update.versionsEmpty')),
+            )];
+          }
+          return [
+            h('div', { key: 'head', className: 'dsh-powerup-update-list-head' },
+              h('span', null, t('update.versionsCount', { count: view.versions.length })),
+              view.versionsRegistry === null || view.versionsRegistry === undefined
+                ? null
+                : h('span', { title: view.versionsRegistry.hint }, view.versionsRegistry.hint),
+            ),
+            ...view.versions.map((version) => {
+              const tagKind = versionTagKind(version, view.currentVersion, view.latest);
+              return h('button', {
+                key: version,
+                type: 'button',
+                role: 'option',
+                className: 'dsh-powerup-update-version',
+                'aria-selected': version === view.version ? 'true' : 'false',
+                'data-current': version === view.currentVersion ? '' : undefined,
+                onClick: () => chooseVersion(version),
+              },
+              h('span', null, version),
+              h('span', { className: 'dsh-powerup-update-trailing' },
+                tagKind === null ? null : h('span', {
+                  className: `dsh-powerup-update-tag${tagKind === 'latest' ? '' : ' is-current'}`,
+                }, t(tagKind === 'current-latest' ? 'update.currentAndLatest' : tagKind === 'current' ? 'update.currentTag' : 'update.latest')),
+                version === view.version ? h('span', { className: 'dsh-powerup-update-check' }, h(CheckIcon, { size: 13 })) : null,
+              ),
+              );
+            }),
+          ];
+        })();
+
         const body = (() => {
           if (view.phase === 'loading') {
             return h('div', { className: 'dsh-powerup-update-status' },
@@ -1921,53 +2109,6 @@
             return notice('error', h(WarnIcon, { size: 15 }), t('update.unsupportedTitle'), view.error ?? t('update.notRemovable'));
           }
           if (view.phase === 'choose') {
-            const rows = (() => {
-              if (view.versionsState === 'loading') {
-                return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
-                  h('div', { className: 'dsh-powerup-update-status' },
-                    h('span', { className: 'dsh-powerup-update-spinner', 'aria-hidden': 'true' }),
-                    t('update.loadingVersions'),
-                  ),
-                )];
-              }
-              if (view.versionsState === 'error') {
-                return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
-                  notice('error', h(WarnIcon, { size: 14 }), null, t('update.versionsFailed', { message: view.versionsError ?? '' })),
-                  h('button', {
-                    type: 'button',
-                    className: 'dsh-powerup-update-ghost',
-                    onClick: () => loadVersions(tokenRef.current, view.name, currentChoice, view.choices, false),
-                  }, t('update.retry')),
-                )];
-              }
-              if ((view.versions ?? []).length === 0) {
-                return [h('div', { key: 'state', className: 'dsh-powerup-update-list-state' },
-                  h('p', { className: 'dsh-powerup-update-note' }, t('update.versionsEmpty')),
-                )];
-              }
-              return [
-                h('div', { key: 'head', className: 'dsh-powerup-update-list-head' },
-                  h('span', null, t('update.versionsCount', { count: view.versions.length })),
-                  view.versionsRegistry === null || view.versionsRegistry === undefined
-                    ? null
-                    : h('span', { title: view.versionsRegistry.hint }, view.versionsRegistry.hint),
-                ),
-                ...view.versions.map((version) => h('button', {
-                  key: version,
-                  type: 'button',
-                  role: 'option',
-                  className: 'dsh-powerup-update-version',
-                  'aria-selected': version === view.version ? 'true' : 'false',
-                  onClick: () => chooseVersion(version),
-                },
-                h('span', null, version),
-                h('span', { className: 'dsh-powerup-update-trailing' },
-                  version === view.latest ? h('span', { className: 'dsh-powerup-update-tag' }, t('update.latest')) : null,
-                  version === view.version ? h('span', { className: 'dsh-powerup-update-check' }, h(CheckIcon, { size: 13 })) : null,
-                ),
-                )),
-              ];
-            })();
             return [
               h('div', { key: 'summary', className: 'dsh-powerup-update-summary' },
                 h('div', { className: 'dsh-powerup-update-now' },
@@ -1979,7 +2120,7 @@
               ),
               h('div', { key: 'version', className: 'dsh-powerup-update-field' },
                 h('label', { className: 'dsh-powerup-update-label', htmlFor: 'dsh-powerup-update-version' }, t('update.versionLabel')),
-                h('div', { className: 'dsh-powerup-update-row' },
+                h('div', { className: 'dsh-powerup-update-row', ref: versionRef },
                   h('input', {
                     id: 'dsh-powerup-update-version',
                     ref: inputRef,
@@ -1999,7 +2140,7 @@
                     className: 'dsh-powerup-update-toggle',
                     'aria-expanded': showVersions ? 'true' : 'false',
                     'aria-controls': 'dsh-powerup-update-versions',
-                    onClick: () => setView((current) => current === null ? current : { ...current, listOpen: !(current.listOpen === true) }),
+                    onClick: toggleVersionList,
                   },
                   showVersions ? t('update.hideVersions') : t('update.chooseVersion'),
                   h('span', { className: 'chevron' }, h(ChevronDownIcon, { size: 12 })),
@@ -2009,7 +2150,6 @@
                   ? null
                   : notice('error', h(WarnIcon, { size: 14 }), null, view.formError),
               ),
-              showVersions ? h('div', { key: 'versions', id: 'dsh-powerup-update-versions', className: 'dsh-powerup-update-list', role: 'listbox', 'aria-label': t('update.versionLabel') }, rows) : null,
               h('div', { key: 'registry', className: 'dsh-powerup-update-field' },
                 h('span', { className: 'dsh-powerup-update-label' }, t('update.registry')),
                 h('div', { className: 'dsh-powerup-update-select', ref: registryRef },
@@ -2018,27 +2158,12 @@
                     className: 'dsh-powerup-update-select-trigger',
                     'aria-haspopup': 'listbox',
                     'aria-expanded': view.registryOpen === true ? 'true' : 'false',
-                    onClick: () => setView((current) => current === null ? current : { ...current, registryOpen: !(current.registryOpen === true) }),
+                    onClick: toggleRegistry,
                   },
                   h('span', { className: 'dsh-powerup-update-select-value' }, currentChoice?.label ?? ''),
                   h('span', { className: 'dsh-powerup-update-select-host' }, currentChoice?.hint ?? ''),
                   h('span', { className: 'chevron' }, h(ChevronDownIcon, { size: 12 })),
                   ),
-                  view.registryOpen === true ? h('div', { className: 'dsh-powerup-update-select-menu', role: 'listbox', 'aria-label': t('update.registry') },
-                    view.choices.map((choice) => h('button', {
-                      key: choice.key,
-                      type: 'button',
-                      role: 'option',
-                      className: 'dsh-powerup-update-option',
-                      'aria-selected': choice.key === view.registryKey ? 'true' : 'false',
-                      onClick: () => chooseRegistry(choice.key),
-                    },
-                    h('span', { className: 'dsh-powerup-update-option-copy' },
-                      h('span', { className: 'dsh-powerup-update-option-title' }, choice.label),
-                      h('span', { className: 'dsh-powerup-update-option-host' }, choice.hint),
-                    ),
-                    choice.key === view.registryKey ? h('span', { className: 'dsh-powerup-update-check' }, h(CheckIcon, { size: 13 })) : null,
-                    ))) : null,
                 ),
                 view.versionsRegistry === null || view.versionsRegistry === undefined
                   ? null
@@ -2121,28 +2246,64 @@
           return null;
         })();
 
-        return h('div', {
-          className: 'dsh-powerup-update-mask',
-          onMouseDown: (event) => {
-            if (event.target === event.currentTarget) close();
+        const fallbackPopover = { left: 24, top: 120, width: 320, maxHeight: 260 };
+
+        return h(React.Fragment, null,
+          h('div', {
+            className: 'dsh-powerup-update-mask',
+            onMouseDown: (event) => {
+              if (event.target === event.currentTarget) close();
+            },
           },
-        },
-        h('div', {
-          className: 'dsh-powerup-update-dialog',
-          role: 'dialog',
-          'aria-modal': 'true',
-          'aria-labelledby': 'dsh-powerup-update-title',
-        },
-        h('div', { className: 'dsh-powerup-update-head' },
-          h('div', { className: 'dsh-powerup-update-heading' },
-            h('h2', { id: 'dsh-powerup-update-title' }, t('update.title')),
-            h('p', { title }, title),
+          h('div', {
+            className: 'dsh-powerup-update-dialog',
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-labelledby': 'dsh-powerup-update-title',
+          },
+          h('div', { className: 'dsh-powerup-update-head' },
+            h('div', { className: 'dsh-powerup-update-heading' },
+              h('h2', { id: 'dsh-powerup-update-title' }, t('update.title')),
+              h('p', { title }, title),
+            ),
+            canClose ? h('button', { type: 'button', className: 'dsh-powerup-update-close', 'aria-label': t('update.close'), onClick: close }, '×') : null,
           ),
-          canClose ? h('button', { type: 'button', className: 'dsh-powerup-update-close', 'aria-label': t('update.close'), onClick: close }, '×') : null,
-        ),
-        h('div', { className: 'dsh-powerup-update-body' }, body),
-        footer.length === 0 ? null : h('div', { className: 'dsh-powerup-update-foot' }, footer),
-        ),
+          h('div', { className: 'dsh-powerup-update-body' }, body),
+          footer.length === 0 ? null : h('div', { className: 'dsh-powerup-update-foot' }, footer),
+          ),
+          ),
+          view.listOpen === true
+            ? h('div', {
+              id: 'dsh-powerup-update-versions',
+              ref: versionPanelRef,
+              className: 'dsh-powerup-update-popover dsh-powerup-update-list',
+              role: 'listbox',
+              'aria-label': t('update.versionLabel'),
+              style: view.listPopover ?? fallbackPopover,
+            }, versionRows)
+            : null,
+          view.registryOpen === true
+            ? h('div', {
+              ref: registryPanelRef,
+              className: 'dsh-powerup-update-popover dsh-powerup-update-select-menu',
+              role: 'listbox',
+              'aria-label': t('update.registry'),
+              style: view.registryPopover ?? fallbackPopover,
+            }, view.choices.map((choice) => h('button', {
+              key: choice.key,
+              type: 'button',
+              role: 'option',
+              className: 'dsh-powerup-update-option',
+              'aria-selected': choice.key === view.registryKey ? 'true' : 'false',
+              onClick: () => chooseRegistry(choice.key),
+            },
+            h('span', { className: 'dsh-powerup-update-option-copy' },
+              h('span', { className: 'dsh-powerup-update-option-title' }, choice.label),
+              h('span', { className: 'dsh-powerup-update-option-host' }, choice.hint),
+            ),
+            choice.key === view.registryKey ? h('span', { className: 'dsh-powerup-update-check' }, h(CheckIcon, { size: 13 })) : null,
+            )))
+            : null,
         );
       }
 
@@ -2517,6 +2678,7 @@
           PluginUpdateOverlay,
           ensureUpdateButtons,
           updateButtonLabel,
+          popoverPlacement,
           rowKeyParts,
           resolveForkSeq,
           markdownQuote,
@@ -2524,6 +2686,7 @@
           buildRowItems,
           buildSessionItems,
           sortVersions,
+          versionTagKind,
           compareVersionsDesc,
           buildRegistryChoices,
           pickRegistryChoice,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@restregular/dsh-powerup",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Power-Up — small, opt-in upgrades for DeepSeek Harness. Adds a right-click action menu to the Trajectory ledger and an update control for third-party plugins installed from the Plugins page, with version lookup, uninstall-and-reinstall through the Add plugin path, and an optional DSH restart. · 为 DeepSeek Harness 提供小型增强：在轨迹页面右键记录即可复制、引用、查看详情或从该记录 Fork；并在插件页为第三方已安装插件提供带版本查询的更新按钮，沿用「添加插件」的安装流程，并可重启 DSH 使更改生效。",
   "icon": "./icon.svg",
   "type": "module",