@mintfolio/theme-verdant 0.2.0

package/scripts/postFilters.ts

@@ -0,0 +1,101 @@
+import type { PageScope } from './lifecycle';
+import { emptyFilters } from './postList';
+import type { PostFilters, PostItem } from '../utils/types';
+
+import { createPostListController, readFiltersFromUrl as readUrlFilters, writeFiltersToUrl as writeUrlFilters } from '@mintfolio/core/client';
+
+/** Read the current document's query state through the same parser used by Core. */
+export function readFiltersFromUrl(): PostFilters {
+  return readUrlFilters(new URL(window.location.href));
+}
+
+/** The caller supplies a Core-owned destination; the SDK only updates filter parameters. */
+export function writeFiltersToUrl(filters: PostFilters, url = new URL(window.location.href)): URL {
+  return writeUrlFilters(filters, url);
+}
+
+export function createPostFilters(
+  items: PostItem[],
+  input: HTMLInputElement | null,
+  scope: PageScope,
+  onChange: (filters: PostFilters) => void,
+  initial: PostFilters = emptyFilters(),
+) {
+  const tagButtons = Array.from(document.querySelectorAll<HTMLButtonElement>('.tag-btn'));
+  const categoryButtons = Array.from(document.querySelectorAll<HTMLButtonElement>('.category-btn'));
+  const state = { ...initial };
+  const includes = (buttons: HTMLButtonElement[], key: 'tag' | 'category', value: string): boolean =>
+    buttons.some((button) => button.dataset[key] === value);
+  if (!includes(tagButtons, 'tag', state.tag)) state.tag = '';
+  if (!includes(categoryButtons, 'category', state.category)) state.category = '';
+  if (input) input.value = state.q;
+
+  const controller = createPostListController({ items, index: (item) => item, initialFilters: state, reconcileFacets: true });
+  scope.add(controller.dispose);
+  scope.add(controller.subscribe((snapshot) => {
+    Object.assign(state, snapshot.filters);
+    const tags = new Set(snapshot.facets.tags);
+    const categories = new Set(snapshot.facets.categories);
+    const updateButtons = (
+      buttons: HTMLButtonElement[],
+      key: 'tag' | 'category',
+      available: Set<string>,
+    ): void => {
+      for (const button of buttons) {
+        const value = button.dataset[key] ?? '';
+        const selected = value === state[key];
+        button.disabled = Boolean(value) && !available.has(value.toLowerCase());
+        button.classList.toggle('hidden-by-filter', button.disabled);
+        button.classList.toggle('active', selected);
+        button.setAttribute('aria-checked', String(selected));
+        button.tabIndex = selected ? 0 : -1;
+      }
+    };
+    updateButtons(tagButtons, 'tag', tags);
+    updateButtons(categoryButtons, 'category', categories);
+    onChange({ ...state });
+  }));
+
+  const bindGroup = (buttons: HTMLButtonElement[], key: 'tag' | 'category'): void => {
+    for (const button of buttons) {
+      button.addEventListener(
+        'click',
+        () => {
+          controller.setFilters({ [key]: button.dataset[key] ?? '' });
+        },
+        { signal: scope.signal },
+      );
+      button.addEventListener(
+        'keydown',
+        (event) => {
+          if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+          event.preventDefault();
+          const visible = buttons.filter((candidate) => !candidate.disabled);
+          const direction = ['ArrowLeft', 'ArrowUp'].includes(event.key) ? -1 : 1;
+          const index =
+            event.key === 'Home'
+              ? 0
+              : event.key === 'End'
+                ? visible.length - 1
+                : (visible.indexOf(button) + direction + visible.length) % visible.length;
+          const next = visible[index];
+          if (next) {
+            next.click();
+            next.focus();
+          }
+        },
+        { signal: scope.signal },
+      );
+    }
+  };
+  bindGroup(tagButtons, 'tag');
+  bindGroup(categoryButtons, 'category');
+  input?.addEventListener(
+    'input',
+    () => {
+      controller.setFilters({ q: input.value });
+    },
+    { signal: scope.signal },
+  );
+  return { value: (): PostFilters => ({ ...state }) };
+}

package/scripts/postList.ts

@@ -0,0 +1,132 @@
+import type { PageScope } from './lifecycle';
+import type { PostFilters, PostItem } from '../utils/types';
+
+import { createPostListController, searchPosts } from '@mintfolio/core/client';
+export { emptyFilters } from '@mintfolio/core/client';
+
+interface PostListSnapshot {
+  href: string;
+  limit: number;
+  autoLoadEnabled: boolean;
+  filters: PostFilters;
+}
+
+const stateKey = 'personalSitePostList';
+
+function readSnapshot(url: URL): PostListSnapshot | null {
+  const value: Partial<PostListSnapshot> | undefined = history.state?.[stateKey];
+  if (value?.href !== `${url.pathname}${url.search}` || typeof value.limit !== 'number' || !Number.isInteger(value.limit) || value.limit < 1) return null;
+  if (!value.filters || !['q', 'tag', 'category'].every((key) => typeof value.filters?.[key as keyof PostFilters] === 'string')) return null;
+  return { href: value.href, limit: value.limit, autoLoadEnabled: value.autoLoadEnabled === true, filters: value.filters };
+}
+
+/** Restore layout before Astro restores scroll, otherwise the short initial list clamps it. */
+function restoreListDocument(root: Document, url: URL, snapshot: PostListSnapshot | null): void {
+  const hero = root.querySelector<HTMLElement>('#hero');
+  if (hero && url.hash === '#content') {
+    hero.classList.add('collapsed');
+    hero.inert = true;
+    root.querySelector('.content-wrapper')?.classList.add('hero-collapsed');
+  }
+  if (!snapshot || !root.getElementById('posts-list')) return;
+  const items = readPostItems(root.getElementById('posts-list')!);
+  const matches = filterPostItems(items, snapshot.filters);
+  const visible = new Set(matches.slice(0, snapshot.limit));
+  for (const item of items) {
+    item.element.classList.toggle('hidden', !visible.has(item));
+    item.element.classList.remove('initially-hidden');
+  }
+  root.getElementById('load-more-wrap')?.classList.toggle('hidden', matches.length <= snapshot.limit);
+}
+
+document.addEventListener('astro:before-preparation', () => {
+  // Stop an article's smooth section scroll before its queued frames can move the next page.
+  window.scrollTo({ left: window.scrollX, top: window.scrollY, behavior: 'instant' });
+});
+
+document.addEventListener('astro:before-swap', (event) => {
+  // Astro restores history coordinates before page-load; CSS smooth scrolling can interrupt that restoration.
+  if (event.navigationType === 'traverse') event.newDocument.documentElement.dataset.restoringScroll = 'true';
+  restoreListDocument(event.newDocument, event.to, event.navigationType === 'traverse' ? readSnapshot(event.to) : null);
+});
+document.addEventListener('astro:page-load', () => { delete document.documentElement.dataset.restoringScroll; });
+restoreListDocument(document, new URL(location.href), readSnapshot(new URL(location.href)));
+
+export function readPostItems(root: ParentNode): PostItem[] {
+  return Array.from(root.querySelectorAll<HTMLElement>('.post-card'), (element) => ({
+    element,
+    id: element.dataset.id ?? '',
+    url: element.dataset.url ?? '',
+    title: element.dataset.title ?? '',
+    description: element.dataset.description ?? '',
+    tags: JSON.parse(element.dataset.tags ?? '[]') as string[],
+    category: element.dataset.category ?? '',
+  }));
+}
+
+export function filterPostItems(posts: PostItem[], filters: PostFilters): PostItem[] {
+  return searchPosts(posts, filters);
+}
+
+/** A single observer and DOM index serve both the home and blog lists. */
+export function createPostList(scope: PageScope) {
+  const container = document.getElementById('posts-list');
+  const button = document.getElementById('load-more-btn');
+  const footer = document.getElementById('load-more-wrap');
+  const noResults = document.getElementById('no-results');
+  const items = readPostItems(container ?? document);
+  const pageSize = Number(container?.dataset.pageSize) || 8;
+  const saved = readSnapshot(new URL(location.href));
+  const controller = createPostListController({ items, index: (item) => item, pageSize, initialFilters: saved?.filters, initialLimit: saved?.limit });
+  scope.add(controller.dispose);
+  let autoLoadEnabled = saved?.autoLoadEnabled ?? false;
+  let leftViewport = false;
+
+  const render = (): void => {
+    const { matches, visible: shown, limit, filters } = controller.value();
+    const visible = new Set(shown);
+    for (const item of items) {
+      item.element.classList.toggle('hidden', !visible.has(item));
+      item.element.classList.remove('initially-hidden');
+    }
+    if (noResults) noResults.style.display = matches.length ? 'none' : 'block';
+    footer?.classList.toggle('hidden', matches.length <= limit);
+    const snapshot: PostListSnapshot = { href: `${location.pathname}${location.search}`, limit, autoLoadEnabled, filters };
+    history.replaceState({ ...history.state, [stateKey]: snapshot }, '');
+  };
+  const loadMore = (): void => {
+    leftViewport = false;
+    controller.loadMore();
+  };
+  button?.addEventListener(
+    'click',
+    () => {
+      autoLoadEnabled = true;
+      loadMore();
+    },
+    { signal: scope.signal },
+  );
+
+  if (footer) {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        if (!entry.isIntersecting) leftViewport = true;
+        else if (autoLoadEnabled && leftViewport && controller.value().hasMore) loadMore();
+      },
+      { rootMargin: '0px 0px 160px 0px', threshold: 0.15 },
+    );
+    observer.observe(footer);
+    scope.add(() => observer.disconnect());
+  }
+
+  scope.add(controller.subscribe(render));
+  return {
+    items,
+    filter(nextFilters: PostFilters): void {
+      const current = controller.value().filters;
+      if (current.q !== nextFilters.q || current.tag !== nextFilters.tag || current.category !== nextFilters.category) leftViewport = false;
+      controller.setFilters(nextFilters);
+    },
+  };
+}

package/scripts/progress.ts

@@ -0,0 +1,29 @@
+import { createPageScope } from './lifecycle';
+
+let scope = createPageScope();
+const progress = (value: number): void => {
+  const bar = document.getElementById('page-loading-progress');
+  if (!bar) return;
+  bar.classList.toggle('loading', value < 100);
+  bar.classList.toggle('complete', value === 100);
+  bar.style.width = `${value}%`;
+};
+
+document.addEventListener('astro:before-preparation', () => {
+  scope.dispose();
+  scope = createPageScope();
+  progress(0);
+  scope.frame(() => progress(30));
+  scope.timeout(() => progress(50), 100);
+});
+document.addEventListener('astro:after-swap', () => progress(90));
+document.addEventListener('astro:page-load', () => {
+  scope.dispose();
+  scope = createPageScope();
+  progress(100);
+  scope.timeout(() => {
+    const bar = document.getElementById('page-loading-progress');
+    bar?.classList.remove('complete');
+    if (bar) bar.style.width = '0%';
+  }, 300);
+});

package/scripts/protectedArticle.ts

@@ -0,0 +1,49 @@
+import { createProtectedArticleController, parseEncryptedArticle, onPage } from '@mintfolio/core/client';
+import { createArticleToc } from './protectedToc';
+
+onPage('[data-protected-post]', (root, scope) => {
+  const gate = root.querySelector<HTMLElement>('.password-gate');
+  const form = root.querySelector<HTMLFormElement>('.password-form');
+  const input = root.querySelector<HTMLInputElement>('#article-password');
+  const submit = form?.querySelector<HTMLButtonElement>('button[type="submit"]');
+  const status = root.querySelector<HTMLElement>('#password-status');
+  const content = root.querySelector<HTMLElement>('.protected-article-content');
+  const unlockedBar = root.querySelector<HTMLElement>('.unlocked-bar');
+  const data = root.querySelector('.encrypted-article-data');
+  if (!gate || !form || !input || !submit || !status || !content || !unlockedBar || !data) return;
+  if (!window.isSecureContext || !crypto.subtle) {
+    status.textContent = '当前环境不支持安全解密，请通过 HTTPS 或本机 localhost 打开。';
+    return;
+  }
+  let payload;
+  try { payload = parseEncryptedArticle(JSON.parse(data.textContent ?? '')); }
+  catch { status.textContent = '加密文章数据无法读取，请刷新页面或联系作者。'; return; }
+  const notify = (): void => { document.dispatchEvent(new Event('article:content-changed')); };
+  const controller = createProtectedArticleController({
+    payload, postId: root.dataset.postId ?? '', signal: scope.signal,
+    onUnlock: (unlocked) => {
+      // Only presentation stays here: retain Astro's empty scoped-style wrapper.
+      const template = root.querySelector<HTMLTemplateElement>('[data-prose-template]');
+      const prose = template?.content.firstElementChild?.cloneNode(true);
+      if (!(prose instanceof HTMLElement)) throw new Error('Missing article presentation template');
+      prose.replaceChildren(unlocked.fragment);
+      content.replaceChildren(createArticleToc(root, unlocked.headings), prose);
+      input.value = '';
+    },
+    onClear: () => { input.value = ''; content.replaceChildren(); status.textContent = ''; input.removeAttribute('aria-invalid'); notify(); },
+    onState: (state) => {
+      input.disabled = submit.disabled = state === 'unlocking';
+      submit.textContent = state === 'unlocking' ? '正在解锁…' : '解锁文章';
+      if (state === 'unlocking') { status.textContent = ''; input.removeAttribute('aria-invalid'); form.setAttribute('aria-busy', 'true'); }
+      else form.removeAttribute('aria-busy');
+      root.dataset.state = state === 'unlocked' ? 'unlocked' : 'locked';
+      gate.hidden = state === 'unlocked';
+      content.hidden = unlockedBar.hidden = state !== 'unlocked';
+      if (state === 'unlocked') { notify(); content.focus({ preventScroll: true }); }
+    },
+    onError: () => { status.textContent = '密码不正确，或文章数据已损坏，请重试。'; input.setAttribute('aria-invalid', 'true'); input.focus(); },
+  });
+  input.disabled = submit.disabled = false;
+  form.addEventListener('submit', (event) => { event.preventDefault(); void controller.unlock(input.value); }, { signal: scope.signal });
+  root.querySelector('.lock-article')?.addEventListener('click', () => { controller.lock(); input.focus(); }, { signal: scope.signal });
+});

package/scripts/protectedToc.ts

@@ -0,0 +1,29 @@
+import type { ArticleHeading } from '@mintfolio/theme-api/astro';
+
+/**
+ * Rebuild the Verdant Theme's TOC from authenticated headings after unlocking.
+ * The template contains no article metadata. Cloning its empty link preserves
+ * Astro's scoped CSS attributes; textContent keeps heading labels inert.
+ */
+export function createArticleToc(root: HTMLElement, headings: ArticleHeading[]): DocumentFragment {
+  const result = document.createDocumentFragment();
+  const visible = headings.filter((heading) => heading.depth === 2 || heading.depth === 3);
+  const template = root.querySelector<HTMLTemplateElement>('[data-toc-template]');
+  if (!visible.length || !template) return result;
+
+  const contents = template.content.cloneNode(true) as DocumentFragment;
+  const nav = contents.querySelector('.toc-nav');
+  const example = nav?.querySelector<HTMLAnchorElement>('.toc-link');
+  if (!nav || !example) return result;
+
+  const links = visible.map((heading): HTMLAnchorElement => {
+    const link = example.cloneNode(false) as HTMLAnchorElement;
+    link.className = `toc-link depth-${heading.depth}`;
+    link.setAttribute('href', `#${heading.slug}`);
+    link.textContent = heading.text;
+    return link;
+  });
+  nav.replaceChildren(...links);
+  result.append(contents);
+  return result;
+}

package/scripts/site.ts

@@ -0,0 +1,145 @@
+import { ARTICLE_BACK_NAV_STORAGE_KEY, shouldPersistArticleBackHref } from '../utils/blogNavigation';
+import { HOME_RETURN_HINT_STORAGE_KEY, shouldShowHomeReturnHint } from '../utils/homeReturnHint';
+import { readStorage, writeStorage } from '../utils/storage';
+import { onPage } from './lifecycle';
+import { initTheme } from './theme';
+import { rememberArticleOrigin } from './articleOrigin';
+import './postList';
+import './progress';
+
+function getCurrentArticleBackHref(): string {
+  const pathname = window.location.pathname;
+  const search = window.location.search;
+  const isHome = document.body.dataset.pageKind === 'home';
+  const hero = document.querySelector('.hero');
+  const isHomeContentVisible = isHome && hero instanceof HTMLElement && hero.classList.contains('collapsed');
+
+  if (isHomeContentVisible) {
+    return `${document.body.dataset.homeHref}#content`;
+  }
+
+  return `${pathname}${search}`;
+}
+
+onPage('body', (_body, scope) => {
+  initTheme(scope);
+  const addDisposer = scope.add;
+  const floatRight = document.getElementById('ui-float-right');
+  if (!floatRight) return;
+  const backToTop = document.getElementById('back-to-top');
+  const homeReturnHintLayer = document.getElementById('home-return-hint-layer');
+  const homeReturnHint = document.getElementById('home-return-hint');
+  let homeReturnHintTimer: number | null = null;
+  document.addEventListener(
+    'click',
+    (event) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      )
+        return;
+      const anchor = event.target instanceof Element ? event.target.closest('a[href]') : null;
+      if (
+        !(anchor instanceof HTMLAnchorElement) ||
+        anchor.hasAttribute('download') ||
+        (anchor.target && anchor.target !== '_self')
+      )
+        return;
+      if (
+        shouldPersistArticleBackHref({
+          linkHref: anchor.href,
+          currentOrigin: location.origin,
+          currentPath: location.pathname,
+          isArticleLink: anchor.hasAttribute('data-article-link'),
+        })
+      ) {
+        writeStorage('session', ARTICLE_BACK_NAV_STORAGE_KEY, getCurrentArticleBackHref());
+        rememberArticleOrigin(anchor.pathname, getCurrentArticleBackHref());
+      }
+    },
+    { capture: true, signal: scope.signal },
+  );
+  const hideHomeReturnHint = () => {
+    if (!homeReturnHintLayer) return;
+    homeReturnHintLayer.classList.add('hiding');
+    homeReturnHintLayer.classList.remove('visible');
+    homeReturnHintLayer.setAttribute('aria-hidden', 'true');
+    if (homeReturnHintTimer !== null) {
+      window.clearTimeout(homeReturnHintTimer);
+      homeReturnHintTimer = null;
+    }
+  };
+
+  const showHomeReturnHint = () => {
+    if (!homeReturnHintLayer || !homeReturnHint) return;
+    if (!shouldShowHomeReturnHint(readStorage('local', HOME_RETURN_HINT_STORAGE_KEY))) {
+      return;
+    }
+
+    writeStorage('local', HOME_RETURN_HINT_STORAGE_KEY, '1');
+    homeReturnHintLayer.classList.remove('hiding');
+    homeReturnHintLayer.classList.add('visible');
+    homeReturnHintLayer.setAttribute('aria-hidden', 'false');
+
+    if (homeReturnHintTimer !== null) {
+      window.clearTimeout(homeReturnHintTimer);
+    }
+
+    homeReturnHintTimer = scope.timeout(() => {
+      hideHomeReturnHint();
+    }, 10000);
+  };
+
+  const hero = document.querySelector('.hero');
+  if (hero) {
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        floatRight.classList.toggle('visible', !entry.isIntersecting);
+      },
+      { threshold: 0.1 },
+    );
+    obs.observe(hero);
+    addDisposer(() => obs.disconnect());
+  } else {
+    floatRight.classList.add('visible');
+  }
+
+  if (backToTop) {
+    const onBackToTopClick = () => {
+      const isHome = document.body.dataset.pageKind === 'home';
+      if (isHome && window.scrollY <= 8) {
+        hideHomeReturnHint();
+        window.dispatchEvent(new CustomEvent('home:return-to-hero'));
+        return;
+      }
+
+      window.scrollTo({
+        top: 0,
+        behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth',
+      });
+    };
+    backToTop.addEventListener('click', onBackToTopClick);
+    addDisposer(() => backToTop.removeEventListener('click', onBackToTopClick));
+  }
+
+  if (homeReturnHint) {
+    const onHomeReturnHintClick = () => {
+      hideHomeReturnHint();
+      window.dispatchEvent(new CustomEvent('home:return-to-hero'));
+    };
+    homeReturnHint.addEventListener('click', onHomeReturnHintClick);
+    addDisposer(() => homeReturnHint.removeEventListener('click', onHomeReturnHintClick));
+  }
+
+  const onShowHomeReturnHint = () => {
+    showHomeReturnHint();
+  };
+  window.addEventListener('home:show-return-hint', onShowHomeReturnHint);
+  addDisposer(() => window.removeEventListener('home:show-return-hint', onShowHomeReturnHint));
+
+  scope.add(hideHomeReturnHint);
+});

package/scripts/tagFold.ts

@@ -0,0 +1,61 @@
+import type { PageScope } from './lifecycle';
+
+/** Measure first, then write, and coalesce resize/filter updates into one frame. */
+export function createTagFold(container: HTMLElement | null, toggle: HTMLElement | null, scope: PageScope) {
+  let expanded = false;
+  let pending = false;
+  const maxRows = Number(container?.closest<HTMLElement>('.tags-filter-block')?.dataset.maxRows) || 0;
+
+  const measure = (): void => {
+    pending = false;
+    if (!container || !toggle || !maxRows || !container.clientWidth) return;
+    const buttons = Array.from(container.querySelectorAll<HTMLButtonElement>('.tag-btn')).filter(
+      (button) => !button.hidden && !button.disabled,
+    );
+    const rows = Map.groupBy(buttons, (button) => Math.round(button.offsetTop));
+    const rowTops = [...rows.keys()];
+    const lastRow = rows.get(rowTops[maxRows - 1] ?? -1);
+    const lastButton = lastRow?.at(-1);
+    const height = lastButton ? lastButton.offsetTop + lastButton.offsetHeight - (rowTops[0] ?? 0) : 0;
+    const canFold = rows.size > maxRows;
+    const collapsed = canFold && !expanded;
+    const expandedHeight = container.scrollHeight;
+
+    container.classList.toggle('is-collapsed', collapsed);
+    if (height) container.style.setProperty('--collapsed-height', `${height}px`);
+    container.style.setProperty('--expanded-height', `${expandedHeight}px`);
+    toggle.hidden = !canFold;
+    toggle.textContent = collapsed ? '展开更多' : '收起标签';
+    toggle.setAttribute('aria-expanded', String(canFold && expanded));
+  };
+  const refresh = (): void => {
+    if (pending) return;
+    pending = true;
+    scope.frame(measure);
+  };
+  toggle?.addEventListener(
+    'click',
+    () => {
+      expanded = !expanded;
+      refresh();
+    },
+    { signal: scope.signal },
+  );
+
+  if (container) {
+    let previousWidth = -1;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry && entry.contentRect.width !== previousWidth) {
+        previousWidth = entry.contentRect.width;
+        refresh();
+      }
+    });
+    observer.observe(container);
+    scope.add(() => observer.disconnect());
+    void document.fonts.ready.then(() => {
+      if (!scope.signal.aborted) refresh();
+    });
+  }
+  refresh();
+  return { refresh };
+}

package/scripts/theme.ts

@@ -0,0 +1,102 @@
+import { PALETTES } from '../lib/palettes';
+import { readStorage, writeStorage } from '../utils/storage';
+import type { PageScope } from './lifecycle';
+
+function syncBrowserThemeColor(): void {
+  const meta = document.querySelector<HTMLMetaElement>('#browser-theme-color');
+  const background = getComputedStyle(document.documentElement).backgroundColor;
+  if (meta && meta.content !== background) meta.content = background;
+}
+
+// Preserve the chosen theme before Astro swaps the root and head, avoiding a
+// brief return to the default background and browser-bar color between pages.
+document.addEventListener('astro:before-swap', (event) => {
+  const theme = document.documentElement.dataset.theme;
+  if (theme) event.newDocument.documentElement.dataset.theme = theme;
+});
+
+export function initTheme(scope: PageScope): void {
+  const panel = document.getElementById('theme-panel');
+  const toggle = document.getElementById('theme-toggle');
+  if (!panel || !toggle) return;
+  const options = { signal: scope.signal };
+  const modeButtons = panel.querySelectorAll<HTMLButtonElement>('.mode-btn');
+  const paletteButtons = panel.querySelectorAll<HTMLButtonElement>('.palette-btn');
+  const storedMode = readStorage('local', 'theme-mode');
+  let mode = ['auto', 'light', 'dark'].includes(storedMode ?? '') ? storedMode! : (document.body.dataset.initialMode ?? 'auto');
+  let palette = readStorage('local', 'theme-palette') ?? document.body.dataset.initialPalette ?? '1';
+  if (!PALETTES.some((entry) => entry.id === palette)) palette = '1';
+  const media = matchMedia('(prefers-color-scheme: dark)');
+  const apply = (announce = false): void => {
+    const resolvedMode = mode === 'auto' ? (media.matches ? 'dark' : 'light') : mode;
+    const theme = `${resolvedMode}-${palette}`;
+    document.documentElement.dataset.theme = theme;
+    syncBrowserThemeColor();
+    writeStorage('local', 'theme', theme);
+    writeStorage('local', 'theme-mode', mode);
+    writeStorage('local', 'theme-palette', palette);
+    for (const button of [...modeButtons, ...paletteButtons]) {
+      const selected = button.dataset.mode === mode || button.dataset.palette === palette;
+      button.classList.toggle('active', selected);
+      button.setAttribute('aria-checked', String(selected));
+      button.tabIndex = selected ? 0 : -1;
+    }
+    const announcer = document.getElementById('a11y-announcer');
+    if (announce && announcer) {
+      const label = mode === 'auto' ? '自动' : mode === 'dark' ? '深色' : '浅色';
+      announcer.textContent = `主题已切换为${label}模式，${PALETTES.find((entry) => entry.id === palette)?.name}配色`;
+    }
+  };
+  for (const buttons of [modeButtons, paletteButtons]) {
+    buttons.forEach((button, index) => {
+      button.addEventListener(
+        'click',
+        () => {
+          mode = button.dataset.mode ?? mode;
+          palette = button.dataset.palette ?? palette;
+          apply(true);
+        },
+        options,
+      );
+      button.addEventListener(
+        'keydown',
+        (event) => {
+          if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+          event.preventDefault();
+          const step = ['ArrowLeft', 'ArrowUp'].includes(event.key) ? -1 : 1;
+          const next =
+            buttons[
+              event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                  ? buttons.length - 1
+                  : (index + step + buttons.length) % buttons.length
+            ];
+          next?.click();
+          next?.focus();
+        },
+        options,
+      );
+    });
+  }
+  panel.addEventListener(
+    'toggle',
+    () => {
+      const open = panel.matches(':popover-open');
+      toggle.setAttribute('aria-expanded', String(open));
+      panel.setAttribute('aria-hidden', String(!open));
+    },
+    options,
+  );
+  media.addEventListener(
+    'change',
+    () => {
+      if (mode === 'auto') apply();
+    },
+    options,
+  );
+  apply();
+  scope.add(() => {
+    if (panel.matches(':popover-open')) panel.hidePopover();
+  });
+}