fix: restore native appearance styling

lib/client.js

@@ -506,47 +506,58 @@ body[data-liang-skin="on"] .liang-effort-control__range::-webkit-slider-thumb {
   --liang-control-accent: var(--dsw-alias-state-error-primary, #e43c3c);
 }
 
-.liang-settings-row {
-  display: flex;
-  min-height: 82px;
+.liang-appearance-choice {
+  box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l2);
+  flex: 180px;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 16px 0;
-  border-bottom: 1px solid var(--dsw-alias-border-l1, rgb(0 0 0 / 6%));
+  gap: 4px;
+  padding: 20px 32px;
+  border-radius: 16px;
+  font: inherit;
   color: var(--dsw-alias-label-primary);
-}
-
-.liang-settings-row__title {
-  flex: 0 0 auto;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.liang-settings-row__choices {
-  display: flex;
-  gap: 8px;
-}
-
-.liang-settings-row__choice {
-  min-width: 76px;
-  height: 40px;
-  padding: 0 14px;
-  border: 1px solid var(--dsw-alias-border-l2, rgb(0 0 0 / 10%));
-  border-radius: 10px;
-  color: var(--dsw-alias-label-secondary);
-  background: var(--dsw-alias-bg-layer-1);
   cursor: pointer;
+  background: transparent;
+  font-size: 14px;
+  line-height: 22px;
+  display: flex;
 }
 
-.liang-settings-row__choice:hover {
+[class*="_8HJdBW_cubeRow"]:has(.liang-appearance-choice) {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.liang-appearance-choice:hover:not([aria-pressed="true"]) {
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.liang-settings-row__choice[aria-pressed="true"] {
-  border-color: var(--dsw-alias-label-primary);
-  color: var(--dsw-alias-label-primary);
-  box-shadow: inset 0 0 0 1px var(--dsw-alias-label-primary);
+.liang-appearance-choice[aria-pressed="true"] {
+  border-color: var(--dsw-static-neutral-bluish-400);
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+.liang-appearance-choice__icon {
+  display: block;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.liang-appearance-choice__label {
+  display: block;
+}
+
+/* Keep the host's three theme cubes untouched. These rules only style the
+   fourth button that is appended to the host cube row. */
+.liang-appearance-choice:disabled {
+  cursor: progress;
+  opacity: 0.7;
 }
 
 @media (max-width: 760px) {
@@ -561,11 +572,6 @@ body[data-liang-skin="on"] .liang-effort-control__range::-webkit-slider-thumb {
     opacity: calc(var(--liang-portrait-opacity, 0.45) * 0.72);
   }
 
-  .liang-settings-row {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 12px;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1067,49 +1073,73 @@ function LiangEffortSlider({ directory, load, select, presenter, scope }) {
     }
   );
 }
-function AppearanceSkinRow({ scope, presenter, t }) {
-  const snapshot = (0, import_react.useSyncExternalStore)(
-    (listener) => scope.subscribe(listener),
-    () => scope.getSnapshot()
-  );
-  const enabled = snapshot.enabled;
-  const [pending, setPending] = (0, import_react.useState)(false);
-  const choose = async (next) => {
-    if (next === enabled || pending) return;
-    setPending(true);
-    try {
-      await presenter.choose(next);
-    } finally {
-      setPending(false);
+var NATIVE_APPEARANCE_GROUP = '[class*="_8HJdBW_group"]';
+var NATIVE_APPEARANCE_ROW = '[class*="_8HJdBW_cubeRow"]';
+var LIANG_APPEARANCE_BUTTON = "liang-appearance-choice";
+function installLiangAppearanceButton(scope, presenter) {
+  let pending = false;
+  const hookedNativeButtons = /* @__PURE__ */ new Set();
+  const nativeClickHandlers = /* @__PURE__ */ new Map();
+  const sync = () => {
+    const group = [...document.querySelectorAll(NATIVE_APPEARANCE_GROUP)].find((node) => node.querySelector('[class*="_8HJdBW_themeCube"]'));
+    const row = group?.querySelector(NATIVE_APPEARANCE_ROW);
+    if (row === void 0 || row === null) return;
+    let customButton = row.querySelector(`.${LIANG_APPEARANCE_BUTTON}`);
+    if (customButton === null) {
+      customButton = document.createElement("button");
+      customButton.className = LIANG_APPEARANCE_BUTTON;
+      customButton.type = "button";
+      customButton.dataset.plugin = PACKAGE_ID;
+      customButton.setAttribute("aria-label", "\u6ED1\u52A8\u53D8\u7956");
+      const icon = document.createElement("span");
+      icon.className = "liang-appearance-choice__icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.textContent = "\u25C8";
+      const label = document.createElement("span");
+      label.className = "liang-appearance-choice__label";
+      label.textContent = document.documentElement.lang.toLowerCase().startsWith("en") ? "Slider" : "\u6ED1\u52A8\u53D8\u7956";
+      customButton.append(icon, label);
+      customButton.addEventListener("click", () => {
+        if (pending || scope.getSnapshot().enabled) return;
+        pending = true;
+        sync();
+        void presenter.choose(true).finally(() => {
+          pending = false;
+          sync();
+        });
+      });
+    }
+    if (customButton.parentElement !== row) row.append(customButton);
+    customButton.disabled = pending;
+    customButton.setAttribute("aria-pressed", String(scope.getSnapshot().enabled));
+    for (const nativeButton of row.querySelectorAll('[class*="_8HJdBW_themeCube"]')) {
+      if (hookedNativeButtons.has(nativeButton)) continue;
+      hookedNativeButtons.add(nativeButton);
+      const handleNativeClick = () => {
+        if (pending || !scope.getSnapshot().enabled) return;
+        pending = true;
+        sync();
+        void presenter.choose(false).finally(() => {
+          pending = false;
+          sync();
+        });
+      };
+      nativeClickHandlers.set(nativeButton, handleNativeClick);
+      nativeButton.addEventListener("click", handleNativeClick, { capture: true });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "liang-settings-row", "data-plugin": PACKAGE_ID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "liang-settings-row__title", children: t("appearance.title") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "liang-settings-row__choices", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          className: "liang-settings-row__choice",
-          type: "button",
-          "aria-pressed": !enabled,
-          disabled: pending,
-          onClick: () => void choose(false),
-          children: t("appearance.native")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          className: "liang-settings-row__choice",
-          type: "button",
-          "aria-pressed": enabled,
-          disabled: pending,
-          onClick: () => void choose(true),
-          children: t("appearance.liang")
-        }
-      )
-    ] })
-  ] });
+  const observer = new MutationObserver(sync);
+  observer.observe(document.body, { childList: true, subtree: true });
+  const unsubscribe = scope.subscribe(sync);
+  sync();
+  return () => {
+    observer.disconnect();
+    unsubscribe();
+    for (const [nativeButton, handleNativeClick] of nativeClickHandlers) {
+      nativeButton.removeEventListener("click", handleNativeClick, { capture: true });
+    }
+    document.querySelectorAll(`.${LIANG_APPEARANCE_BUTTON}`).forEach((button) => button.remove());
+  };
 }
 var inject = [
   "slots",
@@ -1161,28 +1191,28 @@ function apply(ctx) {
   const presenter = new SkinPresenter(scope, theme);
   ctx.effect(() => () => presenter.dispose(), "liang-intensity-skin: backdrop presenter");
   ctx.effect(
-    () => ctx.on("theme/change", () => presenter.syncNativeTheme()),
-    "liang-intensity-skin: native theme synchronization"
+    () => installLiangAppearanceButton(scope, presenter),
+    "liang-intensity-skin: native appearance extension"
+  );
+  ctx.effect(
+    () => ctx.locale.register(LOCALE_NAMESPACE, {
+      zh: {
+        "appearance.title": "\u5916\u89C2",
+        "appearance.light": "\u6D45\u8272",
+        "appearance.dark": "\u6DF1\u8272",
+        "appearance.system": "\u8DDF\u968F\u7CFB\u7EDF",
+        "appearance.liang": "\u6ED1\u52A8\u53D8\u7956"
+      },
+      en: {
+        "appearance.title": "Appearance",
+        "appearance.light": "Light",
+        "appearance.dark": "Dark",
+        "appearance.system": "System",
+        "appearance.liang": "Slider"
+      }
+    }),
+    "liang-intensity-skin: settings locale"
   );
-  ctx.effect(() => ctx.locale.register(LOCALE_NAMESPACE, {
-    zh: {
-      "appearance.title": "\u5916\u89C2\u76AE\u80A4",
-      "appearance.native": "\u539F\u751F",
-      "appearance.liang": "\u6ED1\u52A8\u53D8\u7956"
-    },
-    en: {
-      "appearance.title": "Visual skin",
-      "appearance.native": "Native",
-      "appearance.liang": "Slider"
-    }
-  }), "liang-intensity-skin: settings locale");
-  ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-    name: "settings.general.item",
-    id: "liang-intensity-appearance",
-    order: 11,
-    locale: LOCALE_NAMESPACE,
-    inject: () => ({ scope, presenter })
-  }, AppearanceSkinRow));
   ctx.slots.inject("conversation.input.right", () => ctx.slots.register({
     name: "conversation.input.right",
     id: "liang-intensity-control",