feat(i18n): expand catalog runtime and developer tooling

- add Intl-backed locale definitions, formatters, catalog loaders, and runtime hooks\n- compile hashed production catalogs from package-scoped catalog sources\n- drive Lingui extraction and compilation directly from project JSON config\n- redesign the devtool with localized controls, draggable persistence, settings, navigation, copy actions, ANSI output, and fullscreen support\n- extend repository APIs, CLI coverage, documentation, and runtime tests
2026-07-30 14:47:42 +08:00
parent 0d0aad1d47
commit 0768e8fa29
55 changed files with 7553 additions and 495 deletions
@@ -0,0 +1,58 @@
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react"
+
+import type { I18nDevtoolTheme } from "./devtool-preferences"
+import { useDevtoolLocalization } from "./devtool-localization"
+
+export interface DevtoolThemeSwitcherProps {
+  onThemeChange: (theme: I18nDevtoolTheme) => void
+  theme: I18nDevtoolTheme
+}
+
+const themes = [
+  {
+    accessibleLabel: "autoTheme",
+    icon: MonitorIcon,
+    label: "auto",
+    value: "auto",
+  },
+  {
+    accessibleLabel: "lightTheme",
+    icon: SunIcon,
+    label: "light",
+    value: "light",
+  },
+  {
+    accessibleLabel: "darkTheme",
+    icon: MoonIcon,
+    label: "dark",
+    value: "dark",
+  },
+] as const
+
+export function DevtoolThemeSwitcher({
+  onThemeChange,
+  theme,
+}: DevtoolThemeSwitcherProps) {
+  const { messages } = useDevtoolLocalization()
+
+  return (
+    <div
+      aria-label={messages.settings.themeControl}
+      className="i18n-devtool__theme-switcher"
+      role="group"
+    >
+      {themes.map(({ accessibleLabel, icon: ThemeIcon, label, value }) => (
+        <button
+          key={value}
+          type="button"
+          aria-label={messages.settings[accessibleLabel]}
+          aria-pressed={theme === value}
+          onClick={() => onThemeChange(value)}
+        >
+          <ThemeIcon aria-hidden="true" />
+          <span>{messages.settings[label]}</span>
+        </button>
+      ))}
+    </div>
+  )
+}