@michengai/dsh-automation 0.1.1 → 0.1.2

package/docs/00-/344/272/244/346/216/245/345/205/245/345/217/243/02-/345/275/223/345/211/215/347/212/266/346/200/201.md

@@ -1,9 +1,9 @@
 # 当前状态
 
-更新时间：2026-08-17 21:04（Asia/Shanghai）
+更新时间：2026-08-18 08:40（Asia/Shanghai）
 
-- 阶段：I001 任务自动化插件首版实现，已补原生侧栏「定时」页签。
+- 阶段：I001 任务自动化插件首版已发布 0.1.1，本地待发布 0.1.2 菜单互斥修复。
 - 活动迭代：[I001-任务自动化插件](..\01-当前工作\I001-任务自动化插件\00-迭代总览.md)
 - 有效风险：
   - Host 未运行时不会补跑历史 backlog。
-  - 无人值守工具 allowlist 无法覆盖全部第三方 DSH tool。
+  - 无人值守工具 allowlist 无法覆盖全部第三方 DSH tool。

package/docs/01-/345/275/223/345/211/215/345/267/245/344/275/234/I001-/344/273/273/345/212/241/350/207/252/345/212/250/345/214/226/346/217/222/344/273/266/00-/350/277/255/344/273/243/346/200/273/350/247/210.md

@@ -3,7 +3,7 @@
 - 状态：进行中
 - 负责人：维护者
 - 优先级：高
-- 更新时间：2026-08-17 21:04（Asia/Shanghai）
+- 更新时间：2026-08-18 08:40（Asia/Shanghai）
 
 ## 目标与业务边界
 
@@ -40,9 +40,10 @@
 
 ## 关联提交
 
-尚未发布提交。
+本地菜单互斥修复待随 0.1.2 发布。
 
 ## 阅读顺序
 
 1. [项目概览](..\..\00-交接入口\01-项目概览.md)
 2. [调度与执行模型](..\..\03-技术架构\01-调度与执行模型.md)
+

package/lib/client.js

@@ -1873,6 +1873,49 @@ function isForeignSidebarHost(component) {
 
 // src/client/native-session-list.tsx
 var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/client/native-session-menu.ts
+function resolveEventElement(target) {
+  if (target == null || typeof target !== "object") return null;
+  const node = target;
+  if (node.nodeType === 3 || node.nodeType === 8) {
+    return node.parentElement ?? null;
+  }
+  return node;
+}
+function shouldCloseNativeSessionMenu(target, keepInside) {
+  const el = resolveEventElement(target);
+  if (el == null) return true;
+  return !keepInside.some((root) => {
+    if (root == null || typeof root !== "object") return false;
+    if (root === el) return true;
+    const box = root;
+    return typeof box.contains === "function" && box.contains(el);
+  });
+}
+function nextOpenSessionMenuId(current, clicked) {
+  return current === clicked ? null : clicked;
+}
+function nativeSessionMenuStyle(box, viewportWidth) {
+  return {
+    position: "fixed",
+    zIndex: 1200,
+    top: `${Math.round(box.bottom + 4)}px`,
+    right: `${Math.max(8, Math.round(viewportWidth - box.right))}px`
+  };
+}
+function relativeTime(value) {
+  const ts = Date.parse(value || "");
+  if (!Number.isFinite(ts)) return "";
+  const delta = Math.max(0, Date.now() - ts);
+  const min = Math.floor(delta / 6e4);
+  if (min < 1) return "\u521A\u521A";
+  if (min < 60) return String(min) + "\u5206\u949F";
+  const hour = Math.floor(min / 60);
+  if (hour < 24) return String(hour) + "\u5C0F\u65F6";
+  return String(Math.floor(hour / 24)) + "\u5929";
+}
 
 // src/run-title.ts
 function formatRunStamp(iso) {
@@ -2050,17 +2093,6 @@ function pickWrappableWorkspacesEntry(entries) {
 // src/client/native-session-list.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var EMPTY_SESSION_BY_ID = {};
-function relativeTime(value) {
-  const ts = Date.parse(value || "");
-  if (!Number.isFinite(ts)) return "";
-  const delta = Math.max(0, Date.now() - ts);
-  const min = Math.floor(delta / 6e4);
-  if (min < 1) return "\u521A\u521A";
-  if (min < 60) return String(min) + "\u5206\u949F";
-  const hour = Math.floor(min / 60);
-  if (hour < 24) return String(hour) + "\u5C0F\u65F6";
-  return String(Math.floor(hour / 24)) + "\u5929";
-}
 function NativeScheduleSessionList(props) {
   const { t, runtime, openSession, useSessions, useWorkspaces, renameSession, archiveSession, deleteSession, forkSession } = props;
   const state = (0, import_react4.useSyncExternalStore)(runtime.source.subscribe, runtime.source.getSnapshot, runtime.source.getSnapshot);
@@ -2068,6 +2100,7 @@ function NativeScheduleSessionList(props) {
   const sessionById = useSessions ? useSessions((snap) => snap?.byId ?? EMPTY_SESSION_BY_ID) : EMPTY_SESSION_BY_ID;
   const archivedIds = useWorkspaces ? useWorkspaces((snap) => snap?.archivedSessionIds ?? []) : [];
   const [folded, setFolded] = (0, import_react4.useState)({});
+  const [openMenuId, setOpenMenuId] = (0, import_react4.useState)(null);
   (0, import_react4.useEffect)(() => {
     void runtime.refresh().catch(() => void 0);
     const timer = window.setInterval(() => {
@@ -2112,6 +2145,7 @@ function NativeScheduleSessionList(props) {
               "aria-label": t("session.deleteFolder"),
               onClick: (event) => {
                 event.stopPropagation();
+                setOpenMenuId(null);
                 void (async () => {
                   for (const session of group.sessions) {
                     try {
@@ -2135,7 +2169,11 @@ function NativeScheduleSessionList(props) {
             updatedAt: session.updatedAt,
             running: session.running,
             selected: selectedId === session.id,
+            menuOpen: openMenuId === session.id,
+            onToggleMenu: () => setOpenMenuId((current) => nextOpenSessionMenuId(current, session.id)),
+            onCloseMenu: () => setOpenMenuId((current) => current === session.id ? null : current),
             onOpen: () => {
+              setOpenMenuId(null);
               openSession?.(session.id);
               void runtime.adoptSession?.(session.id).catch(() => void 0);
             },
@@ -2157,31 +2195,52 @@ function NativeScheduleSessionList(props) {
   ] }) });
 }
 function NativeSessionRow(props) {
-  const { t, id, title, updatedAt, running, selected, onOpen, onDelete, renameSession, archiveSession, forkSession } = props;
-  const [menu, setMenu] = (0, import_react4.useState)(false);
+  const { t, id, title, updatedAt, running, selected, menuOpen, onToggleMenu, onCloseMenu, onOpen, onDelete, renameSession, archiveSession, forkSession } = props;
+  const rowRef = (0, import_react4.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
   const [renaming, setRenaming] = (0, import_react4.useState)(false);
   const [draft, setDraft] = (0, import_react4.useState)(title);
+  const [menuStyle, setMenuStyle] = (0, import_react4.useState)({});
   (0, import_react4.useEffect)(() => {
     setDraft(title);
   }, [title]);
   (0, import_react4.useEffect)(() => {
-    if (!menu) return;
+    if (!menuOpen) return;
     const close = (event) => {
-      const target = event.target;
-      if (target !== null && event.target.closest(".dsh-st-n-sess.is-menu") !== null) return;
-      setMenu(false);
+      if (!shouldCloseNativeSessionMenu(event.target, [rowRef.current, menuRef.current])) return;
+      onCloseMenu();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") onCloseMenu();
     };
     document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onKey);
     return () => {
       document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onKey);
     };
-  }, [menu]);
+  }, [menuOpen, onCloseMenu]);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (!menuOpen) return;
+    const update = () => {
+      const box = rowRef.current?.getBoundingClientRect();
+      if (box === void 0) return;
+      setMenuStyle(nativeSessionMenuStyle(box, window.innerWidth));
+    };
+    update();
+    window.addEventListener("resize", update);
+    document.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      document.removeEventListener("scroll", update, true);
+    };
+  }, [menuOpen]);
   const run = (action) => {
     void Promise.resolve(action()).catch(() => void 0);
   };
-  const rowClass = "dsh-st-n-sess" + (selected ? " is-on" : "") + (menu ? " is-menu" : "");
+  const rowClass = "dsh-st-n-sess" + (selected ? " is-on" : "") + (menuOpen ? " is-menu" : "");
   if (renaming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: rowClass, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { className: "dsh-st-n-rename", value: draft, autoFocus: true, "aria-label": t("session.rename"), onChange: (event) => setDraft(event.target.value), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: rowClass, ref: rowRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { className: "dsh-st-n-rename", value: draft, autoFocus: true, "aria-label": t("session.rename"), onChange: (event) => setDraft(event.target.value), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         setRenaming(false);
@@ -2205,7 +2264,17 @@ function NativeSessionRow(props) {
     { id: "archive", label: t("session.archive"), icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArchiveIcon, { width: 16, height: 16 }), go: () => run(() => archiveSession?.(id)) },
     { id: "delete", label: t("session.delete"), icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrashIcon, { width: 16, height: 16 }), danger: true, go: () => run(() => onDelete()) }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: rowClass, role: "treeitem", tabIndex: 0, "aria-selected": selected, onClick: onOpen, onKeyDown: (event) => {
+  const menu = menuOpen && typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: menuRef, className: "dsh-st-n-menu is-float", "data-n-menu": id, style: menuStyle, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: item.danger === true ? "danger" : void 0, onClick: () => {
+      onCloseMenu();
+      item.go();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-mi", children: item.icon }),
+      item.label
+    ] }, item.id)) }),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: rowClass, ref: rowRef, role: "treeitem", tabIndex: 0, "aria-selected": selected, "data-n-menu-root": id, onClick: onOpen, onKeyDown: (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       onOpen();
@@ -2213,22 +2282,16 @@ function NativeSessionRow(props) {
   }, onContextMenu: (event) => {
     event.preventDefault();
     event.stopPropagation();
-    setMenu((open) => !open);
+    onToggleMenu();
   }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-slot", children: running ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RunningStateDot, {}) : null }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-title", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-time", children: relativeTime(updatedAt) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-acts", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "dsh-st-n-ico", "aria-label": title + " \u66F4\u591A", onClick: (event) => {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-acts", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "dsh-st-n-ico", "aria-label": title + " \u66F4\u591A", onMouseDown: (event) => event.stopPropagation(), onClick: (event) => {
       event.stopPropagation();
-      setMenu((open) => !open);
+      onToggleMenu();
     }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EllipsisIcon, { width: 16, height: 16 }) }) }),
-    menu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-st-n-menu", onClick: (event) => event.stopPropagation(), children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: item.danger === true ? "danger" : void 0, onClick: () => {
-      setMenu(false);
-      item.go();
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-st-n-mi", children: item.icon }),
-      item.label
-    ] }, item.id)) })
+    menu
   ] });
 }
 
@@ -2556,7 +2619,7 @@ var CSS_TEXT = `
 .dsh-st-shell-body>*{min-width:0;flex:1}.dsh-st-official-tree{display:flex;min-height:0;flex:1;overflow:hidden}.dsh-st-official-tree>*{min-width:0;flex:1}
 .dsh-st-rail-head.is-static{cursor:default;font-weight:600}
 .dsh-st-rail-session.is-on{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}
-.dsh-st-n,.dsh-st-n *{box-sizing:border-box}.dsh-st-n{box-sizing:border-box;display:flex;flex:1;min-width:0;max-width:100%;min-height:0;flex-direction:column;padding:0;padding-right:var(--dsh-sidebar-inline-padding,12px);color:var(--dsw-alias-label-primary,inherit);font:14px/20px inherit;overflow:hidden}.dsh-st-n-head{flex:none;display:flex;align-items:center;height:36px;padding-left:4px;margin:2px 0 4px;color:var(--dsw-alias-label-tertiary,#81858C)}.dsh-st-n-head-label{font-size:14px;line-height:20px}.dsh-st-n-tree{flex:1;min-width:0;max-width:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 0 16px 4px;user-select:none}.dsh-st-n-empty{padding:14px 8px;color:var(--dsw-alias-label-tertiary,#8b8f98);font-size:12px}.dsh-st-n-group{min-width:0;max-width:100%}.dsh-st-n-row,.dsh-st-n-sess{display:flex;align-items:center;max-width:100%;border-radius:8px;padding:0 8px;cursor:pointer;border:0;background:transparent;color:var(--dsw-alias-label-primary,inherit);text-align:left;font:14px/20px inherit}.dsh-st-n-row{height:34px;gap:6px}.dsh-st-n-sess{height:32px;gap:0;position:relative;width:100%;appearance:none}.dsh-st-n-row:hover,.dsh-st-n-sess:hover,.dsh-st-n-sess.is-on,.dsh-st-n-sess.is-menu{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}.dsh-st-n-slot{flex:none;width:16px;height:20px;display:inline-flex;align-items:center;justify-content:center}.dsh-st-n-row .dsh-st-n-chevron{display:none;color:var(--dsw-alias-label-caption,#ADB2B8)}.dsh-st-n-row:hover .dsh-st-n-chevron{display:inline-flex}.dsh-st-n-row:hover .dsh-st-n-folder{display:none}.dsh-st-n-arrow{transition:transform .15s ease}.dsh-st-n-arrow.is-open{transform:rotate(90deg)}.dsh-st-n-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px}.dsh-st-n-sess .dsh-st-n-title{margin:0 6px 0 4px}.dsh-st-n-time{flex:none;font-size:12px;line-height:20px;color:var(--dsw-alias-label-tertiary,#81858C);white-space:nowrap}.dsh-st-n-acts{flex:none;display:none;align-items:center;gap:12px}.dsh-st-n-row:hover .dsh-st-n-acts,.dsh-st-n-sess:hover .dsh-st-n-acts,.dsh-st-n-row.is-menu .dsh-st-n-acts,.dsh-st-n-sess.is-menu .dsh-st-n-acts{display:inline-flex}.dsh-st-n-sess:hover .dsh-st-n-time,.dsh-st-n-sess.is-menu .dsh-st-n-time{display:none}.dsh-st-n-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary,#81858C);padding:0;cursor:pointer}.dsh-st-n-ico:hover{color:var(--dsw-alias-label-primary,inherit)}.dsh-st-n-menu{position:absolute;right:8px;top:calc(100% + 4px);z-index:1100;min-width:218px;max-width:360px;box-sizing:border-box;padding:4px;display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-inverted,rgba(255,255,255,.12));border-radius:12px;background:var(--dsw-specific-menu,#1c2128);box-shadow:var(--dsw-shadow-lv3,0 8px 24px rgba(0,0,0,.36))}.dsh-st-n-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary,inherit);text-align:left}.dsh-st-n-menu button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}.dsh-st-n-mi{display:inline-flex;flex:none;width:16px;height:16px;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary,#81858C)}.dsh-st-n-menu button.danger{color:var(--dsw-alias-state-error-primary,#f85149)}.dsh-st-n-menu button.danger .dsh-st-n-mi{color:inherit}.dsh-st-n-menu button.danger:hover{background:var(--dsw-alias-interactive-bg-hover-danger,rgba(248,81,73,.12))}.dsh-st-n-rename{flex:1;min-width:0;margin:0 6px 0 4px;border:1px solid var(--dsw-alias-border-l2);border-radius:4px;background:var(--dsw-alias-button-elevated-fill,rgba(255,255,255,.04));color:inherit;font:inherit;padding:0 2px}
+.dsh-st-n,.dsh-st-n *{box-sizing:border-box}.dsh-st-n{box-sizing:border-box;display:flex;flex:1;min-width:0;max-width:100%;min-height:0;flex-direction:column;padding:0;padding-right:var(--dsh-sidebar-inline-padding,12px);color:var(--dsw-alias-label-primary,inherit);font:14px/20px inherit;overflow:hidden}.dsh-st-n-head{flex:none;display:flex;align-items:center;height:36px;padding-left:4px;margin:2px 0 4px;color:var(--dsw-alias-label-tertiary,#81858C)}.dsh-st-n-head-label{font-size:14px;line-height:20px}.dsh-st-n-tree{flex:1;min-width:0;max-width:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 0 16px 4px;user-select:none}.dsh-st-n-empty{padding:14px 8px;color:var(--dsw-alias-label-tertiary,#8b8f98);font-size:12px}.dsh-st-n-group{min-width:0;max-width:100%}.dsh-st-n-row,.dsh-st-n-sess{display:flex;align-items:center;max-width:100%;border-radius:8px;padding:0 8px;cursor:pointer;border:0;background:transparent;color:var(--dsw-alias-label-primary,inherit);text-align:left;font:14px/20px inherit}.dsh-st-n-row{height:34px;gap:6px}.dsh-st-n-sess{height:32px;gap:0;position:relative;width:100%;appearance:none}.dsh-st-n-row:hover,.dsh-st-n-sess:hover,.dsh-st-n-sess.is-on,.dsh-st-n-sess.is-menu{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}.dsh-st-n-slot{flex:none;width:16px;height:20px;display:inline-flex;align-items:center;justify-content:center}.dsh-st-n-row .dsh-st-n-chevron{display:none;color:var(--dsw-alias-label-caption,#ADB2B8)}.dsh-st-n-row:hover .dsh-st-n-chevron{display:inline-flex}.dsh-st-n-row:hover .dsh-st-n-folder{display:none}.dsh-st-n-arrow{transition:transform .15s ease}.dsh-st-n-arrow.is-open{transform:rotate(90deg)}.dsh-st-n-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px}.dsh-st-n-sess .dsh-st-n-title{margin:0 6px 0 4px}.dsh-st-n-time{flex:none;font-size:12px;line-height:20px;color:var(--dsw-alias-label-tertiary,#81858C);white-space:nowrap}.dsh-st-n-acts{flex:none;display:none;align-items:center;gap:12px}.dsh-st-n-row:hover .dsh-st-n-acts,.dsh-st-n-sess:hover .dsh-st-n-acts,.dsh-st-n-row.is-menu .dsh-st-n-acts,.dsh-st-n-sess.is-menu .dsh-st-n-acts{display:inline-flex}.dsh-st-n-sess:hover .dsh-st-n-time,.dsh-st-n-sess.is-menu .dsh-st-n-time{display:none}.dsh-st-n-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary,#81858C);padding:0;cursor:pointer}.dsh-st-n-ico:hover{color:var(--dsw-alias-label-primary,inherit)}.dsh-st-n-menu.is-float{position:fixed;z-index:1200}.dsh-st-n-menu{position:absolute;right:8px;top:calc(100% + 4px);z-index:1100;min-width:218px;max-width:360px;box-sizing:border-box;padding:4px;display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-inverted,rgba(255,255,255,.12));border-radius:12px;background:var(--dsw-specific-menu,#1c2128);box-shadow:var(--dsw-shadow-lv3,0 8px 24px rgba(0,0,0,.36))}.dsh-st-n-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary,inherit);text-align:left}.dsh-st-n-menu button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}.dsh-st-n-mi{display:inline-flex;flex:none;width:16px;height:16px;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary,#81858C)}.dsh-st-n-menu button.danger{color:var(--dsw-alias-state-error-primary,#f85149)}.dsh-st-n-menu button.danger .dsh-st-n-mi{color:inherit}.dsh-st-n-menu button.danger:hover{background:var(--dsw-alias-interactive-bg-hover-danger,rgba(248,81,73,.12))}.dsh-st-n-rename{flex:1;min-width:0;margin:0 6px 0 4px;border:1px solid var(--dsw-alias-border-l2);border-radius:4px;background:var(--dsw-alias-button-elevated-fill,rgba(255,255,255,.04));color:inherit;font:inherit;padding:0 2px}
 `;
 function installStyles() {
   const existing = document.getElementById(STYLE_ID);