diff --git a/.codex/skills/moonbridge-webui-design/SKILL.md b/.codex/skills/moonbridge-webui-design/SKILL.md
new file mode 100644
index 00000000..66faf28e
--- /dev/null
+++ b/.codex/skills/moonbridge-webui-design/SKILL.md
@@ -0,0 +1,74 @@
+---
+name: moonbridge-webui-design
+description: Moon Bridge webui design and component rules. Use whenever changing files under webui/src that affect UI structure, controls, styling, theme tokens, layouts, or interaction behavior.
+---
+
+# Moon Bridge Webui Design
+
+## Core Rule
+
+Prefer official Material Web components from `@material/web` for all common controls.
+
+Do not hand-roll controls such as switches, buttons, icon buttons, checkboxes, radio buttons, menus, tabs, dialogs, sliders, text fields, or progress indicators unless the user explicitly approves a custom control for that specific case. If a custom control is approved, document why Material Web is insufficient and keep the custom surface isolated.
+
+Before changing webui UI, read `docs/webui/material-component-debt.md` when it exists. Treat it as the ordered migration backlog for known violations.
+
+Native `<button>`, `<input>`, `<select>`, and `<textarea>` elements are not acceptable for app controls under `webui/src` unless they are inside tests, non-interactive generated examples, or an explicitly approved exception. Route links may remain anchors when they are navigation, not button controls.
+
+## Existing Stack
+
+- React renders Material Web custom elements with `createElement(...)` or a small typed wrapper component.
+- Material Web imports belong near the component/wrapper that uses the element, for example `@material/web/switch/switch.js`.
+- Theme integration should use Material Web public CSS custom properties such as `--md-switch-selected-track-color`; do not style internal shadow DOM classes.
+- Project theme tokens live under `webui/src/theme/` and app CSS chunks live under `webui/src/app/styles/`.
+
+## Component Practice
+
+- Use a wrapper when React needs to bridge custom-element properties or events, especially boolean properties such as `selected` and events such as `change`.
+- Prefer existing wrappers in `webui/src/components/Material*.tsx` before adding direct `md-*` elements in feature code. Direct `md-chip-set`, `md-icon`, and `md-ripple` use is acceptable when no property/event bridge is needed and the element is an official Material Web primitive.
+- Boolean ARIA attributes on Material custom elements must be serialized intentionally when tests or accessibility depend on exact string values, for example `aria-expanded="true"` and `aria-pressed="false"`.
+- Wrapper components must fail fast for impossible setup states. Do not add fallback markup that recreates the control.
+- Keep wrappers narrow: map props to the official element and expose only app-needed behavior.
+- Remove obsolete handcrafted CSS selectors when replacing custom controls. Styling classes may target Material Web host elements for layout or public CSS custom properties only; they must not keep styling native control implementations alive.
+
+### Outlined Text Fields And Selects
+
+`md-outlined-text-field` and `md-outlined-select` are not correctly migrated merely because the official host element is present. The Material component must own the whole visible field surface.
+
+- The Material element must own the visible field label through a non-empty `label` property or attribute. Do not pass `label=""` while rendering an adjacent custom visual label for an ordinary visible form field.
+- Text field leading and trailing icons must be slotted children of `md-outlined-text-field` using `slot="leading-icon"` or `slot="trailing-icon"`. Do not render external icons, help buttons, clear buttons, or manually aligned wrappers beside the field when they visually belong inside the field.
+- `md-outlined-select` must use its official floating label and built-in trailing affordance. Do not add a custom external caret, trailing icon, or overlay button for the select.
+- Wrapper APIs must expose app-needed Material properties directly, including `label`, `value`, `type`, `supportingText`, `errorText`, `disabled`, `required`, and `spellCheck`. Bridge both custom-element properties and host attributes when tests, accessibility, or browser behavior depend on exact serialization.
+- Text fields must serialize `spellcheck` intentionally. Configuration identifiers, URLs, secrets, JSON, search filters, numeric fields, and other non-prose fields should default to `spellcheck="false"`; natural-language prose fields may opt in explicitly.
+- Do not recreate Material label, outline notch, icon spacing, trailing affordance, focus, filled, or error animations in app CSS. Use Material host layout and public CSS custom properties only.
+
+## Verification
+
+For UI control changes:
+
+1. Add or update tests that render the actual UI and assert the official element is used.
+2. Cover the interaction path that changes app state.
+3. Run targeted tests first, then `npm run build`, `npm test`, and `git diff --check` from `webui` or repo root as appropriate.
+4. For visual changes, use browser or screenshot verification when the risk is layout/spacing drift.
+
+Visual verification is required for migrated controls. Use browser-rendered screenshots or an equivalent visual inspection path for each touched page/state. Passing tests alone is not enough when control geometry, density, or popover behavior changed. Treat major visual drift as a failed task.
+
+## Reviewer Agent Requirements
+
+When acting as a reviewer agent for Moon Bridge webui changes, enforce this skill strictly:
+
+- Block approval if a common control is still hand-rolled and there is no explicit user-approved exception recorded in code or in `docs/webui/material-component-debt.md`.
+- Block approval if `webui/src` production code introduces native `<button>`, `<input>`, `<select>`, or `<textarea>` controls without an explicit approved exception.
+- Block approval if feature code directly creates `md-*` controls that should go through an existing Material wrapper, unless the direct element is a simple official grouping/decorative primitive such as `md-chip-set`, `md-icon`, or `md-ripple`.
+- Block approval if a Material Web replacement includes fallback markup that recreates the old custom control.
+- Block approval if an outlined text field or select renders `md-outlined-*` but still uses an external custom label as the visible field label, including `label=""` plus adjacent label markup for a normal visible form field.
+- Block approval if text-field icons, help icons, clear buttons, or trailing actions that visually belong to the field are rendered outside `md-outlined-text-field` instead of using official slots.
+- Block approval if an outlined select adds a custom external trailing icon, caret, or overlay control instead of relying on the Material select affordance.
+- Block approval if code styles Material Web shadow DOM internals or private classes instead of public CSS custom properties.
+- Block approval if tests do not assert that the migrated official Material Web element is rendered.
+- Block approval if interaction tests do not cover the migrated control's state-change path.
+- Block approval if tests only assert that `md-outlined-text-field` or `md-outlined-select` exists without checking correct Material API use: non-empty `label`, slotted icons where applicable, intentional `spellcheck`, and absence of replacement external label or icon markup.
+- Block approval if CSS manually rebuilds label position, outline notch behavior, icon alignment, trailing affordances, or focus/error animations for Material outlined fields/selects.
+- Block approval if visual verification is missing for changed pages or if screenshots show major layout, density, alignment, or overflow drift.
+- Review obsolete CSS selectors as code debt: if a selector only exists for a removed handwritten control, require its removal or a documented follow-up.
+- Check staged files and diffs directly. Do not rely on implementer summaries.
diff --git a/.codex/skills/moonbridge-webui-design/agents/openai.yaml b/.codex/skills/moonbridge-webui-design/agents/openai.yaml
new file mode 100644
index 00000000..44d40dd2
--- /dev/null
+++ b/.codex/skills/moonbridge-webui-design/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "Moonbridge Webui Design"
+  short_description: "Apply Moon Bridge webui Material design rules."
+  default_prompt: "Use $moonbridge-webui-design before changing Moon Bridge webui UI components."
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..f5618e76
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+internal/service/webui/dist/assets/*.js whitespace=-blank-at-eol
diff --git a/.gitignore b/.gitignore
index 2a1b8c0e..15420727 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,11 +8,19 @@ __pycache__/
 
 # Agent / AI assistant local files
 .planning/
+.superpowers/
+.worktrees/
+docs/superpowers/
 helloagents/
 AGENTS.md
 CLAUDE.md
-.codex
 .codex/
+!.codex/
+.codex/*
+!.codex/skills/
+.codex/skills/*
+!.codex/skills/moonbridge-webui-design/
+!.codex/skills/moonbridge-webui-design/**
 .claude
 .claude/
 .agents
@@ -51,9 +59,19 @@ node_modules/
 build/
 .wrangler/
 # WebUI build artifacts (source in webui/)
+webui/node_modules
+webui/node_modules/
+webui/dist/
+webui/coverage/
+webui/.vite/
+webui/.vitest/
+webui/*.tsbuildinfo
+webui/test-results/
+webui/playwright-report/
 
 # Wrangler dev vars
 .dev.vars
 /moonbridge
+/logs/
 logs/
 *.log
diff --git a/Makefile b/Makefile
index 7a275008..a52b895e 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: test cover cover-html cover-check build
+.PHONY: test cover cover-html cover-check build webui-install webui-test webui-build build-with-webui
 
 COVERAGE_THRESHOLD := 95
 COVER_PROFILE := /tmp/moonbridge-coverage.out
@@ -6,6 +6,21 @@ COVER_PROFILE := /tmp/moonbridge-coverage.out
 build:
 	CGO_ENABLED=0 go build ./...
 
+webui-install:
+	npm --prefix webui install
+
+webui-test:
+	npm --prefix webui test
+
+webui-build:
+	npm --prefix webui run build
+	rm -rf internal/service/webui/dist
+	mkdir -p internal/service/webui/dist
+	cp -R webui/dist/. internal/service/webui/dist/
+
+build-with-webui: webui-build
+	CGO_ENABLED=0 go build ./...
+
 test:
 	CGO_ENABLED=0 go test ./...
 
diff --git a/README.md b/README.md
index 04958912..63c38d7f 100644
--- a/README.md
+++ b/README.md
@@ -10,17 +10,20 @@ Moon Bridge 是一个用 Go 编写的协议转换与模型路由代理。对外
 ## 快速开始
 
 ```bash
-# 复制配置并编辑
-cp config.example.yml config.yml
-# 修改 config.yml 中的 api_key
+# pacman 或二进制安装后直接启动
+moonbridge
 
-# 启动
-go run ./cmd/moonbridge -config config.yml
+# 首次无配置启动会创建 $HOME/moonbridge/config.yml
+# 打开 http://127.0.0.1:38440/console/
+# 在 Web Console 中配置 Provider、Model 和 API Key
+
+# 源码开发也可以直接运行
+go run ./cmd/moonbridge
 
 # 另见 CookBook.md 中的详细使用场景
 ```
 
-要求 Go 1.25+。
+源码开发要求 Go 1.25+。
 
 ## 核心能力
 
@@ -74,7 +77,7 @@ docker run -p 38440:38440 -v $(pwd)/config.yml:/config/config.yml moonbridge
 
 | 参数 | 默认值 | 说明 |
 |------|--------|------|
-| `-config` | `${XDG_CONFIG_HOME}/moonbridge/config.yml` | 配置文件路径 |
+| `-config` | `$HOME/moonbridge/config.yml` | 配置文件路径 |
 | `-addr` | 来自配置文件 | 覆盖监听地址 |
 | `-mode` | 来自配置文件 | 覆盖运行模式（Transform/CaptureAnthropic/CaptureResponse） |
 | `-print-addr` | — | 打印配置的监听地址后退出 |
@@ -92,6 +95,7 @@ docker run -p 38440:38440 -v $(pwd)/config.yml:/config/config.yml moonbridge
 | `/responses` | POST | 同上（无 `/v1` 前缀） |
 | `/v1/models` | GET | 列出可用模型 |
 | `/models` | GET | 同上 |
+| `/console/` | GET | 嵌入式 Web Console |
 | `/api/v1/` | — | 管理 API（需启用持久化） |
 
 详细 API 文档见 [API.md](docs/api.md)。
diff --git a/cmd/cloudflare/main.go b/cmd/cloudflare/main.go
index 2fee599a..00bfdcd5 100644
--- a/cmd/cloudflare/main.go
+++ b/cmd/cloudflare/main.go
@@ -98,7 +98,7 @@ func main() {
 	defer plugins.ShutdownAll()
 
 	// Wire plugin LogConsumer into the slog consume pipeline.
-	logger.SetConsumeFunc(func(entries []logger.LogEntry) []logger.LogEntry {
+	logger.AddConsumeFunc(func(entries []logger.LogEntry) []logger.LogEntry {
 		return plugins.ConsumeGlobalLog(entries)
 	})
 
diff --git a/cmd/moonbridge/main.go b/cmd/moonbridge/main.go
index 83b83a73..8f17326c 100644
--- a/cmd/moonbridge/main.go
+++ b/cmd/moonbridge/main.go
@@ -8,6 +8,7 @@ import (
 	"io"
 	"os"
 	"os/signal"
+	"path/filepath"
 	"syscall"
 
 	"log/slog"
@@ -47,6 +48,7 @@ func run(args []string, stdout io.Writer, stderr io.Writer) int {
 	if err := flags.Parse(args); err != nil {
 		return exitStartupErr
 	}
+	configFlagSet := flagWasSet(flags, "config")
 
 	var cfg config.Config
 	var err error
@@ -54,7 +56,7 @@ func run(args []string, stdout io.Writer, stderr io.Writer) int {
 	resolvedConfigPath, err := config.ResolveConfigPath(*configPath)
 	if err != nil {
 		writeStartupError(stderr, "配置文件路径解析失败", "", err,
-			"设置 XDG_CONFIG_HOME，或使用 -config 明确指定配置文件路径。")
+			"设置 HOME，或使用 -config 明确指定配置文件路径。")
 		return exitStartupErr
 	}
 	if *dumpConfigSchema {
@@ -66,12 +68,26 @@ func run(args []string, stdout io.Writer, stderr io.Writer) int {
 		return exitOK
 	}
 
+	if !configFlagSet {
+		created, err := createStarterConfigIfMissing(resolvedConfigPath, config.LoadOptions{
+			ExtensionSpecs: extensions.ConfigSpecs(),
+		})
+		if err != nil {
+			writeStartupError(stderr, "默认配置创建失败", resolvedConfigPath, err,
+				"确认 HOME 目录可写，或使用 -config 指向已有配置文件。")
+			return exitStartupErr
+		}
+		if created {
+			fmt.Fprintf(stderr, "已创建默认配置: %s\n", resolvedConfigPath)
+		}
+	}
+
 	cfg, err = config.LoadFromFileWithOptions(resolvedConfigPath, config.LoadOptions{
 		ExtensionSpecs: extensions.ConfigSpecs(),
 	})
 	if err != nil {
 		writeStartupError(stderr, "配置文件加载失败", resolvedConfigPath, err,
-			"未传 -config 时默认读取 ${XDG_CONFIG_HOME:-$HOME/.config}/moonbridge/config.yml。",
+			"未传 -config 时默认读取 $HOME/moonbridge/config.yml。",
 			"检查 YAML 语法、字段拼写和缩进。",
 			"确认 provider、routes、developer.proxy 等必填配置都已补齐。",
 			"如果是 protocol 字段，Responses 直通请使用 openai-response。")
@@ -136,6 +152,140 @@ func run(args []string, stdout io.Writer, stderr io.Writer) int {
 	return exitOK
 }
 
+func flagWasSet(flags *flag.FlagSet, name string) bool {
+	wasSet := false
+	flags.Visit(func(f *flag.Flag) {
+		if f.Name == name {
+			wasSet = true
+		}
+	})
+	return wasSet
+}
+
+func createStarterConfigIfMissing(configPath string, opts config.LoadOptions) (bool, error) {
+	if _, err := os.Stat(configPath); err == nil {
+		return false, nil
+	} else if !os.IsNotExist(err) {
+		return false, fmt.Errorf("stat config %s: %w", configPath, err)
+	}
+
+	dbPath, err := config.StarterSQLiteDBPath(configPath)
+	if err != nil {
+		return false, err
+	}
+	data, err := config.StarterConfigYAML(dbPath, opts)
+	if err != nil {
+		return false, err
+	}
+	configDir := filepath.Dir(configPath)
+	if err := os.MkdirAll(configDir, 0o700); err != nil {
+		return false, fmt.Errorf("create config directory %s: %w", configDir, err)
+	}
+	if err := os.Chmod(configDir, 0o700); err != nil {
+		return false, fmt.Errorf("chmod config directory %s: %w", configDir, err)
+	}
+	created, err := writeFileExclusive(configPath, data, 0o600)
+	if err != nil {
+		return false, err
+	}
+	return created, nil
+}
+
+func writeFileExclusive(path string, data []byte, perm os.FileMode) (bool, error) {
+	configDir := filepath.Dir(path)
+	tempFile, err := os.CreateTemp(configDir, "."+filepath.Base(path)+".*.tmp")
+	if err != nil {
+		return false, fmt.Errorf("create temp config file in %s: %w", configDir, err)
+	}
+	tempPath := tempFile.Name()
+	if err := tempFile.Chmod(perm); err != nil {
+		return false, cleanupTempConfigFile(tempFile, tempPath, fmt.Errorf("chmod temp config file %s: %w", tempPath, err))
+	}
+	written, err := tempFile.Write(data)
+	if err == nil && written != len(data) {
+		err = io.ErrShortWrite
+	}
+	if err != nil {
+		return false, cleanupTempConfigFile(tempFile, tempPath, fmt.Errorf("write temp config file %s: %w", tempPath, err))
+	}
+	if err := tempFile.Sync(); err != nil {
+		return false, cleanupTempConfigFile(tempFile, tempPath, fmt.Errorf("sync temp config file %s: %w", tempPath, err))
+	}
+	if err := tempFile.Close(); err != nil {
+		return false, cleanupTempPath(tempPath, fmt.Errorf("close temp config file %s: %w", tempPath, err))
+	}
+	return publishConfigFile(tempPath, path)
+}
+
+func publishConfigFile(tempPath string, finalPath string) (bool, error) {
+	if err := os.Link(tempPath, finalPath); err != nil {
+		cleanupErr := cleanupTempPath(tempPath, nil)
+		if os.IsExist(err) {
+			if cleanupErr != nil {
+				return false, cleanupErr
+			}
+			return false, nil
+		}
+		if cleanupErr != nil {
+			return false, errors.Join(fmt.Errorf("publish config file %s from %s: %w", finalPath, tempPath, err), cleanupErr)
+		}
+		return false, fmt.Errorf("publish config file %s from %s: %w", finalPath, tempPath, err)
+	}
+	if err := syncParentDir(finalPath); err != nil {
+		return false, cleanupTempPath(tempPath, fmt.Errorf("sync config directory after publishing %s: %w", finalPath, err))
+	}
+	if err := os.Remove(tempPath); err != nil {
+		return false, fmt.Errorf("remove published temp config file %s: %w", tempPath, err)
+	}
+	if err := syncParentDir(finalPath); err != nil {
+		return false, fmt.Errorf("sync config directory after removing temp config %s: %w", tempPath, err)
+	}
+	return true, nil
+}
+
+func syncParentDir(path string) error {
+	dirPath := filepath.Dir(path)
+	dir, err := os.Open(dirPath)
+	if err != nil {
+		return fmt.Errorf("open config directory %s: %w", dirPath, err)
+	}
+	if err := dir.Sync(); err != nil {
+		closeErr := dir.Close()
+		if closeErr != nil {
+			return errors.Join(fmt.Errorf("sync config directory %s: %w", dirPath, err), fmt.Errorf("close config directory %s: %w", dirPath, closeErr))
+		}
+		return fmt.Errorf("sync config directory %s: %w", dirPath, err)
+	}
+	if err := dir.Close(); err != nil {
+		return fmt.Errorf("close config directory %s: %w", dirPath, err)
+	}
+	return nil
+}
+
+func cleanupTempConfigFile(file *os.File, path string, cause error) error {
+	var errs []error
+	errs = append(errs, cause)
+	if err := file.Close(); err != nil {
+		errs = append(errs, fmt.Errorf("close temp config file %s: %w", path, err))
+	}
+	return cleanupTempPath(path, errors.Join(errs...))
+}
+
+func cleanupTempPath(path string, cause error) error {
+	var errs []error
+	if cause != nil {
+		errs = append(errs, cause)
+	}
+	if err := os.Remove(path); err != nil {
+		if !os.IsNotExist(err) {
+			errs = append(errs, fmt.Errorf("remove temp config file %s: %w", path, err))
+		}
+	} else if err := syncParentDir(path); err != nil {
+		errs = append(errs, fmt.Errorf("sync config directory after removing temp config %s: %w", path, err))
+	}
+	return errors.Join(errs...)
+}
+
 func writeStartupError(output io.Writer, title string, configPath string, err error, hints ...string) {
 	fmt.Fprintf(output, "Moon Bridge 启动失败：%s\n", title)
 	if configPath != "" {
diff --git a/cmd/moonbridge/main_test.go b/cmd/moonbridge/main_test.go
index 30665506..09601db7 100644
--- a/cmd/moonbridge/main_test.go
+++ b/cmd/moonbridge/main_test.go
@@ -9,6 +9,7 @@ import (
 
 	"moonbridge/internal/config"
 	"moonbridge/internal/extension/codex"
+	"moonbridge/internal/service/app"
 )
 
 func TestPrintCodexConfigTomlDoesNotSetServiceTier(t *testing.T) {
@@ -92,10 +93,11 @@ routes:
 	}
 }
 
-func TestRunUsesXDGDefaultConfigPath(t *testing.T) {
-	configHome := t.TempDir()
-	t.Setenv("XDG_CONFIG_HOME", configHome)
-	configDir := filepath.Join(configHome, "moonbridge")
+func TestRunUsesHomeMoonBridgeDefaultConfigPath(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	t.Setenv("XDG_CONFIG_HOME", filepath.Join(t.TempDir(), "xdg"))
+	configDir := filepath.Join(home, "moonbridge")
 	if err := os.Mkdir(configDir, 0755); err != nil {
 		t.Fatalf("Mkdir() error = %v", err)
 	}
@@ -111,6 +113,10 @@ proxy:
 	if err != nil {
 		t.Fatalf("WriteFile() error = %v", err)
 	}
+	before, err := os.ReadFile(configPath)
+	if err != nil {
+		t.Fatalf("ReadFile() error = %v", err)
+	}
 
 	var stdout bytes.Buffer
 	var stderr bytes.Buffer
@@ -123,4 +129,146 @@ proxy:
 	if got := strings.TrimSpace(stdout.String()); got != "CaptureResponse" {
 		t.Fatalf("stdout = %q, want CaptureResponse", got)
 	}
+	after, err := os.ReadFile(configPath)
+	if err != nil {
+		t.Fatalf("ReadFile() after run error = %v", err)
+	}
+	if string(after) != string(before) {
+		t.Fatalf("existing default config was overwritten\nbefore:\n%s\nafter:\n%s", before, after)
+	}
+	if strings.Contains(stderr.String(), "已创建默认配置") {
+		t.Fatalf("stderr should not mention default config creation for existing config:\n%s", stderr.String())
+	}
+}
+
+func TestRunCreatesStarterConfigWhenDefaultConfigIsMissing(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	t.Setenv("XDG_CONFIG_HOME", filepath.Join(t.TempDir(), "xdg"))
+
+	var stdout bytes.Buffer
+	var stderr bytes.Buffer
+
+	code := run([]string{"-print-mode"}, &stdout, &stderr)
+
+	if code != exitOK {
+		t.Fatalf("run() exit code = %d, want %d; stderr = %s", code, exitOK, stderr.String())
+	}
+	if got := strings.TrimSpace(stdout.String()); got != "Transform" {
+		t.Fatalf("stdout = %q, want Transform", got)
+	}
+	configPath := filepath.Join(home, "moonbridge", "config.yml")
+	dirInfo, err := os.Stat(filepath.Dir(configPath))
+	if err != nil {
+		t.Fatalf("stat config dir: %v", err)
+	}
+	if got := dirInfo.Mode().Perm(); got != 0o700 {
+		t.Fatalf("created config dir mode = %v, want 0700", got)
+	}
+	info, err := os.Stat(configPath)
+	if err != nil {
+		t.Fatalf("stat created config: %v", err)
+	}
+	if got := info.Mode().Perm(); got != 0o600 {
+		t.Fatalf("created config mode = %v, want 0600", got)
+	}
+	cfg, err := config.LoadFromFileWithOptions(configPath, config.LoadOptions{
+		ExtensionSpecs: app.BuiltinExtensions().ConfigSpecs(),
+	})
+	if err != nil {
+		t.Fatalf("created config failed to load: %v", err)
+	}
+	if cfg.Mode != config.ModeTransform {
+		t.Fatalf("created config mode = %q, want Transform", cfg.Mode)
+	}
+	if cfg.Persistence.ActiveProvider != "db_sqlite" {
+		t.Fatalf("persistence.active_provider = %q, want db_sqlite", cfg.Persistence.ActiveProvider)
+	}
+	sqliteConfig, ok := cfg.Extensions["db_sqlite"]
+	if !ok {
+		t.Fatalf("extensions missing db_sqlite: %+v", cfg.Extensions)
+	}
+	if sqliteConfig.Enabled == nil || !*sqliteConfig.Enabled {
+		t.Fatalf("extensions.db_sqlite.enabled = %v, want true", sqliteConfig.Enabled)
+	}
+	dbPath, ok := sqliteConfig.RawConfig["path"].(string)
+	if !ok {
+		t.Fatalf("extensions.db_sqlite.config.path = %#v, want string", sqliteConfig.RawConfig["path"])
+	}
+	wantDBPath := filepath.Join(home, "moonbridge", "data", "moonbridge.db")
+	if dbPath != wantDBPath {
+		t.Fatalf("sqlite db path = %q, want %q", dbPath, wantDBPath)
+	}
+	if !filepath.IsAbs(dbPath) {
+		t.Fatalf("sqlite db path = %q, want absolute path", dbPath)
+	}
+	output := stderr.String()
+	if !strings.Contains(output, "已创建默认配置") || !strings.Contains(output, configPath) {
+		t.Fatalf("stderr missing starter config creation notice with path:\n%s", output)
+	}
+}
+
+func TestRunExplicitMissingConfigStillFailsFast(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	missingPath := filepath.Join(t.TempDir(), "missing", "config.yml")
+
+	var stdout bytes.Buffer
+	var stderr bytes.Buffer
+
+	code := run([]string{"-config", missingPath, "-print-mode"}, &stdout, &stderr)
+
+	if code != exitStartupErr {
+		t.Fatalf("run() exit code = %d, want %d", code, exitStartupErr)
+	}
+	if stdout.Len() != 0 {
+		t.Fatalf("stdout = %q, want empty", stdout.String())
+	}
+	if _, err := os.Stat(missingPath); !os.IsNotExist(err) {
+		t.Fatalf("explicit missing config stat error = %v, want not exist", err)
+	}
+	output := stderr.String()
+	for _, want := range []string{
+		"Moon Bridge 启动失败：配置文件加载失败",
+		"配置文件: " + missingPath,
+		"read config " + missingPath,
+	} {
+		if !strings.Contains(output, want) {
+			t.Fatalf("stderr missing %q:\n%s", want, output)
+		}
+	}
+	if strings.Contains(output, "已创建默认配置") {
+		t.Fatalf("stderr should not mention default config creation:\n%s", output)
+	}
+}
+
+func TestPublishConfigFileDoesNotOverwriteExistingFinalFile(t *testing.T) {
+	dir := t.TempDir()
+	finalPath := filepath.Join(dir, "config.yml")
+	tempPath := filepath.Join(dir, ".config.yml.tmp")
+	if err := os.WriteFile(finalPath, []byte("existing-config"), 0o600); err != nil {
+		t.Fatalf("WriteFile(final) error = %v", err)
+	}
+	if err := os.WriteFile(tempPath, []byte("starter-config"), 0o600); err != nil {
+		t.Fatalf("WriteFile(temp) error = %v", err)
+	}
+
+	created, err := publishConfigFile(tempPath, finalPath)
+
+	if err != nil {
+		t.Fatalf("publishConfigFile() error = %v", err)
+	}
+	if created {
+		t.Fatal("publishConfigFile() created = true, want false")
+	}
+	got, err := os.ReadFile(finalPath)
+	if err != nil {
+		t.Fatalf("ReadFile(final) error = %v", err)
+	}
+	if string(got) != "existing-config" {
+		t.Fatalf("final file content = %q, want existing-config", got)
+	}
+	if _, err := os.Stat(tempPath); !os.IsNotExist(err) {
+		t.Fatalf("temp file stat error = %v, want not exist", err)
+	}
 }
diff --git a/docs/CONFIGURATION.md b/docs/CONFIGURATION.md
index 0391d1e6..5a7dda2e 100644
--- a/docs/CONFIGURATION.md
+++ b/docs/CONFIGURATION.md
@@ -2,7 +2,11 @@
 
 > 完整示例见 [`config.example.yml`](config.example.yml)，JSON Schema 见 [`config.schema.json`](config.schema.json)
 
-Moon Bridge 使用 YAML 配置文件。默认路径为当前目录下的 `config.yml`，通过 `-config <path>` 可指定任意路径。
+Moon Bridge 使用 YAML 配置文件。未传 `-config` 时默认读取 `$HOME/moonbridge/config.yml`；如果该文件不存在，会自动创建 starter 配置后继续启动。starter 配置启用 SQLite，数据库路径为 `$HOME/moonbridge/data/moonbridge.db`。
+
+通过 `-config <path>` 可指定任意路径；显式 `-config` 指向的文件不存在时不会自动创建，程序会 fail fast。
+
+Web Console 的常规配置流程不要求用户直接编辑 YAML 或了解配置文件路径。启用持久化存储后，Console 通过 `/api/v1/config/graph` 以资源字段形式实时保存配置；YAML 文件仍保留给 CLI、部署脚本、备份、迁移和管理员批量编辑使用。
 
 ## 顶层结构
 
@@ -24,6 +28,39 @@ defaults:
   max_tokens: 65536
 ```
 
+## Web Console 与配置图
+
+Console 将当前 `FileConfig` 映射为配置图资源：
+
+| Console 页面 | 主要资源 |
+|--------------|----------|
+| Overview | `mode`、运行态、校验状态、重启要求 |
+| Models & Providers | `provider`、`provider_offer`、`model` |
+| Routes | `route` |
+| Defaults | `defaults`、`trace`、`log` |
+| Search & Tools | `web_search`、`extension`、`proxy` |
+| Storage | `cache`、`persistence` |
+| Security | `server` |
+| Logs | 后台日志输出，不修改配置 |
+
+字段编辑会发送配置图 patch。普通可热重载字段提交后直接生效；`server`、`mode`、`proxy`、`persistence` 等字段可能显示需要重启。密钥字段在读取时脱敏，Console 将其作为 write-only 输入处理。
+
+使用 Console 前通常需要启用持久化配置存储，例如 SQLite：
+
+```yaml
+persistence:
+  active_provider: db_sqlite
+
+extensions:
+  db_sqlite:
+    enabled: true
+    config:
+      path: ~/.moon-bridge/moonbridge.db
+      wal: true
+      busy_timeout_ms: 5000
+      max_open_conns: 1
+```
+
 ## Mode
 
 | 值 | 行为 |
@@ -203,7 +240,7 @@ proxy:
 
 | 标志 | 默认值 | 说明 |
 |------|--------|------|
-| `-config` | `${XDG_CONFIG_HOME}/moonbridge/config.yml` | 配置文件路径 |
+| `-config` | `$HOME/moonbridge/config.yml` | 配置文件路径 |
 | `-addr` | 来自配置文件 | 覆盖监听地址 |
 | `-mode` | 来自配置文件 | 覆盖运行模式（Transform/CaptureAnthropic/CaptureResponse） |
 | `-print-addr` | — | 打印配置的监听地址后退出 |
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index 1943504e..de3a7341 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -61,6 +61,51 @@ go build -o moonbridge ./cmd/moonbridge
 go build -o worker.wasm ./cmd/cloudflare
 ```
 
+## Web Console 开发
+
+Moon Bridge Console 是嵌入到 Go 二进制中的 Vite/React 前端，生产路径为 `/console/`。
+
+```bash
+# 安装前端依赖
+npm --prefix webui install
+
+# 启动前端开发服务器，访问 http://127.0.0.1:5173/console/
+npm --prefix webui run dev
+
+# 前端单元测试、E2E 和生产构建
+npm --prefix webui test
+npm --prefix webui run e2e
+npm --prefix webui run build
+
+# 构建并同步到 Go embed 目录
+make webui-build
+
+# 构建带嵌入式 Console 的 Go 二进制
+make build-with-webui
+```
+
+开发服务器会将 `/api`、`/v1`、`/responses`、`/models` 代理到 `127.0.0.1:38440`。运行预览后端时，需要使用启用了 `persistence.active_provider` 的配置，否则 `/api/v1/` 管理 API 不会注册，Console 会显示 setup/unavailable 状态。
+
+Console 配置页使用配置图 API：
+
+- `GET /api/v1/config/graph`
+- `PATCH /api/v1/config/graph`
+- `POST /api/v1/config/graph/validate`
+- `POST /api/v1/config/resources/{kind}`
+- `DELETE /api/v1/config/resources/{kind}/{id}`
+- `GET /api/v1/logs/recent`
+- `GET /api/v1/logs/stream`
+
+相关测试命令：
+
+```bash
+npm --prefix webui test -- configGraph logs
+npm --prefix webui run e2e
+env GOCACHE=/tmp/moonbridge-go-build GOMODCACHE=/tmp/moonbridge-go-mod go test ./internal/service/api ./internal/service/webui ./internal/service/server
+```
+
+生产构建产物不会直接提交 `webui/dist/`；`make webui-build` 会把它复制到 `internal/service/webui/dist/`，该目录由 `go:embed` 打包。
+
 ## 运行
 
 ```bash
@@ -87,6 +132,7 @@ cd internal/e2e && PROVIDER=gemini go test -v -count=1 -run TestGoogleGenAIE2E
 
 # 使用 Makefile 构建与测试
 make build
+make build-with-webui
 make test
 ```
 
diff --git a/docs/GETTING-STARTED.md b/docs/GETTING-STARTED.md
index 2d65a32e..882ff555 100644
--- a/docs/GETTING-STARTED.md
+++ b/docs/GETTING-STARTED.md
@@ -22,21 +22,29 @@ cd moon-bridge
 go build -o moonbridge ./cmd/moonbridge
 ```
 
-或直接运行：
+pacman 或二进制安装后可以直接运行：
 
 ```bash
-go run ./cmd/moonbridge -config config.yml
+moonbridge
+```
+
+源码开发也可以直接运行：
+
+```bash
+go run ./cmd/moonbridge
 ```
 
 ## 2. 配置
 
-复制示例配置并编辑：
+未传 `-config` 且 `$HOME/moonbridge/config.yml` 不存在时，Moon Bridge 会自动创建 starter 配置，启用 SQLite，并把数据库放在 `$HOME/moonbridge/data/moonbridge.db`。启动后打开 Web Console：
 
-```bash
-cp config.example.yml config.yml
+```text
+http://127.0.0.1:38440/console/
 ```
 
-详细配置说明见 [CONFIGURATION.md](CONFIGURATION.md)。
+真实请求前，需要在 Web Console 中替换 starter 配置里的占位 Provider、Model 和 API Key。仍需要准备一个上游 LLM Provider 的 API Key（如 DeepSeek、OpenAI、Anthropic、Kimi 等）。
+
+如需手动维护 YAML，可参考 `config.example.yml`。详细配置说明见 [CONFIGURATION.md](CONFIGURATION.md)。
 
 ### 最小配置示例（以 DeepSeek 为例）
 
@@ -79,12 +87,14 @@ routes:
 ## 3. 启动
 
 ```bash
-go run ./cmd/moonbridge -config config.yml
+moonbridge
 ```
 
 日志输出：
 
 ```
+Moon Bridge 监听于 127.0.0.1:38440
+Web Console: http://127.0.0.1:38440/console/
 INFO HTTP 服务器监听中 addr=127.0.0.1:38440
 ```
 
diff --git a/docs/api.md b/docs/api.md
index 2d024e84..c86fd8ad 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -8,6 +8,16 @@ Moon Bridge 对外暴露 OpenAI Responses 兼容端点、模型列表端点和
 - **认证**：通过 `auth_token` 配置启用 Bearer Token
 - **内容类型**：`application/json`
 
+## Web Console
+
+生产二进制会在 `/console/` 提供嵌入式 Web Console。Console 使用同源 RPC：
+
+- `/api/v1/config/graph`：配置图 API，Console 通过它读取资源图并实时保存字段编辑。
+- `/api/v1/logs/recent`、`/api/v1/logs/stream`：日志 API，Console Logs 页面使用。
+- `/v1/models`、`/v1/responses`：RPC smoke test 面板使用的 OpenAI-compatible 端点。
+
+管理 API 只有在配置启用 `persistence.active_provider` 且配置存储初始化成功时可用；否则 `/api/v1/*` 可能返回 404 或 `store_unavailable`。Console 的常规配置流程不暴露配置文件路径或 YAML 编辑器；用户通过 UI 字段直接修改配置图资源。
+
 ## 核心端点
 
 ### POST /v1/responses
@@ -60,39 +70,156 @@ data: {"response": {...}}
 
 列出所有可用模型列表。
 
+响应为 Moon Bridge 目录形态：
+
+```json
+{
+  "models": [
+    {"slug": "moonbridge", "name": "Moon Bridge", "provider": "route", "model": "claude-sonnet"}
+  ]
+}
+```
+
 ## 管理 API
 
-当 `persistence.active_provider` 启用时，管理 API 在 `/api/v1/` 下可用。
+当 `persistence.active_provider` 启用时，管理 API 在 `/api/v1/` 下可用。当前 Console 主要使用配置图 API；旧的资源端点仍保留给脚本或兼容调用。
 
 | 端点 | 方法 | 功能 |
 |------|------|------|
-| `/api/v1/providers` | GET/POST/PUT/PATCH/DELETE | 管理 Provider CRUD |
-| `/api/v1/providers/{key}/offers` | POST | 创建 Offer |
-| `/api/v1/providers/{key}/offers/{model}` | PATCH/DELETE | 更新/删除 Offer |
-| `/api/v1/providers/{key}/test` | POST | 测试 Provider 连通性 |
-| `/api/v1/models` | GET | 列出模型定义 |
-| `/api/v1/models/{slug}` | GET/PUT/DELETE | 管理单个模型定义 |
-| `/api/v1/routes` | GET | 列出路由 |
-| `/api/v1/routes/{alias}` | GET/PUT/DELETE | 管理单个路由 |
-| `/api/v1/defaults` | GET/PUT | 管理默认配置（model/max_tokens/system_prompt） |
-| `/api/v1/web-search` | GET/PUT | 管理全局 Web Search 设置 |
-| `/api/v1/extensions` | GET | 列出扩展 |
-| `/api/v1/extensions/{name}` | GET/PUT | 管理扩展设置 |
-| `/api/v1/config/effective` | GET | 获取生效配置 |
-| `/api/v1/config/export` | GET | 导出配置 YAML |
-| `/api/v1/config/import` | POST | 导入配置 YAML |
-| `/api/v1/config/validate` | POST | 校验配置 |
-| `/api/v1/changes` | GET | 列出未提交的配置变更 |
-| `/api/v1/changes/apply` | POST | 应用配置变更 |
-| `/api/v1/changes/discard` | POST | 放弃配置变更 |
-| `/api/v1/status` | GET | 系统状态 |
+| `/api/v1/config/graph` | GET | 获取当前配置图、资源 schema、校验状态和运行状态 |
+| `/api/v1/config/graph` | PATCH | 按字段实时修改配置图 |
+| `/api/v1/config/graph/validate` | POST | 验证一组配置图修改，但不提交 |
+| `/api/v1/config/resources/{kind}` | POST | 创建配置资源 |
+| `/api/v1/config/resources/{kind}/{id}` | DELETE | 删除配置资源 |
+| `/api/v1/logs/recent` | GET | 获取最近后端日志 |
+| `/api/v1/logs/stream` | GET | 以 Server-Sent Events 形式跟随后端日志 |
+| `/api/v1/status` | GET | 运行态状态 |
 | `/api/v1/status/providers` | GET | Provider 运行状态 |
+| `/api/v1/providers` | GET | 分页列出 Provider |
+| `/api/v1/providers/{key}` | GET/PUT/PATCH/DELETE | 查看、创建、更新、删除 Provider |
+| `/api/v1/providers/{key}/offers` | POST | 新增 Provider offer |
+| `/api/v1/providers/{key}/offers/{model}` | PATCH/DELETE | 更新或删除 Provider offer |
+| `/api/v1/providers/{key}/test` | POST | 测试 Provider 连通性 |
+| `/api/v1/models` | GET | 分页列出模型定义 |
+| `/api/v1/models/{slug}` | GET/PUT/DELETE | 查看、创建、删除模型定义 |
+| `/api/v1/routes` | GET | 分页列出路由别名 |
+| `/api/v1/routes/{alias}` | GET/PUT/DELETE | 查看、创建、删除路由别名 |
+| `/api/v1/defaults` | GET/PUT | 查看和 stage 默认模型设置 |
+| `/api/v1/web-search` | GET/PUT | 查看和 stage Web Search 设置 |
+| `/api/v1/extensions` | GET | 列出扩展名 |
+| `/api/v1/extensions/{name}` | GET/PUT | 查看和 stage 扩展 JSON 配置 |
+| `/api/v1/config/effective` | GET | 获取 masked 有效配置 |
+| `/api/v1/config/export` | GET | 导出 YAML 配置 |
+| `/api/v1/config/import` | POST | 导入 YAML 并 stage 变更 |
+| `/api/v1/config/validate` | POST | 校验 YAML |
+| `/api/v1/changes` | GET | 列出待应用变更 |
+| `/api/v1/changes/apply` | POST | 应用待变更并 reload |
+| `/api/v1/changes/discard` | POST | 丢弃待变更 |
 | `/api/v1/sessions` | GET | 列出活跃会话 |
 | `/api/v1/stats` | GET | 用量统计 |
 | `/api/v1/stats/summary` | GET | 用量统计摘要 |
 | `/api/v1/logs` | GET | 日志查询 |
 | `/api/v1/version` | GET | 版本信息 |
 
+### 配置图 API
+
+`GET /api/v1/config/graph` 返回当前可编辑资源图：
+
+```json
+{
+  "revision": "rev-...",
+  "resources": [
+    {
+      "kind": "defaults",
+      "id": "main",
+      "label": "Defaults",
+      "value": {"model": "moonbridge", "max_tokens": 65536},
+      "schema": {"fields": [{"path": "model", "type": "string", "label": "Model"}]},
+      "status": "saved",
+      "runtimeImpact": "normal",
+      "hotReloadable": true
+    }
+  ],
+  "validation": {"valid": true},
+  "runtime": {"status": "ok"},
+  "capabilities": {"autosave": true, "logs": true}
+}
+```
+
+资源类型包括：`mode`、`trace`、`log`、`server`、`defaults`、`model`、`provider`、`provider_offer`、`route`、`web_search`、`cache`、`persistence`、`extension`、`proxy`。
+
+`PATCH /api/v1/config/graph` 请求体：
+
+```json
+{
+  "baseRevision": "rev-...",
+  "changes": [
+    {"kind": "defaults", "id": "main", "field": "model", "value": "claude-sonnet"}
+  ]
+}
+```
+
+返回结果：
+
+| `result` | HTTP 状态 | 含义 |
+|----------|-----------|------|
+| `committed` | 200 | 已提交并重新构建配置图 |
+| `restartRequired` | 200 | 已提交，但变更需要重启后完全生效 |
+| `revisionConflict` | 409 | `baseRevision` 不是当前 revision |
+| `validationRejected` | 400 | 候选配置未通过静态校验 |
+| `runtimeRejected` | 400 | 候选配置通过静态校验，但运行时 reload 拒绝；可能包含 `rollbackValue` |
+| `draftRejected` | 400 | 请求草稿无法应用到配置结构 |
+
+`POST /api/v1/config/graph/validate` 使用同样的请求体和响应结构，但不会提交变更；成功时返回候选 `graph` 且 `revision` 保持不变。
+
+创建资源：
+
+```http
+POST /api/v1/config/resources/{kind}
+Content-Type: application/json
+```
+
+```json
+{"baseRevision": "rev-...", "id": "new-id", "value": {}}
+```
+
+删除资源可在 query 或 JSON body 中传入 base revision：
+
+```http
+DELETE /api/v1/config/resources/{kind}/{id}?baseRevision=rev-...
+```
+
+### 日志 API
+
+`GET /api/v1/logs/recent?limit=200` 返回最近日志数组；`limit` 默认为 100，最大 1000。每条记录保留后端原始日志文本：
+
+```json
+[
+  {
+    "timestamp": "2026-06-07T00:00:00Z",
+    "level": "INFO",
+    "message": "server started",
+    "attrs": {"addr": "127.0.0.1:38440"},
+    "raw": "time=... level=INFO msg=server-started"
+  }
+]
+```
+
+`GET /api/v1/logs/stream` 返回 `text/event-stream`，每个事件为一条 JSON 日志：
+
+```text
+data: {"timestamp":"...","level":"INFO","message":"...","raw":"..."}
+```
+
+导出带 secrets 的配置时必须使用：
+
+```http
+GET /api/v1/config/export?include_secrets=true
+X-Confirm-Secrets: true
+```
+
+`POST /api/v1/config/validate` 请求字段名为 `config`，内容是 YAML 字符串；校验失败时可能返回 `200` 且 `{"valid":false,"errors":[...]}`。
+
 ## 错误处理
 
 错误响应格式：
diff --git a/docs/webui/material-component-debt.md b/docs/webui/material-component-debt.md
new file mode 100644
index 00000000..548a212b
--- /dev/null
+++ b/docs/webui/material-component-debt.md
@@ -0,0 +1,48 @@
+# Webui Material Component Debt
+
+This document tracks webui controls that violate the workspace rule: common controls must use official Material Web components from `@material/web` unless the user explicitly approves a custom control for that specific case.
+
+## Migration Order
+
+1. `SelectMenu` - migrated
+2. `AuthGate` - migrated
+3. `SchemaField` - migrated
+4. `CreateResourcePanel` - migrated
+5. `LogPanel` and `OverviewPage` - migrated
+6. `RpcTestPage` - migrated
+7. `ModelsProvidersPage` - migrated
+8. `ResourceEditorCard` - migrated
+9. `AppShell` locale and theme controls - migrated
+
+## Debt Inventory
+
+| Order | Component | Location | Previous custom control | Current state | Visual verification |
+| --- | --- | --- | --- | --- | --- |
+| 1 | `SelectMenu` | `webui/src/features/configGraph/SelectMenu.tsx` | Handwritten combobox/listbox/option with local keyboard handling | Uses shared `MaterialSelect` wrapper around `md-outlined-select` and `md-select-option` | Compare config editor select fields on desktop and mobile; no major width, density, popover, or label drift |
+| 2 | `AuthGate` | `webui/src/components/AuthGate.tsx` | Native password input, custom checkbox, custom submit button | Uses Material text field, checkbox, and button wrappers | Verify auth card keeps existing hierarchy and spacing; checkbox and submit button must not dominate the card |
+| 3 | `SchemaField` | `webui/src/features/configGraph/SchemaField.tsx` | Custom outlined text field, textarea, JSON summary button, help icon button/tooltip | Uses Material text fields, outlined buttons, icon buttons, switch, and select wrappers | Verify resource editor fields across text, secret, number, textarea, object, array, and switch examples |
+| 4 | `CreateResourcePanel` | `webui/src/features/configGraph/CreateResourcePanel.tsx` | Custom buttons, text inputs, option groups, presets, help buttons | Uses Material buttons, icon buttons, text fields, selects, chips, and switch wrappers | Verify create provider/model/route/extension forms on desktop and mobile; no major grid or density drift |
+| 5 | `LogPanel` | `webui/src/features/logs/LogPanel.tsx` | Custom segmented controls, log level filter, action buttons, search field | Uses Material chips, outlined buttons, icon button, and text field wrappers | Verify logs toolbar remains compact and scannable in embedded overview and logs page contexts |
+| 5 | `OverviewPage` | `webui/src/features/overview/OverviewPage.tsx` | Custom usage range segmented control | Uses Material filter chips in `md-chip-set` | Verify usage dashboard header remains balanced and does not wrap awkwardly on mobile |
+| 6 | `RpcTestPage` | `webui/src/features/rpcTest/RpcTestPage.tsx` | Native select, textarea, number inputs, submit button | Uses Material select, text fields, and filled button wrappers | Verify smoke-test form remains simple and does not regress JSON response readability |
+| 7 | `ModelsProvidersPage` | `webui/src/features/modelProviders/ModelsProvidersPage.tsx` | Custom provider-offers expand button | Uses shared `MaterialIconButton` wrapper | Verify provider offers disclosure alignment and animation do not drift |
+| 8 | `ResourceEditorCard` | `webui/src/features/configGraph/ResourceEditorCard.tsx` | Custom delete, confirm, and cancel buttons | Uses shared Material filled and outlined button wrappers | Verify delete confirmation remains inline and compact |
+| 9 | `AppShell` | `webui/src/app/App.tsx` | Custom locale buttons and direct icon button bridge | Uses shared Material filled, outlined, and icon button wrappers | Verify app bar remains compact on desktop and wraps cleanly on mobile |
+
+## Current Exceptions
+
+- `md-chip-set` containers appear directly in page components because they are official Material Web grouping elements and do not need React property bridging.
+- Navigation rail links remain `NavLink` anchors, not button controls. They may use `md-icon` and `md-ripple` for Material affordance, but they are route links rather than button replacements.
+- Layout classes such as `.secondary-button` and `.fab-button` may be applied to Material Web host elements only. They must not be used to restyle native `<button>` elements.
+
+## Review Requirements
+
+- Tests must render actual UI and assert official Material Web elements are used for migrated controls.
+- Tests should query `md-*` custom elements directly when jsdom Testing Library does not expose Material Web shadow-DOM roles.
+- A custom control may remain only with explicit user approval and an inline or debt-document note explaining why Material Web is insufficient.
+- Evidence for outlined text-field/select migrations must verify official Material API usage, not just host-element presence: non-empty Material label, no replacement external label, slotted text-field icons, built-in select trailing affordance, and intentional `spellcheck` serialization.
+- Visual verification must include browser-rendered screenshots for pages touched by each migration. Major visual drift means the task is not complete even if tests pass.
+- Visual verification for outlined fields/selects must include browser-rendered empty, focused, filled, and error or help-icon states where applicable. Select evidence must include closed and opened states.
+- Store screenshot and report evidence under `docs/superpowers/reports/` unless the user explicitly asks to commit evidence artifacts.
+- Do not style Material Web internals or shadow DOM classes. Use public CSS custom properties and wrapper layout only.
+- Do not add fallback markup that recreates the replaced custom control.
diff --git a/internal/config/config.go b/internal/config/config.go
index e5695535..e89434e8 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -48,6 +48,7 @@ type WebSearchConfig struct {
 	TavilyAPIKey    string
 	FirecrawlAPIKey string
 	SearchMaxRounds int
+	Extra           map[string]any
 }
 
 type Config struct {
@@ -64,6 +65,7 @@ type Config struct {
 	TavilyAPIKey     string
 	FirecrawlAPIKey  string
 	SearchMaxRounds  int
+	WebSearchExtra   map[string]any
 	DefaultMaxTokens int
 	MaxSessions      int    `yaml:"max_sessions"` // 0 = unlimited
 	SessionTTL       string `yaml:"session_ttl"`  // default "24h"
@@ -98,6 +100,7 @@ type RouteEntry struct {
 	Description string
 	// BaseInstructions overrides the default model instructions for the catalog.
 	BaseInstructions           string
+	SupportsReasoning          bool
 	DefaultReasoningLevel      string
 	SupportedReasoningLevels   []ReasoningLevelPreset
 	SupportsReasoningSummaries bool
@@ -135,6 +138,7 @@ type ProviderDef struct {
 	TavilyAPIKey     string
 	FirecrawlAPIKey  string
 	SearchMaxRounds  int
+	WebSearchExtra   map[string]any
 	Extensions       map[string]ExtensionSettings
 	// Models is the provider's model catalog: upstream model name -> metadata.
 	Models map[string]ModelMeta
@@ -155,6 +159,7 @@ type ModelMeta struct {
 	Description string
 	// BaseInstructions overrides the default model instructions for the catalog.
 	BaseInstructions           string
+	SupportsReasoning          bool
 	DefaultReasoningLevel      string
 	SupportedReasoningLevels   []ReasoningLevelPreset
 	SupportsReasoningSummaries bool
@@ -192,6 +197,7 @@ type ModelDef struct {
 	DisplayName                 string
 	Description                 string
 	BaseInstructions            string
+	SupportsReasoning           bool
 	DefaultReasoningLevel       string
 	SupportedReasoningLevels    []ReasoningLevelPreset
 	SupportsReasoningSummaries  bool
@@ -413,6 +419,7 @@ func (cfg Config) RouteFor(model string) RouteEntry {
 				entry.CacheReadPrice = meta.CacheReadPrice
 				entry.DisplayName = meta.DisplayName
 				entry.Description = meta.Description
+				entry.SupportsReasoning = meta.SupportsReasoning
 				entry.DefaultReasoningLevel = meta.DefaultReasoningLevel
 				entry.SupportedReasoningLevels = meta.SupportedReasoningLevels
 				entry.SupportsReasoningSummaries = meta.SupportsReasoningSummaries
diff --git a/internal/config/config_loader.go b/internal/config/config_loader.go
index 2b366138..2ccf7d79 100644
--- a/internal/config/config_loader.go
+++ b/internal/config/config_loader.go
@@ -2,6 +2,7 @@ package config
 
 import (
 	"bytes"
+	"encoding/json"
 	"errors"
 	"fmt"
 	"os"
@@ -111,6 +112,7 @@ type ModelDefFileConfig struct {
 	DisplayName                 string                           `yaml:"display_name,omitempty" json:"display_name,omitempty"`
 	Description                 string                           `yaml:"description,omitempty" json:"description,omitempty"`
 	BaseInstructions            string                           `yaml:"base_instructions,omitempty" json:"base_instructions,omitempty"`
+	SupportsReasoning           *bool                            `yaml:"supports_reasoning,omitempty" json:"supports_reasoning,omitempty"`
 	DefaultReasoningLevel       string                           `yaml:"default_reasoning_level,omitempty" json:"default_reasoning_level,omitempty"`
 	SupportedReasoningLevels    []ReasoningLevelPresetFileConfig `yaml:"supported_reasoning_levels,omitempty" json:"supported_reasoning_levels,omitempty"`
 	SupportsReasoningSummaries  *bool                            `yaml:"supports_reasoning_summaries,omitempty" json:"supports_reasoning_summaries,omitempty"`
@@ -129,6 +131,37 @@ type OfferFileConfig struct {
 	Overrides    *ModelDefFileConfig    `yaml:"overrides,omitempty" json:"overrides,omitempty"`
 }
 
+type offerFileConfigWire struct {
+	Model        string                  `yaml:"model" json:"model"`
+	UpstreamName string                  `yaml:"upstream_name,omitempty" json:"upstream_name,omitempty"`
+	Priority     int                     `yaml:"priority,omitempty" json:"priority,omitempty"`
+	Pricing      *ModelPricingFileConfig `yaml:"pricing,omitempty" json:"pricing,omitempty"`
+	Overrides    *ModelDefFileConfig     `yaml:"overrides,omitempty" json:"overrides,omitempty"`
+}
+
+func (cfg OfferFileConfig) MarshalYAML() (any, error) {
+	return cfg.toWire(), nil
+}
+
+func (cfg OfferFileConfig) MarshalJSON() ([]byte, error) {
+	return json.Marshal(cfg.toWire())
+}
+
+func (cfg OfferFileConfig) toWire() offerFileConfigWire {
+	var pricing *ModelPricingFileConfig
+	if !cfg.Pricing.IsZero() {
+		value := cfg.Pricing
+		pricing = &value
+	}
+	return offerFileConfigWire{
+		Model:        cfg.Model,
+		UpstreamName: cfg.UpstreamName,
+		Priority:     cfg.Priority,
+		Pricing:      pricing,
+		Overrides:    cfg.Overrides,
+	}
+}
+
 type ProviderDefFileConfig struct {
 	BaseURL    string                         `yaml:"base_url" json:"base_url"`
 	APIKey     string                         `yaml:"api_key" json:"api_key"`
@@ -182,6 +215,13 @@ type ModelPricingFileConfig struct {
 	CacheReadPrice  float64 `yaml:"cache_read_price" json:"cache_read_price,omitempty"`
 }
 
+func (cfg ModelPricingFileConfig) IsZero() bool {
+	return cfg.InputPrice == 0 &&
+		cfg.OutputPrice == 0 &&
+		cfg.CacheWritePrice == 0 &&
+		cfg.CacheReadPrice == 0
+}
+
 // ReasoningLevelPresetFileConfig maps to Codex's ReasoningEffortPreset.
 type ReasoningLevelPresetFileConfig struct {
 	Effort      string `yaml:"effort" json:"effort,omitempty"`
@@ -189,11 +229,66 @@ type ReasoningLevelPresetFileConfig struct {
 }
 
 type WebSearchFileConfig struct {
-	Support         string `yaml:"support" json:"support,omitempty"`
-	MaxUses         int    `yaml:"max_uses" json:"max_uses,omitempty"`
-	TavilyAPIKey    string `yaml:"tavily_api_key" json:"tavily_api_key,omitempty"`
-	FirecrawlAPIKey string `yaml:"firecrawl_api_key" json:"firecrawl_api_key,omitempty"`
-	SearchMaxRounds int    `yaml:"search_max_rounds" json:"search_max_rounds,omitempty"`
+	Support         string         `yaml:"support" json:"support,omitempty"`
+	MaxUses         int            `yaml:"max_uses" json:"max_uses,omitempty"`
+	TavilyAPIKey    string         `yaml:"tavily_api_key" json:"tavily_api_key,omitempty"`
+	FirecrawlAPIKey string         `yaml:"firecrawl_api_key" json:"firecrawl_api_key,omitempty"`
+	SearchMaxRounds int            `yaml:"search_max_rounds" json:"search_max_rounds,omitempty"`
+	Extra           map[string]any `yaml:",inline" json:"-"`
+}
+
+func (cfg *WebSearchFileConfig) UnmarshalYAML(value *yaml.Node) error {
+	type plain WebSearchFileConfig
+	var out plain
+	if err := value.Decode(&out); err != nil {
+		return err
+	}
+	cfg.Support = out.Support
+	cfg.MaxUses = out.MaxUses
+	cfg.TavilyAPIKey = out.TavilyAPIKey
+	cfg.FirecrawlAPIKey = out.FirecrawlAPIKey
+	cfg.SearchMaxRounds = out.SearchMaxRounds
+	cfg.Extra = removeKnownKeys(out.Extra, webSearchKnownKeys)
+	return nil
+}
+
+func (cfg WebSearchFileConfig) MarshalYAML() (any, error) {
+	return mergeKnownFields(cfg.Extra, map[string]any{
+		"support":           emptyStringAsNil(cfg.Support),
+		"max_uses":          emptyIntAsNil(cfg.MaxUses),
+		"tavily_api_key":    emptyStringAsNil(cfg.TavilyAPIKey),
+		"firecrawl_api_key": emptyStringAsNil(cfg.FirecrawlAPIKey),
+		"search_max_rounds": emptyIntAsNil(cfg.SearchMaxRounds),
+	}), nil
+}
+
+func (cfg *WebSearchFileConfig) UnmarshalJSON(data []byte) error {
+	type plain WebSearchFileConfig
+	var out plain
+	if err := json.Unmarshal(data, &out); err != nil {
+		return err
+	}
+	var raw map[string]any
+	if err := json.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+	cfg.Support = out.Support
+	cfg.MaxUses = out.MaxUses
+	cfg.TavilyAPIKey = out.TavilyAPIKey
+	cfg.FirecrawlAPIKey = out.FirecrawlAPIKey
+	cfg.SearchMaxRounds = out.SearchMaxRounds
+	cfg.Extra = removeKnownKeys(raw, webSearchKnownKeys)
+	return nil
+}
+
+func (cfg WebSearchFileConfig) MarshalJSON() ([]byte, error) {
+	return json.Marshal(mergeKnownFields(cfg.Extra, map[string]any{
+		"support":           emptyStringAsNil(cfg.Support),
+		"max_uses":          emptyIntAsNil(cfg.MaxUses),
+		"tavily_api_key":    emptyStringAsNil(cfg.TavilyAPIKey),
+		"firecrawl_api_key": emptyStringAsNil(cfg.FirecrawlAPIKey),
+		"search_max_rounds": emptyIntAsNil(cfg.SearchMaxRounds),
+	}))
 }
 
 type PersistenceFileConfig struct {
@@ -279,15 +374,11 @@ func ResolveConfigPath(explicitPath string) (string, error) {
 }
 
 func XDGDefaultConfigPath() (string, error) {
-	base := strings.TrimSpace(os.Getenv("XDG_CONFIG_HOME"))
-	if base == "" {
-		home := strings.TrimSpace(os.Getenv("HOME"))
-		if home == "" {
-			return "", errors.New("HOME is not set and XDG_CONFIG_HOME is empty")
-		}
-		base = filepath.Join(home, ".config")
+	home := strings.TrimSpace(os.Getenv("HOME"))
+	if home == "" {
+		return "", errors.New("HOME is not set")
 	}
-	return filepath.Join(base, AppConfigDirName, DefaultConfigFileName), nil
+	return filepath.Join(home, AppConfigDirName, DefaultConfigFileName), nil
 }
 
 func FromFileConfig(fileConfig FileConfig) (Config, error) {
@@ -368,6 +459,7 @@ func FromFileConfigWithOptions(fileConfig FileConfig, opts LoadOptions) (Config,
 		TavilyAPIKey:     strings.TrimSpace(fileConfig.WebSearch.TavilyAPIKey),
 		FirecrawlAPIKey:  strings.TrimSpace(fileConfig.WebSearch.FirecrawlAPIKey),
 		SearchMaxRounds:  intOrDefault(fileConfig.WebSearch.SearchMaxRounds, 5),
+		WebSearchExtra:   cloneAnyMap(fileConfig.WebSearch.Extra),
 		DefaultMaxTokens: intOrDefault(defaults.MaxTokens, 1024),
 		Cache:            fromCacheFileConfig(fileConfig.Cache),
 		Persistence:      FromPersistenceFileConfig(fileConfig.Persistence),
@@ -400,14 +492,15 @@ func fromModelDefFileConfig(fileConfig map[string]ModelDefFileConfig, specs exte
 			return nil, err
 		}
 		ws := WebSearchConfig{}
-		if m.WebSearch.Support != "" {
+		if hasWebSearchFileConfig(m.WebSearch) {
 			wsSupport, _ := parseWebSearchSupport(m.WebSearch.Support)
 			ws = WebSearchConfig{
-				Support:         wsSupport,
+				Support:         explicitWebSearchSupport(m.WebSearch.Support, wsSupport),
 				MaxUses:         m.WebSearch.MaxUses,
 				TavilyAPIKey:    strings.TrimSpace(m.WebSearch.TavilyAPIKey),
 				FirecrawlAPIKey: strings.TrimSpace(m.WebSearch.FirecrawlAPIKey),
 				SearchMaxRounds: m.WebSearch.SearchMaxRounds,
+				Extra:           cloneAnyMap(m.WebSearch.Extra),
 			}
 		}
 		var reasoningPresets []ReasoningLevelPreset
@@ -417,12 +510,20 @@ func fromModelDefFileConfig(fileConfig map[string]ModelDefFileConfig, specs exte
 				Description: strings.TrimSpace(p.Description),
 			})
 		}
+		supportsReasoning := boolOrDefault(
+			m.SupportsReasoning,
+			len(reasoningPresets) > 0 ||
+				strings.TrimSpace(m.DefaultReasoningLevel) != "" ||
+				boolOrDefault(m.SupportsReasoningSummaries, false) ||
+				strings.TrimSpace(m.DefaultReasoningSummary) != "",
+		)
 		models[trimmedSlug] = ModelDef{
 			ContextWindow:               m.ContextWindow,
 			MaxOutputTokens:             m.MaxOutputTokens,
 			DisplayName:                 strings.TrimSpace(m.DisplayName),
 			Description:                 strings.TrimSpace(m.Description),
 			BaseInstructions:            strings.TrimSpace(m.BaseInstructions),
+			SupportsReasoning:           supportsReasoning,
 			DefaultReasoningLevel:       strings.TrimSpace(m.DefaultReasoningLevel),
 			SupportedReasoningLevels:    reasoningPresets,
 			SupportsReasoningSummaries:  boolOrDefault(m.SupportsReasoningSummaries, false),
@@ -510,6 +611,7 @@ func fromProviderDefFileConfig(fileConfig map[string]ProviderDefFileConfig, spec
 				DisplayName:                 modelDef.DisplayName,
 				Description:                 modelDef.Description,
 				BaseInstructions:            modelDef.BaseInstructions,
+				SupportsReasoning:           modelDef.SupportsReasoning,
 				DefaultReasoningLevel:       modelDef.DefaultReasoningLevel,
 				SupportedReasoningLevels:    modelDef.SupportedReasoningLevels,
 				SupportsReasoningSummaries:  modelDef.SupportsReasoningSummaries,
@@ -537,6 +639,7 @@ func fromProviderDefFileConfig(fileConfig map[string]ProviderDefFileConfig, spec
 			TavilyAPIKey:     strings.TrimSpace(def.WebSearch.TavilyAPIKey),
 			FirecrawlAPIKey:  strings.TrimSpace(def.WebSearch.FirecrawlAPIKey),
 			SearchMaxRounds:  def.WebSearch.SearchMaxRounds,
+			WebSearchExtra:   cloneAnyMap(def.WebSearch.Extra),
 			Extensions:       providerExtensions,
 			Models:           providerModels,
 			Offers:           offers,
@@ -564,6 +667,9 @@ func mergeModelDefOverrides(base ModelDef, override ModelDefFileConfig) ModelDef
 	if v := strings.TrimSpace(override.BaseInstructions); v != "" {
 		out.BaseInstructions = v
 	}
+	if override.SupportsReasoning != nil {
+		out.SupportsReasoning = *override.SupportsReasoning
+	}
 	if v := strings.TrimSpace(override.DefaultReasoningLevel); v != "" {
 		out.DefaultReasoningLevel = v
 	}
@@ -589,14 +695,15 @@ func mergeModelDefOverrides(base ModelDef, override ModelDefFileConfig) ModelDef
 	if override.SupportsImageDetailOriginal != nil {
 		out.SupportsImageDetailOriginal = *override.SupportsImageDetailOriginal
 	}
-	if override.WebSearch.Support != "" {
+	if hasWebSearchFileConfig(override.WebSearch) {
 		wsSupport, _ := parseWebSearchSupport(override.WebSearch.Support)
 		out.WebSearch = WebSearchConfig{
-			Support:         wsSupport,
+			Support:         explicitWebSearchSupport(override.WebSearch.Support, wsSupport),
 			MaxUses:         override.WebSearch.MaxUses,
 			TavilyAPIKey:    strings.TrimSpace(override.WebSearch.TavilyAPIKey),
 			FirecrawlAPIKey: strings.TrimSpace(override.WebSearch.FirecrawlAPIKey),
 			SearchMaxRounds: override.WebSearch.SearchMaxRounds,
+			Extra:           cloneAnyMap(override.WebSearch.Extra),
 		}
 	}
 	if override.Extensions != nil {
@@ -608,6 +715,7 @@ func mergeModelDefOverrides(base ModelDef, override ModelDefFileConfig) ModelDef
 			out.Extensions[k] = ExtensionSettings{
 				Enabled:   enabled,
 				RawConfig: cloneAnyMap(v.Config),
+				Extra:     cloneAnyMap(v.Extra),
 			}
 		}
 	}
@@ -631,26 +739,21 @@ func applyModelOverrides(meta *ModelMeta, override ModelDef) {
 	if v := strings.TrimSpace(override.BaseInstructions); v != "" {
 		meta.BaseInstructions = v
 	}
+	meta.SupportsReasoning = override.SupportsReasoning
 	if v := strings.TrimSpace(override.DefaultReasoningLevel); v != "" {
 		meta.DefaultReasoningLevel = v
 	}
 	if len(override.SupportedReasoningLevels) > 0 {
 		meta.SupportedReasoningLevels = override.SupportedReasoningLevels
 	}
-	// Note: for bool fields we only override when true because ModelDef uses
-	// plain bool (not *bool), so we can't distinguish "unset" from "false".
-	if override.SupportsReasoningSummaries {
-		meta.SupportsReasoningSummaries = true
-	}
+	meta.SupportsReasoningSummaries = override.SupportsReasoningSummaries
 	if v := strings.TrimSpace(override.DefaultReasoningSummary); v != "" {
 		meta.DefaultReasoningSummary = v
 	}
 	if len(override.InputModalities) > 0 {
 		meta.InputModalities = override.InputModalities
 	}
-	if override.SupportsImageDetailOriginal {
-		meta.SupportsImageDetailOriginal = true
-	}
+	meta.SupportsImageDetailOriginal = override.SupportsImageDetailOriginal
 }
 
 // buildRoutes parses route specs and merges model metadata.
@@ -723,18 +826,20 @@ func buildRoutes(rawRoutes map[string]RouteFileConfig, providerDefs map[string]P
 
 		// Merge model def metadata into route entry.
 		if modelDef, ok := models[modelSlug]; ok {
-			entry.ContextWindow = modelDef.ContextWindow
-			entry.MaxOutputTokens = modelDef.MaxOutputTokens
-			_ = modelDef.DisplayName // route DisplayName comes from explicit config, not model def
-			entry.Description = modelDef.Description
-			entry.BaseInstructions = modelDef.BaseInstructions
-			entry.DefaultReasoningLevel = modelDef.DefaultReasoningLevel
-			entry.SupportedReasoningLevels = modelDef.SupportedReasoningLevels
-			entry.SupportsReasoningSummaries = modelDef.SupportsReasoningSummaries
-			entry.DefaultReasoningSummary = modelDef.DefaultReasoningSummary
-			entry.InputModalities = modelDef.InputModalities
-			entry.SupportsImageDetailOriginal = modelDef.SupportsImageDetailOriginal
-			entry.WebSearch = modelDef.WebSearch
+			applyRouteModelDef(&entry, modelDef)
+		}
+
+		// Provider offer overrides are merged with base model defs earlier; apply
+		// them after base metadata so named routes match direct provider/model refs.
+		if providerKey != "" {
+			if def, ok := providerDefs[providerKey]; ok {
+				for _, offer := range def.Offers {
+					if offer.Model == modelSlug && offer.Overrides != nil {
+						applyRouteModelDef(&entry, *offer.Overrides)
+						break
+					}
+				}
+			}
 		}
 
 		// Route-level overrides.
@@ -747,14 +852,15 @@ func buildRoutes(rawRoutes map[string]RouteFileConfig, providerDefs map[string]P
 		if routeCfg.ContextWindow > 0 {
 			entry.ContextWindow = routeCfg.ContextWindow
 		}
-		if routeCfg.WebSearch.Support != "" {
+		if hasWebSearchFileConfig(routeCfg.WebSearch) {
 			wsSupport, _ := parseWebSearchSupport(routeCfg.WebSearch.Support)
 			entry.WebSearch = WebSearchConfig{
-				Support:         wsSupport,
+				Support:         explicitWebSearchSupport(routeCfg.WebSearch.Support, wsSupport),
 				MaxUses:         routeCfg.WebSearch.MaxUses,
 				TavilyAPIKey:    strings.TrimSpace(routeCfg.WebSearch.TavilyAPIKey),
 				FirecrawlAPIKey: strings.TrimSpace(routeCfg.WebSearch.FirecrawlAPIKey),
 				SearchMaxRounds: routeCfg.WebSearch.SearchMaxRounds,
+				Extra:           cloneAnyMap(routeCfg.WebSearch.Extra),
 			}
 		}
 
@@ -763,6 +869,22 @@ func buildRoutes(rawRoutes map[string]RouteFileConfig, providerDefs map[string]P
 	return routes, nil
 }
 
+func applyRouteModelDef(entry *RouteEntry, modelDef ModelDef) {
+	entry.ContextWindow = modelDef.ContextWindow
+	entry.MaxOutputTokens = modelDef.MaxOutputTokens
+	_ = modelDef.DisplayName // route DisplayName comes from explicit config, not model def
+	entry.Description = modelDef.Description
+	entry.BaseInstructions = modelDef.BaseInstructions
+	entry.SupportsReasoning = modelDef.SupportsReasoning
+	entry.DefaultReasoningLevel = modelDef.DefaultReasoningLevel
+	entry.SupportedReasoningLevels = modelDef.SupportedReasoningLevels
+	entry.SupportsReasoningSummaries = modelDef.SupportsReasoningSummaries
+	entry.DefaultReasoningSummary = modelDef.DefaultReasoningSummary
+	entry.InputModalities = modelDef.InputModalities
+	entry.SupportsImageDetailOriginal = modelDef.SupportsImageDetailOriginal
+	entry.WebSearch = modelDef.WebSearch
+}
+
 // parseRouteSpec splits "provider/model" into (provider, model).
 // If no slash is present, the whole string is treated as the model name
 // with provider defaulting to "default".
@@ -797,6 +919,22 @@ func parseWebSearchSupport(value string) (WebSearchSupport, error) {
 	}
 }
 
+func explicitWebSearchSupport(raw string, parsed WebSearchSupport) WebSearchSupport {
+	if strings.TrimSpace(raw) == "" {
+		return ""
+	}
+	return parsed
+}
+
+func hasWebSearchFileConfig(cfg WebSearchFileConfig) bool {
+	return strings.TrimSpace(cfg.Support) != "" ||
+		cfg.MaxUses != 0 ||
+		strings.TrimSpace(cfg.TavilyAPIKey) != "" ||
+		strings.TrimSpace(cfg.FirecrawlAPIKey) != "" ||
+		cfg.SearchMaxRounds != 0 ||
+		len(cfg.Extra) > 0
+}
+
 func FromResponseProxyFileConfig(fileConfig ProxyTargetFileConfig) ResponseProxyConfig {
 	return ResponseProxyConfig{
 		Model:           strings.TrimSpace(fileConfig.Model),
diff --git a/internal/config/config_test.go b/internal/config/config_test.go
index 4bbd6992..0eac37af 100644
--- a/internal/config/config_test.go
+++ b/internal/config/config_test.go
@@ -100,31 +100,16 @@ trace:
 	}
 }
 
-func TestXDGDefaultConfigPathUsesXDGConfigHome(t *testing.T) {
-	configHome := t.TempDir()
-	t.Setenv("XDG_CONFIG_HOME", configHome)
-	t.Setenv("HOME", filepath.Join(t.TempDir(), "home"))
+func TestXDGDefaultConfigPathUsesHomeMoonbridgeDirectory(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	t.Setenv("XDG_CONFIG_HOME", filepath.Join(t.TempDir(), "xdg"))
 
 	got, err := config.XDGDefaultConfigPath()
 	if err != nil {
 		t.Fatalf("XDGDefaultConfigPath() error = %v", err)
 	}
-	want := filepath.Join(configHome, "moonbridge", "config.yml")
-	if got != want {
-		t.Fatalf("XDGDefaultConfigPath() = %q, want %q", got, want)
-	}
-}
-
-func TestXDGDefaultConfigPathFallsBackToHome(t *testing.T) {
-	configHome := t.TempDir()
-	t.Setenv("XDG_CONFIG_HOME", "")
-	t.Setenv("HOME", configHome)
-
-	got, err := config.XDGDefaultConfigPath()
-	if err != nil {
-		t.Fatalf("XDGDefaultConfigPath() error = %v", err)
-	}
-	want := filepath.Join(configHome, ".config", "moonbridge", "config.yml")
+	want := filepath.Join(home, "moonbridge", "config.yml")
 	if got != want {
 		t.Fatalf("XDGDefaultConfigPath() = %q, want %q", got, want)
 	}
@@ -600,6 +585,18 @@ routes:
 	if route.Description != "A test model" {
 		t.Fatalf("Description = %q, want \"A test model\"", route.Description)
 	}
+	if !cfg.Models["claude-test"].SupportsReasoning {
+		t.Fatal("Models[claude-test].SupportsReasoning = false, want true")
+	}
+	if !cfg.ProviderDefs["main"].Models["claude-test"].SupportsReasoning {
+		t.Fatal("ProviderDefs[main].Models[claude-test].SupportsReasoning = false, want true")
+	}
+	if !route.SupportsReasoning {
+		t.Fatal("RouteFor(gpt-test).SupportsReasoning = false, want true")
+	}
+	if !cfg.RouteFor("main/claude-test").SupportsReasoning {
+		t.Fatal("RouteFor(main/claude-test).SupportsReasoning = false, want true")
+	}
 	if route.DefaultReasoningLevel != "medium" {
 		t.Fatalf("DefaultReasoningLevel = %q", route.DefaultReasoningLevel)
 	}
@@ -617,6 +614,76 @@ routes:
 	}
 }
 
+func TestLoadFromYAMLInfersReasoningSupportFromSummaryMetadata(t *testing.T) {
+	cfg, err := config.LoadFromYAML([]byte(`
+mode: Transform
+models:
+  claude-test:
+    supports_reasoning_summaries: true
+    default_reasoning_summary: "auto"
+providers:
+  main:
+    base_url: https://provider.example.test
+    api_key: upstream-key
+    offers:
+      - model: claude-test
+routes:
+  gpt-test:
+    model: claude-test
+    provider: main
+`))
+	if err != nil {
+		t.Fatalf("LoadFromYAML() error = %v", err)
+	}
+	if !cfg.Models["claude-test"].SupportsReasoning {
+		t.Fatal("Models[claude-test].SupportsReasoning = false, want true")
+	}
+	if !cfg.RouteFor("gpt-test").SupportsReasoning {
+		t.Fatal("RouteFor(gpt-test).SupportsReasoning = false, want true")
+	}
+}
+
+func TestLoadFromYAMLProviderOfferOverrideCanDisableReasoningSupport(t *testing.T) {
+	cfg, err := config.LoadFromYAML([]byte(`
+mode: Transform
+models:
+  claude-test:
+    default_reasoning_level: "medium"
+    supported_reasoning_levels:
+      - effort: "medium"
+        description: "Balanced"
+providers:
+  main:
+    base_url: https://provider.example.test
+    api_key: upstream-key
+    offers:
+      - model: claude-test
+        upstream_name: claude-test-plain
+        overrides:
+          supports_reasoning: false
+routes:
+  gpt-test:
+    model: claude-test
+    provider: main
+`))
+	if err != nil {
+		t.Fatalf("LoadFromYAML() error = %v", err)
+	}
+	if !cfg.Models["claude-test"].SupportsReasoning {
+		t.Fatal("Models[claude-test].SupportsReasoning = false, want true")
+	}
+	meta := cfg.ProviderDefs["main"].Models["claude-test-plain"]
+	if meta.SupportsReasoning {
+		t.Fatal("ProviderDefs[main].Models[claude-test-plain].SupportsReasoning = true, want false from offer override")
+	}
+	if cfg.RouteFor("main/claude-test-plain").SupportsReasoning {
+		t.Fatal("RouteFor(main/claude-test-plain).SupportsReasoning = true, want false from offer override")
+	}
+	if cfg.RouteFor("gpt-test").SupportsReasoning {
+		t.Fatal("RouteFor(gpt-test).SupportsReasoning = true, want false from offer override")
+	}
+}
+
 func TestLoadFromYAMLRequiresTransformProviderSettings(t *testing.T) {
 	_, err := config.LoadFromYAML([]byte(`mode: Transform`))
 	if err == nil {
diff --git a/internal/config/convert.go b/internal/config/convert.go
index faccab17..069e34a3 100644
--- a/internal/config/convert.go
+++ b/internal/config/convert.go
@@ -33,6 +33,7 @@ func (cfg Config) ToFileConfig() FileConfig {
 			TavilyAPIKey:    cfg.TavilyAPIKey,
 			FirecrawlAPIKey: cfg.FirecrawlAPIKey,
 			SearchMaxRounds: cfg.SearchMaxRounds,
+			Extra:           cloneAnyMap(cfg.WebSearchExtra),
 		},
 		Cache:       toCacheFileConfig(cfg.Cache),
 		Persistence: PersistenceFileConfig{ActiveProvider: cfg.Persistence.ActiveProvider},
@@ -120,6 +121,7 @@ func toModelDefFileConfig(def ModelDef) ModelDefFileConfig {
 		WebSearch:                toWebSearchFileConfig(def.WebSearch),
 	}
 
+	m.SupportsReasoning = boolPtr(def.SupportsReasoning)
 	if def.SupportsReasoningSummaries {
 		m.SupportsReasoningSummaries = boolPtr(true)
 	}
@@ -150,6 +152,7 @@ func toProviderDefFileConfig(def ProviderDef) ProviderDefFileConfig {
 			TavilyAPIKey:    def.TavilyAPIKey,
 			FirecrawlAPIKey: def.FirecrawlAPIKey,
 			SearchMaxRounds: def.SearchMaxRounds,
+			Extra:           cloneAnyMap(def.WebSearchExtra),
 		},
 	}
 
@@ -201,7 +204,7 @@ func toRouteFileConfig(entry RouteEntry) RouteFileConfig {
 		ContextWindow: entry.ContextWindow,
 	}
 
-	if entry.WebSearch.Support != "" {
+	if hasRuntimeWebSearchConfig(entry.WebSearch) {
 		r.WebSearch = toWebSearchFileConfig(entry.WebSearch)
 	}
 
@@ -222,13 +225,24 @@ func toWebSearchFileConfig(ws WebSearchConfig) WebSearchFileConfig {
 		TavilyAPIKey:    ws.TavilyAPIKey,
 		FirecrawlAPIKey: ws.FirecrawlAPIKey,
 		SearchMaxRounds: ws.SearchMaxRounds,
+		Extra:           cloneAnyMap(ws.Extra),
 	}
 }
 
+func hasRuntimeWebSearchConfig(ws WebSearchConfig) bool {
+	return ws.Support != "" ||
+		ws.MaxUses != 0 ||
+		ws.TavilyAPIKey != "" ||
+		ws.FirecrawlAPIKey != "" ||
+		ws.SearchMaxRounds != 0 ||
+		len(ws.Extra) > 0
+}
+
 func toExtensionFileConfig(s ExtensionSettings) ExtensionFileConfig {
 	return ExtensionFileConfig{
 		Enabled: s.Enabled,
 		Config:  cloneAnyMap(s.RawConfig),
+		Extra:   cloneAnyMap(s.Extra),
 	}
 }
 
diff --git a/internal/config/convert_test.go b/internal/config/convert_test.go
index f82bb6e5..0b776097 100644
--- a/internal/config/convert_test.go
+++ b/internal/config/convert_test.go
@@ -4,6 +4,7 @@ import (
 	"testing"
 
 	"moonbridge/internal/config"
+	"moonbridge/internal/extension/visual"
 )
 
 func TestConfigToFileConfigRoundtrip(t *testing.T) {
@@ -306,8 +307,124 @@ routes:
 	}
 }
 
+func TestConfigToFileConfigRoundtripPreservesFeatureExtras(t *testing.T) {
+	enabled := true
+	disabled := false
+	input := []byte(`
+mode: Transform
+web_search:
+  provider_tool: global-preview
+extensions:
+  visual:
+    enabled: true
+    scope_note: global-extra
+    config:
+      provider: main
+      model: claude-test
+models:
+  claude-test:
+    context_window: 200000
+    web_search:
+      provider_tool: model-preview
+    extensions:
+      visual:
+        enabled: false
+        scope_note: model-extra
+        config:
+          provider: main
+          model: claude-test
+providers:
+  main:
+    base_url: https://provider.example.test
+    api_key: upstream-key
+    web_search:
+      provider_tool: provider-preview
+    extensions:
+      visual:
+        enabled: true
+        scope_note: provider-extra
+        config:
+          provider: main
+          model: claude-test
+    offers:
+      - model: claude-test
+routes:
+  moonbridge:
+    model: claude-test
+    provider: main
+    web_search:
+      provider_tool: route-preview
+    extensions:
+      visual:
+        enabled: true
+        scope_note: route-extra
+        config:
+          provider: main
+          model: claude-test
+`)
+
+	cfg, err := config.LoadFromYAMLWithOptions(input, config.LoadOptions{ExtensionSpecs: visual.ConfigSpecs()})
+	if err != nil {
+		t.Fatalf("LoadFromYAML() error = %v", err)
+	}
+
+	fc := cfg.ToFileConfig()
+	if fc.WebSearch.Extra["provider_tool"] != "global-preview" {
+		t.Fatalf("top-level web_search extra = %#v, want global-preview", fc.WebSearch.Extra["provider_tool"])
+	}
+	checkExtensionExtra(t, fc.Extensions["visual"], &enabled, "global-extra")
+	if fc.Models["claude-test"].WebSearch.Extra["provider_tool"] != "model-preview" {
+		t.Fatalf("model web_search extra = %#v, want model-preview", fc.Models["claude-test"].WebSearch.Extra["provider_tool"])
+	}
+	checkExtensionExtra(t, fc.Models["claude-test"].Extensions["visual"], &disabled, "model-extra")
+	if fc.Providers["main"].WebSearch.Extra["provider_tool"] != "provider-preview" {
+		t.Fatalf("provider web_search extra = %#v, want provider-preview", fc.Providers["main"].WebSearch.Extra["provider_tool"])
+	}
+	checkExtensionExtra(t, fc.Providers["main"].Extensions["visual"], &enabled, "provider-extra")
+	if fc.Routes["moonbridge"].WebSearch.Extra["provider_tool"] != "route-preview" {
+		t.Fatalf("route web_search extra = %#v, want route-preview", fc.Routes["moonbridge"].WebSearch.Extra["provider_tool"])
+	}
+	checkExtensionExtra(t, fc.Routes["moonbridge"].Extensions["visual"], &enabled, "route-extra")
+
+	data, err := fc.MarshalYAML()
+	if err != nil {
+		t.Fatalf("MarshalYAML() error = %v", err)
+	}
+	reloaded, err := config.LoadFromYAMLWithOptions(data, config.LoadOptions{ExtensionSpecs: visual.ConfigSpecs()})
+	if err != nil {
+		t.Fatalf("second LoadFromYAML() error = %v\n--- marshaled YAML ---\n%s", err, string(data))
+	}
+	fc2 := reloaded.ToFileConfig()
+	if fc2.WebSearch.Extra["provider_tool"] != "global-preview" {
+		t.Fatalf("reloaded top-level web_search extra = %#v, want global-preview", fc2.WebSearch.Extra["provider_tool"])
+	}
+	if fc2.Models["claude-test"].WebSearch.Extra["provider_tool"] != "model-preview" {
+		t.Fatalf("reloaded model web_search extra = %#v, want model-preview", fc2.Models["claude-test"].WebSearch.Extra["provider_tool"])
+	}
+	if fc2.Providers["main"].WebSearch.Extra["provider_tool"] != "provider-preview" {
+		t.Fatalf("reloaded provider web_search extra = %#v, want provider-preview", fc2.Providers["main"].WebSearch.Extra["provider_tool"])
+	}
+	if fc2.Routes["moonbridge"].WebSearch.Extra["provider_tool"] != "route-preview" {
+		t.Fatalf("reloaded route web_search extra = %#v, want route-preview", fc2.Routes["moonbridge"].WebSearch.Extra["provider_tool"])
+	}
+}
+
 // --- helpers ---
 
+func checkExtensionExtra(t *testing.T, extension config.ExtensionFileConfig, enabled *bool, wantScopeNote string) {
+	t.Helper()
+	if enabled == nil {
+		if extension.Enabled != nil {
+			t.Fatalf("extension.Enabled = %v, want nil", *extension.Enabled)
+		}
+	} else if extension.Enabled == nil || *extension.Enabled != *enabled {
+		t.Fatalf("extension.Enabled = %v, want %v", extension.Enabled, *enabled)
+	}
+	if extension.Extra["scope_note"] != wantScopeNote {
+		t.Fatalf("extension extra scope_note = %#v, want %s", extension.Extra["scope_note"], wantScopeNote)
+	}
+}
+
 func checkStringEqual(t *testing.T, name, got, want string) {
 	t.Helper()
 	if got != want {
diff --git a/internal/config/extension_config.go b/internal/config/extension_config.go
index ca83b982..1960afd8 100644
--- a/internal/config/extension_config.go
+++ b/internal/config/extension_config.go
@@ -3,6 +3,8 @@ package config
 import (
 	"encoding/json"
 	"fmt"
+
+	"gopkg.in/yaml.v3"
 )
 
 type ExtensionScope string
@@ -31,15 +33,73 @@ type LoadOptions struct {
 type ExtensionFileConfig struct {
 	Enabled *bool          `yaml:"enabled,omitempty" json:"enabled,omitempty"`
 	Config  map[string]any `yaml:"config,omitempty" json:"config,omitempty"`
+	Extra   map[string]any `yaml:",inline" json:"-"`
 }
 
 type ExtensionSettings struct {
 	Enabled   *bool
 	RawConfig map[string]any
+	Extra     map[string]any
+}
+
+func (cfg *ExtensionFileConfig) UnmarshalYAML(value *yaml.Node) error {
+	type plain ExtensionFileConfig
+	var out plain
+	if err := value.Decode(&out); err != nil {
+		return err
+	}
+	cfg.Enabled = out.Enabled
+	cfg.Config = out.Config
+	cfg.Extra = removeKnownKeys(out.Extra, extensionKnownKeys)
+	return nil
+}
+
+func (cfg ExtensionFileConfig) MarshalYAML() (any, error) {
+	return mergeKnownFields(cfg.Extra, map[string]any{
+		"enabled": cfg.Enabled,
+		"config":  emptyMapAsNil(cfg.Config),
+	}), nil
+}
+
+func (cfg *ExtensionFileConfig) UnmarshalJSON(data []byte) error {
+	type plain ExtensionFileConfig
+	var out plain
+	if err := json.Unmarshal(data, &out); err != nil {
+		return err
+	}
+	var raw map[string]any
+	if err := json.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+	cfg.Enabled = out.Enabled
+	cfg.Config = out.Config
+	cfg.Extra = removeKnownKeys(raw, extensionKnownKeys)
+	return nil
+}
+
+func (cfg ExtensionFileConfig) MarshalJSON() ([]byte, error) {
+	return json.Marshal(mergeKnownFields(cfg.Extra, map[string]any{
+		"enabled": cfg.Enabled,
+		"config":  emptyMapAsNil(cfg.Config),
+	}))
 }
 
 type extensionSpecIndex map[string]ExtensionConfigSpec
 
+var (
+	extensionKnownKeys = map[string]struct{}{
+		"enabled": {},
+		"config":  {},
+	}
+	webSearchKnownKeys = map[string]struct{}{
+		"support":           {},
+		"max_uses":          {},
+		"tavily_api_key":    {},
+		"firecrawl_api_key": {},
+		"search_max_rounds": {},
+	}
+)
+
 func newExtensionSpecIndex(specs []ExtensionConfigSpec) (extensionSpecIndex, error) {
 	if len(specs) == 0 {
 		return nil, nil
@@ -82,6 +142,7 @@ func decodeExtensionSettings(path string, scope ExtensionScope, raw map[string]E
 		result[name] = ExtensionSettings{
 			Enabled:   fileCfg.Enabled,
 			RawConfig: cloneAnyMap(fileCfg.Config),
+			Extra:     cloneAnyMap(fileCfg.Extra),
 		}
 	}
 	return result, nil
@@ -114,6 +175,62 @@ func mergeAnyMaps(maps ...map[string]any) map[string]any {
 	return out
 }
 
+func removeKnownKeys(in map[string]any, known map[string]struct{}) map[string]any {
+	if len(in) == 0 {
+		return nil
+	}
+	out := make(map[string]any, len(in))
+	for key, value := range in {
+		if _, ok := known[key]; ok {
+			continue
+		}
+		out[key] = value
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func mergeKnownFields(extra map[string]any, known map[string]any) map[string]any {
+	out := cloneAnyMap(extra)
+	if out == nil {
+		out = make(map[string]any)
+	}
+	for key, value := range known {
+		if value == nil {
+			delete(out, key)
+			continue
+		}
+		out[key] = value
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func emptyStringAsNil(value string) any {
+	if value == "" {
+		return nil
+	}
+	return value
+}
+
+func emptyIntAsNil(value int) any {
+	if value == 0 {
+		return nil
+	}
+	return value
+}
+
+func emptyMapAsNil(value map[string]any) any {
+	if len(value) == 0 {
+		return nil
+	}
+	return value
+}
+
 func decodeTypedExtensionConfig(spec ExtensionConfigSpec, raw map[string]any) any {
 	if spec.Factory == nil {
 		return cloneAnyMap(raw)
diff --git a/internal/config/starter.go b/internal/config/starter.go
new file mode 100644
index 00000000..ff0e66bb
--- /dev/null
+++ b/internal/config/starter.go
@@ -0,0 +1,117 @@
+package config
+
+import (
+	"fmt"
+	"path/filepath"
+)
+
+const (
+	DefaultDataDirName       = "data"
+	DefaultSQLiteDBFileName  = "moonbridge.db"
+	starterModelName         = "local-starter-model"
+	starterProviderName      = "local"
+	starterRouteName         = "moonbridge"
+	starterProviderBaseURL   = "https://api.example.invalid"
+	starterProviderAPIKey    = "replace-with-your-provider-api-key"
+	starterProviderProtocol  = ProtocolOpenAIChat
+	starterModelContextLimit = 128000
+	starterModelOutputLimit  = 4096
+	starterDefaultMaxTokens  = 1024
+)
+
+// StarterSQLiteDBPath returns the default first-run SQLite database path for a
+// resolved config path. The returned path is absolute so later service starts do
+// not depend on the process working directory.
+func StarterSQLiteDBPath(configPath string) (string, error) {
+	if configPath == "" {
+		return "", fmt.Errorf("config path is required")
+	}
+	path := filepath.Join(filepath.Dir(configPath), DefaultDataDirName, DefaultSQLiteDBFileName)
+	absPath, err := filepath.Abs(path)
+	if err != nil {
+		return "", fmt.Errorf("resolve starter sqlite path: %w", err)
+	}
+	return absPath, nil
+}
+
+// StarterFileConfig builds the first-run Transform configuration. The SQLite
+// path must already be absolute to avoid persisting a working-directory-relative
+// database location into the user's default config.
+func StarterFileConfig(sqliteDBPath string) (FileConfig, error) {
+	if sqliteDBPath == "" {
+		return FileConfig{}, fmt.Errorf("sqlite db path is required")
+	}
+	if !filepath.IsAbs(sqliteDBPath) {
+		return FileConfig{}, fmt.Errorf("sqlite db path must be absolute: %s", sqliteDBPath)
+	}
+	enabled := true
+	return FileConfig{
+		Mode: string(ModeTransform),
+		Log: LogFileConfig{
+			Level:  "info",
+			Format: "text",
+		},
+		Server: ServerFileConfig{
+			Addr: DefaultAddr,
+		},
+		Defaults: DefaultsFileConfig{
+			Model:     starterRouteName,
+			MaxTokens: starterDefaultMaxTokens,
+		},
+		Models: map[string]ModelDefFileConfig{
+			starterModelName: {
+				ContextWindow:   starterModelContextLimit,
+				MaxOutputTokens: starterModelOutputLimit,
+			},
+		},
+		Providers: map[string]ProviderDefFileConfig{
+			starterProviderName: {
+				BaseURL:  starterProviderBaseURL,
+				APIKey:   starterProviderAPIKey,
+				Protocol: starterProviderProtocol,
+				Offers: []OfferFileConfig{
+					{
+						Model:        starterModelName,
+						UpstreamName: starterModelName,
+					},
+				},
+			},
+		},
+		Routes: map[string]RouteFileConfig{
+			starterRouteName: {
+				Provider: starterProviderName,
+				Model:    starterModelName,
+			},
+		},
+		Persistence: PersistenceFileConfig{
+			ActiveProvider: "db_sqlite",
+		},
+		Extensions: map[string]ExtensionFileConfig{
+			"db_sqlite": {
+				Enabled: &enabled,
+				Config: map[string]any{
+					"path":            sqliteDBPath,
+					"wal":             true,
+					"busy_timeout_ms": 5000,
+					"max_open_conns":  1,
+				},
+			},
+		},
+	}, nil
+}
+
+// StarterConfigYAML returns a validated YAML document for the first-run config.
+func StarterConfigYAML(sqliteDBPath string, opts LoadOptions) ([]byte, error) {
+	fileConfig, err := StarterFileConfig(sqliteDBPath)
+	if err != nil {
+		return nil, err
+	}
+	data, err := fileConfig.MarshalYAML()
+	if err != nil {
+		return nil, fmt.Errorf("marshal starter config: %w", err)
+	}
+	if _, err := LoadFromYAMLWithOptions(data, opts); err != nil {
+		return nil, fmt.Errorf("validate starter config: %w", err)
+	}
+	return data, nil
+}
diff --git a/internal/config/starter_test.go b/internal/config/starter_test.go
new file mode 100644
index 00000000..1717d601
--- /dev/null
+++ b/internal/config/starter_test.go
@@ -0,0 +1,65 @@
+package config_test
+
+import (
+	"path/filepath"
+	"testing"
+
+	"moonbridge/internal/config"
+	dbsqlite "moonbridge/internal/extension/db/sqlite"
+)
+
+func TestStarterConfigYAMLBuildsLoadableTransformSQLiteConfig(t *testing.T) {
+	dbPath := filepath.Join(t.TempDir(), "moonbridge", "data", "moonbridge.db")
+
+	data, err := config.StarterConfigYAML(dbPath, config.LoadOptions{
+		ExtensionSpecs: dbsqlite.ConfigSpecs(),
+	})
+	if err != nil {
+		t.Fatalf("StarterConfigYAML() error = %v", err)
+	}
+
+	cfg, err := config.LoadFromYAMLWithOptions(data, config.LoadOptions{
+		ExtensionSpecs: dbsqlite.ConfigSpecs(),
+	})
+	if err != nil {
+		t.Fatalf("LoadFromYAMLWithOptions(starter) error = %v", err)
+	}
+	if cfg.Mode != config.ModeTransform {
+		t.Fatalf("Mode = %q, want Transform", cfg.Mode)
+	}
+	if len(cfg.ProviderDefs) == 0 {
+		t.Fatal("ProviderDefs is empty, want starter provider")
+	}
+	if len(cfg.Routes) == 0 {
+		t.Fatal("Routes is empty, want starter route")
+	}
+	if cfg.Persistence.ActiveProvider != "db_sqlite" {
+		t.Fatalf("Persistence.ActiveProvider = %q, want db_sqlite", cfg.Persistence.ActiveProvider)
+	}
+	sqliteConfig, ok := cfg.Extensions["db_sqlite"]
+	if !ok {
+		t.Fatalf("Extensions missing db_sqlite: %+v", cfg.Extensions)
+	}
+	if sqliteConfig.Enabled == nil || !*sqliteConfig.Enabled {
+		t.Fatalf("db_sqlite enabled = %v, want true", sqliteConfig.Enabled)
+	}
+	gotPath, ok := sqliteConfig.RawConfig["path"].(string)
+	if !ok {
+		t.Fatalf("db_sqlite path = %#v, want string", sqliteConfig.RawConfig["path"])
+	}
+	if gotPath != dbPath {
+		t.Fatalf("db_sqlite path = %q, want %q", gotPath, dbPath)
+	}
+	if !filepath.IsAbs(gotPath) {
+		t.Fatalf("db_sqlite path = %q, want absolute path", gotPath)
+	}
+}
+
+func TestStarterConfigYAMLRejectsRelativeSQLitePath(t *testing.T) {
+	_, err := config.StarterConfigYAML("./data/moonbridge.db", config.LoadOptions{
+		ExtensionSpecs: dbsqlite.ConfigSpecs(),
+	})
+	if err == nil {
+		t.Fatal("StarterConfigYAML() error = nil, want relative path rejection")
+	}
+}
diff --git a/internal/extension/codex/catalog.go b/internal/extension/codex/catalog.go
index 3ef04e7f..75ab8823 100644
--- a/internal/extension/codex/catalog.go
+++ b/internal/extension/codex/catalog.go
@@ -117,6 +117,7 @@ func BuildModelInfoFromRoute(alias string, ownedBy string, route config.RouteEnt
 		displayName = DisplayNameFromSlug(alias)
 	}
 	return newModelInfo(alias, displayName, route.Description, route.ContextWindow,
+		route.SupportsReasoning,
 		route.DefaultReasoningLevel, route.SupportedReasoningLevels,
 		route.SupportsReasoningSummaries, route.DefaultReasoningSummary,
 		route.BaseInstructions,
@@ -133,6 +134,7 @@ func BuildModelInfoFromProviderModel(slug string, ownedBy string, meta config.Mo
 		displayName = DisplayNameFromSlug(slug)
 	}
 	return newModelInfo(slug, displayName, meta.Description, meta.ContextWindow,
+		meta.SupportsReasoning,
 		meta.DefaultReasoningLevel, meta.SupportedReasoningLevels,
 		meta.SupportsReasoningSummaries, meta.DefaultReasoningSummary,
 		meta.BaseInstructions,
@@ -179,6 +181,7 @@ func BuildModelInfosFromConfig(providerCfg config.ProviderConfig, pluginCfg conf
 			displayName,
 			def.Description,
 			def.ContextWindow,
+			def.SupportsReasoning,
 			def.DefaultReasoningLevel,
 			def.SupportedReasoningLevels,
 			def.SupportsReasoningSummaries,
@@ -314,6 +317,12 @@ func buildModelInfosFromProviderDefs(providerCfg config.ProviderConfig) []ModelI
 				supportsReasoningSummaries = true
 			}
 		}
+		supportsReasoning := preferred.meta.SupportsReasoning
+		for _, e := range entries[1:] {
+			if e.meta.SupportsReasoning {
+				supportsReasoning = true
+			}
+		}
 
 		supportsImageDetailOriginal := preferred.meta.SupportsImageDetailOriginal
 		for _, e := range entries[1:] {
@@ -327,6 +336,7 @@ func buildModelInfosFromProviderDefs(providerCfg config.ProviderConfig) []ModelI
 			displayName,
 			description,
 			contextWindow,
+			supportsReasoning,
 			preferred.meta.DefaultReasoningLevel,
 			mergedLevels,
 			supportsReasoningSummaries,
@@ -370,6 +380,7 @@ func injectVisualModalities(models []ModelInfo, pluginCfg config.PluginConfig) [
 func newModelInfo(
 	slug, displayName, description string,
 	contextWindow int,
+	supportsReasoning bool,
 	defaultReasoningLevel string,
 	supportedLevels []config.ReasoningLevelPreset,
 	supportsReasoningSummaries bool,
@@ -378,6 +389,12 @@ func newModelInfo(
 	inputModalities []string,
 	supportsImageDetailOriginal bool,
 ) ModelInfo {
+	if !supportsReasoning {
+		defaultReasoningLevel = ""
+		supportedLevels = nil
+		supportsReasoningSummaries = false
+		defaultReasoningSummary = ""
+	}
 	var levels []ReasoningLevelPresetDTO
 	for _, p := range supportedLevels {
 		levels = append(levels, ReasoningLevelPresetDTO{Effort: p.Effort, Description: p.Description})
diff --git a/internal/extension/codex/catalog_test.go b/internal/extension/codex/catalog_test.go
index e2c40d03..f30e9509 100644
--- a/internal/extension/codex/catalog_test.go
+++ b/internal/extension/codex/catalog_test.go
@@ -57,6 +57,7 @@ func TestBuildModelInfosFromConfigIncludesProviderModelsBeforeRouteFallback(t *t
 
 func TestBuildModelInfoPreservesReasoningLevels(t *testing.T) {
 	info := codex.BuildModelInfoFromProviderModel("deepseek-v4-pro(deepseek)", "deepseek", config.ModelMeta{
+		SupportsReasoning:     true,
 		ContextWindow:         200000,
 		DefaultReasoningLevel: "high",
 		SupportedReasoningLevels: []config.ReasoningLevelPreset{
@@ -75,6 +76,29 @@ func TestBuildModelInfoPreservesReasoningLevels(t *testing.T) {
 	}
 }
 
+func TestBuildModelInfoOmitsReasoningMetadataWhenUnsupported(t *testing.T) {
+	info := codex.BuildModelInfoFromRoute("plain", "default", config.RouteEntry{
+		SupportsReasoning:          false,
+		DefaultReasoningLevel:      "medium",
+		SupportedReasoningLevels:   []config.ReasoningLevelPreset{{Effort: "medium", Description: "Balanced"}},
+		SupportsReasoningSummaries: true,
+		DefaultReasoningSummary:    "auto",
+	})
+
+	if info.DefaultReasoningLevel != "" {
+		t.Fatalf("DefaultReasoningLevel = %q, want empty", info.DefaultReasoningLevel)
+	}
+	if len(info.SupportedReasoningLevels) != 0 {
+		t.Fatalf("SupportedReasoningLevels = %+v, want empty", info.SupportedReasoningLevels)
+	}
+	if info.SupportsReasoningSummaries {
+		t.Fatal("SupportsReasoningSummaries = true, want false")
+	}
+	if info.DefaultReasoningSummary != "none" {
+		t.Fatalf("DefaultReasoningSummary = %q, want none", info.DefaultReasoningSummary)
+	}
+}
+
 func TestGenerateConfigTomlDoesNotSetServiceTier(t *testing.T) {
 	cfg := config.Config{
 		Routes: map[string]config.RouteEntry{
@@ -247,6 +271,7 @@ func TestBuildModelInfosFromConfig_ReasoningLevelsDeduplicatedByEffort(t *testin
 			"provider-a": {
 				Models: map[string]config.ModelMeta{
 					"model-x": {
+						SupportsReasoning: true,
 						SupportedReasoningLevels: []config.ReasoningLevelPreset{
 							{Effort: "high", Description: "A High"},
 							{Effort: "low", Description: "A Low"},
@@ -257,6 +282,7 @@ func TestBuildModelInfosFromConfig_ReasoningLevelsDeduplicatedByEffort(t *testin
 			"provider-b": {
 				Models: map[string]config.ModelMeta{
 					"model-x": {
+						SupportsReasoning: true,
 						SupportedReasoningLevels: []config.ReasoningLevelPreset{
 							{Effort: "high", Description: "B High"},
 							{Effort: "xhigh", Description: "B XHigh"},
diff --git a/internal/extension/db/sqlite/plugin.go b/internal/extension/db/sqlite/plugin.go
index 1bfa93a7..27fd7a11 100644
--- a/internal/extension/db/sqlite/plugin.go
+++ b/internal/extension/db/sqlite/plugin.go
@@ -17,7 +17,9 @@ import (
 	"context"
 	"database/sql"
 	"fmt"
+	"os"
 	"path/filepath"
+	"strings"
 
 	"moonbridge/internal/config"
 	"moonbridge/internal/db"
@@ -46,11 +48,11 @@ func (p *sqliteProvider) Name() string { return PluginName }
 func (p *sqliteProvider) Dialect() db.Dialect { return db.DialectSQLite }
 
 func (p *sqliteProvider) Open(ctx context.Context) error {
-	absPath, err := filepath.Abs(p.cfg.Path)
+	dsn, err := sqliteDSN(p.cfg.Path)
 	if err != nil {
-		return fmt.Errorf("resolve path: %w", err)
+		return err
 	}
-	d, err := sql.Open("sqlite", absPath)
+	d, err := sql.Open("sqlite", dsn)
 	if err != nil {
 		return fmt.Errorf("sql open: %w", err)
 	}
@@ -80,6 +82,31 @@ func (p *sqliteProvider) Open(ctx context.Context) error {
 	return nil
 }
 
+func sqliteDSN(path string) (string, error) {
+	if isSQLiteMemoryPath(path) {
+		return path, nil
+	}
+	absPath, err := filepath.Abs(path)
+	if err != nil {
+		return "", fmt.Errorf("resolve path: %w", err)
+	}
+	parent := filepath.Dir(absPath)
+	if err := os.MkdirAll(parent, 0o700); err != nil {
+		return "", fmt.Errorf("create sqlite parent directory %s: %w", parent, err)
+	}
+	return absPath, nil
+}
+
+func isSQLiteMemoryPath(path string) bool {
+	if path == ":memory:" {
+		return true
+	}
+	if strings.HasPrefix(path, "file:") && strings.Contains(path, "mode=memory") {
+		return true
+	}
+	return path == "file::memory:"
+}
+
 func (p *sqliteProvider) DB() *sql.DB { return p.db }
 
 func (p *sqliteProvider) Ping(ctx context.Context) error {
diff --git a/internal/extension/db/sqlite/plugin_test.go b/internal/extension/db/sqlite/plugin_test.go
index f623cc79..b6972d1d 100644
--- a/internal/extension/db/sqlite/plugin_test.go
+++ b/internal/extension/db/sqlite/plugin_test.go
@@ -2,6 +2,8 @@ package dbsqlite_test
 
 import (
 	"context"
+	"os"
+	"path/filepath"
 	"testing"
 
 	"moonbridge/internal/config"
@@ -76,6 +78,34 @@ func TestOpenAndClose(t *testing.T) {
 	}
 }
 
+func TestOpenCreatesParentDirectories(t *testing.T) {
+	p := dbsqlite.NewPlugin()
+	wal := false
+	dir := filepath.Join(t.TempDir(), "nested", "data")
+	dbPath := filepath.Join(dir, "moonbridge.db")
+	cfg := &dbsqlite.Config{
+		Path: dbPath,
+		WAL:  &wal,
+	}
+	ctx := plugin.PluginContext{Config: cfg, AppConfig: config.Config{}}
+	if err := p.Init(ctx); err != nil {
+		t.Fatalf("Init() error = %v", err)
+	}
+	prov := p.DBProvider()
+	if prov == nil {
+		t.Fatal("DBProvider() should not be nil")
+	}
+
+	if err := prov.Open(context.Background()); err != nil {
+		t.Fatalf("Open() error = %v", err)
+	}
+	defer prov.Close()
+
+	if _, err := os.Stat(dbPath); err != nil {
+		t.Fatalf("stat db path after Open(): %v", err)
+	}
+}
+
 func TestConfigSpecs(t *testing.T) {
 	specs := dbsqlite.ConfigSpecs()
 	if len(specs) != 1 {
diff --git a/internal/extension/metrics/plugin.go b/internal/extension/metrics/plugin.go
index 8063dd14..df8ecc5a 100644
--- a/internal/extension/metrics/plugin.go
+++ b/internal/extension/metrics/plugin.go
@@ -79,6 +79,44 @@ func (p *Plugin) EnabledForModel(string) bool {
 	return p.metricsStore != nil
 }
 
+// --- UsageSource ---
+
+// AggregateUsage aggregates persisted request metrics for the given window so
+// the console can show cross-session usage analytics. Returns an empty
+// aggregate (no error) when persistence is unavailable.
+func (p *Plugin) AggregateUsage(query plugin.UsageQuery) (plugin.UsageAggregate, error) {
+	if p.metricsStore == nil {
+		return plugin.UsageAggregate{}, nil
+	}
+	agg, err := p.metricsStore.AggregateUsage(query.Since, query.Until)
+	if err != nil {
+		return plugin.UsageAggregate{}, err
+	}
+	out := plugin.UsageAggregate{
+		Requests:      agg.Requests,
+		InputTokens:   agg.InputTokens,
+		OutputTokens:  agg.OutputTokens,
+		CacheCreation: agg.CacheCreation,
+		CacheRead:     agg.CacheRead,
+		Cost:          agg.Cost,
+		Earliest:      agg.Earliest,
+		Latest:        agg.Latest,
+	}
+	for _, m := range agg.ByModel {
+		out.ByModel = append(out.ByModel, plugin.UsageModelAggregate{
+			Model:         m.Model,
+			ActualModel:   m.ActualModel,
+			Requests:      m.Requests,
+			InputTokens:   m.InputTokens,
+			OutputTokens:  m.OutputTokens,
+			CacheCreation: m.CacheCreation,
+			CacheRead:     m.CacheRead,
+			Cost:          m.Cost,
+		})
+	}
+	return out, nil
+}
+
 // --- DBConsumer ---
 
 func (p *Plugin) DBConsumer() db.Consumer {
diff --git a/internal/extension/metrics/store.go b/internal/extension/metrics/store.go
index 751f112f..33132fbc 100644
--- a/internal/extension/metrics/store.go
+++ b/internal/extension/metrics/store.go
@@ -209,6 +209,102 @@ func (s *Store) Query(opts QueryOptions) ([]Record, error) {
 	return records, nil
 }
 
+// UsageModelAggregate holds aggregated usage for one model over a window.
+type UsageModelAggregate struct {
+	Model         string
+	ActualModel   string
+	Requests      int64
+	InputTokens   int64
+	OutputTokens  int64
+	CacheCreation int64
+	CacheRead     int64
+	Cost          float64
+}
+
+// UsageAggregate holds aggregated usage totals plus per-model rows for a window.
+type UsageAggregate struct {
+	Requests      int64
+	InputTokens   int64
+	OutputTokens  int64
+	CacheCreation int64
+	CacheRead     int64
+	Cost          float64
+	Earliest      time.Time
+	Latest        time.Time
+	ByModel       []UsageModelAggregate
+}
+
+// AggregateUsage returns aggregated usage for the [since, until) window using
+// SQL aggregation. Zero Since/Until are treated as open bounds.
+func (s *Store) AggregateUsage(since, until time.Time) (UsageAggregate, error) {
+	var agg UsageAggregate
+	if s == nil || s.s == nil {
+		return agg, nil
+	}
+	table, err := s.s.Table("request_metrics")
+	if err != nil {
+		return agg, err
+	}
+
+	var where []string
+	var args []any
+	if !since.IsZero() {
+		where = append(where, "timestamp >= ?")
+		args = append(args, since.UTC().Format(time.RFC3339Nano))
+	}
+	if !until.IsZero() {
+		where = append(where, "timestamp < ?")
+		args = append(args, until.UTC().Format(time.RFC3339Nano))
+	}
+	whereSQL := ""
+	if len(where) > 0 {
+		whereSQL = " WHERE " + joinClauses(where)
+	}
+
+	modelQuery := fmt.Sprintf(`SELECT model, actual_model, COUNT(*),
+		COALESCE(SUM(input_tokens), 0), COALESCE(SUM(output_tokens), 0),
+		COALESCE(SUM(cache_creation), 0), COALESCE(SUM(cache_read), 0),
+		COALESCE(SUM(cost), 0)
+		FROM %s%s GROUP BY model, actual_model`, table, whereSQL)
+	rows, err := s.s.QueryContext(context.Background(), modelQuery, args...)
+	if err != nil {
+		return agg, fmt.Errorf("aggregate metrics: %w", err)
+	}
+	for rows.Next() {
+		var m UsageModelAggregate
+		if err := rows.Scan(&m.Model, &m.ActualModel, &m.Requests,
+			&m.InputTokens, &m.OutputTokens, &m.CacheCreation, &m.CacheRead, &m.Cost); err != nil {
+			rows.Close()
+			return agg, fmt.Errorf("scan metrics aggregate: %w", err)
+		}
+		agg.Requests += m.Requests
+		agg.InputTokens += m.InputTokens
+		agg.OutputTokens += m.OutputTokens
+		agg.CacheCreation += m.CacheCreation
+		agg.CacheRead += m.CacheRead
+		agg.Cost += m.Cost
+		agg.ByModel = append(agg.ByModel, m)
+	}
+	if err := rows.Err(); err != nil {
+		rows.Close()
+		return agg, fmt.Errorf("iterate metrics aggregate: %w", err)
+	}
+	rows.Close()
+
+	boundsQuery := fmt.Sprintf("SELECT MIN(timestamp), MAX(timestamp) FROM %s%s", table, whereSQL)
+	var minTS, maxTS *string
+	if err := s.s.QueryRowContext(context.Background(), boundsQuery, args...).Scan(&minTS, &maxTS); err == nil {
+		if minTS != nil {
+			agg.Earliest, _ = time.Parse(time.RFC3339Nano, *minTS)
+		}
+		if maxTS != nil {
+			agg.Latest, _ = time.Parse(time.RFC3339Nano, *maxTS)
+		}
+	}
+
+	return agg, nil
+}
+
 func joinClauses(clauses []string) string {
 	result := ""
 	for i, c := range clauses {
diff --git a/internal/extension/metrics/store_test.go b/internal/extension/metrics/store_test.go
index a471df0b..ff7b4f3b 100644
--- a/internal/extension/metrics/store_test.go
+++ b/internal/extension/metrics/store_test.go
@@ -95,6 +95,62 @@ func TestStoreRecordsRawAndNormalizedUsage(t *testing.T) {
 	}
 }
 
+func TestStoreAggregateUsage(t *testing.T) {
+	store := newMetricsStore(t)
+	base := time.Date(2026, 6, 1, 12, 0, 0, 0, time.UTC)
+	mustRecord := func(model string, ts time.Time, in, out, cw, cr int64, cost float64) {
+		t.Helper()
+		if err := store.Record(mbtrics.Record{
+			Timestamp: ts, Model: model, ActualModel: model + "-up",
+			InputTokens: in, OutputTokens: out, CacheCreation: cw, CacheRead: cr,
+			Cost: cost, Status: "success",
+		}); err != nil {
+			t.Fatalf("Record error = %v", err)
+		}
+	}
+	mustRecord("alpha", base, 100, 50, 10, 20, 0.5)
+	mustRecord("alpha", base.Add(time.Hour), 200, 80, 0, 40, 0.7)
+	mustRecord("beta", base.Add(2*time.Hour), 300, 90, 30, 60, 1.0)
+	// Outside the queried window (excluded by the since bound).
+	mustRecord("alpha", base.Add(-48*time.Hour), 999, 999, 999, 999, 9.0)
+
+	agg, err := store.AggregateUsage(base.Add(-time.Hour), base.Add(3*time.Hour))
+	if err != nil {
+		t.Fatalf("AggregateUsage error = %v", err)
+	}
+	if agg.Requests != 3 {
+		t.Fatalf("expected 3 requests in window, got %d", agg.Requests)
+	}
+	if agg.InputTokens != 600 || agg.OutputTokens != 220 {
+		t.Fatalf("unexpected token totals: in=%d out=%d", agg.InputTokens, agg.OutputTokens)
+	}
+	if agg.CacheCreation != 40 || agg.CacheRead != 120 {
+		t.Fatalf("unexpected cache totals: cw=%d cr=%d", agg.CacheCreation, agg.CacheRead)
+	}
+	if agg.Cost < 2.19 || agg.Cost > 2.21 {
+		t.Fatalf("expected total cost ~2.2, got %v", agg.Cost)
+	}
+	if len(agg.ByModel) != 2 {
+		t.Fatalf("expected 2 model rows, got %d", len(agg.ByModel))
+	}
+	byModel := map[string]mbtrics.UsageModelAggregate{}
+	for _, m := range agg.ByModel {
+		byModel[m.Model] = m
+	}
+	if alpha := byModel["alpha"]; alpha.Requests != 2 || alpha.InputTokens != 300 {
+		t.Fatalf("unexpected alpha aggregate: %+v", alpha)
+	}
+	if beta := byModel["beta"]; beta.Requests != 1 || beta.Cost != 1.0 {
+		t.Fatalf("unexpected beta aggregate: %+v", beta)
+	}
+	if !agg.Earliest.Equal(base) {
+		t.Fatalf("expected earliest %v, got %v", base, agg.Earliest)
+	}
+	if !agg.Latest.Equal(base.Add(2 * time.Hour)) {
+		t.Fatalf("expected latest %v, got %v", base.Add(2*time.Hour), agg.Latest)
+	}
+}
+
 func renderMetricsDDL(schema string) string {
 	out, _ := db.RenderDDL(schema, "metrics_request_metrics", "")
 	return out
diff --git a/internal/extension/plugin/capabilities.go b/internal/extension/plugin/capabilities.go
index 6206575a..5d6409d6 100644
--- a/internal/extension/plugin/capabilities.go
+++ b/internal/extension/plugin/capabilities.go
@@ -196,6 +196,48 @@ type DBConsumer interface {
 	DBConsumer() foundationdb.Consumer
 }
 
+// --- Usage analytics capabilities ---
+
+// UsageQuery selects a time window of persisted per-request usage. A zero
+// Since means "from the earliest record"; a zero Until means "up to now".
+type UsageQuery struct {
+	Since time.Time
+	Until time.Time
+}
+
+// UsageModelAggregate holds aggregated usage for a single model.
+type UsageModelAggregate struct {
+	Model         string
+	ActualModel   string
+	Requests      int64
+	InputTokens   int64
+	OutputTokens  int64
+	CacheCreation int64
+	CacheRead     int64
+	Cost          float64
+}
+
+// UsageAggregate holds aggregated usage totals plus a per-model breakdown for a
+// queried time window, sourced from persisted (cross-session) metrics.
+type UsageAggregate struct {
+	Requests      int64
+	InputTokens   int64
+	OutputTokens  int64
+	CacheCreation int64
+	CacheRead     int64
+	Cost          float64
+	Earliest      time.Time
+	Latest        time.Time
+	ByModel       []UsageModelAggregate
+}
+
+// UsageSource is implemented by plugins that persist per-request usage and can
+// aggregate it over a time window. This powers cross-session usage analytics in
+// the console overview, independent of the in-memory per-process session stats.
+type UsageSource interface {
+	AggregateUsage(query UsageQuery) (UsageAggregate, error)
+}
+
 // --- Core format capabilities (Adapter path) ---
 
 // CoreRequestMutator defines a plugin that can modify a CoreRequest.
diff --git a/internal/extension/plugin/registry.go b/internal/extension/plugin/registry.go
index 53478cb7..4e3d0939 100644
--- a/internal/extension/plugin/registry.go
+++ b/internal/extension/plugin/registry.go
@@ -32,6 +32,7 @@ type Registry struct {
 	dbProviders            []DBProvider
 	dbConsumers            []DBConsumer
 	requestCompletionHooks []RequestCompletionHook
+	usageSources           []UsageSource
 	routeRegistrars        []RouteRegistrar
 	configSpecs            []config.ExtensionConfigSpec
 	logger                 *slog.Logger
@@ -112,11 +113,23 @@ func (r *Registry) Register(p Plugin) {
 	if v, ok := p.(RequestCompletionHook); ok {
 		r.requestCompletionHooks = append(r.requestCompletionHooks, v)
 	}
+	if v, ok := p.(UsageSource); ok {
+		r.usageSources = append(r.usageSources, v)
+	}
 	if v, ok := p.(RouteRegistrar); ok {
 		r.routeRegistrars = append(r.routeRegistrars, v)
 	}
 }
 
+// UsageSource returns the first registered cross-session usage-analytics
+// source, or nil if no plugin persists per-request usage.
+func (r *Registry) UsageSource() UsageSource {
+	if r == nil || len(r.usageSources) == 0 {
+		return nil
+	}
+	return r.usageSources[0]
+}
+
 func (r *Registry) ConfigSpecs() []config.ExtensionConfigSpec {
 	if r == nil || len(r.configSpecs) == 0 {
 		return nil
diff --git a/internal/logger/consumer.go b/internal/logger/consumer.go
index ea95b060..5ed93e52 100644
--- a/internal/logger/consumer.go
+++ b/internal/logger/consumer.go
@@ -15,20 +15,35 @@ type ConsumeFunc func(entries []LogEntry) []LogEntry
 // a pointer to the same consumeState, so a later SetConsumeFunc call on
 // the root handler is visible to every derived logger.
 type consumeState struct {
-	mu sync.RWMutex
-	fn ConsumeFunc
+	mu    sync.RWMutex
+	funcs []ConsumeFunc
 }
 
-func (s *consumeState) load() ConsumeFunc {
+func (s *consumeState) load() []ConsumeFunc {
 	s.mu.RLock()
 	defer s.mu.RUnlock()
-	return s.fn
+	out := make([]ConsumeFunc, len(s.funcs))
+	copy(out, s.funcs)
+	return out
 }
 
 func (s *consumeState) store(fn ConsumeFunc) {
 	s.mu.Lock()
 	defer s.mu.Unlock()
-	s.fn = fn
+	if fn == nil {
+		s.funcs = nil
+		return
+	}
+	s.funcs = []ConsumeFunc{fn}
+}
+
+func (s *consumeState) append(fn ConsumeFunc) {
+	if fn == nil {
+		return
+	}
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.funcs = append(s.funcs, fn)
 }
 
 // consumeHandler wraps an inner slog.Handler and dispatches every log record
@@ -65,10 +80,10 @@ func (h *consumeHandler) Enabled(ctx context.Context, level slog.Level) bool {
 }
 
 func (h *consumeHandler) Handle(ctx context.Context, r slog.Record) error {
-	fn := h.consume.load()
+	funcs := h.consume.load()
 
 	// Fast path: no consume function registered, delegate directly.
-	if fn == nil {
+	if len(funcs) == 0 {
 		return h.inner.Handle(ctx, r)
 	}
 
@@ -102,7 +117,13 @@ func (h *consumeHandler) Handle(ctx context.Context, r slog.Record) error {
 	}
 
 	// Run through consume pipeline (single-entry batch).
-	result := fn([]LogEntry{entry})
+	result := []LogEntry{entry}
+	for _, fn := range funcs {
+		result = fn(result)
+		if len(result) == 0 {
+			return nil // consumed/suppressed
+		}
+	}
 	if len(result) == 0 {
 		return nil // consumed/suppressed
 	}
@@ -153,3 +174,8 @@ func (h *consumeHandler) WithGroup(name string) slog.Handler {
 func (h *consumeHandler) SetConsumeFunc(fn ConsumeFunc) {
 	h.consume.store(fn)
 }
+
+// AddConsumeFunc appends a consume function to this handler.
+func (h *consumeHandler) AddConsumeFunc(fn ConsumeFunc) {
+	h.consume.append(fn)
+}
diff --git a/internal/logger/logger.go b/internal/logger/logger.go
index 86886ec3..577b7042 100644
--- a/internal/logger/logger.go
+++ b/internal/logger/logger.go
@@ -1,6 +1,7 @@
 package logger
 
 import (
+	"context"
 	"fmt"
 	"io"
 	"log/slog"
@@ -13,6 +14,7 @@ import (
 // It is referenced by the slog.Default() logger after Init. SetConsumeFunc operates
 // on this handler, and all derived sub-loggers share the same consumeState.
 var defaultHandler *consumeHandler
+var defaultRing *Ring
 
 // LogEntry represents a single log entry passed through the consume pipeline.
 type LogEntry struct {
@@ -26,6 +28,8 @@ type LogEntry struct {
 func init() {
 	h := slog.NewTextHandler(os.Stderr, &slog.HandlerOptions{Level: slog.LevelInfo})
 	defaultHandler = newConsumeHandler(h)
+	defaultRing = NewRing(1000)
+	defaultHandler.AddConsumeFunc(defaultRing.Consume)
 	slog.SetDefault(slog.New(defaultHandler))
 }
 
@@ -84,6 +88,8 @@ func Init(cfg Config) error {
 		inner = slog.NewTextHandler(out, opts)
 	}
 	defaultHandler = newConsumeHandler(inner)
+	defaultRing = NewRing(1000)
+	defaultHandler.AddConsumeFunc(defaultRing.Consume)
 	slog.SetDefault(slog.New(defaultHandler))
 	return nil
 }
@@ -96,3 +102,28 @@ func SetConsumeFunc(fn ConsumeFunc) {
 		defaultHandler.SetConsumeFunc(fn)
 	}
 }
+
+// AddConsumeFunc appends a consume callback to the current consume pipeline.
+func AddConsumeFunc(fn ConsumeFunc) {
+	if defaultHandler != nil {
+		defaultHandler.AddConsumeFunc(fn)
+	}
+}
+
+// Recent returns entries captured by the default log ring.
+func Recent(limit int) []LogEntry {
+	if defaultRing == nil {
+		return []LogEntry{}
+	}
+	return defaultRing.Recent(limit)
+}
+
+// Subscribe returns a channel of log entries from the default log ring.
+func Subscribe(ctx context.Context) <-chan LogEntry {
+	if defaultRing == nil {
+		ch := make(chan LogEntry)
+		close(ch)
+		return ch
+	}
+	return defaultRing.Subscribe(ctx)
+}
diff --git a/internal/logger/ring.go b/internal/logger/ring.go
new file mode 100644
index 00000000..bf4a2ef0
--- /dev/null
+++ b/internal/logger/ring.go
@@ -0,0 +1,138 @@
+package logger
+
+import (
+	"context"
+	"fmt"
+	"log/slog"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+)
+
+type Ring struct {
+	mu      sync.Mutex
+	limit   int
+	entries []LogEntry
+	subs    map[chan LogEntry]struct{}
+}
+
+func NewRing(limit int) *Ring {
+	if limit <= 0 {
+		panic("logger ring limit must be positive")
+	}
+	return &Ring{
+		limit: limit,
+		subs:  map[chan LogEntry]struct{}{},
+	}
+}
+
+func (r *Ring) Consume(entries []LogEntry) []LogEntry {
+	r.Append(entries)
+	return entries
+}
+
+func (r *Ring) Append(entries []LogEntry) {
+	if len(entries) == 0 {
+		return
+	}
+	copied := make([]LogEntry, len(entries))
+	for i, entry := range entries {
+		copied[i] = cloneLogEntry(entry)
+		if copied[i].Timestamp.IsZero() {
+			copied[i].Timestamp = time.Now()
+		}
+		if len(copied[i].Raw) == 0 {
+			copied[i].Raw = []byte(formatRawLogEntry(copied[i]))
+		}
+	}
+
+	r.mu.Lock()
+	r.entries = append(r.entries, copied...)
+	if overflow := len(r.entries) - r.limit; overflow > 0 {
+		r.entries = append([]LogEntry(nil), r.entries[overflow:]...)
+	}
+	subs := make([]chan LogEntry, 0, len(r.subs))
+	for ch := range r.subs {
+		subs = append(subs, ch)
+	}
+	r.mu.Unlock()
+
+	for _, entry := range copied {
+		for _, ch := range subs {
+			select {
+			case ch <- cloneLogEntry(entry):
+			default:
+			}
+		}
+	}
+}
+
+func (r *Ring) Recent(limit int) []LogEntry {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+	if limit <= 0 || limit > len(r.entries) {
+		limit = len(r.entries)
+	}
+	start := len(r.entries) - limit
+	out := make([]LogEntry, 0, limit)
+	for _, entry := range r.entries[start:] {
+		out = append(out, cloneLogEntry(entry))
+	}
+	return out
+}
+
+func (r *Ring) Subscribe(ctx context.Context) <-chan LogEntry {
+	ch := make(chan LogEntry, 256)
+	r.mu.Lock()
+	r.subs[ch] = struct{}{}
+	r.mu.Unlock()
+
+	go func() {
+		<-ctx.Done()
+		r.mu.Lock()
+		delete(r.subs, ch)
+		close(ch)
+		r.mu.Unlock()
+	}()
+	return ch
+}
+
+func cloneLogEntry(entry LogEntry) LogEntry {
+	entry.Attrs = append([]slog.Attr(nil), entry.Attrs...)
+	entry.Raw = append([]byte(nil), entry.Raw...)
+	return entry
+}
+
+func formatRawLogEntry(entry LogEntry) string {
+	parts := []string{
+		"time=" + entry.Timestamp.UTC().Format(time.RFC3339Nano),
+		"level=" + entry.Level.String(),
+		"msg=" + strconv.Quote(entry.Message),
+	}
+	for _, attr := range entry.Attrs {
+		parts = append(parts, attr.Key+"="+formatAttrValue(attr.Value))
+	}
+	return strings.Join(parts, " ") + "\n"
+}
+
+func formatAttrValue(value slog.Value) string {
+	switch value.Kind() {
+	case slog.KindString:
+		return strconv.Quote(value.String())
+	case slog.KindInt64:
+		return strconv.FormatInt(value.Int64(), 10)
+	case slog.KindUint64:
+		return strconv.FormatUint(value.Uint64(), 10)
+	case slog.KindFloat64:
+		return strconv.FormatFloat(value.Float64(), 'f', -1, 64)
+	case slog.KindBool:
+		return strconv.FormatBool(value.Bool())
+	case slog.KindDuration:
+		return strconv.Quote(value.Duration().String())
+	case slog.KindTime:
+		return strconv.Quote(value.Time().UTC().Format(time.RFC3339Nano))
+	default:
+		return strconv.Quote(fmt.Sprint(value.Any()))
+	}
+}
diff --git a/internal/logger/ring_test.go b/internal/logger/ring_test.go
new file mode 100644
index 00000000..6c59f612
--- /dev/null
+++ b/internal/logger/ring_test.go
@@ -0,0 +1,83 @@
+package logger
+
+import (
+	"bytes"
+	"context"
+	"log/slog"
+	"testing"
+	"time"
+)
+
+func TestRingRecentKeepsLastEntriesInOriginalOrder(t *testing.T) {
+	ring := NewRing(2)
+	ring.Append([]LogEntry{
+		{Message: "first"},
+		{Message: "second"},
+		{Message: "third"},
+	})
+
+	recent := ring.Recent(10)
+	if len(recent) != 2 {
+		t.Fatalf("Recent returned %d entries, want 2", len(recent))
+	}
+	if recent[0].Message != "second" || recent[1].Message != "third" {
+		t.Fatalf("Recent messages = %q/%q, want second/third", recent[0].Message, recent[1].Message)
+	}
+}
+
+func TestRingSubscribeReceivesEntriesInOrder(t *testing.T) {
+	ring := NewRing(4)
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+	ch := ring.Subscribe(ctx)
+
+	ring.Append([]LogEntry{{Message: "one"}, {Message: "two"}})
+
+	first := receiveLogEntry(t, ch)
+	second := receiveLogEntry(t, ch)
+	if first.Message != "one" || second.Message != "two" {
+		t.Fatalf("subscriber messages = %q/%q, want one/two", first.Message, second.Message)
+	}
+}
+
+func TestConsumeHandlerFanOutPreservesPluginAndRingConsumers(t *testing.T) {
+	var buf bytes.Buffer
+	if err := Init(Config{Level: LevelInfo, Format: "json", Output: &buf}); err != nil {
+		t.Fatalf("Init() error = %v", err)
+	}
+	ring := NewRing(8)
+	var pluginSeen []LogEntry
+
+	SetConsumeFunc(func(entries []LogEntry) []LogEntry {
+		pluginSeen = append(pluginSeen, entries...)
+		return entries
+	})
+	AddConsumeFunc(ring.Consume)
+
+	slog.Info("fanout message", "k", "v")
+
+	if len(pluginSeen) != 1 {
+		t.Fatalf("plugin consumer received %d entries, want 1", len(pluginSeen))
+	}
+	recent := ring.Recent(1)
+	if len(recent) != 1 {
+		t.Fatalf("ring recent length = %d, want 1", len(recent))
+	}
+	if recent[0].Message != "fanout message" {
+		t.Fatalf("ring message = %q, want fanout message", recent[0].Message)
+	}
+	if len(recent[0].Raw) == 0 {
+		t.Fatal("ring Raw is empty")
+	}
+}
+
+func receiveLogEntry(t *testing.T, ch <-chan LogEntry) LogEntry {
+	t.Helper()
+	select {
+	case entry := <-ch:
+		return entry
+	case <-time.After(time.Second):
+		t.Fatal("timed out waiting for log entry")
+		return LogEntry{}
+	}
+}
diff --git a/internal/service/api/api_test.go b/internal/service/api/api_test.go
index dff58be3..08ebb7fd 100644
--- a/internal/service/api/api_test.go
+++ b/internal/service/api/api_test.go
@@ -11,7 +11,9 @@ import (
 
 	"moonbridge/internal/config"
 	"moonbridge/internal/db"
+	"moonbridge/internal/extension/plugin"
 	"moonbridge/internal/service/runtime"
+	"moonbridge/internal/service/stats"
 	"moonbridge/internal/service/store"
 
 	_ "modernc.org/sqlite"
@@ -19,14 +21,28 @@ import (
 
 // testFixture provides a test environment with a real store, runtime, and HTTP router.
 type testFixture struct {
-	t      *testing.T
-	store  store.ConfigStore
-	rt     *runtime.Runtime
-	server *httptest.Server
+	t       *testing.T
+	store   store.ConfigStore
+	rt      *runtime.Runtime
+	handler http.Handler
+}
+
+type fixtureOptions struct {
+	sessionStats *stats.SessionStats
+	registry     *plugin.Registry
+	mutateConfig func(*config.Config)
 }
 
 // newFixture creates a test fixture for API e2e tests.
 func newFixture(t *testing.T) *testFixture {
+	return newFixtureWithOptions(t, fixtureOptions{})
+}
+
+func newFixtureWithStats(t *testing.T, sessionStats *stats.SessionStats) *testFixture {
+	return newFixtureWithOptions(t, fixtureOptions{sessionStats: sessionStats})
+}
+
+func newFixtureWithOptions(t *testing.T, opts fixtureOptions) *testFixture {
 	t.Helper()
 
 	cfg := config.Config{
@@ -76,6 +92,9 @@ func newFixture(t *testing.T) *testFixture {
 			},
 		},
 	}
+	if opts.mutateConfig != nil {
+		opts.mutateConfig(&cfg)
+	}
 
 	rt := runtime.NewRuntime(cfg, nil, nil)
 
@@ -87,6 +106,9 @@ func newFixture(t *testing.T) *testFixture {
 	t.Cleanup(func() { database.Close() })
 
 	c := store.NewConfigStoreConsumer(nil)
+	if opts.registry != nil {
+		c.SetExtensionSpecs(opts.registry.ConfigSpecs())
+	}
 	tables := c.Tables()
 	for _, tbl := range tables {
 		realName := "config_store_" + tbl.Name
@@ -113,11 +135,9 @@ func newFixture(t *testing.T) *testFixture {
 
 	// Mock server to satisfy the interface required by NewRouter.
 	srv := &testServer{rt: rt}
-	mux := NewRouter(s, rt, nil, nil, srv)
-	server := httptest.NewServer(mux)
-	t.Cleanup(server.Close)
+	handler := NewRouter(s, rt, opts.sessionStats, opts.registry, srv)
 
-	return &testFixture{t: t, store: s, rt: rt, server: server}
+	return &testFixture{t: t, store: s, rt: rt, handler: handler}
 }
 
 func buildTableNameMap(tables []db.TableSpec) map[string]string {
@@ -219,12 +239,12 @@ func (f *testFixture) request(method, path string, body any) *httptest.ResponseR
 	} else {
 		reqBody = strings.NewReader("")
 	}
-	req := httptest.NewRequest(method, f.server.URL+path, reqBody)
+	req := httptest.NewRequest(method, "http://moonbridge.test"+path, reqBody)
 	if body != nil {
 		req.Header.Set("Content-Type", "application/json")
 	}
 	w := httptest.NewRecorder()
-	f.server.Config.Handler.ServeHTTP(w, req)
+	f.handler.ServeHTTP(w, req)
 	return w
 }
 
@@ -244,3 +264,112 @@ func TestDeleteProviderStageChange(t *testing.T) {
 		t.Fatalf("expected 202, got %d: %s", resp.Code, resp.Body.String())
 	}
 }
+
+func TestGetStatsUsageReturnsStableUsageDTO(t *testing.T) {
+	sessionStats := stats.NewSessionStats()
+	sessionStats.SetPricing(map[string]stats.ModelPricing{
+		"claude-sonnet": {
+			InputPrice:      3,
+			OutputPrice:     15,
+			CacheWritePrice: 3.75,
+			CacheReadPrice:  0.3,
+		},
+	})
+	sessionStats.RecordBilling("claude-sonnet", "claude-3-5-sonnet-20241022", stats.BillingUsage{
+		FreshInputTokens:         100,
+		CacheCreationInputTokens: 20,
+		CacheReadInputTokens:     80,
+		OutputTokens:             50,
+	})
+	f := newFixtureWithStats(t, sessionStats)
+
+	resp := f.request("GET", "/stats/usage", nil)
+	if resp.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var payload struct {
+		Totals struct {
+			Requests       int64   `json:"requests"`
+			InputTokens    int64   `json:"input_tokens"`
+			OutputTokens   int64   `json:"output_tokens"`
+			CacheCreation  int64   `json:"cache_creation"`
+			CacheRead      int64   `json:"cache_read"`
+			CacheHitRate   float64 `json:"cache_hit_rate"`
+			CacheWriteRate float64 `json:"cache_write_rate"`
+			CacheRWRatio   float64 `json:"cache_rw_ratio"`
+			TotalCost      float64 `json:"total_cost"`
+			Duration       string  `json:"duration"`
+		} `json:"totals"`
+		ByModel []struct {
+			Model             string  `json:"model"`
+			ActualModel       string  `json:"actual_model"`
+			Requests          int64   `json:"requests"`
+			InputTokens       int64   `json:"input_tokens"`
+			OutputTokens      int64   `json:"output_tokens"`
+			CacheCreation     int64   `json:"cache_creation"`
+			CacheRead         int64   `json:"cache_read"`
+			CacheHitRate      float64 `json:"cache_hit_rate"`
+			Cost              float64 `json:"cost"`
+			AvgCostPerMTokens float64 `json:"avg_cost_per_mtoken"`
+		} `json:"by_model"`
+	}
+	f.decode(resp, &payload)
+
+	if payload.Totals.Requests != 1 ||
+		payload.Totals.InputTokens != 200 ||
+		payload.Totals.OutputTokens != 50 ||
+		payload.Totals.CacheCreation != 20 ||
+		payload.Totals.CacheRead != 80 {
+		t.Fatalf("unexpected totals: %+v", payload.Totals)
+	}
+	if payload.Totals.CacheHitRate != 40 || payload.Totals.CacheWriteRate != 10 || payload.Totals.CacheRWRatio != 4 {
+		t.Fatalf("unexpected cache rates: %+v", payload.Totals)
+	}
+	if payload.Totals.TotalCost <= 0 {
+		t.Fatalf("total_cost should be positive: %+v", payload.Totals)
+	}
+	if payload.Totals.Duration == "" {
+		t.Fatal("duration should be formatted")
+	}
+	if len(payload.ByModel) != 1 {
+		t.Fatalf("expected one model row, got %d", len(payload.ByModel))
+	}
+	row := payload.ByModel[0]
+	if row.Model != "claude-sonnet" || row.ActualModel != "claude-3-5-sonnet-20241022" {
+		t.Fatalf("unexpected model names: %+v", row)
+	}
+	if row.Requests != 1 || row.InputTokens != 200 || row.OutputTokens != 50 || row.CacheCreation != 20 || row.CacheRead != 80 {
+		t.Fatalf("unexpected model row totals: %+v", row)
+	}
+	if row.CacheHitRate != 40 {
+		t.Fatalf("unexpected model cache hit rate: %+v", row)
+	}
+	if row.Cost <= 0 || row.AvgCostPerMTokens <= 0 {
+		t.Fatalf("expected model cost metrics: %+v", row)
+	}
+}
+
+func TestGetStatsUsageWithoutStatsReturnsEmptyModelArray(t *testing.T) {
+	f := newFixtureWithStats(t, nil)
+
+	resp := f.request("GET", "/stats/usage", nil)
+	if resp.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var payload struct {
+		Totals struct {
+			Requests int64 `json:"requests"`
+		} `json:"totals"`
+		ByModel json.RawMessage `json:"by_model"`
+	}
+	f.decode(resp, &payload)
+
+	if payload.Totals.Requests != 0 {
+		t.Fatalf("expected zero totals when stats are unavailable, got %+v", payload.Totals)
+	}
+	if string(payload.ByModel) != "[]" {
+		t.Fatalf("expected by_model to be an empty JSON array, got %s", string(payload.ByModel))
+	}
+}
diff --git a/internal/service/api/config_graph.go b/internal/service/api/config_graph.go
new file mode 100644
index 00000000..c778009e
--- /dev/null
+++ b/internal/service/api/config_graph.go
@@ -0,0 +1,202 @@
+package api
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+
+	"moonbridge/internal/service/configgraph"
+)
+
+type createConfigResourceRequest struct {
+	BaseRevision string         `json:"baseRevision"`
+	ID           string         `json:"id"`
+	Value        map[string]any `json:"value"`
+}
+
+type deleteConfigResourceRequest struct {
+	BaseRevision string `json:"baseRevision"`
+}
+
+func (r *Router) configGraphService() *configgraph.Service {
+	svc := configgraph.NewService(r.store, r.runtime, slog.Default())
+	if r.registry != nil {
+		svc.WithExtensionSpecs(r.registry.ConfigSpecs())
+	}
+	return svc
+}
+
+func (r *Router) handleGetConfigGraph(w http.ResponseWriter, req *http.Request) {
+	graph, err := r.configGraphService().Graph(req.Context())
+	if err != nil {
+		slog.Default().Error("get config graph failed", "error", err)
+		respondError(w, http.StatusInternalServerError, "config_graph_error", fmt.Sprintf("读取配置图失败: %v", err))
+		return
+	}
+	respondJSON(w, http.StatusOK, graph)
+}
+
+func (r *Router) handlePatchConfigGraph(w http.ResponseWriter, req *http.Request) {
+	var body configgraph.PatchRequest
+	if err := decodeStrictJSON(req, &body); err != nil {
+		respondError(w, http.StatusBadRequest, "invalid_json", fmt.Sprintf("无效的 JSON 请求体: %v", err))
+		return
+	}
+
+	resp, err := r.configGraphService().Patch(req.Context(), body)
+	if err != nil {
+		slog.Default().Error("patch config graph failed", "error", err)
+		respondError(w, http.StatusInternalServerError, "config_graph_error", fmt.Sprintf("更新配置图失败: %v", err))
+		return
+	}
+	respondConfigGraphPatch(w, resp)
+}
+
+func (r *Router) handleValidateConfigGraph(w http.ResponseWriter, req *http.Request) {
+	var body configgraph.PatchRequest
+	if err := decodeStrictJSON(req, &body); err != nil {
+		respondError(w, http.StatusBadRequest, "invalid_json", fmt.Sprintf("无效的 JSON 请求体: %v", err))
+		return
+	}
+
+	resp, err := r.configGraphService().Validate(req.Context(), body)
+	if err != nil {
+		slog.Default().Error("validate config graph failed", "error", err)
+		respondError(w, http.StatusInternalServerError, "config_graph_error", fmt.Sprintf("验证配置图失败: %v", err))
+		return
+	}
+	respondConfigGraphPatch(w, resp)
+}
+
+func (r *Router) handleCreateConfigResource(w http.ResponseWriter, req *http.Request) {
+	kind, ok := parseResourceKind(req.PathValue("kind"))
+	if !ok {
+		respondError(w, http.StatusBadRequest, "invalid_resource_kind", "无效的配置资源类型")
+		return
+	}
+
+	var body createConfigResourceRequest
+	if err := decodeStrictJSON(req, &body); err != nil {
+		respondError(w, http.StatusBadRequest, "invalid_json", fmt.Sprintf("无效的 JSON 请求体: %v", err))
+		return
+	}
+	if body.Value == nil {
+		body.Value = map[string]any{}
+	}
+	if conflict, handled := r.rejectCreateConflict(kind, body.ID, body.BaseRevision); handled {
+		respondConfigGraphPatch(w, conflict)
+		return
+	}
+
+	resp, err := r.configGraphService().CreateResource(req.Context(), kind, body.ID, body.Value)
+	if err != nil {
+		slog.Default().Error("create config graph resource failed", "kind", kind, "id", body.ID, "error", err)
+		respondError(w, http.StatusInternalServerError, "config_graph_error", fmt.Sprintf("创建配置资源失败: %v", err))
+		return
+	}
+	respondConfigGraphPatch(w, resp)
+}
+
+func (r *Router) handleDeleteConfigResource(w http.ResponseWriter, req *http.Request) {
+	kind, ok := parseResourceKind(req.PathValue("kind"))
+	if !ok {
+		respondError(w, http.StatusBadRequest, "invalid_resource_kind", "无效的配置资源类型")
+		return
+	}
+	id := req.PathValue("id")
+	if id == "" {
+		respondError(w, http.StatusBadRequest, "invalid_resource_id", "无效的配置资源 ID")
+		return
+	}
+
+	baseRevision, err := deleteBaseRevision(req)
+	if err != nil {
+		respondError(w, http.StatusBadRequest, "invalid_json", fmt.Sprintf("无效的 JSON 请求体: %v", err))
+		return
+	}
+	resp, err := r.configGraphService().DeleteResource(req.Context(), kind, id, baseRevision)
+	if err != nil {
+		slog.Default().Error("delete config graph resource failed", "kind", kind, "id", id, "error", err)
+		respondError(w, http.StatusInternalServerError, "config_graph_error", fmt.Sprintf("删除配置资源失败: %v", err))
+		return
+	}
+	respondConfigGraphPatch(w, resp)
+}
+
+func respondConfigGraphPatch(w http.ResponseWriter, resp configgraph.PatchResponse) {
+	switch resp.Result {
+	case configgraph.ResultRevisionConflict:
+		respondJSON(w, http.StatusConflict, resp)
+	case configgraph.ResultValidationRejected, configgraph.ResultRuntimeRejected, configgraph.ResultDraftRejected:
+		respondJSON(w, http.StatusBadRequest, resp)
+	default:
+		respondJSON(w, http.StatusOK, resp)
+	}
+}
+
+func parseResourceKind(value string) (configgraph.ResourceKind, bool) {
+	kind := configgraph.ResourceKind(value)
+	for _, def := range configgraph.ResourceDefinitions() {
+		if def.Kind == string(kind) {
+			return kind, true
+		}
+	}
+	return "", false
+}
+
+func (r *Router) rejectCreateConflict(kind configgraph.ResourceKind, id, baseRevision string) (configgraph.PatchResponse, bool) {
+	revision, err := r.store.CurrentRevision()
+	if err != nil {
+		return configgraph.PatchResponse{}, false
+	}
+	if baseRevision != "" && baseRevision == revision {
+		return configgraph.PatchResponse{}, false
+	}
+	return configgraph.PatchResponse{
+		Result:   configgraph.ResultRevisionConflict,
+		Revision: revision,
+		Errors: []configgraph.FieldError{
+			{
+				ResourceKind: kind,
+				ResourceID:   id,
+				Code:         "revisionConflict",
+				Message:      fmt.Sprintf("base revision %q does not match current revision %q", baseRevision, revision),
+			},
+		},
+	}, true
+}
+
+func deleteBaseRevision(req *http.Request) (string, error) {
+	baseRevision := req.URL.Query().Get("baseRevision")
+	if baseRevision != "" {
+		return baseRevision, nil
+	}
+	if req.ContentLength == 0 {
+		return "", nil
+	}
+
+	var body deleteConfigResourceRequest
+	if err := decodeStrictJSON(req, &body); err != nil {
+		return "", err
+	}
+	return body.BaseRevision, nil
+}
+
+func decodeStrictJSON(req *http.Request, dst any) error {
+	dec := json.NewDecoder(req.Body)
+	dec.DisallowUnknownFields()
+	if err := dec.Decode(dst); err != nil {
+		return err
+	}
+	var trailing struct{}
+	if err := dec.Decode(&trailing); err != nil {
+		if errors.Is(err, io.EOF) {
+			return nil
+		}
+		return err
+	}
+	return errors.New("unexpected trailing JSON")
+}
diff --git a/internal/service/api/config_graph_test.go b/internal/service/api/config_graph_test.go
new file mode 100644
index 00000000..6dee0608
--- /dev/null
+++ b/internal/service/api/config_graph_test.go
@@ -0,0 +1,217 @@
+package api
+
+import (
+	"net/http"
+	"testing"
+
+	"moonbridge/internal/config"
+	dbsqlite "moonbridge/internal/extension/db/sqlite"
+	"moonbridge/internal/extension/plugin"
+	"moonbridge/internal/service/configgraph"
+)
+
+func TestGetConfigGraphReturnsCurrentResources(t *testing.T) {
+	f := newFixture(t)
+
+	resp := f.request("GET", "/config/graph", nil)
+	if resp.Code != http.StatusOK {
+		t.Fatalf("GET /config/graph returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var graph configgraph.Graph
+	f.decode(resp, &graph)
+	if graph.Revision == "" {
+		t.Fatal("graph revision is empty")
+	}
+	assertGraphResource(t, graph, configgraph.ResourceMode, "main")
+	assertGraphResource(t, graph, configgraph.ResourceProvider, "anthropic")
+	assertGraphResource(t, graph, configgraph.ResourceModel, "claude-sonnet")
+	assertGraphResource(t, graph, configgraph.ResourceRoute, "claude-sonnet")
+}
+
+func TestPatchConfigGraphCommitsDefaultsChange(t *testing.T) {
+	f := newFixture(t)
+	revision := currentGraphRevision(t, f)
+
+	resp := f.request("PATCH", "/config/graph", configgraph.PatchRequest{
+		BaseRevision: revision,
+		Changes: []configgraph.PatchOp{
+			{Kind: configgraph.ResourceDefaults, ID: "main", Field: "max_tokens", Value: 8192},
+		},
+	})
+	if resp.Code != http.StatusOK {
+		t.Fatalf("PATCH /config/graph returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var patch configgraph.PatchResponse
+	f.decode(resp, &patch)
+	if patch.Result != configgraph.ResultCommitted {
+		t.Fatalf("Patch result = %q, want %q", patch.Result, configgraph.ResultCommitted)
+	}
+	if patch.Revision == "" || patch.Revision == revision {
+		t.Fatalf("Patch revision = %q, want non-empty changed revision", patch.Revision)
+	}
+
+	graphResp := f.request("GET", "/config/graph", nil)
+	if graphResp.Code != http.StatusOK {
+		t.Fatalf("GET /config/graph after patch returned %d: %s", graphResp.Code, graphResp.Body.String())
+	}
+	var graph configgraph.Graph
+	f.decode(graphResp, &graph)
+	defaults := assertGraphResource(t, graph, configgraph.ResourceDefaults, "main")
+	if got := int(defaults.Value["max_tokens"].(float64)); got != 8192 {
+		t.Fatalf("defaults max_tokens = %d, want 8192", got)
+	}
+}
+
+func TestPatchConfigGraphReturnsConflictForStaleRevision(t *testing.T) {
+	f := newFixture(t)
+
+	resp := f.request("PATCH", "/config/graph", configgraph.PatchRequest{
+		BaseRevision: "stale-revision",
+		Changes: []configgraph.PatchOp{
+			{Kind: configgraph.ResourceDefaults, ID: "main", Field: "max_tokens", Value: 8192},
+		},
+	})
+	if resp.Code != http.StatusConflict {
+		t.Fatalf("PATCH /config/graph stale returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var patch configgraph.PatchResponse
+	f.decode(resp, &patch)
+	if patch.Result != configgraph.ResultRevisionConflict {
+		t.Fatalf("Patch result = %q, want %q", patch.Result, configgraph.ResultRevisionConflict)
+	}
+}
+
+func TestPatchConfigGraphReturnsValidationErrorForInvalidRouteProvider(t *testing.T) {
+	f := newFixture(t)
+	revision := currentGraphRevision(t, f)
+
+	resp := f.request("PATCH", "/config/graph", configgraph.PatchRequest{
+		BaseRevision: revision,
+		Changes: []configgraph.PatchOp{
+			{Kind: configgraph.ResourceRoute, ID: "claude-sonnet", Field: "provider", Value: "missing-provider"},
+		},
+	})
+	if resp.Code != http.StatusBadRequest {
+		t.Fatalf("PATCH /config/graph invalid route returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var patch configgraph.PatchResponse
+	f.decode(resp, &patch)
+	if patch.Result != configgraph.ResultValidationRejected {
+		t.Fatalf("Patch result = %q, want %q", patch.Result, configgraph.ResultValidationRejected)
+	}
+	if len(patch.Errors) == 0 {
+		t.Fatal("Patch errors is empty")
+	}
+}
+
+func TestValidateConfigGraphReturnsCandidateWithoutCommit(t *testing.T) {
+	f := newFixture(t)
+	revision := currentGraphRevision(t, f)
+
+	resp := f.request("POST", "/config/graph/validate", configgraph.PatchRequest{
+		BaseRevision: revision,
+		Changes: []configgraph.PatchOp{
+			{Kind: configgraph.ResourceDefaults, ID: "main", Field: "model", Value: "gpt-4o"},
+		},
+	})
+	if resp.Code != http.StatusOK {
+		t.Fatalf("POST /config/graph/validate returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var patch configgraph.PatchResponse
+	f.decode(resp, &patch)
+	if patch.Result != configgraph.ResultCommitted {
+		t.Fatalf("Validate result = %q, want %q", patch.Result, configgraph.ResultCommitted)
+	}
+	if patch.Revision != revision {
+		t.Fatalf("Validate revision = %q, want unchanged %q", patch.Revision, revision)
+	}
+	if patch.Graph == nil {
+		t.Fatal("Validate graph is nil")
+	}
+	defaults := assertGraphResource(t, *patch.Graph, configgraph.ResourceDefaults, "main")
+	if got := defaults.Value["model"]; got != "gpt-4o" {
+		t.Fatalf("candidate defaults model = %q, want gpt-4o", got)
+	}
+
+	graphResp := f.request("GET", "/config/graph", nil)
+	if graphResp.Code != http.StatusOK {
+		t.Fatalf("GET /config/graph after validate returned %d: %s", graphResp.Code, graphResp.Body.String())
+	}
+	var graph configgraph.Graph
+	f.decode(graphResp, &graph)
+	if graph.Revision != revision {
+		t.Fatalf("Graph revision after validate = %q, want unchanged %q", graph.Revision, revision)
+	}
+	defaults = assertGraphResource(t, graph, configgraph.ResourceDefaults, "main")
+	if got := defaults.Value["model"]; got != "claude-sonnet" {
+		t.Fatalf("committed defaults model = %q, want unchanged claude-sonnet", got)
+	}
+}
+
+func TestCreateConfigResourceUsesRegistryExtensionSpecs(t *testing.T) {
+	registry := plugin.NewRegistry(nil)
+	registry.Register(dbsqlite.NewPlugin())
+	enabled := true
+	f := newFixtureWithOptions(t, fixtureOptions{
+		registry: registry,
+		mutateConfig: func(cfg *config.Config) {
+			cfg.Extensions = map[string]config.ExtensionSettings{
+				dbsqlite.PluginName: {
+					Enabled: &enabled,
+					RawConfig: map[string]any{
+						"path": ":memory:",
+					},
+				},
+			}
+		},
+	})
+	revision := currentGraphRevision(t, f)
+
+	resp := f.request("POST", "/config/resources/model", map[string]any{
+		"baseRevision": revision,
+		"id":           "review-model",
+		"value": map[string]any{
+			"display_name":   "Review Model",
+			"context_window": 128000,
+		},
+	})
+	if resp.Code != http.StatusOK {
+		t.Fatalf("POST /config/resources/model returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var patch configgraph.PatchResponse
+	f.decode(resp, &patch)
+	if patch.Result != configgraph.ResultCommitted {
+		t.Fatalf("Create resource result = %q, want %q; errors=%v", patch.Result, configgraph.ResultCommitted, patch.Errors)
+	}
+	if _, ok := f.rt.Current().Config.Models["review-model"]; !ok {
+		t.Fatal("runtime config missing created model")
+	}
+}
+
+func currentGraphRevision(t *testing.T, f *testFixture) string {
+	t.Helper()
+	resp := f.request("GET", "/config/graph", nil)
+	if resp.Code != http.StatusOK {
+		t.Fatalf("GET /config/graph returned %d: %s", resp.Code, resp.Body.String())
+	}
+	var graph configgraph.Graph
+	f.decode(resp, &graph)
+	return graph.Revision
+}
+
+func assertGraphResource(t *testing.T, graph configgraph.Graph, kind configgraph.ResourceKind, id string) configgraph.Resource {
+	t.Helper()
+	for _, resource := range graph.Resources {
+		if resource.Kind == kind && resource.ID == id {
+			return resource
+		}
+	}
+	t.Fatalf("missing graph resource %s/%s", kind, id)
+	return configgraph.Resource{}
+}
diff --git a/internal/service/api/logs.go b/internal/service/api/logs.go
new file mode 100644
index 00000000..4a52df10
--- /dev/null
+++ b/internal/service/api/logs.go
@@ -0,0 +1,131 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"log/slog"
+	"net/http"
+	"strconv"
+	"time"
+
+	"moonbridge/internal/logger"
+)
+
+type logResponseEntry struct {
+	Timestamp string         `json:"timestamp"`
+	Level     string         `json:"level"`
+	Message   string         `json:"message"`
+	Attrs     map[string]any `json:"attrs,omitempty"`
+	Raw       string         `json:"raw,omitempty"`
+}
+
+// GET /logs
+func (r *Router) handleGetLogs(w http.ResponseWriter, req *http.Request) {
+	r.handleGetLogsRecent(w, req)
+}
+
+func (r *Router) handleGetLogsRecent(w http.ResponseWriter, req *http.Request) {
+	limit := parseLogLimit(req)
+	entries := logger.Recent(limit)
+	resp := make([]logResponseEntry, 0, len(entries))
+	for _, entry := range entries {
+		resp = append(resp, toLogResponseEntry(entry))
+	}
+	respondJSON(w, http.StatusOK, resp)
+}
+
+func (r *Router) handleGetLogsStream(w http.ResponseWriter, req *http.Request) {
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	w.WriteHeader(http.StatusOK)
+
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		respondError(w, http.StatusInternalServerError, "stream_unavailable", "日志流不可用")
+		return
+	}
+
+	entries := logger.Subscribe(req.Context())
+	for {
+		select {
+		case <-req.Context().Done():
+			return
+		case entry, ok := <-entries:
+			if !ok {
+				return
+			}
+			data, err := json.Marshal(toLogResponseEntry(entry))
+			if err != nil {
+				slog.Error("marshal log stream event", "error", err)
+				continue
+			}
+			if _, err := fmt.Fprintf(w, "data: %s\n\n", data); err != nil {
+				slog.Error("write log stream event", "error", err)
+				return
+			}
+			flusher.Flush()
+		}
+	}
+}
+
+func parseLogLimit(req *http.Request) int {
+	limit, err := strconv.Atoi(req.URL.Query().Get("limit"))
+	if err != nil || limit <= 0 {
+		return 100
+	}
+	if limit > 1000 {
+		return 1000
+	}
+	return limit
+}
+
+func toLogResponseEntry(entry logger.LogEntry) logResponseEntry {
+	timestamp := entry.Timestamp
+	if timestamp.IsZero() {
+		timestamp = time.Now()
+	}
+	return logResponseEntry{
+		Timestamp: timestamp.UTC().Format(time.RFC3339Nano),
+		Level:     entry.Level.String(),
+		Message:   entry.Message,
+		Attrs:     attrsToMap(entry.Attrs),
+		Raw:       string(entry.Raw),
+	}
+}
+
+func attrsToMap(attrs []slog.Attr) map[string]any {
+	if len(attrs) == 0 {
+		return nil
+	}
+	out := make(map[string]any, len(attrs))
+	for _, attr := range attrs {
+		out[attr.Key] = attrValueToAny(attr.Value)
+	}
+	return out
+}
+
+func attrValueToAny(value slog.Value) any {
+	switch value.Kind() {
+	case slog.KindString:
+		return value.String()
+	case slog.KindInt64:
+		return value.Int64()
+	case slog.KindUint64:
+		return value.Uint64()
+	case slog.KindFloat64:
+		return value.Float64()
+	case slog.KindBool:
+		return value.Bool()
+	case slog.KindDuration:
+		return value.Duration().String()
+	case slog.KindTime:
+		return value.Time().UTC().Format(time.RFC3339Nano)
+	case slog.KindGroup:
+		return attrsToMap(value.Group())
+	case slog.KindAny:
+		return value.Any()
+	default:
+		return value.String()
+	}
+}
diff --git a/internal/service/api/logs_test.go b/internal/service/api/logs_test.go
new file mode 100644
index 00000000..4189f2a2
--- /dev/null
+++ b/internal/service/api/logs_test.go
@@ -0,0 +1,103 @@
+package api
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"log/slog"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+	"time"
+
+	"moonbridge/internal/logger"
+)
+
+func TestGetLogsRecentReturnsNewestRawLinesInOrder(t *testing.T) {
+	resetLoggerForAPITest(t)
+	f := newFixture(t)
+
+	slog.Info("old log")
+	slog.Info("recent one")
+	slog.Info("recent two")
+
+	resp := f.request("GET", "/logs/recent?limit=2", nil)
+	if resp.Code != http.StatusOK {
+		t.Fatalf("GET /logs/recent returned %d: %s", resp.Code, resp.Body.String())
+	}
+
+	var entries []logResponseEntry
+	f.decode(resp, &entries)
+	if len(entries) != 2 {
+		t.Fatalf("recent logs length = %d, want 2", len(entries))
+	}
+	if entries[0].Message != "recent one" || entries[1].Message != "recent two" {
+		t.Fatalf("recent messages = %q/%q, want recent one/recent two", entries[0].Message, entries[1].Message)
+	}
+	if !strings.Contains(entries[0].Raw, "recent one") || !strings.Contains(entries[1].Raw, "recent two") {
+		t.Fatalf("raw lines do not include messages: %+v", entries)
+	}
+}
+
+func TestGetLogsStreamReturnsSSEFrames(t *testing.T) {
+	resetLoggerForAPITest(t)
+	f := newFixture(t)
+
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+	req := httptest.NewRequest("GET", "http://moonbridge.test/logs/stream", nil).WithContext(ctx)
+	resp := httptest.NewRecorder()
+
+	done := make(chan struct{}, 1)
+	go func() {
+		f.handler.ServeHTTP(resp, req)
+		done <- struct{}{}
+	}()
+
+	time.Sleep(20 * time.Millisecond)
+	slog.Info("streamed log")
+	time.Sleep(20 * time.Millisecond)
+	cancel()
+
+	select {
+	case <-done:
+		if resp.Code != http.StatusOK {
+			t.Fatalf("GET /logs/stream returned %d: %s", resp.Code, resp.Body.String())
+		}
+		if got := resp.Header().Get("Content-Type"); got != "text/event-stream" {
+			t.Fatalf("Content-Type = %q, want text/event-stream", got)
+		}
+		body := resp.Body.String()
+		if !strings.Contains(body, "data:") || !strings.Contains(body, "streamed log") {
+			t.Fatalf("SSE body missing frame/message: %s", body)
+		}
+	case <-time.After(time.Second):
+		t.Fatal("timed out waiting for log stream response")
+	}
+}
+
+func resetLoggerForAPITest(t *testing.T) {
+	t.Helper()
+	var out bytes.Buffer
+	if err := logger.Init(logger.Config{Level: logger.LevelInfo, Format: "json", Output: &out}); err != nil {
+		t.Fatalf("logger.Init() error = %v", err)
+	}
+}
+
+func TestLogResponseEntryJSONShape(t *testing.T) {
+	entry := logResponseEntry{
+		Timestamp: time.Now().UTC().Format(time.RFC3339Nano),
+		Level:     "INFO",
+		Message:   "shape",
+		Attrs:     map[string]any{"k": "v"},
+		Raw:       "raw",
+	}
+	data, err := json.Marshal(entry)
+	if err != nil {
+		t.Fatalf("json.Marshal(logResponseEntry) error = %v", err)
+	}
+	if !strings.Contains(string(data), `"message":"shape"`) {
+		t.Fatalf("unexpected JSON: %s", data)
+	}
+}
diff --git a/internal/service/api/router.go b/internal/service/api/router.go
index 5d5c85aa..78dc0083 100644
--- a/internal/service/api/router.go
+++ b/internal/service/api/router.go
@@ -102,6 +102,11 @@ func registerRoutes(mux *http.ServeMux, r *Router) {
 	mux.HandleFunc("PUT /extensions/{name}", r.handlePutExtension)
 
 	// Config endpoints
+	mux.HandleFunc("GET /config/graph", r.handleGetConfigGraph)
+	mux.HandleFunc("PATCH /config/graph", r.handlePatchConfigGraph)
+	mux.HandleFunc("POST /config/graph/validate", r.handleValidateConfigGraph)
+	mux.HandleFunc("POST /config/resources/{kind}", r.handleCreateConfigResource)
+	mux.HandleFunc("DELETE /config/resources/{kind}/{id}", r.handleDeleteConfigResource)
 	mux.HandleFunc("GET /config/effective", r.handleGetConfigEffective)
 	mux.HandleFunc("GET /config/export", r.handleGetConfigExport)
 	mux.HandleFunc("POST /config/import", r.handlePostConfigImport)
@@ -118,6 +123,9 @@ func registerRoutes(mux *http.ServeMux, r *Router) {
 	mux.HandleFunc("GET /sessions", r.handleGetSessions)
 	mux.HandleFunc("GET /stats", r.handleGetStats)
 	mux.HandleFunc("GET /stats/summary", r.handleGetStatsSummary)
+	mux.HandleFunc("GET /stats/usage", r.handleGetStatsUsage)
 	mux.HandleFunc("GET /logs", r.handleGetLogs)
+	mux.HandleFunc("GET /logs/recent", r.handleGetLogsRecent)
+	mux.HandleFunc("GET /logs/stream", r.handleGetLogsStream)
 	mux.HandleFunc("GET /version", r.handleGetVersion)
 }
diff --git a/internal/service/api/status.go b/internal/service/api/status.go
index f5e43cc1..f2dd3722 100644
--- a/internal/service/api/status.go
+++ b/internal/service/api/status.go
@@ -4,6 +4,9 @@ import (
 	"net/http"
 	"sort"
 	"time"
+
+	"moonbridge/internal/extension/plugin"
+	"moonbridge/internal/service/stats"
 )
 
 // ---- Status ----
@@ -115,11 +118,211 @@ func (r *Router) handleGetStatsSummary(w http.ResponseWriter, req *http.Request)
 	})
 }
 
-// GET /logs
-func (r *Router) handleGetLogs(w http.ResponseWriter, req *http.Request) {
-	// The current logger package doesn't expose a ring buffer for recent entries.
-	// This endpoint returns a placeholder until a log ring buffer is implemented.
-	respondJSON(w, http.StatusOK, []any{})
+// GET /stats/usage
+//
+// Optional query parameters:
+//   - range: session|24h|7d|30d|all (default "session" = in-memory process stats)
+//   - since,until: RFC3339 timestamps for a custom window (cross-session)
+//
+// When a cross-session window is requested and a persistent usage source is
+// available, usage is aggregated from persisted metrics; otherwise it falls
+// back to the in-memory per-process session stats.
+func (r *Router) handleGetStatsUsage(w http.ResponseWriter, req *http.Request) {
+	q := req.URL.Query()
+	since, until, crossSession := usageWindow(q.Get("range"), q.Get("since"), q.Get("until"))
+
+	if crossSession && r.registry != nil {
+		if source := r.registry.UsageSource(); source != nil {
+			if agg, err := source.AggregateUsage(plugin.UsageQuery{Since: since, Until: until}); err == nil {
+				respondJSON(w, http.StatusOK, usageStatsFromAggregate(agg))
+				return
+			}
+		}
+	}
+
+	if r.stats == nil {
+		respondJSON(w, http.StatusOK, emptyUsageStatsResponse())
+		return
+	}
+	respondJSON(w, http.StatusOK, usageStatsFromSummary(r.stats.Summary()))
+}
+
+// usageWindow resolves the requested range into a [since, until) window. The
+// bool result reports whether a cross-session (persisted) query was requested;
+// when false the caller should use the in-memory session stats.
+func usageWindow(rangeParam, sinceParam, untilParam string) (time.Time, time.Time, bool) {
+	now := time.Now()
+	if sinceParam != "" || untilParam != "" {
+		since, _ := time.Parse(time.RFC3339, sinceParam)
+		until, err := time.Parse(time.RFC3339, untilParam)
+		if err != nil {
+			until = now
+		}
+		return since, until, true
+	}
+	switch rangeParam {
+	case "24h":
+		return now.Add(-24 * time.Hour), now, true
+	case "7d":
+		return now.Add(-7 * 24 * time.Hour), now, true
+	case "30d":
+		return now.Add(-30 * 24 * time.Hour), now, true
+	case "all":
+		return time.Time{}, now, true
+	default:
+		return time.Time{}, time.Time{}, false
+	}
+}
+
+type usageStatsResponse struct {
+	Totals  usageTotals     `json:"totals"`
+	ByModel []usageModelRow `json:"by_model"`
+}
+
+type usageTotals struct {
+	Requests       int64   `json:"requests"`
+	InputTokens    int64   `json:"input_tokens"`
+	OutputTokens   int64   `json:"output_tokens"`
+	CacheCreation  int64   `json:"cache_creation"`
+	CacheRead      int64   `json:"cache_read"`
+	CacheHitRate   float64 `json:"cache_hit_rate"`
+	CacheWriteRate float64 `json:"cache_write_rate"`
+	CacheRWRatio   float64 `json:"cache_rw_ratio"`
+	TotalCost      float64 `json:"total_cost"`
+	Duration       string  `json:"duration"`
+}
+
+type usageModelRow struct {
+	Model             string  `json:"model"`
+	ActualModel       string  `json:"actual_model"`
+	Requests          int64   `json:"requests"`
+	InputTokens       int64   `json:"input_tokens"`
+	OutputTokens      int64   `json:"output_tokens"`
+	CacheCreation     int64   `json:"cache_creation"`
+	CacheRead         int64   `json:"cache_read"`
+	CacheHitRate      float64 `json:"cache_hit_rate"`
+	Cost              float64 `json:"cost"`
+	AvgCostPerMTokens float64 `json:"avg_cost_per_mtoken"`
+}
+
+func emptyUsageStatsResponse() usageStatsResponse {
+	return usageStatsResponse{
+		Totals: usageTotals{
+			Duration: "0s",
+		},
+		ByModel: []usageModelRow{},
+	}
+}
+
+func usageStatsFromSummary(summary stats.Summary) usageStatsResponse {
+	rows := make([]usageModelRow, 0, len(summary.ByModel))
+	for model, modelStats := range summary.ByModel {
+		if modelStats == nil {
+			continue
+		}
+		rows = append(rows, usageModelRow{
+			Model:             model,
+			ActualModel:       summary.ActualModelNames[model],
+			Requests:          modelStats.Requests,
+			InputTokens:       modelStats.InputTokens,
+			OutputTokens:      modelStats.OutputTokens,
+			CacheCreation:     modelStats.CacheCreation,
+			CacheRead:         modelStats.CacheRead,
+			CacheHitRate:      rate(modelStats.CacheRead, modelStats.InputTokens),
+			Cost:              modelStats.Cost,
+			AvgCostPerMTokens: costPerMTokens(modelStats.Cost, modelStats.InputTokens+modelStats.OutputTokens),
+		})
+	}
+	sort.Slice(rows, func(i, j int) bool {
+		if rows[i].Cost == rows[j].Cost {
+			return rows[i].Model < rows[j].Model
+		}
+		return rows[i].Cost > rows[j].Cost
+	})
+
+	return usageStatsResponse{
+		Totals: usageTotals{
+			Requests:       summary.Requests,
+			InputTokens:    summary.InputTokens,
+			OutputTokens:   summary.OutputTokens,
+			CacheCreation:  summary.CacheCreation,
+			CacheRead:      summary.CacheRead,
+			CacheHitRate:   summary.CacheHitRate,
+			CacheWriteRate: summary.CacheWriteRate,
+			CacheRWRatio:   ratio(summary.CacheRead, summary.CacheCreation),
+			TotalCost:      summary.TotalCost,
+			Duration:       summary.Duration.String(),
+		},
+		ByModel: rows,
+	}
+}
+
+// usageStatsFromAggregate converts a cross-session usage aggregate (from
+// persisted metrics) into the same response shape used for session stats.
+func usageStatsFromAggregate(agg plugin.UsageAggregate) usageStatsResponse {
+	rows := make([]usageModelRow, 0, len(agg.ByModel))
+	for _, m := range agg.ByModel {
+		rows = append(rows, usageModelRow{
+			Model:             m.Model,
+			ActualModel:       m.ActualModel,
+			Requests:          m.Requests,
+			InputTokens:       m.InputTokens,
+			OutputTokens:      m.OutputTokens,
+			CacheCreation:     m.CacheCreation,
+			CacheRead:         m.CacheRead,
+			CacheHitRate:      rate(m.CacheRead, m.InputTokens),
+			Cost:              m.Cost,
+			AvgCostPerMTokens: costPerMTokens(m.Cost, m.InputTokens+m.OutputTokens),
+		})
+	}
+	sort.Slice(rows, func(i, j int) bool {
+		if rows[i].Cost == rows[j].Cost {
+			return rows[i].Model < rows[j].Model
+		}
+		return rows[i].Cost > rows[j].Cost
+	})
+
+	var duration time.Duration
+	if !agg.Earliest.IsZero() && agg.Latest.After(agg.Earliest) {
+		duration = agg.Latest.Sub(agg.Earliest)
+	}
+
+	return usageStatsResponse{
+		Totals: usageTotals{
+			Requests:       agg.Requests,
+			InputTokens:    agg.InputTokens,
+			OutputTokens:   agg.OutputTokens,
+			CacheCreation:  agg.CacheCreation,
+			CacheRead:      agg.CacheRead,
+			CacheHitRate:   rate(agg.CacheRead, agg.InputTokens),
+			CacheWriteRate: rate(agg.CacheCreation, agg.InputTokens),
+			CacheRWRatio:   ratio(agg.CacheRead, agg.CacheCreation),
+			TotalCost:      agg.Cost,
+			Duration:       duration.String(),
+		},
+		ByModel: rows,
+	}
+}
+
+func rate(numerator, denominator int64) float64 {
+	if denominator <= 0 {
+		return 0
+	}
+	return float64(numerator) / float64(denominator) * 100
+}
+
+func ratio(numerator, denominator int64) float64 {
+	if denominator <= 0 {
+		return 0
+	}
+	return float64(numerator) / float64(denominator)
+}
+
+func costPerMTokens(cost float64, tokens int64) float64 {
+	if tokens <= 0 {
+		return 0
+	}
+	return cost / float64(tokens) * 1_000_000
 }
 
 // GET /version
diff --git a/internal/service/api/usage_test.go b/internal/service/api/usage_test.go
new file mode 100644
index 00000000..4a926d56
--- /dev/null
+++ b/internal/service/api/usage_test.go
@@ -0,0 +1,103 @@
+package api
+
+import (
+	"testing"
+	"time"
+
+	"moonbridge/internal/extension/plugin"
+)
+
+func TestUsageWindow(t *testing.T) {
+	t.Run("no params stays in session scope", func(t *testing.T) {
+		if _, _, cross := usageWindow("", "", ""); cross {
+			t.Fatal("expected session scope (cross=false) with no params")
+		}
+	})
+	t.Run("explicit session range stays in session scope", func(t *testing.T) {
+		if _, _, cross := usageWindow("session", "", ""); cross {
+			t.Fatal("expected session scope for range=session")
+		}
+	})
+	t.Run("unknown range falls back to session scope", func(t *testing.T) {
+		if _, _, cross := usageWindow("bogus", "", ""); cross {
+			t.Fatal("expected session scope for an unknown range")
+		}
+	})
+	t.Run("24h is a ~24h cross-session window", func(t *testing.T) {
+		since, until, cross := usageWindow("24h", "", "")
+		if !cross {
+			t.Fatal("expected cross-session for range=24h")
+		}
+		if d := until.Sub(since); d < 23*time.Hour || d > 25*time.Hour {
+			t.Fatalf("expected ~24h window, got %s", d)
+		}
+	})
+	t.Run("all opens the lower bound", func(t *testing.T) {
+		since, _, cross := usageWindow("all", "", "")
+		if !cross || !since.IsZero() {
+			t.Fatalf("expected open-ended cross-session window, cross=%v since=%v", cross, since)
+		}
+	})
+	t.Run("explicit since/until is cross-session", func(t *testing.T) {
+		since, until, cross := usageWindow("", "2026-01-01T00:00:00Z", "2026-01-02T00:00:00Z")
+		if !cross {
+			t.Fatal("expected cross-session for explicit timestamps")
+		}
+		if since.IsZero() || until.IsZero() {
+			t.Fatalf("expected parsed since/until, got since=%v until=%v", since, until)
+		}
+	})
+}
+
+func TestUsageStatsFromAggregate(t *testing.T) {
+	earliest := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	latest := earliest.Add(2 * time.Hour)
+	agg := plugin.UsageAggregate{
+		Requests:      10,
+		InputTokens:   1000,
+		OutputTokens:  500,
+		CacheCreation: 200,
+		CacheRead:     300,
+		Cost:          1.5,
+		Earliest:      earliest,
+		Latest:        latest,
+		ByModel: []plugin.UsageModelAggregate{
+			{Model: "cheap", ActualModel: "c", Requests: 4, InputTokens: 400, OutputTokens: 200, CacheRead: 100, Cost: 0.4},
+			{Model: "pricey", ActualModel: "p", Requests: 6, InputTokens: 600, OutputTokens: 300, CacheRead: 200, Cost: 1.1},
+		},
+	}
+
+	resp := usageStatsFromAggregate(agg)
+
+	if resp.Totals.Requests != 10 || resp.Totals.InputTokens != 1000 {
+		t.Fatalf("unexpected totals: %+v", resp.Totals)
+	}
+	if resp.Totals.TotalCost != 1.5 {
+		t.Fatalf("expected total cost 1.5, got %v", resp.Totals.TotalCost)
+	}
+	// cache hit rate = cacheRead / inputTokens * 100 = 300/1000*100 = 30
+	if resp.Totals.CacheHitRate != 30 {
+		t.Fatalf("expected cache hit rate 30, got %v", resp.Totals.CacheHitRate)
+	}
+	// duration = latest - earliest = 2h
+	if resp.Totals.Duration != "2h0m0s" {
+		t.Fatalf("expected duration 2h0m0s, got %s", resp.Totals.Duration)
+	}
+	// rows are sorted by cost descending, so the pricier model comes first.
+	if len(resp.ByModel) != 2 || resp.ByModel[0].Model != "pricey" {
+		t.Fatalf("expected pricey model first, got %+v", resp.ByModel)
+	}
+}
+
+func TestUsageStatsFromAggregateEmpty(t *testing.T) {
+	resp := usageStatsFromAggregate(plugin.UsageAggregate{})
+	if resp.Totals.Requests != 0 || resp.Totals.CacheHitRate != 0 {
+		t.Fatalf("expected zeroed totals, got %+v", resp.Totals)
+	}
+	if resp.Totals.Duration != "0s" {
+		t.Fatalf("expected 0s duration, got %s", resp.Totals.Duration)
+	}
+	if len(resp.ByModel) != 0 {
+		t.Fatalf("expected no model rows, got %d", len(resp.ByModel))
+	}
+}
diff --git a/internal/service/app/app.go b/internal/service/app/app.go
index b4ed6775..9bb1d659 100644
--- a/internal/service/app/app.go
+++ b/internal/service/app/app.go
@@ -2,11 +2,11 @@ package app
 
 import (
 	"context"
+	stderrors "errors"
 	"fmt"
 	"io"
 	"net/http"
 	"path/filepath"
-	"strings"
 	"time"
 
 	"log/slog"
@@ -118,7 +118,7 @@ func runTransform(ctx context.Context, cfg config.Config, errors io.Writer) erro
 	defer plugins.ShutdownAll()
 
 	// Wire plugin LogConsumer into the slog consume pipeline.
-	logger.SetConsumeFunc(func(entries []logger.LogEntry) []logger.LogEntry {
+	logger.AddConsumeFunc(func(entries []logger.LogEntry) []logger.LogEntry {
 		return plugins.ConsumeGlobalLog(entries)
 	})
 
@@ -183,8 +183,11 @@ func runTransform(ctx context.Context, cfg config.Config, errors io.Writer) erro
 				}
 			}
 		} else if loadErr != nil {
-			if strings.Contains(loadErr.Error(), "config not seeded") {
-				logger.Info("persistence store is empty, skipping DB config load")
+			if stderrors.Is(loadErr, store.ErrConfigNotSeeded) {
+				logger.Info("持久化存储为空，从 YAML 导入种子配置")
+				if err := cs.SeedFromConfig(&cfg); err != nil {
+					return fmt.Errorf("seed config store from YAML: %w", err)
+				}
 			} else {
 				logger.Warn("config store 加载失败", "error", loadErr)
 			}
@@ -283,6 +286,7 @@ func runTransform(ctx context.Context, cfg config.Config, errors io.Writer) erro
 		PluginRegistry:  plugins,
 		AppConfig:       serverCfg,
 		Runtime:         rt,
+		Store:           cs,
 		AdapterRegistry: adapterReg,
 		SessionManager:  sessMgr,
 		UsageTracker:    usageTrk,
@@ -634,7 +638,9 @@ func runHTTPServer(ctx context.Context, addr string, handler http.Handler, error
 	errCh := make(chan error, 1)
 	go func() {
 		fmt.Fprintf(errors, "%s 监听于 %s\n", Name, addr)
-		slog.Info("HTTP 服务器监听中", "addr", addr)
+		consoleURL := fmt.Sprintf("http://%s/console/", addr)
+		fmt.Fprintf(errors, "Web Console: %s\n", consoleURL)
+		slog.Info("HTTP 服务器监听中", "addr", addr, "webui", consoleURL)
 		errCh <- httpServer.ListenAndServe()
 	}()
 
diff --git a/internal/service/app/app_test.go b/internal/service/app/app_test.go
index c80dd5c4..fe36a3a8 100644
--- a/internal/service/app/app_test.go
+++ b/internal/service/app/app_test.go
@@ -3,10 +3,16 @@ package app
 import (
 	"bytes"
 	"context"
+	"encoding/json"
+	"net"
+	"net/http"
 	"path/filepath"
+	"strings"
 	"testing"
+	"time"
 
 	"moonbridge/internal/config"
+	"moonbridge/internal/service/configgraph"
 	"moonbridge/internal/service/provider"
 	"moonbridge/internal/service/stats"
 	mbtrace "moonbridge/internal/service/trace"
@@ -37,6 +43,52 @@ func TestRunWritesWelcomeMessage(t *testing.T) {
 	}
 }
 
+func TestRunServerSeedsEmptyConfigStoreBeforeServingConfigGraph(t *testing.T) {
+	addr := freeLoopbackAddr(t)
+	dbPath := filepath.Join(t.TempDir(), "moonbridge.db")
+	cfg := firstRunSQLiteConfig(t, addr, dbPath)
+	var output bytes.Buffer
+
+	ctx, cancel := context.WithCancel(context.Background())
+	errCh := make(chan error, 1)
+	go func() {
+		errCh <- RunServer(ctx, cfg, &output)
+	}()
+	t.Cleanup(func() {
+		cancel()
+		select {
+		case err := <-errCh:
+			if err != nil {
+				t.Fatalf("RunServer() after cancel error = %v", err)
+			}
+		case <-time.After(3 * time.Second):
+			t.Fatal("RunServer() did not stop after cancel")
+		}
+	})
+
+	resp := waitForConfigGraph(t, "http://"+addr+"/api/v1/config/graph")
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("GET /api/v1/config/graph status = %d, want 200", resp.StatusCode)
+	}
+
+	var graph configgraph.Graph
+	if err := json.NewDecoder(resp.Body).Decode(&graph); err != nil {
+		t.Fatalf("decode config graph: %v", err)
+	}
+	if graph.Revision == "" {
+		t.Fatal("config graph revision is empty after first-run seed")
+	}
+	for _, want := range []string{
+		"Moon Bridge 监听于 " + addr,
+		"Web Console: http://" + addr + "/console/",
+	} {
+		if !strings.Contains(output.String(), want) {
+			t.Fatalf("RunServer output missing %q:\n%s", want, output.String())
+		}
+	}
+}
+
 func TestCaptureTraceDirectoriesUseSession(t *testing.T) {
 	responseTracer := mbtrace.New(captureResponseTraceConfig(true))
 	if got, want := responseTracer.Directory(), filepath.Join("data", "trace", "Capture", "Response", responseTracer.SessionID()); got != want {
@@ -418,3 +470,88 @@ func TestBuildProviderDefsFromConfigKeepsMultiProviderDefinitions(t *testing.T)
 		t.Fatalf("deepseek def = %+v", defs["deepseek"])
 	}
 }
+
+func freeLoopbackAddr(t *testing.T) string {
+	t.Helper()
+	listener, err := net.Listen("tcp", "127.0.0.1:0")
+	if err != nil {
+		t.Fatalf("listen free loopback addr: %v", err)
+	}
+	addr := listener.Addr().String()
+	if err := listener.Close(); err != nil {
+		t.Fatalf("close free loopback listener: %v", err)
+	}
+	return addr
+}
+
+func firstRunSQLiteConfig(t *testing.T, addr string, dbPath string) config.Config {
+	t.Helper()
+	enabled := true
+	cfg, err := config.FromFileConfigWithOptions(config.FileConfig{
+		Mode: string(config.ModeTransform),
+		Server: config.ServerFileConfig{
+			Addr: addr,
+		},
+		Defaults: config.DefaultsFileConfig{
+			Model:     "moonbridge",
+			MaxTokens: 1024,
+		},
+		Models: map[string]config.ModelDefFileConfig{
+			"local-test-model": {
+				ContextWindow:   128000,
+				MaxOutputTokens: 4096,
+			},
+		},
+		Providers: map[string]config.ProviderDefFileConfig{
+			"local": {
+				BaseURL:  "https://api.example.invalid",
+				APIKey:   "test-key",
+				Protocol: config.ProtocolOpenAIChat,
+				Offers: []config.OfferFileConfig{
+					{
+						Model:        "local-test-model",
+						UpstreamName: "local-test-model",
+					},
+				},
+			},
+		},
+		Routes: map[string]config.RouteFileConfig{
+			"moonbridge": {
+				Provider: "local",
+				Model:    "local-test-model",
+			},
+		},
+		Persistence: config.PersistenceFileConfig{
+			ActiveProvider: "db_sqlite",
+		},
+		Extensions: map[string]config.ExtensionFileConfig{
+			"db_sqlite": {
+				Enabled: &enabled,
+				Config: map[string]any{
+					"path": dbPath,
+					"wal":  false,
+				},
+			},
+		},
+	}, config.LoadOptions{ExtensionSpecs: BuiltinExtensions().ConfigSpecs()})
+	if err != nil {
+		t.Fatalf("build first-run sqlite config: %v", err)
+	}
+	return cfg
+}
+
+func waitForConfigGraph(t *testing.T, url string) *http.Response {
+	t.Helper()
+	deadline := time.Now().Add(3 * time.Second)
+	var lastErr error
+	for time.Now().Before(deadline) {
+		resp, err := http.Get(url)
+		if err == nil {
+			return resp
+		}
+		lastErr = err
+		time.Sleep(20 * time.Millisecond)
+	}
+	t.Fatalf("GET %s did not become available: %v", url, lastErr)
+	return nil
+}
diff --git a/internal/service/configgraph/graph.go b/internal/service/configgraph/graph.go
new file mode 100644
index 00000000..41f10dab
--- /dev/null
+++ b/internal/service/configgraph/graph.go
@@ -0,0 +1,157 @@
+package configgraph
+
+import (
+	"encoding/json"
+	"fmt"
+	"sort"
+
+	"moonbridge/internal/config"
+)
+
+const (
+	mainResourceID = "main"
+	secretMask     = "******"
+)
+
+func BuildGraph(cfg config.Config, revision string) Graph {
+	fc := cfg.ToFileConfig()
+	builder := graphBuilder{definitions: definitionsByKind()}
+
+	resources := []Resource{
+		builder.resource(ResourceMode, mainResourceID, "Mode", map[string]any{"mode": fc.Mode}, nil),
+		builder.resource(ResourceTrace, mainResourceID, "Trace", mapFromValue(fc.Trace), nil),
+		builder.resource(ResourceLog, mainResourceID, "Log", mapFromValue(fc.Log), nil),
+		builder.resource(ResourceServer, mainResourceID, "Server", maskKeys(mapFromValue(fc.Server), "auth_token"), nil),
+		builder.resource(ResourceDefaults, mainResourceID, "Defaults", mapFromValue(fc.Defaults), nil),
+	}
+
+	for _, slug := range sortedKeys(fc.Models) {
+		resources = append(resources, builder.resource(ResourceModel, slug, labelOrID(fc.Models[slug].DisplayName, slug), mapFromValue(fc.Models[slug]), nil))
+	}
+
+	for _, key := range sortedKeys(fc.Providers) {
+		providerValue := maskKeys(mapFromValue(fc.Providers[key]), "api_key")
+		delete(providerValue, "offers")
+		resources = append(resources, builder.resource(ResourceProvider, key, key, providerValue, nil))
+		for _, offer := range fc.Providers[key].Offers {
+			id := fmt.Sprintf("%s/%s", key, offer.Model)
+			resources = append(resources, builder.resource(ResourceProviderOffer, id, id, mapFromValue(offer), []ResourceRef{
+				{Kind: ResourceProvider, ID: key},
+				{Kind: ResourceModel, ID: offer.Model},
+			}))
+		}
+	}
+
+	for _, alias := range sortedKeys(fc.Routes) {
+		route := fc.Routes[alias]
+		resources = append(resources, builder.resource(ResourceRoute, alias, labelOrID(route.DisplayName, alias), mapFromValue(route), []ResourceRef{
+			{Kind: ResourceProvider, ID: route.Provider},
+			{Kind: ResourceModel, ID: route.Model},
+		}))
+	}
+
+	resources = append(resources,
+		builder.resource(ResourceWebSearch, mainResourceID, "Web Search", maskKeys(mapFromValue(fc.WebSearch), "tavily_api_key", "firecrawl_api_key"), nil),
+		builder.resource(ResourceCache, mainResourceID, "Cache", mapFromValue(fc.Cache), nil),
+		builder.resource(ResourcePersistence, mainResourceID, "Persistence", mapFromValue(fc.Persistence), nil),
+		builder.resource(ResourceProxy, mainResourceID, "Proxy", maskNestedKeys(mapFromValue(fc.Proxy), "api_key"), nil),
+	)
+
+	for _, name := range sortedKeys(fc.Extensions) {
+		resources = append(resources, builder.resource(ResourceExtension, name, name, mapFromValue(fc.Extensions[name]), nil))
+	}
+
+	return Graph{
+		Revision:  revision,
+		Resources: resources,
+		Validation: ValidationState{
+			Valid: true,
+		},
+		Runtime: RuntimeState{
+			Status: "ok",
+		},
+		Capabilities: Capabilities{
+			Autosave: true,
+			Logs:     true,
+		},
+	}
+}
+
+type graphBuilder struct {
+	definitions map[ResourceKind]ResourceDefinition
+}
+
+func (b graphBuilder) resource(kind ResourceKind, id, label string, value map[string]any, refs []ResourceRef) Resource {
+	def := b.definitions[kind]
+	return Resource{
+		Kind:          kind,
+		ID:            id,
+		Label:         label,
+		Value:         value,
+		Schema:        ResourceSchema{Fields: def.Fields},
+		Status:        StatusSaved,
+		RuntimeImpact: def.RuntimeImpact,
+		HotReloadable: def.HotReloadable,
+		References:    refs,
+	}
+}
+
+func definitionsByKind() map[ResourceKind]ResourceDefinition {
+	definitions := ResourceDefinitions()
+	out := make(map[ResourceKind]ResourceDefinition, len(definitions))
+	for _, def := range definitions {
+		out[ResourceKind(def.Kind)] = def
+	}
+	return out
+}
+
+func mapFromValue(value any) map[string]any {
+	raw, err := json.Marshal(value)
+	if err != nil {
+		panic(fmt.Sprintf("marshal graph value %T: %v", value, err))
+	}
+	var out map[string]any
+	if err := json.Unmarshal(raw, &out); err != nil {
+		panic(fmt.Sprintf("unmarshal graph value %T: %v", value, err))
+	}
+	if out == nil {
+		return map[string]any{}
+	}
+	return out
+}
+
+func maskKeys(value map[string]any, keys ...string) map[string]any {
+	for _, key := range keys {
+		if secret, ok := value[key].(string); ok && secret != "" {
+			value[key] = secretMask
+		}
+	}
+	return value
+}
+
+func maskNestedKeys(value map[string]any, keys ...string) map[string]any {
+	for _, item := range value {
+		child, ok := item.(map[string]any)
+		if !ok {
+			continue
+		}
+		maskKeys(child, keys...)
+	}
+	return value
+}
+
+func sortedKeys[V any](items map[string]V) []string {
+	keys := make([]string, 0, len(items))
+	for key := range items {
+		keys = append(keys, key)
+	}
+	sort.Strings(keys)
+	return keys
+}
+
+func labelOrID(label, id string) string {
+	if label != "" {
+		return label
+	}
+	return id
+}
diff --git a/internal/service/configgraph/patch.go b/internal/service/configgraph/patch.go
new file mode 100644
index 00000000..b77993aa
--- /dev/null
+++ b/internal/service/configgraph/patch.go
@@ -0,0 +1,683 @@
+package configgraph
+
+import (
+	"encoding/json"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	"moonbridge/internal/config"
+)
+
+func ApplyPatchToFileConfig(fc config.FileConfig, ops []PatchOp) (config.FileConfig, []FieldError) {
+	candidate := cloneFileConfig(fc)
+	schema := patchSchema()
+
+	var errs []FieldError
+	for _, op := range ops {
+		if err := validatePatchTarget(candidate, schema, op); err != nil {
+			errs = append(errs, *err)
+			continue
+		}
+		if err := applyPatchOp(&candidate, op); err != nil {
+			errs = append(errs, *err)
+		}
+	}
+	if len(errs) > 0 {
+		return fc, errs
+	}
+	return candidate, nil
+}
+
+func patchSchema() map[ResourceKind]map[string]bool {
+	out := make(map[ResourceKind]map[string]bool)
+	for _, def := range ResourceDefinitions() {
+		fields := make(map[string]bool, len(def.Fields))
+		for _, field := range def.Fields {
+			fields[field.Path] = true
+		}
+		out[ResourceKind(def.Kind)] = fields
+	}
+	return out
+}
+
+func validatePatchTarget(fc config.FileConfig, schema map[ResourceKind]map[string]bool, op PatchOp) *FieldError {
+	fields, ok := schema[op.Kind]
+	if !ok {
+		return patchError(op, "unknownKind", fmt.Sprintf("unknown resource kind %q", op.Kind))
+	}
+	if !fields[op.Field] {
+		return patchError(op, "unknownField", fmt.Sprintf("unknown field %q for %s", op.Field, op.Kind))
+	}
+	if !resourceExists(fc, op.Kind, op.ID) {
+		return patchError(op, "unknownResource", fmt.Sprintf("unknown resource %s/%s", op.Kind, op.ID))
+	}
+	return nil
+}
+
+func resourceExists(fc config.FileConfig, kind ResourceKind, id string) bool {
+	switch kind {
+	case ResourceMode, ResourceTrace, ResourceLog, ResourceServer, ResourceDefaults, ResourceWebSearch, ResourceCache, ResourcePersistence, ResourceProxy:
+		return id == mainResourceID
+	case ResourceModel:
+		_, ok := fc.Models[id]
+		return ok
+	case ResourceProvider:
+		_, ok := fc.Providers[id]
+		return ok
+	case ResourceProviderOffer:
+		providerID, modelID, ok := splitProviderOfferID(id)
+		if !ok {
+			return false
+		}
+		provider, ok := fc.Providers[providerID]
+		if !ok {
+			return false
+		}
+		return offerIndex(provider.Offers, modelID) >= 0
+	case ResourceRoute:
+		_, ok := fc.Routes[id]
+		return ok
+	case ResourceExtension:
+		_, ok := fc.Extensions[id]
+		return ok
+	default:
+		return false
+	}
+}
+
+func applyPatchOp(fc *config.FileConfig, op PatchOp) *FieldError {
+	switch op.Kind {
+	case ResourceMode:
+		return applyModePatch(fc, op)
+	case ResourceTrace:
+		return applyTracePatch(fc, op)
+	case ResourceLog:
+		return applyLogPatch(fc, op)
+	case ResourceServer:
+		return applyServerPatch(fc, op)
+	case ResourceDefaults:
+		return applyDefaultsPatch(fc, op)
+	case ResourceModel:
+		return applyModelPatch(fc, op)
+	case ResourceProvider:
+		return applyProviderPatch(fc, op)
+	case ResourceProviderOffer:
+		return applyProviderOfferPatch(fc, op)
+	case ResourceRoute:
+		return applyRoutePatch(fc, op)
+	case ResourceWebSearch:
+		return applyWebSearchPatch(&fc.WebSearch, op, fc.WebSearch)
+	case ResourceCache:
+		return applyCachePatch(fc, op)
+	case ResourcePersistence:
+		return applyPersistencePatch(fc, op)
+	case ResourceExtension:
+		return applyExtensionPatch(fc, op)
+	case ResourceProxy:
+		return applyProxyPatch(fc, op)
+	default:
+		return patchError(op, "unknownKind", fmt.Sprintf("unknown resource kind %q", op.Kind))
+	}
+}
+
+func applyModePatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	value, err := stringValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	fc.Mode = value
+	return nil
+}
+
+func applyTracePatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	value, err := boolValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	fc.Trace.Enabled = value
+	return nil
+}
+
+func applyLogPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	value, err := stringValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	switch op.Field {
+	case "level":
+		fc.Log.Level = value
+	case "format":
+		fc.Log.Format = value
+	}
+	return nil
+}
+
+func applyServerPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	switch op.Field {
+	case "addr":
+		return setString(op, &fc.Server.Addr)
+	case "auth_token":
+		return setSecretString(op, &fc.Server.AuthToken)
+	case "max_sessions":
+		return setInt(op, &fc.Server.MaxSessions)
+	case "session_ttl":
+		return setString(op, &fc.Server.SessionTTL)
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown server field %q", op.Field))
+	}
+}
+
+func applyDefaultsPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	switch op.Field {
+	case "model":
+		return setString(op, &fc.Defaults.Model)
+	case "max_tokens":
+		return setInt(op, &fc.Defaults.MaxTokens)
+	case "system_prompt":
+		return setString(op, &fc.Defaults.SystemPrompt)
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown defaults field %q", op.Field))
+	}
+}
+
+func applyModelPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	model := fc.Models[op.ID]
+	switch op.Field {
+	case "context_window":
+		if err := setInt(op, &model.ContextWindow); err != nil {
+			return err
+		}
+	case "max_output_tokens":
+		if err := setInt(op, &model.MaxOutputTokens); err != nil {
+			return err
+		}
+	case "display_name":
+		if err := setString(op, &model.DisplayName); err != nil {
+			return err
+		}
+	case "description":
+		if err := setString(op, &model.Description); err != nil {
+			return err
+		}
+	case "base_instructions":
+		if err := setString(op, &model.BaseInstructions); err != nil {
+			return err
+		}
+	case "supports_reasoning":
+		value, err := boolPtrValue(op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.SupportsReasoning = value
+	case "default_reasoning_level":
+		if err := setString(op, &model.DefaultReasoningLevel); err != nil {
+			return err
+		}
+	case "supported_reasoning_levels":
+		value, err := decodePatchValue[[]config.ReasoningLevelPresetFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.SupportedReasoningLevels = value
+	case "supports_reasoning_summaries":
+		value, err := boolPtrValue(op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.SupportsReasoningSummaries = value
+	case "default_reasoning_summary":
+		if err := setString(op, &model.DefaultReasoningSummary); err != nil {
+			return err
+		}
+	case "input_modalities":
+		value, err := decodePatchValue[[]string](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.InputModalities = value
+	case "supports_image_detail_original":
+		value, err := boolPtrValue(op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.SupportsImageDetailOriginal = value
+	case "web_search":
+		value, err := decodePatchValue[config.WebSearchFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.WebSearch = preserveWebSearchSecrets(model.WebSearch, value)
+	case "extensions":
+		value, err := decodePatchValue[map[string]config.ExtensionFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		model.Extensions = value
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown model field %q", op.Field))
+	}
+	fc.Models[op.ID] = model
+	return nil
+}
+
+func applyProviderPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	provider := fc.Providers[op.ID]
+	switch op.Field {
+	case "base_url":
+		if err := setString(op, &provider.BaseURL); err != nil {
+			return err
+		}
+	case "api_key":
+		if err := setSecretString(op, &provider.APIKey); err != nil {
+			return err
+		}
+	case "version":
+		if err := setString(op, &provider.Version); err != nil {
+			return err
+		}
+	case "user_agent":
+		if err := setString(op, &provider.UserAgent); err != nil {
+			return err
+		}
+	case "protocol":
+		if err := setString(op, &provider.Protocol); err != nil {
+			return err
+		}
+	case "web_search":
+		value, err := decodePatchValue[config.WebSearchFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		provider.WebSearch = preserveWebSearchSecrets(provider.WebSearch, value)
+	case "extensions":
+		value, err := decodePatchValue[map[string]config.ExtensionFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		provider.Extensions = value
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown provider field %q", op.Field))
+	}
+	fc.Providers[op.ID] = provider
+	return nil
+}
+
+func applyProviderOfferPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	providerID, modelID, ok := splitProviderOfferID(op.ID)
+	if !ok {
+		return patchError(op, "unknownResource", fmt.Sprintf("invalid provider offer id %q", op.ID))
+	}
+	provider := fc.Providers[providerID]
+	idx := offerIndex(provider.Offers, modelID)
+	if idx < 0 {
+		return patchError(op, "unknownResource", fmt.Sprintf("unknown provider offer %q", op.ID))
+	}
+	offer := provider.Offers[idx]
+	switch op.Field {
+	case "model":
+		if err := setString(op, &offer.Model); err != nil {
+			return err
+		}
+	case "upstream_name":
+		if err := setString(op, &offer.UpstreamName); err != nil {
+			return err
+		}
+	case "priority":
+		if err := setInt(op, &offer.Priority); err != nil {
+			return err
+		}
+	case "pricing":
+		value, err := decodePatchValue[config.ModelPricingFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		offer.Pricing = value
+	case "overrides":
+		value, err := decodePatchValue[*config.ModelDefFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		offer.Overrides = value
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown provider offer field %q", op.Field))
+	}
+	provider.Offers[idx] = offer
+	fc.Providers[providerID] = provider
+	return nil
+}
+
+func applyRoutePatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	route := fc.Routes[op.ID]
+	switch op.Field {
+	case "to":
+		if err := setString(op, &route.To); err != nil {
+			return err
+		}
+	case "model":
+		if err := setString(op, &route.Model); err != nil {
+			return err
+		}
+	case "provider":
+		if err := setString(op, &route.Provider); err != nil {
+			return err
+		}
+	case "display_name":
+		if err := setString(op, &route.DisplayName); err != nil {
+			return err
+		}
+	case "description":
+		if err := setString(op, &route.Description); err != nil {
+			return err
+		}
+	case "context_window":
+		if err := setInt(op, &route.ContextWindow); err != nil {
+			return err
+		}
+	case "web_search":
+		value, err := decodePatchValue[config.WebSearchFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		route.WebSearch = preserveWebSearchSecrets(route.WebSearch, value)
+	case "extensions":
+		value, err := decodePatchValue[map[string]config.ExtensionFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		route.Extensions = value
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown route field %q", op.Field))
+	}
+	fc.Routes[op.ID] = route
+	return nil
+}
+
+func applyWebSearchPatch(target *config.WebSearchFileConfig, op PatchOp, existing config.WebSearchFileConfig) *FieldError {
+	switch op.Field {
+	case "support":
+		return setString(op, &target.Support)
+	case "max_uses":
+		return setInt(op, &target.MaxUses)
+	case "tavily_api_key":
+		if isSecretPlaceholder(op.Value) {
+			target.TavilyAPIKey = existing.TavilyAPIKey
+			return nil
+		}
+		return setString(op, &target.TavilyAPIKey)
+	case "firecrawl_api_key":
+		if isSecretPlaceholder(op.Value) {
+			target.FirecrawlAPIKey = existing.FirecrawlAPIKey
+			return nil
+		}
+		return setString(op, &target.FirecrawlAPIKey)
+	case "search_max_rounds":
+		return setInt(op, &target.SearchMaxRounds)
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown web search field %q", op.Field))
+	}
+}
+
+func applyCachePatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	switch op.Field {
+	case "mode":
+		return setString(op, &fc.Cache.Mode)
+	case "ttl":
+		return setString(op, &fc.Cache.TTL)
+	case "prompt_caching":
+		return setBoolPtr(op, &fc.Cache.PromptCaching)
+	case "automatic_prompt_cache":
+		return setBoolPtr(op, &fc.Cache.AutomaticPromptCache)
+	case "explicit_cache_breakpoints":
+		return setBoolPtr(op, &fc.Cache.ExplicitCacheBreakpoints)
+	case "allow_retention_downgrade":
+		return setBoolPtr(op, &fc.Cache.AllowRetentionDowngrade)
+	case "max_breakpoints":
+		return setInt(op, &fc.Cache.MaxBreakpoints)
+	case "min_cache_tokens":
+		return setInt(op, &fc.Cache.MinCacheTokens)
+	case "expected_reuse":
+		return setInt(op, &fc.Cache.ExpectedReuse)
+	case "minimum_value_score":
+		return setInt(op, &fc.Cache.MinimumValueScore)
+	case "min_breakpoint_tokens":
+		return setInt(op, &fc.Cache.MinBreakpointTokens)
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown cache field %q", op.Field))
+	}
+}
+
+func applyPersistencePatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	return setString(op, &fc.Persistence.ActiveProvider)
+}
+
+func applyExtensionPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	extension := fc.Extensions[op.ID]
+	switch op.Field {
+	case "enabled":
+		value, err := boolPtrValue(op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		extension.Enabled = value
+	case "config":
+		value, err := decodePatchValue[map[string]any](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		extension.Config = value
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown extension field %q", op.Field))
+	}
+	fc.Extensions[op.ID] = extension
+	return nil
+}
+
+func applyProxyPatch(fc *config.FileConfig, op PatchOp) *FieldError {
+	switch op.Field {
+	case "response":
+		value, err := decodePatchValue[config.ProxyTargetFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Proxy.Response = preserveProxySecret(fc.Proxy.Response, value)
+	case "anthropic":
+		value, err := decodePatchValue[config.ProxyTargetFileConfig](op.Value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Proxy.Anthropic = preserveProxySecret(fc.Proxy.Anthropic, value)
+	default:
+		return patchError(op, "unknownField", fmt.Sprintf("unknown proxy field %q", op.Field))
+	}
+	return nil
+}
+
+func cloneFileConfig(fc config.FileConfig) config.FileConfig {
+	raw, err := json.Marshal(fc)
+	if err != nil {
+		panic(fmt.Sprintf("marshal FileConfig clone: %v", err))
+	}
+	var out config.FileConfig
+	if err := json.Unmarshal(raw, &out); err != nil {
+		panic(fmt.Sprintf("unmarshal FileConfig clone: %v", err))
+	}
+	return out
+}
+
+func setString(op PatchOp, target *string) *FieldError {
+	value, err := stringValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	*target = value
+	return nil
+}
+
+func setSecretString(op PatchOp, target *string) *FieldError {
+	if isSecretPlaceholder(op.Value) {
+		return nil
+	}
+	return setString(op, target)
+}
+
+func setInt(op PatchOp, target *int) *FieldError {
+	value, err := intValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	*target = value
+	return nil
+}
+
+func setBoolPtr(op PatchOp, target **bool) *FieldError {
+	value, err := boolPtrValue(op.Value)
+	if err != nil {
+		return invalidValue(op, err)
+	}
+	*target = value
+	return nil
+}
+
+func stringValue(value any) (string, error) {
+	v, ok := value.(string)
+	if !ok {
+		return "", fmt.Errorf("expected string, got %T", value)
+	}
+	return v, nil
+}
+
+func boolValue(value any) (bool, error) {
+	v, ok := value.(bool)
+	if !ok {
+		return false, fmt.Errorf("expected boolean, got %T", value)
+	}
+	return v, nil
+}
+
+func boolPtrValue(value any) (*bool, error) {
+	if value == nil {
+		return nil, nil
+	}
+	v, err := boolValue(value)
+	if err != nil {
+		return nil, err
+	}
+	return &v, nil
+}
+
+func intValue(value any) (int, error) {
+	switch v := value.(type) {
+	case int:
+		return v, nil
+	case int8:
+		return int(v), nil
+	case int16:
+		return int(v), nil
+	case int32:
+		return int(v), nil
+	case int64:
+		return int(v), nil
+	case uint:
+		return int(v), nil
+	case uint8:
+		return int(v), nil
+	case uint16:
+		return int(v), nil
+	case uint32:
+		return int(v), nil
+	case uint64:
+		if v > math.MaxInt {
+			return 0, fmt.Errorf("integer %d overflows int", v)
+		}
+		return int(v), nil
+	case float64:
+		if math.Trunc(v) != v {
+			return 0, fmt.Errorf("expected integer, got %v", v)
+		}
+		if v > float64(math.MaxInt) || v < float64(math.MinInt) {
+			return 0, fmt.Errorf("integer %v overflows int", v)
+		}
+		return int(v), nil
+	case json.Number:
+		i, err := strconv.Atoi(v.String())
+		if err != nil {
+			return 0, fmt.Errorf("expected integer, got %q", v.String())
+		}
+		return i, nil
+	default:
+		return 0, fmt.Errorf("expected integer, got %T", value)
+	}
+}
+
+func decodePatchValue[T any](value any) (T, error) {
+	var out T
+	if value == nil {
+		return out, nil
+	}
+	raw, err := json.Marshal(value)
+	if err != nil {
+		return out, fmt.Errorf("marshal patch value: %w", err)
+	}
+	if err := json.Unmarshal(raw, &out); err != nil {
+		return out, fmt.Errorf("decode patch value: %w", err)
+	}
+	return out, nil
+}
+
+func preserveWebSearchSecrets(existing, incoming config.WebSearchFileConfig) config.WebSearchFileConfig {
+	if incoming.TavilyAPIKey == "" || incoming.TavilyAPIKey == secretMask {
+		incoming.TavilyAPIKey = existing.TavilyAPIKey
+	}
+	if incoming.FirecrawlAPIKey == "" || incoming.FirecrawlAPIKey == secretMask {
+		incoming.FirecrawlAPIKey = existing.FirecrawlAPIKey
+	}
+	return incoming
+}
+
+func preserveProxySecret(existing, incoming config.ProxyTargetFileConfig) config.ProxyTargetFileConfig {
+	if incoming.APIKey == "" || incoming.APIKey == secretMask {
+		incoming.APIKey = existing.APIKey
+	}
+	return incoming
+}
+
+func isSecretPlaceholder(value any) bool {
+	text, ok := value.(string)
+	if !ok {
+		return false
+	}
+	return text == "" || text == secretMask
+}
+
+func splitProviderOfferID(id string) (string, string, bool) {
+	providerID, modelID, ok := strings.Cut(id, "/")
+	if !ok || providerID == "" || modelID == "" {
+		return "", "", false
+	}
+	return providerID, modelID, true
+}
+
+func offerIndex(offers []config.OfferFileConfig, modelID string) int {
+	for i, offer := range offers {
+		if offer.Model == modelID {
+			return i
+		}
+	}
+	return -1
+}
+
+func invalidValue(op PatchOp, err error) *FieldError {
+	return patchError(op, "invalidValue", err.Error())
+}
+
+func patchError(op PatchOp, code, message string) *FieldError {
+	return &FieldError{
+		ResourceKind: op.Kind,
+		ResourceID:   op.ID,
+		Field:        op.Field,
+		Code:         code,
+		Message:      message,
+	}
+}
diff --git a/internal/service/configgraph/patch_test.go b/internal/service/configgraph/patch_test.go
new file mode 100644
index 00000000..d14c68e7
--- /dev/null
+++ b/internal/service/configgraph/patch_test.go
@@ -0,0 +1,216 @@
+package configgraph
+
+import (
+	"strings"
+	"testing"
+
+	"moonbridge/internal/config"
+)
+
+func TestApplyPatchToFileConfigDoesNotHandleBaseRevision(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+	request := PatchRequest{
+		BaseRevision: "",
+		Changes: []PatchOp{
+			{Kind: ResourceDefaults, ID: mainResourceID, Field: "max_tokens", Value: 8192},
+		},
+	}
+
+	patched, errs := ApplyPatchToFileConfig(fc, request.Changes)
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors for empty base revision boundary: %+v", errs)
+	}
+	if patched.Defaults.MaxTokens != 8192 {
+		t.Fatalf("Defaults.MaxTokens = %d, want 8192", patched.Defaults.MaxTokens)
+	}
+}
+
+func TestApplyPatchToFileConfigUpdatesDefaultsMaxTokens(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceDefaults, ID: mainResourceID, Field: "max_tokens", Value: 16384},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	if patched.Defaults.MaxTokens != 16384 {
+		t.Fatalf("Defaults.MaxTokens = %d, want 16384", patched.Defaults.MaxTokens)
+	}
+}
+
+func TestApplyPatchToFileConfigUpdatesModelReasoningSupport(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceModel, ID: "claude-sonnet", Field: "supports_reasoning", Value: false},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	if patched.Models["claude-sonnet"].SupportsReasoning == nil {
+		t.Fatal("Models[claude-sonnet].SupportsReasoning = nil, want explicit false")
+	}
+	if *patched.Models["claude-sonnet"].SupportsReasoning {
+		t.Fatal("Models[claude-sonnet].SupportsReasoning = true, want false")
+	}
+}
+
+func TestApplyPatchToFileConfigClearsProviderOfferPricing(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceProviderOffer, ID: "anthropic/claude-sonnet", Field: "pricing", Value: nil},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	pricing := patched.Providers["anthropic"].Offers[0].Pricing
+	if pricing.InputPrice != 0 || pricing.OutputPrice != 0 || pricing.CacheWritePrice != 0 || pricing.CacheReadPrice != 0 {
+		t.Fatalf("Pricing = %+v, want zero-value pricing after clearing", pricing)
+	}
+	data, err := patched.MarshalYAML()
+	if err != nil {
+		t.Fatalf("MarshalYAML() error = %v", err)
+	}
+	if strings.Contains(string(data), "pricing:") {
+		t.Fatalf("MarshalYAML() retained pricing after clearing:\n%s", string(data))
+	}
+	cfg, err := config.FromFileConfig(patched)
+	if err != nil {
+		t.Fatalf("config.FromFileConfig() error = %v", err)
+	}
+	offer := assertResource(t, BuildGraph(cfg, "rev-2"), ResourceProviderOffer, "anthropic/claude-sonnet")
+	if _, ok := offer.Value["pricing"]; ok {
+		t.Fatalf("BuildGraph() exposed cleared pricing: %+v", offer.Value["pricing"])
+	}
+}
+
+func TestApplyPatchToFileConfigKeepsExistingProviderSecretWhenMaskedOrEmpty(t *testing.T) {
+	for _, tc := range []struct {
+		name  string
+		value any
+	}{
+		{name: "masked", value: secretMask},
+		{name: "empty", value: ""},
+	} {
+		t.Run(tc.name, func(t *testing.T) {
+			fc := testConfig().ToFileConfig()
+
+			patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+				{Kind: ResourceProvider, ID: "anthropic", Field: "api_key", Value: tc.value},
+			})
+
+			if len(errs) != 0 {
+				t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+			}
+			if patched.Providers["anthropic"].APIKey != "sk-ant-test-key" {
+				t.Fatalf("Providers[anthropic].APIKey = %q, want existing secret", patched.Providers["anthropic"].APIKey)
+			}
+		})
+	}
+}
+
+func TestApplyPatchToFileConfigPreservesWebSearchExtraFields(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+	fc.Models["claude-sonnet"] = config.ModelDefFileConfig{
+		DisplayName: "Claude Sonnet",
+		WebSearch: config.WebSearchFileConfig{
+			Support: "auto",
+			MaxUses: 8,
+			Extra: map[string]any{
+				"provider_tool": "preview",
+			},
+		},
+	}
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceModel, ID: "claude-sonnet", Field: "web_search", Value: map[string]any{
+			"support":       "disabled",
+			"provider_tool": "preview",
+		}},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	if patched.Models["claude-sonnet"].WebSearch.Support != "disabled" {
+		t.Fatalf("WebSearch.Support = %q, want disabled", patched.Models["claude-sonnet"].WebSearch.Support)
+	}
+	if patched.Models["claude-sonnet"].WebSearch.Extra["provider_tool"] != "preview" {
+		t.Fatalf("WebSearch.Extra[provider_tool] = %#v, want preview", patched.Models["claude-sonnet"].WebSearch.Extra["provider_tool"])
+	}
+}
+
+func TestApplyPatchToFileConfigPreservesExtensionExtraFields(t *testing.T) {
+	enabled := true
+	fc := testConfig().ToFileConfig()
+	fc.Models["claude-sonnet"] = config.ModelDefFileConfig{
+		DisplayName: "Claude Sonnet",
+		Extensions: map[string]config.ExtensionFileConfig{
+			"visual": {
+				Enabled: &enabled,
+				Config:  map[string]any{"model": "gpt-4.1"},
+				Extra:   map[string]any{"scope_note": "keep"},
+			},
+		},
+	}
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceModel, ID: "claude-sonnet", Field: "extensions", Value: map[string]any{
+			"visual": map[string]any{
+				"enabled":    false,
+				"config":     map[string]any{"model": "gpt-4.1"},
+				"scope_note": "keep",
+			},
+		}},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	visual := patched.Models["claude-sonnet"].Extensions["visual"]
+	if visual.Enabled == nil || *visual.Enabled {
+		t.Fatalf("visual.Enabled = %v, want explicit false", visual.Enabled)
+	}
+	if visual.Extra["scope_note"] != "keep" {
+		t.Fatalf("visual.Extra[scope_note] = %#v, want keep", visual.Extra["scope_note"])
+	}
+}
+
+func TestApplyPatchToFileConfigLeavesRouteReferenceValidationToConfigLoader(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+
+	patched, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceRoute, ID: "claude-sonnet", Field: "provider", Value: "missing-provider"},
+	})
+
+	if len(errs) != 0 {
+		t.Fatalf("ApplyPatchToFileConfig returned errors: %+v", errs)
+	}
+	if patched.Routes["claude-sonnet"].Provider != "missing-provider" {
+		t.Fatalf("Routes[claude-sonnet].Provider = %q, want missing-provider", patched.Routes["claude-sonnet"].Provider)
+	}
+	if _, err := config.FromFileConfig(patched); err == nil {
+		t.Fatal("config.FromFileConfig succeeded for route with missing provider, want validation error")
+	}
+}
+
+func TestApplyPatchToFileConfigRejectsUnsupportedRoutePriority(t *testing.T) {
+	fc := testConfig().ToFileConfig()
+
+	_, errs := ApplyPatchToFileConfig(fc, []PatchOp{
+		{Kind: ResourceRoute, ID: "claude-sonnet", Field: "priority", Value: 1},
+	})
+
+	if len(errs) != 1 {
+		t.Fatalf("ApplyPatchToFileConfig returned %d errors, want 1: %+v", len(errs), errs)
+	}
+	if errs[0].ResourceKind != ResourceRoute || errs[0].ResourceID != "claude-sonnet" || errs[0].Field != "priority" {
+		t.Fatalf("unexpected error target: %+v", errs[0])
+	}
+}
diff --git a/internal/service/configgraph/schema.go b/internal/service/configgraph/schema.go
new file mode 100644
index 00000000..d62d821f
--- /dev/null
+++ b/internal/service/configgraph/schema.go
@@ -0,0 +1,270 @@
+package configgraph
+
+type ResourceDefinition struct {
+	Kind          string
+	Label         string
+	HotReloadable bool
+	RuntimeImpact RuntimeImpact
+	Fields        []FieldSchema
+}
+
+func ResourceDefinitions() []ResourceDefinition {
+	return []ResourceDefinition{
+		{
+			Kind:          string(ResourceMode),
+			Label:         "Mode",
+			HotReloadable: false,
+			RuntimeImpact: ImpactCritical,
+			Fields: []FieldSchema{
+				enumField("mode", "Mode", []string{"Transform", "CaptureResponse", "CaptureAnthropic"}, false, "critical"),
+			},
+		},
+		{
+			Kind:          string(ResourceTrace),
+			Label:         "Trace",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				boolField("enabled", "Enabled", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceLog),
+			Label:         "Log",
+			HotReloadable: false,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				enumField("level", "Level", []string{"debug", "info", "warn", "error"}, false, "normal"),
+				enumField("format", "Format", []string{"text", "json"}, false, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceServer),
+			Label:         "Server",
+			HotReloadable: false,
+			RuntimeImpact: ImpactCritical,
+			Fields: []FieldSchema{
+				stringField("addr", "Address", false, false, "critical"),
+				stringField("auth_token", "Auth Token", false, true, "critical"),
+				numberField("max_sessions", "Max Sessions", false, "normal"),
+				stringField("session_ttl", "Session TTL", false, false, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceDefaults),
+			Label:         "Defaults",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				stringField("model", "Model", false, false, "normal"),
+				numberField("max_tokens", "Max Tokens", true, "normal"),
+				textField("system_prompt", "System Prompt", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceModel),
+			Label:         "Model",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				numberField("context_window", "Context Window", true, "normal"),
+				numberField("max_output_tokens", "Max Output Tokens", true, "normal"),
+				stringField("display_name", "Display Name", true, false, "normal"),
+				textField("description", "Description", true, "normal"),
+				textField("base_instructions", "Base Instructions", true, "normal"),
+				boolField("supports_reasoning", "Supports Reasoning", true, "normal"),
+				stringField("default_reasoning_level", "Default Reasoning Level", true, false, "normal"),
+				arrayField("supported_reasoning_levels", "Supported Reasoning Levels", true, "normal"),
+				boolField("supports_reasoning_summaries", "Supports Reasoning Summaries", true, "normal"),
+				stringField("default_reasoning_summary", "Default Reasoning Summary", true, false, "normal"),
+				arrayField("input_modalities", "Input Modalities", true, "normal"),
+				boolField("supports_image_detail_original", "Supports Original Image Detail", true, "normal"),
+				objectField("web_search", "Web Search", true, "normal"),
+				objectField("extensions", "Extensions", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceProvider),
+			Label:         "Provider",
+			HotReloadable: true,
+			RuntimeImpact: ImpactCritical,
+			Fields: []FieldSchema{
+				stringField("base_url", "Base URL", true, false, "critical"),
+				stringField("api_key", "API Key", true, true, "critical"),
+				stringField("version", "Version", true, false, "normal"),
+				stringField("user_agent", "User Agent", true, false, "normal"),
+				enumField("protocol", "Protocol", []string{"anthropic", "openai-response", "google-genai", "openai-chat"}, true, "critical"),
+				objectField("web_search", "Web Search", true, "normal"),
+				objectField("extensions", "Extensions", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceProviderOffer),
+			Label:         "Provider Offer",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				stringField("model", "Model", true, false, "critical"),
+				stringField("upstream_name", "Upstream Name", true, false, "normal"),
+				numberField("priority", "Priority", true, "normal"),
+				objectField("pricing", "Pricing", true, "normal"),
+				objectField("overrides", "Overrides", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceRoute),
+			Label:         "Route",
+			HotReloadable: true,
+			RuntimeImpact: ImpactCritical,
+			Fields: []FieldSchema{
+				stringField("to", "Route Target", true, false, "critical"),
+				stringField("model", "Model", true, false, "critical"),
+				stringField("provider", "Provider", true, false, "critical"),
+				stringField("display_name", "Display Name", true, false, "normal"),
+				textField("description", "Description", true, "normal"),
+				numberField("context_window", "Context Window", true, "normal"),
+				objectField("web_search", "Web Search", true, "normal"),
+				objectField("extensions", "Extensions", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceWebSearch),
+			Label:         "Web Search",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				enumField("support", "Support", []string{"auto", "enabled", "disabled", "injected"}, true, "normal"),
+				numberField("max_uses", "Max Uses", true, "normal"),
+				stringField("tavily_api_key", "Tavily API Key", true, true, "normal"),
+				stringField("firecrawl_api_key", "Firecrawl API Key", true, true, "normal"),
+				numberField("search_max_rounds", "Search Max Rounds", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceCache),
+			Label:         "Cache",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				stringField("mode", "Mode", true, false, "normal"),
+				stringField("ttl", "TTL", true, false, "normal"),
+				boolField("prompt_caching", "Prompt Caching", true, "normal"),
+				boolField("automatic_prompt_cache", "Automatic Prompt Cache", true, "normal"),
+				boolField("explicit_cache_breakpoints", "Explicit Cache Breakpoints", true, "normal"),
+				boolField("allow_retention_downgrade", "Allow Retention Downgrade", true, "normal"),
+				numberField("max_breakpoints", "Max Breakpoints", true, "normal"),
+				numberField("min_cache_tokens", "Min Cache Tokens", true, "normal"),
+				numberField("expected_reuse", "Expected Reuse", true, "normal"),
+				numberField("minimum_value_score", "Minimum Value Score", true, "normal"),
+				numberField("min_breakpoint_tokens", "Min Breakpoint Tokens", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourcePersistence),
+			Label:         "Persistence",
+			HotReloadable: false,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				stringField("active_provider", "Active Provider", true, false, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceExtension),
+			Label:         "Extension",
+			HotReloadable: true,
+			RuntimeImpact: ImpactNormal,
+			Fields: []FieldSchema{
+				boolField("enabled", "Enabled", true, "normal"),
+				objectField("config", "Config", true, "normal"),
+			},
+		},
+		{
+			Kind:          string(ResourceProxy),
+			Label:         "Proxy",
+			HotReloadable: false,
+			RuntimeImpact: ImpactCritical,
+			Fields: []FieldSchema{
+				objectField("response", "Response Proxy", true, "critical"),
+				objectField("anthropic", "Anthropic Proxy", true, "critical"),
+			},
+		},
+	}
+}
+
+func stringField(path, label string, hotReloadable, secret bool, impact string) FieldSchema {
+	control := "text"
+	if secret {
+		control = "secret"
+	}
+	return FieldSchema{
+		Path:          path,
+		Type:          "string",
+		Label:         label,
+		Secret:        secret,
+		Control:       control,
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
+
+func textField(path, label string, hotReloadable bool, impact string) FieldSchema {
+	field := stringField(path, label, hotReloadable, false, impact)
+	field.Control = "textarea"
+	return field
+}
+
+func numberField(path, label string, hotReloadable bool, impact string) FieldSchema {
+	return FieldSchema{
+		Path:          path,
+		Type:          "number",
+		Label:         label,
+		Control:       "number",
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
+
+func boolField(path, label string, hotReloadable bool, impact string) FieldSchema {
+	return FieldSchema{
+		Path:          path,
+		Type:          "boolean",
+		Label:         label,
+		Control:       "switch",
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
+
+func enumField(path, label string, values []string, hotReloadable bool, impact string) FieldSchema {
+	return FieldSchema{
+		Path:          path,
+		Type:          "string",
+		Label:         label,
+		Control:       "select",
+		Enum:          values,
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
+
+func arrayField(path, label string, hotReloadable bool, impact string) FieldSchema {
+	return FieldSchema{
+		Path:          path,
+		Type:          "array",
+		Label:         label,
+		Control:       "array",
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
+
+func objectField(path, label string, hotReloadable bool, impact string) FieldSchema {
+	return FieldSchema{
+		Path:          path,
+		Type:          "object",
+		Label:         label,
+		Control:       "object",
+		HotReloadable: hotReloadable,
+		RuntimeImpact: impact,
+	}
+}
diff --git a/internal/service/configgraph/schema_test.go b/internal/service/configgraph/schema_test.go
new file mode 100644
index 00000000..6b832b6f
--- /dev/null
+++ b/internal/service/configgraph/schema_test.go
@@ -0,0 +1,42 @@
+package configgraph
+
+import "testing"
+
+func TestSchemaCoversCurrentFileConfigSections(t *testing.T) {
+	got := map[string]bool{}
+	for _, def := range ResourceDefinitions() {
+		got[def.Kind] = true
+	}
+	for _, kind := range []ResourceKind{
+		ResourceMode,
+		ResourceTrace,
+		ResourceLog,
+		ResourceServer,
+		ResourceDefaults,
+		ResourceModel,
+		ResourceProvider,
+		ResourceRoute,
+		ResourceWebSearch,
+		ResourceCache,
+		ResourcePersistence,
+		ResourceExtension,
+		ResourceProxy,
+	} {
+		if !got[string(kind)] {
+			t.Fatalf("missing resource definition %q", kind)
+		}
+	}
+}
+
+func TestSchemaDoesNotAdvertiseOutOfScopeFields(t *testing.T) {
+	for _, def := range ResourceDefinitions() {
+		for _, field := range def.Fields {
+			if (def.Kind == string(ResourceProvider) || def.Kind == string(ResourceModel)) && field.Path == "enabled" {
+				t.Fatalf("out-of-scope field exposed on %s: %s", def.Kind, field.Path)
+			}
+			if def.Kind == string(ResourceRoute) && (field.Path == "fallback" || field.Path == "priority") {
+				t.Fatalf("out-of-scope field exposed on %s: %s", def.Kind, field.Path)
+			}
+		}
+	}
+}
diff --git a/internal/service/configgraph/service.go b/internal/service/configgraph/service.go
new file mode 100644
index 00000000..341fe733
--- /dev/null
+++ b/internal/service/configgraph/service.go
@@ -0,0 +1,413 @@
+package configgraph
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"log/slog"
+
+	"moonbridge/internal/config"
+	runtimepkg "moonbridge/internal/service/runtime"
+)
+
+type Store interface {
+	LoadAll() (*config.Config, error)
+	SaveConfig(context.Context, *config.Config) (string, error)
+	CurrentRevision() (string, error)
+}
+
+type Runtime interface {
+	Current() *runtimepkg.ConfigSnapshot
+	ValidateCandidate(config.Config) error
+	Reload(config.Config) error
+}
+
+type Service struct {
+	store          Store
+	runtime        Runtime
+	logger         *slog.Logger
+	extensionSpecs []config.ExtensionConfigSpec
+}
+
+func NewService(store Store, rt Runtime, logger *slog.Logger) *Service {
+	if store == nil {
+		panic("configgraph service store is nil")
+	}
+	if rt == nil {
+		panic("configgraph service runtime is nil")
+	}
+	if logger == nil {
+		logger = slog.Default()
+	}
+	return &Service{store: store, runtime: rt, logger: logger}
+}
+
+func (s *Service) WithExtensionSpecs(specs []config.ExtensionConfigSpec) *Service {
+	s.extensionSpecs = append([]config.ExtensionConfigSpec(nil), specs...)
+	return s
+}
+
+func (s *Service) Graph(context.Context) (Graph, error) {
+	revision, err := s.store.CurrentRevision()
+	if err != nil {
+		return Graph{}, fmt.Errorf("config graph revision: %w", err)
+	}
+	snapshot := s.runtime.Current()
+	if snapshot == nil {
+		return Graph{}, errors.New("config graph runtime snapshot is nil")
+	}
+	return BuildGraph(snapshot.Config, revision), nil
+}
+
+func (s *Service) Patch(ctx context.Context, req PatchRequest) (PatchResponse, error) {
+	revision, err := s.store.CurrentRevision()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("config graph revision: %w", err)
+	}
+	if req.BaseRevision == "" || req.BaseRevision != revision {
+		return PatchResponse{
+			Result:   ResultRevisionConflict,
+			Revision: revision,
+			Errors: []FieldError{
+				{
+					Code:    "revisionConflict",
+					Message: fmt.Sprintf("base revision %q does not match current revision %q", req.BaseRevision, revision),
+				},
+			},
+		}, nil
+	}
+	if len(req.Changes) == 0 {
+		graph, err := s.Graph(ctx)
+		if err != nil {
+			return PatchResponse{}, err
+		}
+		return PatchResponse{Result: ResultCommitted, Revision: revision, Graph: &graph}, nil
+	}
+
+	cfg, err := s.store.LoadAll()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("load config for graph patch: %w", err)
+	}
+	patched, errs := ApplyPatchToFileConfig(cfg.ToFileConfig(), req.Changes)
+	if len(errs) > 0 {
+		return PatchResponse{
+			Result:   ResultValidationRejected,
+			Revision: revision,
+			Errors:   errs,
+		}, nil
+	}
+	return s.acceptCandidate(ctx, patched, revision, req.Changes, true)
+}
+
+func (s *Service) Validate(ctx context.Context, req PatchRequest) (PatchResponse, error) {
+	revision, err := s.store.CurrentRevision()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("config graph revision: %w", err)
+	}
+	if req.BaseRevision == "" || req.BaseRevision != revision {
+		return PatchResponse{
+			Result:   ResultRevisionConflict,
+			Revision: revision,
+			Errors: []FieldError{
+				{
+					Code:    "revisionConflict",
+					Message: fmt.Sprintf("base revision %q does not match current revision %q", req.BaseRevision, revision),
+				},
+			},
+		}, nil
+	}
+
+	cfg, err := s.store.LoadAll()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("load config for graph validation: %w", err)
+	}
+	patched, errs := ApplyPatchToFileConfig(cfg.ToFileConfig(), req.Changes)
+	if len(errs) > 0 {
+		return PatchResponse{Result: ResultValidationRejected, Revision: revision, Errors: errs}, nil
+	}
+	return s.acceptCandidate(ctx, patched, revision, req.Changes, false)
+}
+
+func (s *Service) CreateResource(ctx context.Context, kind ResourceKind, id string, value map[string]any) (PatchResponse, error) {
+	revision, err := s.store.CurrentRevision()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("config graph revision: %w", err)
+	}
+	cfg, err := s.store.LoadAll()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("load config for graph create: %w", err)
+	}
+	fc := cfg.ToFileConfig()
+	if err := createResource(&fc, kind, id, value); err != nil {
+		return PatchResponse{Result: ResultValidationRejected, Revision: revision, Errors: []FieldError{*err}}, nil
+	}
+	return s.acceptCandidate(ctx, fc, revision, []PatchOp{{Kind: kind, ID: id}}, true)
+}
+
+func (s *Service) DeleteResource(ctx context.Context, kind ResourceKind, id string, baseRevision string) (PatchResponse, error) {
+	revision, err := s.store.CurrentRevision()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("config graph revision: %w", err)
+	}
+	if baseRevision == "" || baseRevision != revision {
+		return PatchResponse{
+			Result:   ResultRevisionConflict,
+			Revision: revision,
+			Errors: []FieldError{
+				{
+					ResourceKind: kind,
+					ResourceID:   id,
+					Code:         "revisionConflict",
+					Message:      fmt.Sprintf("base revision %q does not match current revision %q", baseRevision, revision),
+				},
+			},
+		}, nil
+	}
+	cfg, err := s.store.LoadAll()
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("load config for graph delete: %w", err)
+	}
+	fc := cfg.ToFileConfig()
+	if err := deleteResource(&fc, kind, id); err != nil {
+		return PatchResponse{Result: ResultValidationRejected, Revision: revision, Errors: []FieldError{*err}}, nil
+	}
+	return s.acceptCandidate(ctx, fc, revision, []PatchOp{{Kind: kind, ID: id}}, true)
+}
+
+func (s *Service) acceptCandidate(ctx context.Context, fc config.FileConfig, revision string, ops []PatchOp, commit bool) (PatchResponse, error) {
+	candidate, errs := s.runtimeConfigFromFileConfig(fc, ops)
+	if len(errs) > 0 {
+		return PatchResponse{Result: ResultValidationRejected, Revision: revision, Errors: errs}, nil
+	}
+	if err := s.runtime.ValidateCandidate(candidate); err != nil {
+		result := ResultDraftRejected
+		if hasCriticalRuntimeImpact(ops) {
+			result = ResultRuntimeRejected
+		}
+		return PatchResponse{
+			Result:   result,
+			Revision: revision,
+			Errors: []FieldError{
+				runtimeFieldError(ops, "runtimeCandidateRejected", err),
+			},
+		}, nil
+	}
+	if !commit {
+		graph := BuildGraph(candidate, revision)
+		return PatchResponse{Result: ResultCommitted, Revision: revision, Graph: &graph}, nil
+	}
+
+	nextRevision, err := s.store.SaveConfig(ctx, &candidate)
+	if err != nil {
+		return PatchResponse{}, fmt.Errorf("save config graph: %w", err)
+	}
+	if requiresRestart(ops) {
+		graph := BuildGraph(candidate, nextRevision)
+		return PatchResponse{Result: ResultRestartRequired, Revision: nextRevision, Graph: &graph}, nil
+	}
+	if err := s.runtime.Reload(candidate); err != nil {
+		s.logger.Error("config graph runtime reload failed after committed save", "revision", nextRevision, "error", err)
+		return PatchResponse{
+			Result:   ResultRuntimeRejected,
+			Revision: nextRevision,
+			Graph:    graphPtr(BuildGraph(candidate, nextRevision)),
+			Errors: []FieldError{
+				runtimeFieldError(ops, "runtimeReloadRejected", err),
+			},
+		}, nil
+	}
+	graph := BuildGraph(candidate, nextRevision)
+	return PatchResponse{Result: ResultCommitted, Revision: nextRevision, Graph: &graph}, nil
+}
+
+func (s *Service) runtimeConfigFromFileConfig(fc config.FileConfig, ops []PatchOp) (config.Config, []FieldError) {
+	cfg, err := config.FromFileConfigWithOptions(fc, config.LoadOptions{ExtensionSpecs: s.extensionSpecs})
+	if err != nil {
+		return config.Config{}, []FieldError{runtimeFieldError(ops, "configValidationRejected", err)}
+	}
+	return cfg, nil
+}
+
+func createResource(fc *config.FileConfig, kind ResourceKind, id string, value map[string]any) *FieldError {
+	op := PatchOp{Kind: kind, ID: id}
+	if id == "" {
+		return patchError(op, "invalidResourceID", "resource id cannot be empty")
+	}
+	switch kind {
+	case ResourceModel:
+		if fc.Models == nil {
+			fc.Models = map[string]config.ModelDefFileConfig{}
+		}
+		if _, exists := fc.Models[id]; exists {
+			return patchError(op, "duplicateResource", fmt.Sprintf("model %q already exists", id))
+		}
+		model, err := decodePatchValue[config.ModelDefFileConfig](value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Models[id] = model
+	case ResourceProvider:
+		if fc.Providers == nil {
+			fc.Providers = map[string]config.ProviderDefFileConfig{}
+		}
+		if _, exists := fc.Providers[id]; exists {
+			return patchError(op, "duplicateResource", fmt.Sprintf("provider %q already exists", id))
+		}
+		provider, err := decodePatchValue[config.ProviderDefFileConfig](value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Providers[id] = provider
+	case ResourceProviderOffer:
+		providerID, modelID, ok := splitProviderOfferID(id)
+		if !ok {
+			return patchError(op, "invalidResourceID", fmt.Sprintf("invalid provider offer id %q", id))
+		}
+		provider, exists := fc.Providers[providerID]
+		if !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("provider %q does not exist", providerID))
+		}
+		if offerIndex(provider.Offers, modelID) >= 0 {
+			return patchError(op, "duplicateResource", fmt.Sprintf("provider offer %q already exists", id))
+		}
+		offer, err := decodePatchValue[config.OfferFileConfig](value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		if offer.Model == "" {
+			offer.Model = modelID
+		}
+		provider.Offers = append(provider.Offers, offer)
+		fc.Providers[providerID] = provider
+	case ResourceRoute:
+		if fc.Routes == nil {
+			fc.Routes = map[string]config.RouteFileConfig{}
+		}
+		if _, exists := fc.Routes[id]; exists {
+			return patchError(op, "duplicateResource", fmt.Sprintf("route %q already exists", id))
+		}
+		route, err := decodePatchValue[config.RouteFileConfig](value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Routes[id] = route
+	case ResourceExtension:
+		if fc.Extensions == nil {
+			fc.Extensions = map[string]config.ExtensionFileConfig{}
+		}
+		if _, exists := fc.Extensions[id]; exists {
+			return patchError(op, "duplicateResource", fmt.Sprintf("extension %q already exists", id))
+		}
+		extension, err := decodePatchValue[config.ExtensionFileConfig](value)
+		if err != nil {
+			return invalidValue(op, err)
+		}
+		fc.Extensions[id] = extension
+	default:
+		return patchError(op, "unsupportedCreate", fmt.Sprintf("resource kind %q cannot be created", kind))
+	}
+	return nil
+}
+
+func deleteResource(fc *config.FileConfig, kind ResourceKind, id string) *FieldError {
+	op := PatchOp{Kind: kind, ID: id}
+	switch kind {
+	case ResourceModel:
+		if _, exists := fc.Models[id]; !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("model %q does not exist", id))
+		}
+		delete(fc.Models, id)
+	case ResourceProvider:
+		if _, exists := fc.Providers[id]; !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("provider %q does not exist", id))
+		}
+		delete(fc.Providers, id)
+	case ResourceProviderOffer:
+		providerID, modelID, ok := splitProviderOfferID(id)
+		if !ok {
+			return patchError(op, "invalidResourceID", fmt.Sprintf("invalid provider offer id %q", id))
+		}
+		provider, exists := fc.Providers[providerID]
+		if !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("provider %q does not exist", providerID))
+		}
+		idx := offerIndex(provider.Offers, modelID)
+		if idx < 0 {
+			return patchError(op, "unknownResource", fmt.Sprintf("provider offer %q does not exist", id))
+		}
+		provider.Offers = append(provider.Offers[:idx], provider.Offers[idx+1:]...)
+		fc.Providers[providerID] = provider
+	case ResourceRoute:
+		if _, exists := fc.Routes[id]; !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("route %q does not exist", id))
+		}
+		delete(fc.Routes, id)
+	case ResourceExtension:
+		if _, exists := fc.Extensions[id]; !exists {
+			return patchError(op, "unknownResource", fmt.Sprintf("extension %q does not exist", id))
+		}
+		delete(fc.Extensions, id)
+	default:
+		return patchError(op, "unsupportedDelete", fmt.Sprintf("resource kind %q cannot be deleted", kind))
+	}
+	return nil
+}
+
+func requiresRestart(ops []PatchOp) bool {
+	for _, op := range ops {
+		def, field, ok := definitionField(op.Kind, op.Field)
+		if !ok {
+			if def.Kind != "" && !def.HotReloadable {
+				return true
+			}
+			continue
+		}
+		if !def.HotReloadable || !field.HotReloadable {
+			return true
+		}
+	}
+	return false
+}
+
+func hasCriticalRuntimeImpact(ops []PatchOp) bool {
+	for _, op := range ops {
+		def, field, ok := definitionField(op.Kind, op.Field)
+		if ok {
+			if field.RuntimeImpact == string(ImpactCritical) {
+				return true
+			}
+			continue
+		}
+		if def.RuntimeImpact == ImpactCritical {
+			return true
+		}
+	}
+	return false
+}
+
+func definitionField(kind ResourceKind, fieldPath string) (ResourceDefinition, FieldSchema, bool) {
+	def, exists := definitionsByKind()[kind]
+	if !exists {
+		return ResourceDefinition{}, FieldSchema{}, false
+	}
+	for _, field := range def.Fields {
+		if field.Path == fieldPath {
+			return def, field, true
+		}
+	}
+	return def, FieldSchema{}, false
+}
+
+func runtimeFieldError(ops []PatchOp, code string, err error) FieldError {
+	out := FieldError{Code: code, Message: err.Error()}
+	if len(ops) > 0 {
+		out.ResourceKind = ops[0].Kind
+		out.ResourceID = ops[0].ID
+		out.Field = ops[0].Field
+	}
+	return out
+}
+
+func graphPtr(graph Graph) *Graph {
+	return &graph
+}
diff --git a/internal/service/configgraph/service_test.go b/internal/service/configgraph/service_test.go
new file mode 100644
index 00000000..e3d14309
--- /dev/null
+++ b/internal/service/configgraph/service_test.go
@@ -0,0 +1,431 @@
+package configgraph
+
+import (
+	"context"
+	"errors"
+	"testing"
+
+	"moonbridge/internal/config"
+	dbsqlite "moonbridge/internal/extension/db/sqlite"
+	runtimepkg "moonbridge/internal/service/runtime"
+)
+
+func TestBuildGraphIncludesAllConfigSections(t *testing.T) {
+	cfg := testConfig()
+	graph := BuildGraph(cfg, "rev-1")
+
+	assertResource(t, graph, ResourceMode, "main")
+	assertResource(t, graph, ResourceTrace, "main")
+	assertResource(t, graph, ResourceLog, "main")
+	assertResource(t, graph, ResourceServer, "main")
+	assertResource(t, graph, ResourceDefaults, "main")
+	assertResource(t, graph, ResourceModel, "claude-sonnet")
+	assertResource(t, graph, ResourceProvider, "anthropic")
+	assertResource(t, graph, ResourceProviderOffer, "anthropic/claude-sonnet")
+	assertResource(t, graph, ResourceRoute, "claude-sonnet")
+	assertResource(t, graph, ResourceWebSearch, "main")
+	assertResource(t, graph, ResourceCache, "main")
+	assertResource(t, graph, ResourcePersistence, "main")
+	assertResource(t, graph, ResourceProxy, "main")
+}
+
+func TestBuildGraphMasksSecrets(t *testing.T) {
+	graph := BuildGraph(testConfig(), "rev-1")
+	provider := assertResource(t, graph, ResourceProvider, "anthropic")
+	if provider.Value["api_key"] == "sk-ant-test-key" {
+		t.Fatal("provider api_key leaked")
+	}
+
+	server := assertResource(t, graph, ResourceServer, "main")
+	if server.Value["auth_token"] == "console-token" {
+		t.Fatal("server auth_token leaked")
+	}
+
+	search := assertResource(t, graph, ResourceWebSearch, "main")
+	if search.Value["tavily_api_key"] == "tvly-test-key" {
+		t.Fatal("web_search tavily_api_key leaked")
+	}
+}
+
+func TestBuildGraphReportsRevisionAndCapabilities(t *testing.T) {
+	graph := BuildGraph(testConfig(), "rev-1")
+	if graph.Revision != "rev-1" {
+		t.Fatalf("Revision = %q, want rev-1", graph.Revision)
+	}
+	if !graph.Validation.Valid {
+		t.Fatal("Validation.Valid = false, want true")
+	}
+	if !graph.Capabilities.Autosave {
+		t.Fatal("Capabilities.Autosave = false, want true")
+	}
+	if !graph.Capabilities.Logs {
+		t.Fatal("Capabilities.Logs = false, want true")
+	}
+}
+
+func TestServiceGraphReturnsStoreRevisionAndRuntimeResources(t *testing.T) {
+	svc, _, _ := newServiceForTest(testConfig(), "rev-1")
+
+	graph, err := svc.Graph(context.Background())
+	if err != nil {
+		t.Fatalf("Graph() error = %v", err)
+	}
+	if graph.Revision != "rev-1" {
+		t.Fatalf("Graph().Revision = %q, want rev-1", graph.Revision)
+	}
+	assertResource(t, graph, ResourceDefaults, "main")
+	assertResource(t, graph, ResourceProvider, "anthropic")
+}
+
+func TestServicePatchRejectsStaleRevisionWithoutSaveOrReload(t *testing.T) {
+	svc, store, rt := newServiceForTest(testConfig(), "rev-current")
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-stale",
+		Changes: []PatchOp{
+			{Kind: ResourceDefaults, ID: mainResourceID, Field: "max_tokens", Value: 8192},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultRevisionConflict {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultRevisionConflict)
+	}
+	if resp.Revision != "rev-current" {
+		t.Fatalf("Patch().Revision = %q, want rev-current", resp.Revision)
+	}
+	if store.saveCalls != 0 {
+		t.Fatalf("SaveConfig calls = %d, want 0", store.saveCalls)
+	}
+	if rt.validateCalls != 0 || rt.reloadCalls != 0 {
+		t.Fatalf("runtime calls validate=%d reload=%d, want 0/0", rt.validateCalls, rt.reloadCalls)
+	}
+}
+
+func TestServicePatchRejectsInvalidSchemaWithoutSaveOrReload(t *testing.T) {
+	svc, store, rt := newServiceForTest(testConfig(), "rev-1")
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-1",
+		Changes: []PatchOp{
+			{Kind: ResourceRoute, ID: "claude-sonnet", Field: "priority", Value: 1},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultValidationRejected {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultValidationRejected)
+	}
+	if len(resp.Errors) != 1 {
+		t.Fatalf("Patch().Errors length = %d, want 1", len(resp.Errors))
+	}
+	if store.saveCalls != 0 || rt.reloadCalls != 0 {
+		t.Fatalf("save/reload calls = %d/%d, want 0/0", store.saveCalls, rt.reloadCalls)
+	}
+}
+
+func TestServicePatchCommitsHotReloadableChange(t *testing.T) {
+	svc, store, rt := newServiceForTest(testConfig(), "rev-1")
+	store.nextRevision = "rev-2"
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-1",
+		Changes: []PatchOp{
+			{Kind: ResourceDefaults, ID: mainResourceID, Field: "max_tokens", Value: 8192},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultCommitted {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultCommitted)
+	}
+	if resp.Revision != "rev-2" {
+		t.Fatalf("Patch().Revision = %q, want rev-2", resp.Revision)
+	}
+	if store.saveCalls != 1 || rt.validateCalls != 1 || rt.reloadCalls != 1 {
+		t.Fatalf("save/validate/reload calls = %d/%d/%d, want 1/1/1", store.saveCalls, rt.validateCalls, rt.reloadCalls)
+	}
+	if store.cfg.Defaults.MaxTokens != 8192 {
+		t.Fatalf("stored Defaults.MaxTokens = %d, want 8192", store.cfg.Defaults.MaxTokens)
+	}
+	if rt.current.Defaults.MaxTokens != 8192 {
+		t.Fatalf("runtime Defaults.MaxTokens = %d, want 8192", rt.current.Defaults.MaxTokens)
+	}
+}
+
+func TestServicePatchReturnsRuntimeRejectedForCriticalRuntimeFailure(t *testing.T) {
+	svc, store, rt := newServiceForTest(testConfig(), "rev-1")
+	rt.validateErr = errors.New("candidate rejected")
+	before := rt.Current()
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-1",
+		Changes: []PatchOp{
+			{Kind: ResourceProvider, ID: "anthropic", Field: "base_url", Value: "https://rejected.example.test"},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultRuntimeRejected {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultRuntimeRejected)
+	}
+	if resp.Revision != "rev-1" {
+		t.Fatalf("Patch().Revision = %q, want rev-1", resp.Revision)
+	}
+	if len(resp.Errors) != 1 {
+		t.Fatalf("Patch().Errors length = %d, want 1", len(resp.Errors))
+	}
+	if store.saveCalls != 0 || rt.reloadCalls != 0 {
+		t.Fatalf("save/reload calls = %d/%d, want 0/0", store.saveCalls, rt.reloadCalls)
+	}
+	if rt.Current().Config.ProviderDefs["anthropic"].BaseURL != before.Config.ProviderDefs["anthropic"].BaseURL {
+		t.Fatal("runtime current config changed after rejected critical candidate")
+	}
+}
+
+func TestServicePatchReturnsDraftRejectedForNormalRuntimeFailure(t *testing.T) {
+	svc, store, rt := newServiceForTest(testConfig(), "rev-1")
+	rt.validateErr = errors.New("candidate rejected")
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-1",
+		Changes: []PatchOp{
+			{Kind: ResourceDefaults, ID: mainResourceID, Field: "max_tokens", Value: 8192},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultDraftRejected {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultDraftRejected)
+	}
+	if store.saveCalls != 0 || rt.reloadCalls != 0 {
+		t.Fatalf("save/reload calls = %d/%d, want 0/0", store.saveCalls, rt.reloadCalls)
+	}
+}
+
+func TestServicePatchSavesRestartRequiredChangeWithoutReload(t *testing.T) {
+	cfg := testConfig()
+	svc, store, rt := newServiceForTest(cfg, "rev-1")
+	store.nextRevision = "rev-2"
+
+	resp, err := svc.Patch(context.Background(), PatchRequest{
+		BaseRevision: "rev-1",
+		Changes: []PatchOp{
+			{Kind: ResourceServer, ID: mainResourceID, Field: "auth_token", Value: "new-console-token"},
+		},
+	})
+
+	if err != nil {
+		t.Fatalf("Patch() error = %v", err)
+	}
+	if resp.Result != ResultRestartRequired {
+		t.Fatalf("Patch().Result = %q, want %q", resp.Result, ResultRestartRequired)
+	}
+	if resp.Revision != "rev-2" {
+		t.Fatalf("Patch().Revision = %q, want rev-2", resp.Revision)
+	}
+	if store.saveCalls != 1 || rt.validateCalls != 1 {
+		t.Fatalf("save/validate calls = %d/%d, want 1/1", store.saveCalls, rt.validateCalls)
+	}
+	if rt.reloadCalls != 0 {
+		t.Fatalf("Reload calls = %d, want 0", rt.reloadCalls)
+	}
+	if store.cfg.AuthToken != "new-console-token" {
+		t.Fatalf("stored AuthToken = %q, want new-console-token", store.cfg.AuthToken)
+	}
+	if rt.current.AuthToken != cfg.AuthToken {
+		t.Fatalf("runtime AuthToken = %q, want unchanged %q", rt.current.AuthToken, cfg.AuthToken)
+	}
+}
+
+func TestServiceCreateResourceAcceptsExistingRegisteredExtensionConfig(t *testing.T) {
+	cfg := testConfig()
+	enabled := true
+	cfg.Extensions = map[string]config.ExtensionSettings{
+		dbsqlite.PluginName: {
+			Enabled: &enabled,
+			RawConfig: map[string]any{
+				"path": ":memory:",
+			},
+		},
+	}
+	svc, store, rt := newServiceForTest(cfg, "rev-1")
+	store.nextRevision = "rev-2"
+	svc.WithExtensionSpecs(dbsqlite.ConfigSpecs())
+
+	resp, err := svc.CreateResource(context.Background(), ResourceModel, "review-model", map[string]any{
+		"display_name":   "Review Model",
+		"context_window": 128000,
+	})
+
+	if err != nil {
+		t.Fatalf("CreateResource() error = %v", err)
+	}
+	if resp.Result != ResultCommitted {
+		t.Fatalf("CreateResource().Result = %q, want %q; errors=%v", resp.Result, ResultCommitted, resp.Errors)
+	}
+	if resp.Revision != "rev-2" {
+		t.Fatalf("CreateResource().Revision = %q, want rev-2", resp.Revision)
+	}
+	if _, ok := store.cfg.Models["review-model"]; !ok {
+		t.Fatal("stored config missing created model")
+	}
+	if _, ok := rt.current.Models["review-model"]; !ok {
+		t.Fatal("runtime config missing created model after reload")
+	}
+}
+
+func assertResource(t *testing.T, graph Graph, kind ResourceKind, id string) Resource {
+	t.Helper()
+	for _, r := range graph.Resources {
+		if r.Kind == kind && r.ID == id {
+			return r
+		}
+	}
+	t.Fatalf("missing resource %s/%s", kind, id)
+	return Resource{}
+}
+
+func newServiceForTest(cfg config.Config, revision string) (*Service, *fakeStore, *fakeRuntime) {
+	store := &fakeStore{cfg: cfg, revision: revision}
+	rt := &fakeRuntime{current: cfg}
+	return NewService(store, rt, nil), store, rt
+}
+
+type fakeStore struct {
+	cfg          config.Config
+	revision     string
+	nextRevision string
+	saveCalls    int
+	loadCalls    int
+}
+
+func (s *fakeStore) LoadAll() (*config.Config, error) {
+	s.loadCalls++
+	cfg := s.cfg
+	return &cfg, nil
+}
+
+func (s *fakeStore) SaveConfig(_ context.Context, cfg *config.Config) (string, error) {
+	s.saveCalls++
+	s.cfg = *cfg
+	if s.nextRevision != "" {
+		s.revision = s.nextRevision
+	} else {
+		s.revision = s.revision + "-next"
+	}
+	return s.revision, nil
+}
+
+func (s *fakeStore) CurrentRevision() (string, error) {
+	return s.revision, nil
+}
+
+type fakeRuntime struct {
+	current       config.Config
+	validateErr   error
+	reloadErr     error
+	validateCalls int
+	reloadCalls   int
+}
+
+func (r *fakeRuntime) Current() *runtimepkg.ConfigSnapshot {
+	return &runtimepkg.ConfigSnapshot{Config: r.current}
+}
+
+func (r *fakeRuntime) ValidateCandidate(config.Config) error {
+	r.validateCalls++
+	return r.validateErr
+}
+
+func (r *fakeRuntime) Reload(cfg config.Config) error {
+	r.reloadCalls++
+	if r.reloadErr != nil {
+		return r.reloadErr
+	}
+	r.current = cfg
+	return nil
+}
+
+func testConfig() config.Config {
+	return config.Config{
+		Mode:          config.ModeTransform,
+		Addr:          "127.0.0.1:38440",
+		AuthToken:     "console-token",
+		TraceRequests: true,
+		LogLevel:      "debug",
+		LogFormat:     "text",
+		Defaults: config.Defaults{
+			Model:        "claude-sonnet",
+			MaxTokens:    4096,
+			SystemPrompt: "system",
+		},
+		Models: map[string]config.ModelDef{
+			"claude-sonnet": {
+				DisplayName:   "Claude Sonnet",
+				ContextWindow: 200000,
+			},
+		},
+		ProviderDefs: map[string]config.ProviderDef{
+			"anthropic": {
+				BaseURL:  "https://api.anthropic.com",
+				APIKey:   "sk-ant-test-key",
+				Version:  "2023-06-01",
+				Protocol: config.ProtocolAnthropic,
+				Offers: []config.OfferEntry{
+					{
+						Model:    "claude-sonnet",
+						Priority: 1,
+						Pricing: config.ModelPricing{
+							InputPrice:  3.0,
+							OutputPrice: 15.0,
+						},
+					},
+				},
+			},
+		},
+		Routes: map[string]config.RouteEntry{
+			"claude-sonnet": {
+				Provider:      "anthropic",
+				Model:         "claude-sonnet",
+				DisplayName:   "Claude Sonnet",
+				ContextWindow: 200000,
+			},
+		},
+		WebSearchSupport: config.WebSearchSupportEnabled,
+		WebSearchMaxUses: 8,
+		TavilyAPIKey:     "tvly-test-key",
+		SearchMaxRounds:  5,
+		Cache: config.CacheConfig{
+			Mode:                    "automatic",
+			TTL:                     "5m",
+			PromptCaching:           true,
+			AutomaticPromptCache:    true,
+			AllowRetentionDowngrade: true,
+		},
+		Persistence: config.PersistenceConfig{
+			ActiveProvider: "db_sqlite",
+		},
+		ResponseProxy: config.ResponseProxyConfig{
+			ProviderBaseURL: "https://responses.example.test",
+			ProviderAPIKey:  "response-key",
+			Model:           "resp-model",
+		},
+		AnthropicProxy: config.AnthropicProxyConfig{
+			ProviderBaseURL: "https://anthropic.example.test",
+			ProviderAPIKey:  "anthropic-key",
+			ProviderVersion: "2023-06-01",
+			Model:           "anthropic-model",
+		},
+	}
+}
diff --git a/internal/service/configgraph/types.go b/internal/service/configgraph/types.go
new file mode 100644
index 00000000..79e31440
--- /dev/null
+++ b/internal/service/configgraph/types.go
@@ -0,0 +1,131 @@
+package configgraph
+
+type ResourceKind string
+
+const (
+	ResourceMode          ResourceKind = "mode"
+	ResourceTrace         ResourceKind = "trace"
+	ResourceLog           ResourceKind = "log"
+	ResourceServer        ResourceKind = "server"
+	ResourceDefaults      ResourceKind = "defaults"
+	ResourceModel         ResourceKind = "model"
+	ResourceProvider      ResourceKind = "provider"
+	ResourceProviderOffer ResourceKind = "provider_offer"
+	ResourceRoute         ResourceKind = "route"
+	ResourceWebSearch     ResourceKind = "web_search"
+	ResourceCache         ResourceKind = "cache"
+	ResourcePersistence   ResourceKind = "persistence"
+	ResourceExtension     ResourceKind = "extension"
+	ResourceProxy         ResourceKind = "proxy"
+)
+
+type Graph struct {
+	Revision     string          `json:"revision"`
+	Resources    []Resource      `json:"resources"`
+	Validation   ValidationState `json:"validation"`
+	Runtime      RuntimeState    `json:"runtime"`
+	Capabilities Capabilities    `json:"capabilities"`
+}
+
+type Resource struct {
+	Kind          ResourceKind   `json:"kind"`
+	ID            string         `json:"id"`
+	Label         string         `json:"label"`
+	Value         map[string]any `json:"value"`
+	Schema        ResourceSchema `json:"schema"`
+	Status        ResourceStatus `json:"status"`
+	RuntimeImpact RuntimeImpact  `json:"runtimeImpact"`
+	HotReloadable bool           `json:"hotReloadable"`
+	References    []ResourceRef  `json:"references,omitempty"`
+}
+
+type ResourceSchema struct {
+	Fields []FieldSchema `json:"fields"`
+}
+
+type FieldSchema struct {
+	Path          string   `json:"path"`
+	Type          string   `json:"type"`
+	Label         string   `json:"label"`
+	Required      bool     `json:"required,omitempty"`
+	Secret        bool     `json:"secret,omitempty"`
+	Control       string   `json:"control,omitempty"`
+	Enum          []string `json:"enum,omitempty"`
+	HotReloadable bool     `json:"hotReloadable"`
+	RuntimeImpact string   `json:"runtimeImpact,omitempty"`
+}
+
+type ResourceStatus string
+
+const (
+	StatusSaved           ResourceStatus = "saved"
+	StatusNeedsAttention  ResourceStatus = "needsAttention"
+	StatusRestartRequired ResourceStatus = "restartRequired"
+)
+
+type RuntimeImpact string
+
+const (
+	ImpactNormal   RuntimeImpact = "normal"
+	ImpactCritical RuntimeImpact = "critical"
+)
+
+type ResourceRef struct {
+	Kind ResourceKind `json:"kind"`
+	ID   string       `json:"id"`
+}
+
+type ValidationState struct {
+	Valid  bool         `json:"valid"`
+	Errors []FieldError `json:"errors,omitempty"`
+}
+
+type RuntimeState struct {
+	Status  string       `json:"status"`
+	Errors  []FieldError `json:"errors,omitempty"`
+	Message string       `json:"message,omitempty"`
+}
+
+type Capabilities struct {
+	Autosave bool `json:"autosave"`
+	Logs     bool `json:"logs"`
+}
+
+type FieldError struct {
+	ResourceKind ResourceKind `json:"resourceKind"`
+	ResourceID   string       `json:"resourceId"`
+	Field        string       `json:"field,omitempty"`
+	Code         string       `json:"code"`
+	Message      string       `json:"message"`
+}
+
+type PatchRequest struct {
+	BaseRevision string    `json:"baseRevision"`
+	Changes      []PatchOp `json:"changes"`
+}
+
+type PatchOp struct {
+	Kind  ResourceKind `json:"kind"`
+	ID    string       `json:"id"`
+	Field string       `json:"field"`
+	Value any          `json:"value"`
+}
+
+type PatchResult string
+
+const (
+	ResultCommitted          PatchResult = "committed"
+	ResultRestartRequired    PatchResult = "restartRequired"
+	ResultRevisionConflict   PatchResult = "revisionConflict"
+	ResultValidationRejected PatchResult = "validationRejected"
+	ResultRuntimeRejected    PatchResult = "runtimeRejected"
+	ResultDraftRejected      PatchResult = "draftRejected"
+)
+
+type PatchResponse struct {
+	Result        PatchResult  `json:"result"`
+	Revision      string       `json:"revision"`
+	Graph         *Graph       `json:"graph,omitempty"`
+	Errors        []FieldError `json:"errors,omitempty"`
+	RollbackValue any          `json:"rollbackValue,omitempty"`
+}
diff --git a/internal/service/runtime/runtime.go b/internal/service/runtime/runtime.go
index 42489d28..cfcff595 100644
--- a/internal/service/runtime/runtime.go
+++ b/internal/service/runtime/runtime.go
@@ -51,6 +51,13 @@ func (rt *Runtime) Current() *ConfigSnapshot {
 	return rt.snapshot.Load()
 }
 
+func (rt *Runtime) ValidateCandidate(cfg config.Config) error {
+	if _, err := buildSnapshot(cfg, "runtime candidate"); err != nil {
+		return err
+	}
+	return nil
+}
+
 // Reload validates the given config, builds a new ProviderManager, computes
 // pricing, and atomically replaces the snapshot. Returns an error if
 // validation or ProviderManager construction fails; the existing snapshot
@@ -59,31 +66,33 @@ func (rt *Runtime) Reload(cfg config.Config) error {
 	rt.mu.Lock()
 	defer rt.mu.Unlock()
 
-	// Validate the new config.
+	snapshot, err := buildSnapshot(cfg, "runtime reload")
+	if err != nil {
+		return err
+	}
+	rt.snapshot.Store(snapshot)
+	return nil
+}
+
+func buildSnapshot(cfg config.Config, errorPrefix string) (*ConfigSnapshot, error) {
 	if err := cfg.Validate(); err != nil {
-		return fmt.Errorf("runtime reload: config validation: %w", err)
+		return nil, fmt.Errorf("%s: config validation: %w", errorPrefix, err)
 	}
 
-	// Build provider definitions and routes.
 	providerCfg := config.ProviderFromGlobalConfig(&cfg)
 	providerDefs := provider.BuildProviderDefsFromConfig(providerCfg)
 	modelRoutes := provider.BuildModelRoutesFromConfig(providerCfg)
 
-	// Build new provider manager.
 	providerMgr, err := provider.NewProviderManager(providerDefs, modelRoutes)
 	if err != nil {
-		return fmt.Errorf("runtime reload: provider manager: %w", err)
+		return nil, fmt.Errorf("%s: provider manager: %w", errorPrefix, err)
 	}
 
-	// Compute pricing from the new config.
 	pricing := provider.BuildPricingFromConfig(providerCfg)
 
-	// Create and atomically store the new snapshot.
-	snapshot := &ConfigSnapshot{
+	return &ConfigSnapshot{
 		Config:      cfg,
 		ProviderMgr: providerMgr,
 		Pricing:     pricing,
-	}
-	rt.snapshot.Store(snapshot)
-	return nil
+	}, nil
 }
diff --git a/internal/service/runtime/runtime_test.go b/internal/service/runtime/runtime_test.go
index 1d011727..4cf2ee45 100644
--- a/internal/service/runtime/runtime_test.go
+++ b/internal/service/runtime/runtime_test.go
@@ -207,3 +207,38 @@ func TestReloadWithInvalidConfigReturnsError(t *testing.T) {
 		t.Error("snapshot pointer changed after failed Reload")
 	}
 }
+
+func TestValidateCandidateDoesNotReplaceCurrentOnFailure(t *testing.T) {
+	valid := candidateRuntimeConfig()
+	rt := runtime.NewRuntime(valid, nil, nil)
+	before := rt.Current()
+
+	invalid := valid
+	invalid.Mode = config.Mode("invalid")
+
+	if err := rt.ValidateCandidate(invalid); err == nil {
+		t.Fatal("ValidateCandidate() error = nil")
+	}
+	if got := rt.Current(); got != before {
+		t.Fatal("runtime snapshot changed after failed candidate validation")
+	}
+}
+
+func candidateRuntimeConfig() config.Config {
+	return config.Config{
+		Mode:         config.ModeTransform,
+		Addr:         "127.0.0.1:38440",
+		DefaultModel: "test-model",
+		Routes: map[string]config.RouteEntry{
+			"test": {Provider: "default", Model: "claude-test"},
+		},
+		ProviderDefs: map[string]config.ProviderDef{
+			"default": {
+				BaseURL: "https://api.anthropic.test",
+				APIKey:  "test-key",
+				Models:  map[string]config.ModelMeta{"claude-test": {ContextWindow: 100000}},
+			},
+		},
+		Cache: config.CacheConfig{Mode: "off"},
+	}
+}
diff --git a/internal/service/server/server.go b/internal/service/server/server.go
index 19d76df6..88398fac 100644
--- a/internal/service/server/server.go
+++ b/internal/service/server/server.go
@@ -21,6 +21,7 @@ import (
 	"moonbridge/internal/service/runtime"
 	"moonbridge/internal/service/stats"
 	"moonbridge/internal/service/store"
+	"moonbridge/internal/service/webui"
 
 	"moonbridge/internal/service/server/session"
 	"moonbridge/internal/service/server/trace"
@@ -186,6 +187,7 @@ func New(cfg Config) *Server {
 	s.mux.HandleFunc("/responses", s.handleResponses)
 	s.mux.HandleFunc("/v1/models", s.handleModels)
 	s.mux.HandleFunc("/models", s.handleModels)
+	s.mux.Handle("/console/", webui.Embedded())
 	s.registerPluginRoutes()
 	if cfg.Runtime != nil && cfg.Store != nil {
 		apiRouter := api.NewRouter(s.store, s.runtime, s.stats, s.pluginRegistry, s)
@@ -195,7 +197,7 @@ func New(cfg Config) *Server {
 }
 
 func (s *Server) ServeHTTP(writer http.ResponseWriter, request *http.Request) {
-	if token := s.currentConfig().AuthToken; token != "" {
+	if token := s.currentConfig().AuthToken; token != "" && !isConsoleAssetPath(request.URL.Path) {
 		if !checkAuth(request, token) {
 			writer.Header().Set("Content-Type", "application/json")
 			writer.WriteHeader(http.StatusUnauthorized)
@@ -210,6 +212,10 @@ func (s *Server) ServeHTTP(writer http.ResponseWriter, request *http.Request) {
 	s.mux.ServeHTTP(writer, request)
 }
 
+func isConsoleAssetPath(path string) bool {
+	return path == "/console" || strings.HasPrefix(path, "/console/")
+}
+
 func (s *Server) handleModels(writer http.ResponseWriter, request *http.Request) {
 	if request.Method != http.MethodGet {
 		writeOpenAIError(writer, http.StatusMethodNotAllowed, openai.ErrorResponse{Error: openai.ErrorObject{
diff --git a/internal/service/server/server_test.go b/internal/service/server/server_test.go
index 3eaaedf0..4220ddc9 100644
--- a/internal/service/server/server_test.go
+++ b/internal/service/server/server_test.go
@@ -21,8 +21,10 @@ import (
 	"moonbridge/internal/logger"
 	"moonbridge/internal/protocol/openai"
 	"moonbridge/internal/service/provider"
+	"moonbridge/internal/service/runtime"
 	"moonbridge/internal/service/server"
 	"moonbridge/internal/service/stats"
+	"moonbridge/internal/service/store"
 	mbtrace "moonbridge/internal/service/trace"
 )
 
@@ -110,6 +112,31 @@ func registryWithCompletionCapture(t *testing.T, p *captureCompletionPlugin) *pl
 	return registry
 }
 
+func TestServerServesConsoleWithoutReplacingOpenAIRoutes(t *testing.T) {
+	handler := server.New(server.Config{})
+
+	console := httptest.NewRecorder()
+	handler.ServeHTTP(console, httptest.NewRequest(http.MethodGet, "/console/providers/openai", nil))
+	if console.Code != http.StatusOK {
+		t.Fatalf("/console status = %d, body = %s", console.Code, console.Body.String())
+	}
+	if body := console.Body.String(); !strings.Contains(body, `<div id="root"></div>`) {
+		t.Fatalf("/console body does not contain placeholder index: %s", body)
+	}
+
+	models := httptest.NewRecorder()
+	handler.ServeHTTP(models, httptest.NewRequest(http.MethodPost, "/v1/models", nil))
+	if models.Code != http.StatusMethodNotAllowed {
+		t.Fatalf("/v1/models POST status = %d, body = %s", models.Code, models.Body.String())
+	}
+
+	responses := httptest.NewRecorder()
+	handler.ServeHTTP(responses, httptest.NewRequest(http.MethodGet, "/v1/responses", nil))
+	if responses.Code != http.StatusMethodNotAllowed {
+		t.Fatalf("/v1/responses GET status = %d, body = %s", responses.Code, responses.Body.String())
+	}
+}
+
 func TestResponsesHandlerReturnsOpenAIResponse(t *testing.T) {
 	t.Skip("needs adapter to new dispatch architecture: requires ProviderMgr config")
 	provider := &fakeProvider{}
@@ -440,6 +467,7 @@ func TestBuildModelInfosFromConfigIncludesProviderModelsBeforeRouteFallback(t *t
 
 func TestBuildModelInfoPreservesReasoningLevelsForDeepSeekV4(t *testing.T) {
 	info := codex.BuildModelInfoFromProviderModel("deepseek-v4-pro(deepseek)", "deepseek", config.ModelMeta{
+		SupportsReasoning:     true,
 		DefaultReasoningLevel: "high",
 		SupportedReasoningLevels: []config.ReasoningLevelPreset{
 			{Effort: "high", Description: "High reasoning effort"},
@@ -1077,6 +1105,36 @@ func TestAuthRejectsRequestsWithoutValidToken(t *testing.T) {
 	}
 }
 
+func TestConsoleStaticBypassesAuthButAPIStillRequiresAuth(t *testing.T) {
+	cfg := minimalRuntimeConfig()
+	rt := runtime.NewRuntime(cfg, nil, nil)
+	handler := server.New(server.Config{
+		ServerCfg: config.ServerConfig{AuthToken: "my-secret"},
+		Runtime:   rt,
+		Store:     &fakeConfigStore{cfg: cfg, revision: "rev-1"},
+	})
+
+	console := httptest.NewRecorder()
+	handler.ServeHTTP(console, httptest.NewRequest(http.MethodGet, "/console/", nil))
+	if console.Code != http.StatusOK {
+		t.Fatalf("/console/ without auth status = %d, body = %s", console.Code, console.Body.String())
+	}
+
+	apiWithoutAuth := httptest.NewRecorder()
+	handler.ServeHTTP(apiWithoutAuth, httptest.NewRequest(http.MethodGet, "/api/v1/status", nil))
+	if apiWithoutAuth.Code != http.StatusUnauthorized {
+		t.Fatalf("/api/v1/status without auth status = %d, want 401, body = %s", apiWithoutAuth.Code, apiWithoutAuth.Body.String())
+	}
+
+	apiWithAuth := httptest.NewRecorder()
+	authReq := httptest.NewRequest(http.MethodGet, "/api/v1/status", nil)
+	authReq.Header.Set("Authorization", "Bearer my-secret")
+	handler.ServeHTTP(apiWithAuth, authReq)
+	if apiWithAuth.Code != http.StatusOK {
+		t.Fatalf("/api/v1/status with auth status = %d, want 200, body = %s", apiWithAuth.Code, apiWithAuth.Body.String())
+	}
+}
+
 func TestAuthAcceptsValidBearerToken(t *testing.T) {
 	t.Skip("needs adapter to new dispatch architecture: requires ProviderMgr config")
 	handler := server.New(server.Config{
@@ -1100,3 +1158,74 @@ func addAuth(req *http.Request, value string) *http.Request {
 	req.Header.Set("Authorization", value)
 	return req
 }
+
+func minimalRuntimeConfig() config.Config {
+	return config.Config{
+		Mode:      config.ModeTransform,
+		Addr:      "127.0.0.1:38440",
+		AuthToken: "my-secret",
+		Defaults: config.Defaults{
+			Model: "test-model",
+		},
+		Models: map[string]config.ModelDef{
+			"test-model": {DisplayName: "Test Model"},
+		},
+		ProviderDefs: map[string]config.ProviderDef{
+			"test-provider": {
+				BaseURL: "https://provider.example.test",
+				APIKey:  "test-key",
+				Models:  map[string]config.ModelMeta{"upstream-model": {}},
+				Offers:  []config.OfferEntry{{Model: "test-model", UpstreamName: "upstream-model"}},
+			},
+		},
+		Routes: map[string]config.RouteEntry{
+			"test-model": {Provider: "test-provider", Model: "upstream-model"},
+		},
+		Cache: config.CacheConfig{Mode: "off"},
+	}
+}
+
+type fakeConfigStore struct {
+	cfg      config.Config
+	revision string
+}
+
+func (s *fakeConfigStore) StageChange(store.ChangeRow) (int64, error) {
+	return 0, nil
+}
+
+func (s *fakeConfigStore) ListPendingChanges() ([]store.ChangeRow, error) {
+	return nil, nil
+}
+
+func (s *fakeConfigStore) ApplyPendingChanges(context.Context, store.ReloadFunc) error {
+	return nil
+}
+
+func (s *fakeConfigStore) DiscardPendingChanges() error {
+	return nil
+}
+
+func (s *fakeConfigStore) LoadAll() (*config.Config, error) {
+	cfg := s.cfg
+	return &cfg, nil
+}
+
+func (s *fakeConfigStore) SeedFromConfig(cfg *config.Config) error {
+	s.cfg = *cfg
+	return nil
+}
+
+func (s *fakeConfigStore) SaveConfig(_ context.Context, cfg *config.Config) (string, error) {
+	s.cfg = *cfg
+	s.revision += "-next"
+	return s.revision, nil
+}
+
+func (s *fakeConfigStore) CurrentRevision() (string, error) {
+	return s.revision, nil
+}
+
+func (s *fakeConfigStore) ExportYAML(bool) ([]byte, error) {
+	return nil, nil
+}
diff --git a/internal/service/store/config_store.go b/internal/service/store/config_store.go
index 26bc8596..3c66ba97 100644
--- a/internal/service/store/config_store.go
+++ b/internal/service/store/config_store.go
@@ -5,10 +5,15 @@ package store
 
 import (
 	"context"
+	"errors"
 
 	"moonbridge/internal/config"
 )
 
+// ErrConfigNotSeeded reports an empty persistence store that has tables but no
+// persisted graph configuration yet.
+var ErrConfigNotSeeded = errors.New("config not seeded")
+
 // ReloadFunc is called by ApplyPendingChanges to apply a new configuration
 // after successful staging validation.
 type ReloadFunc func(cfg *config.Config) error
@@ -36,6 +41,12 @@ type ConfigStore interface {
 	// Intended for first-time DB initialization.
 	SeedFromConfig(cfg *config.Config) error
 
+	// SaveConfig atomically replaces the persisted graph configuration.
+	SaveConfig(ctx context.Context, cfg *config.Config) (string, error)
+
+	// CurrentRevision returns the current persisted graph revision.
+	CurrentRevision() (string, error)
+
 	// ExportYAML serializes the current DB state as YAML bytes.
 	// If includeSecrets is false, API key values are masked.
 	ExportYAML(includeSecrets bool) ([]byte, error)
diff --git a/internal/service/store/sqlite_store.go b/internal/service/store/sqlite_store.go
index 249e502f..fc5f4508 100644
--- a/internal/service/store/sqlite_store.go
+++ b/internal/service/store/sqlite_store.go
@@ -4,8 +4,10 @@ import (
 	"context"
 	"database/sql"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"log/slog"
+	"math"
 	"strconv"
 	"strings"
 	"sync"
@@ -23,6 +25,8 @@ type SQLiteConfigStore struct {
 	extensionSpecs []config.ExtensionConfigSpec
 }
 
+const graphRevisionSettingKey = "__graph_revision"
+
 // NewSQLiteStore creates a new SQLiteConfigStore.
 func NewSQLiteStore(s db.Store, logger *slog.Logger, extensionSpecs ...config.ExtensionConfigSpec) *SQLiteConfigStore {
 	return &SQLiteConfigStore{db: s, logger: logger, extensionSpecs: extensionSpecs}
@@ -51,93 +55,195 @@ func nowStr() string {
 // Clears existing data then writes settings, models, providers+offers, and routes.
 func (s *SQLiteConfigStore) SeedFromConfig(cfg *config.Config) error {
 	fc := cfg.ToFileConfig()
-	ts := nowStr()
-
 	return s.db.WithTx(context.Background(), func(tx db.Tx) error {
-		providersTable, _ := tx.Table("providers")
-		offersTable, _ := tx.Table("offers")
-		modelsTable, _ := tx.Table("models")
-		routesTable, _ := tx.Table("routes")
-		settingsTable, _ := tx.Table("settings")
-
-		// Clear all tables.
-		for _, tbl := range []string{providersTable, offersTable, modelsTable, routesTable, settingsTable} {
-			if _, err := tx.ExecContext(context.Background(), "DELETE FROM "+tbl); err != nil {
-				return fmt.Errorf("clear %s: %w", tbl, err)
-			}
+		revision, err := nextRevisionTx(context.Background(), tx)
+		if err != nil {
+			return err
 		}
+		return replaceConfigTx(context.Background(), tx, fc, revision)
+	})
+}
 
-		// Settings.
-		settings := buildSettings(fc)
-		for key, value := range settings {
-			if _, err := tx.ExecContext(context.Background(),
-				"INSERT OR REPLACE INTO "+settingsTable+" (key, value) VALUES (?, ?)", key, value); err != nil {
-				return fmt.Errorf("insert setting %s: %w", key, err)
-			}
+func (s *SQLiteConfigStore) SaveConfig(ctx context.Context, cfg *config.Config) (string, error) {
+	if cfg == nil {
+		return "", errors.New("save config: config is nil")
+	}
+	if err := cfg.Validate(); err != nil {
+		return "", fmt.Errorf("save config: validate: %w", err)
+	}
+	fc := cfg.ToFileConfig()
+
+	var revision string
+	if err := s.db.WithTx(ctx, func(tx db.Tx) error {
+		next, err := nextRevisionTx(ctx, tx)
+		if err != nil {
+			return err
 		}
+		if err := replaceConfigTx(ctx, tx, fc, next); err != nil {
+			return err
+		}
+		revision = next
+		return nil
+	}); err != nil {
+		return "", fmt.Errorf("save config: %w", err)
+	}
+	return revision, nil
+}
 
-		// Models.
-		for slug, m := range fc.Models {
-			metaJSON, err := json.Marshal(m)
-			if err != nil {
-				return fmt.Errorf("marshal model %s: %w", slug, err)
-			}
-			if _, err := tx.ExecContext(context.Background(),
-				"INSERT OR REPLACE INTO "+modelsTable+" (slug, metadata, created_at, updated_at) VALUES (?, ?, ?, ?)",
-				slug, string(metaJSON), ts, ts); err != nil {
-				return fmt.Errorf("insert model %s: %w", slug, err)
-			}
+func (s *SQLiteConfigStore) CurrentRevision() (string, error) {
+	settingsTable := s.table("settings")
+	var revision string
+	if err := s.db.QueryRowContext(context.Background(),
+		"SELECT value FROM "+settingsTable+" WHERE key = ?", graphRevisionSettingKey).Scan(&revision); err != nil {
+		if errors.Is(err, sql.ErrNoRows) {
+			return "", errors.New("current revision: graph revision is not initialized")
 		}
+		return "", fmt.Errorf("current revision: %w", err)
+	}
+	if revision == "" {
+		return "", errors.New("current revision: graph revision is empty")
+	}
+	return revision, nil
+}
 
-		// Providers + Offers.
-		for key, p := range fc.Providers {
-			wsJSON, _ := json.Marshal(p.WebSearch)
-			extJSON, _ := json.Marshal(p.Extensions)
+func replaceConfigTx(ctx context.Context, tx db.Tx, fc config.FileConfig, revision string) error {
+	ts := nowStr()
+	providersTable, err := tx.Table("providers")
+	if err != nil {
+		return err
+	}
+	offersTable, err := tx.Table("offers")
+	if err != nil {
+		return err
+	}
+	modelsTable, err := tx.Table("models")
+	if err != nil {
+		return err
+	}
+	routesTable, err := tx.Table("routes")
+	if err != nil {
+		return err
+	}
+	settingsTable, err := tx.Table("settings")
+	if err != nil {
+		return err
+	}
 
-			if _, err := tx.ExecContext(context.Background(),
-				"INSERT OR REPLACE INTO "+providersTable+
-					" (key, base_url, api_key, version, protocol, enabled, user_agent, web_search, extensions, created_at, updated_at)"+
-					" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
-				key, p.BaseURL, p.APIKey, p.Version, p.Protocol, 1, p.UserAgent,
-				string(wsJSON), string(extJSON), ts, ts); err != nil {
-				return fmt.Errorf("insert provider %s: %w", key, err)
-			}
+	for _, tbl := range []string{providersTable, offersTable, modelsTable, routesTable, settingsTable} {
+		if _, err := tx.ExecContext(ctx, "DELETE FROM "+tbl); err != nil {
+			return fmt.Errorf("clear %s: %w", tbl, err)
+		}
+	}
 
-			for _, offer := range p.Offers {
-				var overridesJSON string
-				if offer.Overrides != nil {
-					b, _ := json.Marshal(*offer.Overrides)
-					overridesJSON = string(b)
-				}
-				if _, err := tx.ExecContext(context.Background(),
-					"INSERT OR REPLACE INTO "+offersTable+
-						" (provider_key, model_slug, upstream_name, priority, input_price, output_price, cache_write, cache_read, overrides)"+
-						" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)",
-					key, offer.Model, offer.UpstreamName, offer.Priority,
-					offer.Pricing.InputPrice, offer.Pricing.OutputPrice,
-					offer.Pricing.CacheWritePrice, offer.Pricing.CacheReadPrice,
-					overridesJSON); err != nil {
-					return fmt.Errorf("insert offer %s/%s: %w", key, offer.Model, err)
+	settings := buildSettings(fc)
+	settings[graphRevisionSettingKey] = revision
+	for key, value := range settings {
+		if _, err := tx.ExecContext(ctx,
+			"INSERT OR REPLACE INTO "+settingsTable+" (key, value) VALUES (?, ?)", key, value); err != nil {
+			return fmt.Errorf("insert setting %s: %w", key, err)
+		}
+	}
+
+	for slug, m := range fc.Models {
+		metaJSON, err := json.Marshal(m)
+		if err != nil {
+			return fmt.Errorf("marshal model %s: %w", slug, err)
+		}
+		if _, err := tx.ExecContext(ctx,
+			"INSERT OR REPLACE INTO "+modelsTable+" (slug, metadata, created_at, updated_at) VALUES (?, ?, ?, ?)",
+			slug, string(metaJSON), ts, ts); err != nil {
+			return fmt.Errorf("insert model %s: %w", slug, err)
+		}
+	}
+
+	for key, p := range fc.Providers {
+		wsJSON, err := json.Marshal(p.WebSearch)
+		if err != nil {
+			return fmt.Errorf("marshal provider %s web_search: %w", key, err)
+		}
+		extJSON, err := json.Marshal(p.Extensions)
+		if err != nil {
+			return fmt.Errorf("marshal provider %s extensions: %w", key, err)
+		}
+
+		if _, err := tx.ExecContext(ctx,
+			"INSERT OR REPLACE INTO "+providersTable+
+				" (key, base_url, api_key, version, protocol, enabled, user_agent, web_search, extensions, created_at, updated_at)"+
+				" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+			key, p.BaseURL, p.APIKey, p.Version, p.Protocol, 1, p.UserAgent,
+			string(wsJSON), string(extJSON), ts, ts); err != nil {
+			return fmt.Errorf("insert provider %s: %w", key, err)
+		}
+
+		for _, offer := range p.Offers {
+			var overridesJSON string
+			if offer.Overrides != nil {
+				b, err := json.Marshal(*offer.Overrides)
+				if err != nil {
+					return fmt.Errorf("marshal offer %s/%s overrides: %w", key, offer.Model, err)
 				}
+				overridesJSON = string(b)
+			}
+			if _, err := tx.ExecContext(ctx,
+				"INSERT OR REPLACE INTO "+offersTable+
+					" (provider_key, model_slug, upstream_name, priority, input_price, output_price, cache_write, cache_read, overrides)"+
+					" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)",
+				key, offer.Model, offer.UpstreamName, offer.Priority,
+				offer.Pricing.InputPrice, offer.Pricing.OutputPrice,
+				offer.Pricing.CacheWritePrice, offer.Pricing.CacheReadPrice,
+				overridesJSON); err != nil {
+				return fmt.Errorf("insert offer %s/%s: %w", key, offer.Model, err)
 			}
 		}
+	}
 
-		// Routes.
-		for alias, r := range fc.Routes {
-			extJSON, _ := json.Marshal(r.Extensions)
-			wsJSON, _ := json.Marshal(r.WebSearch)
-			if _, err := tx.ExecContext(context.Background(),
-				"INSERT OR REPLACE INTO "+routesTable+
-					" (alias, model_slug, provider_key, display_name, context_window, max_output_tokens, extensions, web_search, created_at, updated_at)"+
-					" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
-				alias, r.Model, r.Provider, r.DisplayName, r.ContextWindow, 0,
-				string(extJSON), string(wsJSON), ts, ts); err != nil {
-				return fmt.Errorf("insert route %s: %w", alias, err)
-			}
+	for alias, r := range fc.Routes {
+		extJSON, err := json.Marshal(r.Extensions)
+		if err != nil {
+			return fmt.Errorf("marshal route %s extensions: %w", alias, err)
+		}
+		wsJSON, err := json.Marshal(r.WebSearch)
+		if err != nil {
+			return fmt.Errorf("marshal route %s web_search: %w", alias, err)
+		}
+		if _, err := tx.ExecContext(ctx,
+			"INSERT OR REPLACE INTO "+routesTable+
+				" (alias, model_slug, provider_key, display_name, context_window, max_output_tokens, extensions, web_search, created_at, updated_at)"+
+				" VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+			alias, r.Model, r.Provider, r.DisplayName, r.ContextWindow, 0,
+			string(extJSON), string(wsJSON), ts, ts); err != nil {
+			return fmt.Errorf("insert route %s: %w", alias, err)
 		}
+	}
 
-		return nil
-	})
+	return nil
+}
+
+func nextRevisionTx(ctx context.Context, tx db.Tx) (string, error) {
+	settingsTable, err := tx.Table("settings")
+	if err != nil {
+		return "", err
+	}
+	var current string
+	err = tx.QueryRowContext(ctx, "SELECT value FROM "+settingsTable+" WHERE key = ?", graphRevisionSettingKey).Scan(&current)
+	if err != nil && !errors.Is(err, sql.ErrNoRows) {
+		return "", fmt.Errorf("read current revision: %w", err)
+	}
+
+	next := time.Now().UTC().UnixNano()
+	if current != "" {
+		currentValue, err := strconv.ParseInt(current, 10, 64)
+		if err != nil {
+			return "", fmt.Errorf("parse current revision %q: %w", current, err)
+		}
+		if currentValue == math.MaxInt64 {
+			return "", errors.New("current revision has reached max int64")
+		}
+		if next <= currentValue {
+			next = currentValue + 1
+		}
+	}
+	return strconv.FormatInt(next, 10), nil
 }
 
 // toModelDefFileConfig converts a ModelDef to ModelDefFileConfig for storage.
@@ -160,6 +266,7 @@ func toModelDefFileConfig(def config.ModelDef) config.ModelDefFileConfig {
 		DefaultReasoningSummary:  def.DefaultReasoningSummary,
 		InputModalities:          def.InputModalities,
 	}
+	m.SupportsReasoning = boolPtr(def.SupportsReasoning)
 	if def.SupportsReasoningSummaries {
 		m.SupportsReasoningSummaries = boolPtr(true)
 	}
@@ -241,7 +348,7 @@ func (s *SQLiteConfigStore) LoadAll() (*config.Config, error) {
 		return nil, fmt.Errorf("load file config: %w", err)
 	}
 	if fc.Mode == "" {
-		return nil, fmt.Errorf("config not seeded: mode is empty")
+		return nil, fmt.Errorf("%w: mode is empty", ErrConfigNotSeeded)
 	}
 	cfg, err := config.FromFileConfigWithOptions(fc, config.LoadOptions{ExtensionSpecs: s.extensionSpecs})
 	if err != nil {
diff --git a/internal/service/store/sqlite_store_test.go b/internal/service/store/sqlite_store_test.go
index 5e374dbd..2a844117 100644
--- a/internal/service/store/sqlite_store_test.go
+++ b/internal/service/store/sqlite_store_test.go
@@ -218,8 +218,118 @@ func TestSQLiteStoreStageAndDiscardChanges(t *testing.T) {
 	}
 }
 
+func TestSQLiteStoreSaveConfigOverwritesCurrentConfig(t *testing.T) {
+	cs := newConfigStoreForTest(t)
+	initial := buildTestConfig()
+	if err := cs.SeedFromConfig(initial); err != nil {
+		t.Fatalf("SeedFromConfig() error = %v", err)
+	}
+	revBefore, err := cs.CurrentRevision()
+	if err != nil {
+		t.Fatalf("CurrentRevision() before save error = %v", err)
+	}
+	if revBefore == "" {
+		t.Fatal("CurrentRevision() before save returned empty revision")
+	}
+
+	next := buildSavedGraphConfig()
+	revAfter, err := cs.SaveConfig(context.Background(), next)
+	if err != nil {
+		t.Fatalf("SaveConfig() error = %v", err)
+	}
+	if revAfter == "" {
+		t.Fatal("SaveConfig() returned empty revision")
+	}
+	if revAfter == revBefore {
+		t.Fatalf("SaveConfig() revision = %q, want different from %q", revAfter, revBefore)
+	}
+
+	stored, err := cs.LoadAll()
+	if err != nil {
+		t.Fatalf("LoadAll() after SaveConfig error = %v", err)
+	}
+	if stored.Defaults.MaxTokens != 8192 {
+		t.Fatalf("Defaults.MaxTokens = %d, want 8192", stored.Defaults.MaxTokens)
+	}
+	if _, ok := stored.ProviderDefs["anthropic"]; ok {
+		t.Fatal("old provider anthropic still exists after direct save")
+	}
+	if _, ok := stored.Routes["moonbridge"]; ok {
+		t.Fatal("old route moonbridge still exists after direct save")
+	}
+	if _, ok := stored.ProviderDefs["openai"]; !ok {
+		t.Fatal("new provider openai missing after direct save")
+	}
+	if _, ok := stored.Routes["saved"]; !ok {
+		t.Fatal("new route saved missing after direct save")
+	}
+
+	stableRevision, err := cs.CurrentRevision()
+	if err != nil {
+		t.Fatalf("CurrentRevision() after load error = %v", err)
+	}
+	if stableRevision != revAfter {
+		t.Fatalf("CurrentRevision() = %q, want SaveConfig revision %q", stableRevision, revAfter)
+	}
+}
+
+func TestSQLiteStoreSaveConfigRejectsInvalidConfigWithoutChangingStoredConfig(t *testing.T) {
+	cs := newConfigStoreForTest(t)
+	initial := buildTestConfig()
+	if err := cs.SeedFromConfig(initial); err != nil {
+		t.Fatalf("SeedFromConfig() error = %v", err)
+	}
+	revBefore, err := cs.CurrentRevision()
+	if err != nil {
+		t.Fatalf("CurrentRevision() before failed save error = %v", err)
+	}
+
+	invalid := buildSavedGraphConfig()
+	invalid.Mode = config.Mode("invalid")
+	if _, err := cs.SaveConfig(context.Background(), invalid); err == nil {
+		t.Fatal("SaveConfig() error = nil for invalid config")
+	}
+
+	stored, err := cs.LoadAll()
+	if err != nil {
+		t.Fatalf("LoadAll() after failed SaveConfig error = %v", err)
+	}
+	if stored.Mode != initial.Mode {
+		t.Fatalf("Mode = %q, want original %q", stored.Mode, initial.Mode)
+	}
+	if stored.Defaults.MaxTokens != initial.Defaults.MaxTokens {
+		t.Fatalf("Defaults.MaxTokens = %d, want original %d", stored.Defaults.MaxTokens, initial.Defaults.MaxTokens)
+	}
+	if _, ok := stored.ProviderDefs["anthropic"]; !ok {
+		t.Fatal("original provider anthropic missing after failed SaveConfig")
+	}
+
+	revAfter, err := cs.CurrentRevision()
+	if err != nil {
+		t.Fatalf("CurrentRevision() after failed save error = %v", err)
+	}
+	if revAfter != revBefore {
+		t.Fatalf("CurrentRevision() after failed save = %q, want unchanged %q", revAfter, revBefore)
+	}
+}
+
 // --- helpers ---
 
+func newConfigStoreForTest(t *testing.T) store.ConfigStore {
+	t.Helper()
+	logger := testLogger(t)
+	c := store.NewConfigStoreConsumer(logger)
+	ts := newTestStore(t, "config_store", c.Tables())
+	if err := c.BindStore(ts); err != nil {
+		t.Fatalf("BindStore() error = %v", err)
+	}
+	cs := c.Store()
+	if cs == nil {
+		t.Fatal("Store() returned nil")
+	}
+	return cs
+}
+
 func buildTestConfig() *config.Config {
 	return &config.Config{
 		Mode:             config.ModeTransform,
@@ -304,6 +414,59 @@ func buildTestConfig() *config.Config {
 	}
 }
 
+func buildSavedGraphConfig() *config.Config {
+	return &config.Config{
+		Mode:             config.ModeTransform,
+		Addr:             "127.0.0.1:38441",
+		AuthToken:        "saved-token",
+		MaxSessions:      7,
+		SessionTTL:       "12h",
+		TraceRequests:    false,
+		LogLevel:         "info",
+		LogFormat:        "text",
+		WebSearchSupport: config.WebSearchSupportDisabled,
+		WebSearchMaxUses: 4,
+		Defaults: config.Defaults{
+			Model:        "saved",
+			MaxTokens:    8192,
+			SystemPrompt: "Saved graph config",
+		},
+		Models: map[string]config.ModelDef{
+			"gpt-main": {
+				ContextWindow:   128000,
+				MaxOutputTokens: 16384,
+				DisplayName:     "GPT Main",
+			},
+		},
+		ProviderDefs: map[string]config.ProviderDef{
+			"openai": {
+				BaseURL:  "https://api.openai.com",
+				APIKey:   "sk-openai-saved-key",
+				Protocol: config.ProtocolOpenAIResponse,
+				Offers: []config.OfferEntry{
+					{
+						Model:        "gpt-main",
+						UpstreamName: "gpt-4.1",
+						Priority:     2,
+						Pricing: config.ModelPricing{
+							InputPrice:  2.0,
+							OutputPrice: 8.0,
+						},
+					},
+				},
+			},
+		},
+		Routes: map[string]config.RouteEntry{
+			"saved": {
+				Provider:    "openai",
+				Model:       "gpt-main",
+				DisplayName: "Saved Route",
+			},
+		},
+		Cache: config.CacheConfig{Mode: "off"},
+	}
+}
+
 func TestSQLiteStoreApplySuccess(t *testing.T) {
 	logger := testLogger(t)
 	c := store.NewConfigStoreConsumer(logger)
diff --git a/internal/service/webui/dist/assets/index-sUGx9Bin.js b/internal/service/webui/dist/assets/index-sUGx9Bin.js
new file mode 100644
index 00000000..0e5b1975
--- /dev/null
+++ b/internal/service/webui/dist/assets/index-sUGx9Bin.js
@@ -0,0 +1,3347 @@
+function R6(e,t){for(var i=0;i<t.length;i++){const o=t[i];if(typeof o!="string"&&!Array.isArray(o)){for(const s in o)if(s!=="default"&&!(s in e)){const l=Object.getOwnPropertyDescriptor(o,s);l&&Object.defineProperty(e,s,l.get?l:{enumerable:!0,get:()=>o[s]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const l of s)if(l.type==="childList")for(const d of l.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&o(d)}).observe(document,{childList:!0,subtree:!0});function i(s){const l={};return s.integrity&&(l.integrity=s.integrity),s.referrerPolicy&&(l.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?l.credentials="include":s.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function o(s){if(s.ep)return;s.ep=!0;const l=i(s);fetch(s.href,l)}})();function j6(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var wp={exports:{}},nl={};var Wx;function k6(){if(Wx)return nl;Wx=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function i(o,s,l){var d=null;if(l!==void 0&&(d=""+l),s.key!==void 0&&(d=""+s.key),"key"in s){l={};for(var f in s)f!=="key"&&(l[f]=s[f])}else l=s;return s=l.ref,{$$typeof:e,type:o,key:d,ref:s!==void 0?s:null,props:l}}return nl.Fragment=t,nl.jsx=i,nl.jsxs=i,nl}var Zx;function M6(){return Zx||(Zx=1,wp.exports=k6()),wp.exports}var v=M6(),_p={exports:{}},De={};var Jx;function D6(){if(Jx)return De;Jx=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.portal"),i=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),s=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),d=Symbol.for("react.context"),f=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),m=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),y=Symbol.for("react.activity"),b=Symbol.iterator;function _(M){return M===null||typeof M!="object"?null:(M=b&&M[b]||M["@@iterator"],typeof M=="function"?M:null)}var E={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},T=Object.assign,O={};function D(M,q,oe){this.props=M,this.context=q,this.refs=O,this.updater=oe||E}D.prototype.isReactComponent={},D.prototype.setState=function(M,q){if(typeof M!="object"&&typeof M!="function"&&M!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,M,q,"setState")},D.prototype.forceUpdate=function(M){this.updater.enqueueForceUpdate(this,M,"forceUpdate")};function C(){}C.prototype=D.prototype;function z(M,q,oe){this.props=M,this.context=q,this.refs=O,this.updater=oe||E}var B=z.prototype=new C;B.constructor=z,T(B,D.prototype),B.isPureReactComponent=!0;var H=Array.isArray;function ne(){}var X={H:null,A:null,T:null,S:null},A=Object.prototype.hasOwnProperty;function le(M,q,oe){var de=oe.ref;return{$$typeof:e,type:M,key:q,ref:de!==void 0?de:null,props:oe}}function ee(M,q){return le(M.type,q,M.props)}function J(M){return typeof M=="object"&&M!==null&&M.$$typeof===e}function ce(M){var q={"=":"=0",":":"=2"};return"$"+M.replace(/[=:]/g,function(oe){return q[oe]})}var _e=/\/+/g;function ie(M,q){return typeof M=="object"&&M!==null&&M.key!=null?ce(""+M.key):q.toString(36)}function xe(M){switch(M.status){case"fulfilled":return M.value;case"rejected":throw M.reason;default:switch(typeof M.status=="string"?M.then(ne,ne):(M.status="pending",M.then(function(q){M.status==="pending"&&(M.status="fulfilled",M.value=q)},function(q){M.status==="pending"&&(M.status="rejected",M.reason=q)})),M.status){case"fulfilled":return M.value;case"rejected":throw M.reason}}throw M}function N(M,q,oe,de,Se){var Ee=typeof M;(Ee==="undefined"||Ee==="boolean")&&(M=null);var $e=!1;if(M===null)$e=!0;else switch(Ee){case"bigint":case"string":case"number":$e=!0;break;case"object":switch(M.$$typeof){case e:case t:$e=!0;break;case g:return $e=M._init,N($e(M._payload),q,oe,de,Se)}}if($e)return Se=Se(M),$e=de===""?"."+ie(M,0):de,H(Se)?(oe="",$e!=null&&(oe=$e.replace(_e,"$&/")+"/"),N(Se,q,oe,"",function(eo){return eo})):Se!=null&&(J(Se)&&(Se=ee(Se,oe+(Se.key==null||M&&M.key===Se.key?"":(""+Se.key).replace(_e,"$&/")+"/")+$e)),q.push(Se)),1;$e=0;var jt=de===""?".":de+":";if(H(M))for(var st=0;st<M.length;st++)de=M[st],Ee=jt+ie(de,st),$e+=N(de,q,oe,Ee,Se);else if(st=_(M),typeof st=="function")for(M=st.call(M),st=0;!(de=M.next()).done;)de=de.value,Ee=jt+ie(de,st++),$e+=N(de,q,oe,Ee,Se);else if(Ee==="object"){if(typeof M.then=="function")return N(xe(M),q,oe,de,Se);throw q=String(M),Error("Objects are not valid as a React child (found: "+(q==="[object Object]"?"object with keys {"+Object.keys(M).join(", ")+"}":q)+"). If you meant to render a collection of children, use an array instead.")}return $e}function Q(M,q,oe){if(M==null)return M;var de=[],Se=0;return N(M,de,"","",function(Ee){return q.call(oe,Ee,Se++)}),de}function se(M){if(M._status===-1){var q=M._result;q=q(),q.then(function(oe){(M._status===0||M._status===-1)&&(M._status=1,M._result=oe)},function(oe){(M._status===0||M._status===-1)&&(M._status=2,M._result=oe)}),M._status===-1&&(M._status=0,M._result=q)}if(M._status===1)return M._result.default;throw M._result}var he=typeof reportError=="function"?reportError:function(M){if(typeof window=="object"&&typeof window.ErrorEvent=="function"){var q=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof M=="object"&&M!==null&&typeof M.message=="string"?String(M.message):String(M),error:M});if(!window.dispatchEvent(q))return}else if(typeof process=="object"&&typeof process.emit=="function"){process.emit("uncaughtException",M);return}console.error(M)},Te={map:Q,forEach:function(M,q,oe){Q(M,function(){q.apply(this,arguments)},oe)},count:function(M){var q=0;return Q(M,function(){q++}),q},toArray:function(M){return Q(M,function(q){return q})||[]},only:function(M){if(!J(M))throw Error("React.Children.only expected to receive a single React element child.");return M}};return De.Activity=y,De.Children=Te,De.Component=D,De.Fragment=i,De.Profiler=s,De.PureComponent=z,De.StrictMode=o,De.Suspense=h,De.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=X,De.__COMPILER_RUNTIME={__proto__:null,c:function(M){return X.H.useMemoCache(M)}},De.cache=function(M){return function(){return M.apply(null,arguments)}},De.cacheSignal=function(){return null},De.cloneElement=function(M,q,oe){if(M==null)throw Error("The argument must be a React element, but you passed "+M+".");var de=T({},M.props),Se=M.key;if(q!=null)for(Ee in q.key!==void 0&&(Se=""+q.key),q)!A.call(q,Ee)||Ee==="key"||Ee==="__self"||Ee==="__source"||Ee==="ref"&&q.ref===void 0||(de[Ee]=q[Ee]);var Ee=arguments.length-2;if(Ee===1)de.children=oe;else if(1<Ee){for(var $e=Array(Ee),jt=0;jt<Ee;jt++)$e[jt]=arguments[jt+2];de.children=$e}return le(M.type,Se,de)},De.createContext=function(M){return M={$$typeof:d,_currentValue:M,_currentValue2:M,_threadCount:0,Provider:null,Consumer:null},M.Provider=M,M.Consumer={$$typeof:l,_context:M},M},De.createElement=function(M,q,oe){var de,Se={},Ee=null;if(q!=null)for(de in q.key!==void 0&&(Ee=""+q.key),q)A.call(q,de)&&de!=="key"&&de!=="__self"&&de!=="__source"&&(Se[de]=q[de]);var $e=arguments.length-2;if($e===1)Se.children=oe;else if(1<$e){for(var jt=Array($e),st=0;st<$e;st++)jt[st]=arguments[st+2];Se.children=jt}if(M&&M.defaultProps)for(de in $e=M.defaultProps,$e)Se[de]===void 0&&(Se[de]=$e[de]);return le(M,Ee,Se)},De.createRef=function(){return{current:null}},De.forwardRef=function(M){return{$$typeof:f,render:M}},De.isValidElement=J,De.lazy=function(M){return{$$typeof:g,_payload:{_status:-1,_result:M},_init:se}},De.memo=function(M,q){return{$$typeof:m,type:M,compare:q===void 0?null:q}},De.startTransition=function(M){var q=X.T,oe={};X.T=oe;try{var de=M(),Se=X.S;Se!==null&&Se(oe,de),typeof de=="object"&&de!==null&&typeof de.then=="function"&&de.then(ne,he)}catch(Ee){he(Ee)}finally{q!==null&&oe.types!==null&&(q.types=oe.types),X.T=q}},De.unstable_useCacheRefresh=function(){return X.H.useCacheRefresh()},De.use=function(M){return X.H.use(M)},De.useActionState=function(M,q,oe){return X.H.useActionState(M,q,oe)},De.useCallback=function(M,q){return X.H.useCallback(M,q)},De.useContext=function(M){return X.H.useContext(M)},De.useDebugValue=function(){},De.useDeferredValue=function(M,q){return X.H.useDeferredValue(M,q)},De.useEffect=function(M,q){return X.H.useEffect(M,q)},De.useEffectEvent=function(M){return X.H.useEffectEvent(M)},De.useId=function(){return X.H.useId()},De.useImperativeHandle=function(M,q,oe){return X.H.useImperativeHandle(M,q,oe)},De.useInsertionEffect=function(M,q){return X.H.useInsertionEffect(M,q)},De.useLayoutEffect=function(M,q){return X.H.useLayoutEffect(M,q)},De.useMemo=function(M,q){return X.H.useMemo(M,q)},De.useOptimistic=function(M,q){return X.H.useOptimistic(M,q)},De.useReducer=function(M,q,oe){return X.H.useReducer(M,q,oe)},De.useRef=function(M){return X.H.useRef(M)},De.useState=function(M){return X.H.useState(M)},De.useSyncExternalStore=function(M,q,oe){return X.H.useSyncExternalStore(M,q,oe)},De.useTransition=function(){return X.H.useTransition()},De.version="19.2.6",De}var e1;function Kv(){return e1||(e1=1,_p.exports=D6()),_p.exports}var w=Kv();const z6=j6(w),P6=R6({__proto__:null,default:z6},[w]);var Sp={exports:{}},ol={},Ep={exports:{}},Tp={};var t1;function L6(){return t1||(t1=1,(function(e){function t(N,Q){var se=N.length;N.push(Q);e:for(;0<se;){var he=se-1>>>1,Te=N[he];if(0<s(Te,Q))N[he]=Q,N[se]=Te,se=he;else break e}}function i(N){return N.length===0?null:N[0]}function o(N){if(N.length===0)return null;var Q=N[0],se=N.pop();if(se!==Q){N[0]=se;e:for(var he=0,Te=N.length,M=Te>>>1;he<M;){var q=2*(he+1)-1,oe=N[q],de=q+1,Se=N[de];if(0>s(oe,se))de<Te&&0>s(Se,oe)?(N[he]=Se,N[de]=se,he=de):(N[he]=oe,N[q]=se,he=q);else if(de<Te&&0>s(Se,se))N[he]=Se,N[de]=se,he=de;else break e}}return Q}function s(N,Q){var se=N.sortIndex-Q.sortIndex;return se!==0?se:N.id-Q.id}if(e.unstable_now=void 0,typeof performance=="object"&&typeof performance.now=="function"){var l=performance;e.unstable_now=function(){return l.now()}}else{var d=Date,f=d.now();e.unstable_now=function(){return d.now()-f}}var h=[],m=[],g=1,y=null,b=3,_=!1,E=!1,T=!1,O=!1,D=typeof setTimeout=="function"?setTimeout:null,C=typeof clearTimeout=="function"?clearTimeout:null,z=typeof setImmediate<"u"?setImmediate:null;function B(N){for(var Q=i(m);Q!==null;){if(Q.callback===null)o(m);else if(Q.startTime<=N)o(m),Q.sortIndex=Q.expirationTime,t(h,Q);else break;Q=i(m)}}function H(N){if(T=!1,B(N),!E)if(i(h)!==null)E=!0,ne||(ne=!0,ce());else{var Q=i(m);Q!==null&&xe(H,Q.startTime-N)}}var ne=!1,X=-1,A=5,le=-1;function ee(){return O?!0:!(e.unstable_now()-le<A)}function J(){if(O=!1,ne){var N=e.unstable_now();le=N;var Q=!0;try{e:{E=!1,T&&(T=!1,C(X),X=-1),_=!0;var se=b;try{t:{for(B(N),y=i(h);y!==null&&!(y.expirationTime>N&&ee());){var he=y.callback;if(typeof he=="function"){y.callback=null,b=y.priorityLevel;var Te=he(y.expirationTime<=N);if(N=e.unstable_now(),typeof Te=="function"){y.callback=Te,B(N),Q=!0;break t}y===i(h)&&o(h),B(N)}else o(h);y=i(h)}if(y!==null)Q=!0;else{var M=i(m);M!==null&&xe(H,M.startTime-N),Q=!1}}break e}finally{y=null,b=se,_=!1}Q=void 0}}finally{Q?ce():ne=!1}}}var ce;if(typeof z=="function")ce=function(){z(J)};else if(typeof MessageChannel<"u"){var _e=new MessageChannel,ie=_e.port2;_e.port1.onmessage=J,ce=function(){ie.postMessage(null)}}else ce=function(){D(J,0)};function xe(N,Q){X=D(function(){N(e.unstable_now())},Q)}e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(N){N.callback=null},e.unstable_forceFrameRate=function(N){0>N||125<N?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):A=0<N?Math.floor(1e3/N):5},e.unstable_getCurrentPriorityLevel=function(){return b},e.unstable_next=function(N){switch(b){case 1:case 2:case 3:var Q=3;break;default:Q=b}var se=b;b=Q;try{return N()}finally{b=se}},e.unstable_requestPaint=function(){O=!0},e.unstable_runWithPriority=function(N,Q){switch(N){case 1:case 2:case 3:case 4:case 5:break;default:N=3}var se=b;b=N;try{return Q()}finally{b=se}},e.unstable_scheduleCallback=function(N,Q,se){var he=e.unstable_now();switch(typeof se=="object"&&se!==null?(se=se.delay,se=typeof se=="number"&&0<se?he+se:he):se=he,N){case 1:var Te=-1;break;case 2:Te=250;break;case 5:Te=1073741823;break;case 4:Te=1e4;break;default:Te=5e3}return Te=se+Te,N={id:g++,callback:Q,priorityLevel:N,startTime:se,expirationTime:Te,sortIndex:-1},se>he?(N.sortIndex=se,t(m,N),i(h)===null&&N===i(m)&&(T?(C(X),X=-1):T=!0,xe(H,se-he))):(N.sortIndex=Te,t(h,N),E||_||(E=!0,ne||(ne=!0,ce()))),N},e.unstable_shouldYield=ee,e.unstable_wrapCallback=function(N){var Q=b;return function(){var se=b;b=Q;try{return N.apply(this,arguments)}finally{b=se}}}})(Tp)),Tp}var r1;function N6(){return r1||(r1=1,Ep.exports=L6()),Ep.exports}var Op={exports:{}},Xt={};var i1;function $6(){if(i1)return Xt;i1=1;var e=Kv();function t(h){var m="https://react.dev/errors/"+h;if(1<arguments.length){m+="?args[]="+encodeURIComponent(arguments[1]);for(var g=2;g<arguments.length;g++)m+="&args[]="+encodeURIComponent(arguments[g])}return"Minified React error #"+h+"; visit "+m+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function i(){}var o={d:{f:i,r:function(){throw Error(t(522))},D:i,C:i,L:i,m:i,X:i,S:i,M:i},p:0,findDOMNode:null},s=Symbol.for("react.portal");function l(h,m,g){var y=3<arguments.length&&arguments[3]!==void 0?arguments[3]:null;return{$$typeof:s,key:y==null?null:""+y,children:h,containerInfo:m,implementation:g}}var d=e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;function f(h,m){if(h==="font")return"";if(typeof m=="string")return m==="use-credentials"?m:""}return Xt.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=o,Xt.createPortal=function(h,m){var g=2<arguments.length&&arguments[2]!==void 0?arguments[2]:null;if(!m||m.nodeType!==1&&m.nodeType!==9&&m.nodeType!==11)throw Error(t(299));return l(h,m,null,g)},Xt.flushSync=function(h){var m=d.T,g=o.p;try{if(d.T=null,o.p=2,h)return h()}finally{d.T=m,o.p=g,o.d.f()}},Xt.preconnect=function(h,m){typeof h=="string"&&(m?(m=m.crossOrigin,m=typeof m=="string"?m==="use-credentials"?m:"":void 0):m=null,o.d.C(h,m))},Xt.prefetchDNS=function(h){typeof h=="string"&&o.d.D(h)},Xt.preinit=function(h,m){if(typeof h=="string"&&m&&typeof m.as=="string"){var g=m.as,y=f(g,m.crossOrigin),b=typeof m.integrity=="string"?m.integrity:void 0,_=typeof m.fetchPriority=="string"?m.fetchPriority:void 0;g==="style"?o.d.S(h,typeof m.precedence=="string"?m.precedence:void 0,{crossOrigin:y,integrity:b,fetchPriority:_}):g==="script"&&o.d.X(h,{crossOrigin:y,integrity:b,fetchPriority:_,nonce:typeof m.nonce=="string"?m.nonce:void 0})}},Xt.preinitModule=function(h,m){if(typeof h=="string")if(typeof m=="object"&&m!==null){if(m.as==null||m.as==="script"){var g=f(m.as,m.crossOrigin);o.d.M(h,{crossOrigin:g,integrity:typeof m.integrity=="string"?m.integrity:void 0,nonce:typeof m.nonce=="string"?m.nonce:void 0})}}else m==null&&o.d.M(h)},Xt.preload=function(h,m){if(typeof h=="string"&&typeof m=="object"&&m!==null&&typeof m.as=="string"){var g=m.as,y=f(g,m.crossOrigin);o.d.L(h,g,{crossOrigin:y,integrity:typeof m.integrity=="string"?m.integrity:void 0,nonce:typeof m.nonce=="string"?m.nonce:void 0,type:typeof m.type=="string"?m.type:void 0,fetchPriority:typeof m.fetchPriority=="string"?m.fetchPriority:void 0,referrerPolicy:typeof m.referrerPolicy=="string"?m.referrerPolicy:void 0,imageSrcSet:typeof m.imageSrcSet=="string"?m.imageSrcSet:void 0,imageSizes:typeof m.imageSizes=="string"?m.imageSizes:void 0,media:typeof m.media=="string"?m.media:void 0})}},Xt.preloadModule=function(h,m){if(typeof h=="string")if(m){var g=f(m.as,m.crossOrigin);o.d.m(h,{as:typeof m.as=="string"&&m.as!=="script"?m.as:void 0,crossOrigin:g,integrity:typeof m.integrity=="string"?m.integrity:void 0})}else o.d.m(h)},Xt.requestFormReset=function(h){o.d.r(h)},Xt.unstable_batchedUpdates=function(h,m){return h(m)},Xt.useFormState=function(h,m,g){return d.H.useFormState(h,m,g)},Xt.useFormStatus=function(){return d.H.useHostTransitionStatus()},Xt.version="19.2.6",Xt}var n1;function C_(){if(n1)return Op.exports;n1=1;function e(){if(!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}return e(),Op.exports=$6(),Op.exports}var o1;function B6(){if(o1)return ol;o1=1;var e=N6(),t=Kv(),i=C_();function o(r){var n="https://react.dev/errors/"+r;if(1<arguments.length){n+="?args[]="+encodeURIComponent(arguments[1]);for(var a=2;a<arguments.length;a++)n+="&args[]="+encodeURIComponent(arguments[a])}return"Minified React error #"+r+"; visit "+n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function s(r){return!(!r||r.nodeType!==1&&r.nodeType!==9&&r.nodeType!==11)}function l(r){var n=r,a=r;if(r.alternate)for(;n.return;)n=n.return;else{r=n;do n=r,(n.flags&4098)!==0&&(a=n.return),r=n.return;while(r)}return n.tag===3?a:null}function d(r){if(r.tag===13){var n=r.memoizedState;if(n===null&&(r=r.alternate,r!==null&&(n=r.memoizedState)),n!==null)return n.dehydrated}return null}function f(r){if(r.tag===31){var n=r.memoizedState;if(n===null&&(r=r.alternate,r!==null&&(n=r.memoizedState)),n!==null)return n.dehydrated}return null}function h(r){if(l(r)!==r)throw Error(o(188))}function m(r){var n=r.alternate;if(!n){if(n=l(r),n===null)throw Error(o(188));return n!==r?null:r}for(var a=r,c=n;;){var u=a.return;if(u===null)break;var p=u.alternate;if(p===null){if(c=u.return,c!==null){a=c;continue}break}if(u.child===p.child){for(p=u.child;p;){if(p===a)return h(u),r;if(p===c)return h(u),n;p=p.sibling}throw Error(o(188))}if(a.return!==c.return)a=u,c=p;else{for(var x=!1,S=u.child;S;){if(S===a){x=!0,a=u,c=p;break}if(S===c){x=!0,c=u,a=p;break}S=S.sibling}if(!x){for(S=p.child;S;){if(S===a){x=!0,a=p,c=u;break}if(S===c){x=!0,c=p,a=u;break}S=S.sibling}if(!x)throw Error(o(189))}}if(a.alternate!==c)throw Error(o(190))}if(a.tag!==3)throw Error(o(188));return a.stateNode.current===a?r:n}function g(r){var n=r.tag;if(n===5||n===26||n===27||n===6)return r;for(r=r.child;r!==null;){if(n=g(r),n!==null)return n;r=r.sibling}return null}var y=Object.assign,b=Symbol.for("react.element"),_=Symbol.for("react.transitional.element"),E=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),z=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),H=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ee=Symbol.for("react.memo_cache_sentinel"),J=Symbol.iterator;function ce(r){return r===null||typeof r!="object"?null:(r=J&&r[J]||r["@@iterator"],typeof r=="function"?r:null)}var _e=Symbol.for("react.client.reference");function ie(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===_e?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case T:return"Fragment";case D:return"Profiler";case O:return"StrictMode";case H:return"Suspense";case ne:return"SuspenseList";case le:return"Activity"}if(typeof r=="object")switch(r.$$typeof){case E:return"Portal";case z:return r.displayName||"Context";case C:return(r._context.displayName||"Context")+".Consumer";case B:var n=r.render;return r=r.displayName,r||(r=n.displayName||n.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case X:return n=r.displayName||null,n!==null?n:ie(r.type)||"Memo";case A:n=r._payload,r=r._init;try{return ie(r(n))}catch{}}return null}var xe=Array.isArray,N=t.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=i.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,se={pending:!1,data:null,method:null,action:null},he=[],Te=-1;function M(r){return{current:r}}function q(r){0>Te||(r.current=he[Te],he[Te]=null,Te--)}function oe(r,n){Te++,he[Te]=r.current,r.current=n}var de=M(null),Se=M(null),Ee=M(null),$e=M(null);function jt(r,n){switch(oe(Ee,n),oe(Se,r),oe(de,null),n.nodeType){case 9:case 11:r=(r=n.documentElement)&&(r=r.namespaceURI)?xx(r):0;break;default:if(r=n.tagName,n=n.namespaceURI)n=xx(n),r=wx(n,r);else switch(r){case"svg":r=1;break;case"math":r=2;break;default:r=0}}q(de),oe(de,r)}function st(){q(de),q(Se),q(Ee)}function eo(r){r.memoizedState!==null&&oe($e,r);var n=de.current,a=wx(n,r.type);n!==a&&(oe(Se,r),oe(de,a))}function Ko(r){Se.current===r&&(q(de),q(Se)),$e.current===r&&(q($e),el._currentValue=se)}var ds,Lt;function fr(r){if(ds===void 0)try{throw Error()}catch(a){var n=a.stack.trim().match(/\n( *(at )?)/);ds=n&&n[1]||"",Lt=-1<a.stack.indexOf(`
+    at`)?" (<anonymous>)":-1<a.stack.indexOf("@")?"@unknown:0:0":""}return`
+`+ds+r+Lt}var Go=!1;function us(r,n){if(!r||Go)return"";Go=!0;var a=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var c={DetermineComponentFrameRoot:function(){try{if(n){var Z=function(){throw Error()};if(Object.defineProperty(Z.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Z,[])}catch(G){var F=G}Reflect.construct(r,[],Z)}else{try{Z.call()}catch(G){F=G}r.call(Z.prototype)}}else{try{throw Error()}catch(G){F=G}(Z=r())&&typeof Z.catch=="function"&&Z.catch(function(){})}}catch(G){if(G&&F&&typeof G.stack=="string")return[G.stack,F.stack]}return[null,null]}};c.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var u=Object.getOwnPropertyDescriptor(c.DetermineComponentFrameRoot,"name");u&&u.configurable&&Object.defineProperty(c.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var p=c.DetermineComponentFrameRoot(),x=p[0],S=p[1];if(x&&S){var R=x.split(`
+`),I=S.split(`
+`);for(u=c=0;c<R.length&&!R[c].includes("DetermineComponentFrameRoot");)c++;for(;u<I.length&&!I[u].includes("DetermineComponentFrameRoot");)u++;if(c===R.length||u===I.length)for(c=R.length-1,u=I.length-1;1<=c&&0<=u&&R[c]!==I[u];)u--;for(;1<=c&&0<=u;c--,u--)if(R[c]!==I[u]){if(c!==1||u!==1)do if(c--,u--,0>u||R[c]!==I[u]){var Y=`
+`+R[c].replace(" at new "," at ");return r.displayName&&Y.includes("<anonymous>")&&(Y=Y.replace("<anonymous>",r.displayName)),Y}while(1<=c&&0<=u);break}}}finally{Go=!1,Error.prepareStackTrace=a}return(a=r?r.displayName||r.name:"")?fr(a):""}function zi(r,n){switch(r.tag){case 26:case 27:case 5:return fr(r.type);case 16:return fr("Lazy");case 13:return r.child!==n&&n!==null?fr("Suspense Fallback"):fr("Suspense");case 19:return fr("SuspenseList");case 0:case 15:return us(r.type,!1);case 11:return us(r.type.render,!1);case 1:return us(r.type,!0);case 31:return fr("Activity");default:return""}}function Cc(r){try{var n="",a=null;do n+=zi(r,a),a=r,r=r.return;while(r);return n}catch(c){return`
+Error generating stack: `+c.message+`
+`+c.stack}}var fs=Object.prototype.hasOwnProperty,Yo=e.unstable_scheduleCallback,hs=e.unstable_cancelCallback,df=e.unstable_shouldYield,uf=e.unstable_requestPaint,tr=e.unstable_now,Pi=e.unstable_getCurrentPriorityLevel,un=e.unstable_ImmediatePriority,ps=e.unstable_UserBlockingPriority,fn=e.unstable_NormalPriority,ei=e.unstable_LowPriority,Dr=e.unstable_IdlePriority,ff=e.log,hf=e.unstable_setDisableYieldValue,Li=null,rr=null;function Ut(r){if(typeof ff=="function"&&hf(r),rr&&typeof rr.setStrictMode=="function")try{rr.setStrictMode(Li,r)}catch{}}var Qt=Math.clz32?Math.clz32:pf,Ac=Math.log,Rc=Math.LN2;function pf(r){return r>>>=0,r===0?32:31-(Ac(r)/Rc|0)|0}var to=256,Ni=262144,ro=4194304;function ti(r){var n=r&42;if(n!==0)return n;switch(r&-r){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return r&261888;case 262144:case 524288:case 1048576:case 2097152:return r&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return r&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return r}}function Qo(r,n,a){var c=r.pendingLanes;if(c===0)return 0;var u=0,p=r.suspendedLanes,x=r.pingedLanes;r=r.warmLanes;var S=c&134217727;return S!==0?(c=S&~p,c!==0?u=ti(c):(x&=S,x!==0?u=ti(x):a||(a=S&~r,a!==0&&(u=ti(a))))):(S=c&~p,S!==0?u=ti(S):x!==0?u=ti(x):a||(a=c&~r,a!==0&&(u=ti(a)))),u===0?0:n!==0&&n!==u&&(n&p)===0&&(p=u&-u,a=n&-n,p>=a||p===32&&(a&4194048)!==0)?n:u}function hn(r,n){return(r.pendingLanes&~(r.suspendedLanes&~r.pingedLanes)&n)===0}function mf(r,n){switch(r){case 1:case 2:case 4:case 8:case 64:return n+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return n+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function ms(){var r=ro;return ro<<=1,(ro&62914560)===0&&(ro=4194304),r}function pn(r){for(var n=[],a=0;31>a;a++)n.push(r);return n}function vi(r,n){r.pendingLanes|=n,n!==268435456&&(r.suspendedLanes=0,r.pingedLanes=0,r.warmLanes=0)}function jc(r,n,a,c,u,p){var x=r.pendingLanes;r.pendingLanes=a,r.suspendedLanes=0,r.pingedLanes=0,r.warmLanes=0,r.expiredLanes&=a,r.entangledLanes&=a,r.errorRecoveryDisabledLanes&=a,r.shellSuspendCounter=0;var S=r.entanglements,R=r.expirationTimes,I=r.hiddenUpdates;for(a=x&~a;0<a;){var Y=31-Qt(a),Z=1<<Y;S[Y]=0,R[Y]=-1;var F=I[Y];if(F!==null)for(I[Y]=null,Y=0;Y<F.length;Y++){var G=F[Y];G!==null&&(G.lane&=-536870913)}a&=~Z}c!==0&&kc(r,c,0),p!==0&&u===0&&r.tag!==0&&(r.suspendedLanes|=p&~(x&~n))}function kc(r,n,a){r.pendingLanes|=n,r.suspendedLanes&=~n;var c=31-Qt(n);r.entangledLanes|=n,r.entanglements[c]=r.entanglements[c]|1073741824|a&261930}function Mc(r,n){var a=r.entangledLanes|=n;for(r=r.entanglements;a;){var c=31-Qt(a),u=1<<c;u&n|r[c]&n&&(r[c]|=n),a&=~u}}function k(r,n){var a=n&-n;return a=(a&42)!==0?1:L(a),(a&(r.suspendedLanes|n))!==0?0:a}function L(r){switch(r){case 2:r=1;break;case 8:r=4;break;case 32:r=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:r=128;break;case 268435456:r=134217728;break;default:r=0}return r}function V(r){return r&=-r,2<r?8<r?(r&134217727)!==0?32:268435456:8:2}function te(){var r=Q.p;return r!==0?r:(r=window.event,r===void 0?32:Hx(r.type))}function re(r,n){var a=Q.p;try{return Q.p=r,n()}finally{Q.p=a}}var ge=Math.random().toString(36).slice(2),fe="__reactFiber$"+ge,me="__reactProps$"+ge,pe="__reactContainer$"+ge,Ae="__reactEvents$"+ge,Re="__reactListeners$"+ge,ze="__reactHandles$"+ge,ke="__reactResources$"+ge,Be="__reactMarker$"+ge;function Qe(r){delete r[fe],delete r[me],delete r[Ae],delete r[Re],delete r[ze]}function pt(r){var n=r[fe];if(n)return n;for(var a=r.parentNode;a;){if(n=a[pe]||a[fe]){if(a=n.alternate,n.child!==null||a!==null&&a.child!==null)for(r=Ax(r);r!==null;){if(a=r[fe])return a;r=Ax(r)}return n}r=a,a=r.parentNode}return null}function Je(r){if(r=r[fe]||r[pe]){var n=r.tag;if(n===5||n===6||n===13||n===31||n===26||n===27||n===3)return r}return null}function Ke(r){var n=r.tag;if(n===5||n===26||n===27||n===6)return r.stateNode;throw Error(o(33))}function Tt(r){var n=r[ke];return n||(n=r[ke]={hoistableStyles:new Map,hoistableScripts:new Map}),n}function Ge(r){r[Be]=!0}var mn=new Set,ri={};function hr(r,n){ir(r,n),ir(r+"Capture",n)}function ir(r,n){for(ri[r]=n,r=0;r<n.length;r++)mn.add(n[r])}var zr=RegExp("^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"),Xo={},ii={};function Wo(r){return fs.call(ii,r)?!0:fs.call(Xo,r)?!1:zr.test(r)?ii[r]=!0:(Xo[r]=!0,!1)}function $i(r,n,a){if(Wo(n))if(a===null)r.removeAttribute(n);else{switch(typeof a){case"undefined":case"function":case"symbol":r.removeAttribute(n);return;case"boolean":var c=n.toLowerCase().slice(0,5);if(c!=="data-"&&c!=="aria-"){r.removeAttribute(n);return}}r.setAttribute(n,""+a)}}function Bi(r,n,a){if(a===null)r.removeAttribute(n);else{switch(typeof a){case"undefined":case"function":case"symbol":case"boolean":r.removeAttribute(n);return}r.setAttribute(n,""+a)}}function Me(r,n,a,c){if(c===null)r.removeAttribute(a);else{switch(typeof c){case"undefined":case"function":case"symbol":case"boolean":r.removeAttribute(a);return}r.setAttributeNS(n,a,""+c)}}function lt(r){switch(typeof r){case"bigint":case"boolean":case"number":case"string":case"undefined":return r;case"object":return r;default:return""}}function wr(r){var n=r.type;return(r=r.nodeName)&&r.toLowerCase()==="input"&&(n==="checkbox"||n==="radio")}function ni(r,n,a){var c=Object.getOwnPropertyDescriptor(r.constructor.prototype,n);if(!r.hasOwnProperty(n)&&typeof c<"u"&&typeof c.get=="function"&&typeof c.set=="function"){var u=c.get,p=c.set;return Object.defineProperty(r,n,{configurable:!0,get:function(){return u.call(this)},set:function(x){a=""+x,p.call(this,x)}}),Object.defineProperty(r,n,{enumerable:c.enumerable}),{getValue:function(){return a},setValue:function(x){a=""+x},stopTracking:function(){r._valueTracker=null,delete r[n]}}}}function Zo(r){if(!r._valueTracker){var n=wr(r)?"checked":"value";r._valueTracker=ni(r,n,""+r[n])}}function Jo(r){if(!r)return!1;var n=r._valueTracker;if(!n)return!0;var a=n.getValue(),c="";return r&&(c=wr(r)?r.checked?"true":"false":r.value),r=c,r!==a?(n.setValue(r),!0):!1}function et(r){if(r=r||(typeof document<"u"?document:void 0),typeof r>"u")return null;try{return r.activeElement||r.body}catch{return r.body}}var Ui=/[\n"\\]/g;function nr(r){return r.replace(Ui,function(n){return"\\"+n.charCodeAt(0).toString(16)+" "})}function vs(r,n,a,c,u,p,x,S){r.name="",x!=null&&typeof x!="function"&&typeof x!="symbol"&&typeof x!="boolean"?r.type=x:r.removeAttribute("type"),n!=null?x==="number"?(n===0&&r.value===""||r.value!=n)&&(r.value=""+lt(n)):r.value!==""+lt(n)&&(r.value=""+lt(n)):x!=="submit"&&x!=="reset"||r.removeAttribute("value"),n!=null?vf(r,x,lt(n)):a!=null?vf(r,x,lt(a)):c!=null&&r.removeAttribute("value"),u==null&&p!=null&&(r.defaultChecked=!!p),u!=null&&(r.checked=u&&typeof u!="function"&&typeof u!="symbol"),S!=null&&typeof S!="function"&&typeof S!="symbol"&&typeof S!="boolean"?r.name=""+lt(S):r.removeAttribute("name")}function py(r,n,a,c,u,p,x,S){if(p!=null&&typeof p!="function"&&typeof p!="symbol"&&typeof p!="boolean"&&(r.type=p),n!=null||a!=null){if(!(p!=="submit"&&p!=="reset"||n!=null)){Zo(r);return}a=a!=null?""+lt(a):"",n=n!=null?""+lt(n):a,S||n===r.value||(r.value=n),r.defaultValue=n}c=c??u,c=typeof c!="function"&&typeof c!="symbol"&&!!c,r.checked=S?r.checked:!!c,r.defaultChecked=!!c,x!=null&&typeof x!="function"&&typeof x!="symbol"&&typeof x!="boolean"&&(r.name=x),Zo(r)}function vf(r,n,a){n==="number"&&et(r.ownerDocument)===r||r.defaultValue===""+a||(r.defaultValue=""+a)}function ea(r,n,a,c){if(r=r.options,n){n={};for(var u=0;u<a.length;u++)n["$"+a[u]]=!0;for(a=0;a<r.length;a++)u=n.hasOwnProperty("$"+r[a].value),r[a].selected!==u&&(r[a].selected=u),u&&c&&(r[a].defaultSelected=!0)}else{for(a=""+lt(a),n=null,u=0;u<r.length;u++){if(r[u].value===a){r[u].selected=!0,c&&(r[u].defaultSelected=!0);return}n!==null||r[u].disabled||(n=r[u])}n!==null&&(n.selected=!0)}}function my(r,n,a){if(n!=null&&(n=""+lt(n),n!==r.value&&(r.value=n),a==null)){r.defaultValue!==n&&(r.defaultValue=n);return}r.defaultValue=a!=null?""+lt(a):""}function vy(r,n,a,c){if(n==null){if(c!=null){if(a!=null)throw Error(o(92));if(xe(c)){if(1<c.length)throw Error(o(93));c=c[0]}a=c}a==null&&(a=""),n=a}a=lt(n),r.defaultValue=a,c=r.textContent,c===a&&c!==""&&c!==null&&(r.value=c),Zo(r)}function ta(r,n){if(n){var a=r.firstChild;if(a&&a===r.lastChild&&a.nodeType===3){a.nodeValue=n;return}}r.textContent=n}var EE=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "));function gy(r,n,a){var c=n.indexOf("--")===0;a==null||typeof a=="boolean"||a===""?c?r.setProperty(n,""):n==="float"?r.cssFloat="":r[n]="":c?r.setProperty(n,a):typeof a!="number"||a===0||EE.has(n)?n==="float"?r.cssFloat=a:r[n]=(""+a).trim():r[n]=a+"px"}function yy(r,n,a){if(n!=null&&typeof n!="object")throw Error(o(62));if(r=r.style,a!=null){for(var c in a)!a.hasOwnProperty(c)||n!=null&&n.hasOwnProperty(c)||(c.indexOf("--")===0?r.setProperty(c,""):c==="float"?r.cssFloat="":r[c]="");for(var u in n)c=n[u],n.hasOwnProperty(u)&&a[u]!==c&&gy(r,u,c)}else for(var p in n)n.hasOwnProperty(p)&&gy(r,p,n[p])}function gf(r){if(r.indexOf("-")===-1)return!1;switch(r){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var TE=new Map([["acceptCharset","accept-charset"],["htmlFor","for"],["httpEquiv","http-equiv"],["crossOrigin","crossorigin"],["accentHeight","accent-height"],["alignmentBaseline","alignment-baseline"],["arabicForm","arabic-form"],["baselineShift","baseline-shift"],["capHeight","cap-height"],["clipPath","clip-path"],["clipRule","clip-rule"],["colorInterpolation","color-interpolation"],["colorInterpolationFilters","color-interpolation-filters"],["colorProfile","color-profile"],["colorRendering","color-rendering"],["dominantBaseline","dominant-baseline"],["enableBackground","enable-background"],["fillOpacity","fill-opacity"],["fillRule","fill-rule"],["floodColor","flood-color"],["floodOpacity","flood-opacity"],["fontFamily","font-family"],["fontSize","font-size"],["fontSizeAdjust","font-size-adjust"],["fontStretch","font-stretch"],["fontStyle","font-style"],["fontVariant","font-variant"],["fontWeight","font-weight"],["glyphName","glyph-name"],["glyphOrientationHorizontal","glyph-orientation-horizontal"],["glyphOrientationVertical","glyph-orientation-vertical"],["horizAdvX","horiz-adv-x"],["horizOriginX","horiz-origin-x"],["imageRendering","image-rendering"],["letterSpacing","letter-spacing"],["lightingColor","lighting-color"],["markerEnd","marker-end"],["markerMid","marker-mid"],["markerStart","marker-start"],["overlinePosition","overline-position"],["overlineThickness","overline-thickness"],["paintOrder","paint-order"],["panose-1","panose-1"],["pointerEvents","pointer-events"],["renderingIntent","rendering-intent"],["shapeRendering","shape-rendering"],["stopColor","stop-color"],["stopOpacity","stop-opacity"],["strikethroughPosition","strikethrough-position"],["strikethroughThickness","strikethrough-thickness"],["strokeDasharray","stroke-dasharray"],["strokeDashoffset","stroke-dashoffset"],["strokeLinecap","stroke-linecap"],["strokeLinejoin","stroke-linejoin"],["strokeMiterlimit","stroke-miterlimit"],["strokeOpacity","stroke-opacity"],["strokeWidth","stroke-width"],["textAnchor","text-anchor"],["textDecoration","text-decoration"],["textRendering","text-rendering"],["transformOrigin","transform-origin"],["underlinePosition","underline-position"],["underlineThickness","underline-thickness"],["unicodeBidi","unicode-bidi"],["unicodeRange","unicode-range"],["unitsPerEm","units-per-em"],["vAlphabetic","v-alphabetic"],["vHanging","v-hanging"],["vIdeographic","v-ideographic"],["vMathematical","v-mathematical"],["vectorEffect","vector-effect"],["vertAdvY","vert-adv-y"],["vertOriginX","vert-origin-x"],["vertOriginY","vert-origin-y"],["wordSpacing","word-spacing"],["writingMode","writing-mode"],["xmlnsXlink","xmlns:xlink"],["xHeight","x-height"]]),OE=/^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;function Dc(r){return OE.test(""+r)?"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')":r}function Ii(){}var yf=null;function bf(r){return r=r.target||r.srcElement||window,r.correspondingUseElement&&(r=r.correspondingUseElement),r.nodeType===3?r.parentNode:r}var ra=null,ia=null;function by(r){var n=Je(r);if(n&&(r=n.stateNode)){var a=r[me]||null;e:switch(r=n.stateNode,n.type){case"input":if(vs(r,a.value,a.defaultValue,a.defaultValue,a.checked,a.defaultChecked,a.type,a.name),n=a.name,a.type==="radio"&&n!=null){for(a=r;a.parentNode;)a=a.parentNode;for(a=a.querySelectorAll('input[name="'+nr(""+n)+'"][type="radio"]'),n=0;n<a.length;n++){var c=a[n];if(c!==r&&c.form===r.form){var u=c[me]||null;if(!u)throw Error(o(90));vs(c,u.value,u.defaultValue,u.defaultValue,u.checked,u.defaultChecked,u.type,u.name)}}for(n=0;n<a.length;n++)c=a[n],c.form===r.form&&Jo(c)}break e;case"textarea":my(r,a.value,a.defaultValue);break e;case"select":n=a.value,n!=null&&ea(r,!!a.multiple,n,!1)}}}var xf=!1;function xy(r,n,a){if(xf)return r(n,a);xf=!0;try{var c=r(n);return c}finally{if(xf=!1,(ra!==null||ia!==null)&&(xd(),ra&&(n=ra,r=ia,ia=ra=null,by(n),r)))for(n=0;n<r.length;n++)by(r[n])}}function gs(r,n){var a=r.stateNode;if(a===null)return null;var c=a[me]||null;if(c===null)return null;a=c[n];e:switch(n){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(c=!c.disabled)||(r=r.type,c=!(r==="button"||r==="input"||r==="select"||r==="textarea")),r=!c;break e;default:r=!1}if(r)return null;if(a&&typeof a!="function")throw Error(o(231,n,typeof a));return a}var Vi=!(typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),wf=!1;if(Vi)try{var ys={};Object.defineProperty(ys,"passive",{get:function(){wf=!0}}),window.addEventListener("test",ys,ys),window.removeEventListener("test",ys,ys)}catch{wf=!1}var vn=null,_f=null,zc=null;function wy(){if(zc)return zc;var r,n=_f,a=n.length,c,u="value"in vn?vn.value:vn.textContent,p=u.length;for(r=0;r<a&&n[r]===u[r];r++);var x=a-r;for(c=1;c<=x&&n[a-c]===u[p-c];c++);return zc=u.slice(r,1<c?1-c:void 0)}function Pc(r){var n=r.keyCode;return"charCode"in r?(r=r.charCode,r===0&&n===13&&(r=13)):r=n,r===10&&(r=13),32<=r||r===13?r:0}function Lc(){return!0}function _y(){return!1}function pr(r){function n(a,c,u,p,x){this._reactName=a,this._targetInst=u,this.type=c,this.nativeEvent=p,this.target=x,this.currentTarget=null;for(var S in r)r.hasOwnProperty(S)&&(a=r[S],this[S]=a?a(p):p[S]);return this.isDefaultPrevented=(p.defaultPrevented!=null?p.defaultPrevented:p.returnValue===!1)?Lc:_y,this.isPropagationStopped=_y,this}return y(n.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():typeof a.returnValue!="unknown"&&(a.returnValue=!1),this.isDefaultPrevented=Lc)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():typeof a.cancelBubble!="unknown"&&(a.cancelBubble=!0),this.isPropagationStopped=Lc)},persist:function(){},isPersistent:Lc}),n}var io={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(r){return r.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},Nc=pr(io),bs=y({},io,{view:0,detail:0}),CE=pr(bs),Sf,Ef,xs,$c=y({},bs,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:Of,button:0,buttons:0,relatedTarget:function(r){return r.relatedTarget===void 0?r.fromElement===r.srcElement?r.toElement:r.fromElement:r.relatedTarget},movementX:function(r){return"movementX"in r?r.movementX:(r!==xs&&(xs&&r.type==="mousemove"?(Sf=r.screenX-xs.screenX,Ef=r.screenY-xs.screenY):Ef=Sf=0,xs=r),Sf)},movementY:function(r){return"movementY"in r?r.movementY:Ef}}),Sy=pr($c),AE=y({},$c,{dataTransfer:0}),RE=pr(AE),jE=y({},bs,{relatedTarget:0}),Tf=pr(jE),kE=y({},io,{animationName:0,elapsedTime:0,pseudoElement:0}),ME=pr(kE),DE=y({},io,{clipboardData:function(r){return"clipboardData"in r?r.clipboardData:window.clipboardData}}),zE=pr(DE),PE=y({},io,{data:0}),Ey=pr(PE),LE={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},NE={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},$E={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function BE(r){var n=this.nativeEvent;return n.getModifierState?n.getModifierState(r):(r=$E[r])?!!n[r]:!1}function Of(){return BE}var UE=y({},bs,{key:function(r){if(r.key){var n=LE[r.key]||r.key;if(n!=="Unidentified")return n}return r.type==="keypress"?(r=Pc(r),r===13?"Enter":String.fromCharCode(r)):r.type==="keydown"||r.type==="keyup"?NE[r.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:Of,charCode:function(r){return r.type==="keypress"?Pc(r):0},keyCode:function(r){return r.type==="keydown"||r.type==="keyup"?r.keyCode:0},which:function(r){return r.type==="keypress"?Pc(r):r.type==="keydown"||r.type==="keyup"?r.keyCode:0}}),IE=pr(UE),VE=y({},$c,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),Ty=pr(VE),FE=y({},bs,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:Of}),HE=pr(FE),qE=y({},io,{propertyName:0,elapsedTime:0,pseudoElement:0}),KE=pr(qE),GE=y({},$c,{deltaX:function(r){return"deltaX"in r?r.deltaX:"wheelDeltaX"in r?-r.wheelDeltaX:0},deltaY:function(r){return"deltaY"in r?r.deltaY:"wheelDeltaY"in r?-r.wheelDeltaY:"wheelDelta"in r?-r.wheelDelta:0},deltaZ:0,deltaMode:0}),YE=pr(GE),QE=y({},io,{newState:0,oldState:0}),XE=pr(QE),WE=[9,13,27,32],Cf=Vi&&"CompositionEvent"in window,ws=null;Vi&&"documentMode"in document&&(ws=document.documentMode);var ZE=Vi&&"TextEvent"in window&&!ws,Oy=Vi&&(!Cf||ws&&8<ws&&11>=ws),Cy=" ",Ay=!1;function Ry(r,n){switch(r){case"keyup":return WE.indexOf(n.keyCode)!==-1;case"keydown":return n.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function jy(r){return r=r.detail,typeof r=="object"&&"data"in r?r.data:null}var na=!1;function JE(r,n){switch(r){case"compositionend":return jy(n);case"keypress":return n.which!==32?null:(Ay=!0,Cy);case"textInput":return r=n.data,r===Cy&&Ay?null:r;default:return null}}function e5(r,n){if(na)return r==="compositionend"||!Cf&&Ry(r,n)?(r=wy(),zc=_f=vn=null,na=!1,r):null;switch(r){case"paste":return null;case"keypress":if(!(n.ctrlKey||n.altKey||n.metaKey)||n.ctrlKey&&n.altKey){if(n.char&&1<n.char.length)return n.char;if(n.which)return String.fromCharCode(n.which)}return null;case"compositionend":return Oy&&n.locale!=="ko"?null:n.data;default:return null}}var t5={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function ky(r){var n=r&&r.nodeName&&r.nodeName.toLowerCase();return n==="input"?!!t5[r.type]:n==="textarea"}function My(r,n,a,c){ra?ia?ia.push(c):ia=[c]:ra=c,n=Cd(n,"onChange"),0<n.length&&(a=new Nc("onChange","change",null,a,c),r.push({event:a,listeners:n}))}var _s=null,Ss=null;function r5(r){px(r,0)}function Bc(r){var n=Ke(r);if(Jo(n))return r}function Dy(r,n){if(r==="change")return n}var zy=!1;if(Vi){var Af;if(Vi){var Rf="oninput"in document;if(!Rf){var Py=document.createElement("div");Py.setAttribute("oninput","return;"),Rf=typeof Py.oninput=="function"}Af=Rf}else Af=!1;zy=Af&&(!document.documentMode||9<document.documentMode)}function Ly(){_s&&(_s.detachEvent("onpropertychange",Ny),Ss=_s=null)}function Ny(r){if(r.propertyName==="value"&&Bc(Ss)){var n=[];My(n,Ss,r,bf(r)),xy(r5,n)}}function i5(r,n,a){r==="focusin"?(Ly(),_s=n,Ss=a,_s.attachEvent("onpropertychange",Ny)):r==="focusout"&&Ly()}function n5(r){if(r==="selectionchange"||r==="keyup"||r==="keydown")return Bc(Ss)}function o5(r,n){if(r==="click")return Bc(n)}function a5(r,n){if(r==="input"||r==="change")return Bc(n)}function s5(r,n){return r===n&&(r!==0||1/r===1/n)||r!==r&&n!==n}var _r=typeof Object.is=="function"?Object.is:s5;function Es(r,n){if(_r(r,n))return!0;if(typeof r!="object"||r===null||typeof n!="object"||n===null)return!1;var a=Object.keys(r),c=Object.keys(n);if(a.length!==c.length)return!1;for(c=0;c<a.length;c++){var u=a[c];if(!fs.call(n,u)||!_r(r[u],n[u]))return!1}return!0}function $y(r){for(;r&&r.firstChild;)r=r.firstChild;return r}function By(r,n){var a=$y(r);r=0;for(var c;a;){if(a.nodeType===3){if(c=r+a.textContent.length,r<=n&&c>=n)return{node:a,offset:n-r};r=c}e:{for(;a;){if(a.nextSibling){a=a.nextSibling;break e}a=a.parentNode}a=void 0}a=$y(a)}}function Uy(r,n){return r&&n?r===n?!0:r&&r.nodeType===3?!1:n&&n.nodeType===3?Uy(r,n.parentNode):"contains"in r?r.contains(n):r.compareDocumentPosition?!!(r.compareDocumentPosition(n)&16):!1:!1}function Iy(r){r=r!=null&&r.ownerDocument!=null&&r.ownerDocument.defaultView!=null?r.ownerDocument.defaultView:window;for(var n=et(r.document);n instanceof r.HTMLIFrameElement;){try{var a=typeof n.contentWindow.location.href=="string"}catch{a=!1}if(a)r=n.contentWindow;else break;n=et(r.document)}return n}function jf(r){var n=r&&r.nodeName&&r.nodeName.toLowerCase();return n&&(n==="input"&&(r.type==="text"||r.type==="search"||r.type==="tel"||r.type==="url"||r.type==="password")||n==="textarea"||r.contentEditable==="true")}var l5=Vi&&"documentMode"in document&&11>=document.documentMode,oa=null,kf=null,Ts=null,Mf=!1;function Vy(r,n,a){var c=a.window===a?a.document:a.nodeType===9?a:a.ownerDocument;Mf||oa==null||oa!==et(c)||(c=oa,"selectionStart"in c&&jf(c)?c={start:c.selectionStart,end:c.selectionEnd}:(c=(c.ownerDocument&&c.ownerDocument.defaultView||window).getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset}),Ts&&Es(Ts,c)||(Ts=c,c=Cd(kf,"onSelect"),0<c.length&&(n=new Nc("onSelect","select",null,n,a),r.push({event:n,listeners:c}),n.target=oa)))}function no(r,n){var a={};return a[r.toLowerCase()]=n.toLowerCase(),a["Webkit"+r]="webkit"+n,a["Moz"+r]="moz"+n,a}var aa={animationend:no("Animation","AnimationEnd"),animationiteration:no("Animation","AnimationIteration"),animationstart:no("Animation","AnimationStart"),transitionrun:no("Transition","TransitionRun"),transitionstart:no("Transition","TransitionStart"),transitioncancel:no("Transition","TransitionCancel"),transitionend:no("Transition","TransitionEnd")},Df={},Fy={};Vi&&(Fy=document.createElement("div").style,"AnimationEvent"in window||(delete aa.animationend.animation,delete aa.animationiteration.animation,delete aa.animationstart.animation),"TransitionEvent"in window||delete aa.transitionend.transition);function oo(r){if(Df[r])return Df[r];if(!aa[r])return r;var n=aa[r],a;for(a in n)if(n.hasOwnProperty(a)&&a in Fy)return Df[r]=n[a];return r}var Hy=oo("animationend"),qy=oo("animationiteration"),Ky=oo("animationstart"),c5=oo("transitionrun"),d5=oo("transitionstart"),u5=oo("transitioncancel"),Gy=oo("transitionend"),Yy=new Map,zf="abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");zf.push("scrollEnd");function oi(r,n){Yy.set(r,n),hr(n,[r])}var Uc=typeof reportError=="function"?reportError:function(r){if(typeof window=="object"&&typeof window.ErrorEvent=="function"){var n=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof r=="object"&&r!==null&&typeof r.message=="string"?String(r.message):String(r),error:r});if(!window.dispatchEvent(n))return}else if(typeof process=="object"&&typeof process.emit=="function"){process.emit("uncaughtException",r);return}console.error(r)},Pr=[],sa=0,Pf=0;function Ic(){for(var r=sa,n=Pf=sa=0;n<r;){var a=Pr[n];Pr[n++]=null;var c=Pr[n];Pr[n++]=null;var u=Pr[n];Pr[n++]=null;var p=Pr[n];if(Pr[n++]=null,c!==null&&u!==null){var x=c.pending;x===null?u.next=u:(u.next=x.next,x.next=u),c.pending=u}p!==0&&Qy(a,u,p)}}function Vc(r,n,a,c){Pr[sa++]=r,Pr[sa++]=n,Pr[sa++]=a,Pr[sa++]=c,Pf|=c,r.lanes|=c,r=r.alternate,r!==null&&(r.lanes|=c)}function Lf(r,n,a,c){return Vc(r,n,a,c),Fc(r)}function ao(r,n){return Vc(r,null,null,n),Fc(r)}function Qy(r,n,a){r.lanes|=a;var c=r.alternate;c!==null&&(c.lanes|=a);for(var u=!1,p=r.return;p!==null;)p.childLanes|=a,c=p.alternate,c!==null&&(c.childLanes|=a),p.tag===22&&(r=p.stateNode,r===null||r._visibility&1||(u=!0)),r=p,p=p.return;return r.tag===3?(p=r.stateNode,u&&n!==null&&(u=31-Qt(a),r=p.hiddenUpdates,c=r[u],c===null?r[u]=[n]:c.push(n),n.lane=a|536870912),p):null}function Fc(r){if(50<Gs)throw Gs=0,qh=null,Error(o(185));for(var n=r.return;n!==null;)r=n,n=r.return;return r.tag===3?r.stateNode:null}var la={};function f5(r,n,a,c){this.tag=r,this.key=a,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.refCleanup=this.ref=null,this.pendingProps=n,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=c,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Sr(r,n,a,c){return new f5(r,n,a,c)}function Nf(r){return r=r.prototype,!(!r||!r.isReactComponent)}function Fi(r,n){var a=r.alternate;return a===null?(a=Sr(r.tag,n,r.key,r.mode),a.elementType=r.elementType,a.type=r.type,a.stateNode=r.stateNode,a.alternate=r,r.alternate=a):(a.pendingProps=n,a.type=r.type,a.flags=0,a.subtreeFlags=0,a.deletions=null),a.flags=r.flags&65011712,a.childLanes=r.childLanes,a.lanes=r.lanes,a.child=r.child,a.memoizedProps=r.memoizedProps,a.memoizedState=r.memoizedState,a.updateQueue=r.updateQueue,n=r.dependencies,a.dependencies=n===null?null:{lanes:n.lanes,firstContext:n.firstContext},a.sibling=r.sibling,a.index=r.index,a.ref=r.ref,a.refCleanup=r.refCleanup,a}function Xy(r,n){r.flags&=65011714;var a=r.alternate;return a===null?(r.childLanes=0,r.lanes=n,r.child=null,r.subtreeFlags=0,r.memoizedProps=null,r.memoizedState=null,r.updateQueue=null,r.dependencies=null,r.stateNode=null):(r.childLanes=a.childLanes,r.lanes=a.lanes,r.child=a.child,r.subtreeFlags=0,r.deletions=null,r.memoizedProps=a.memoizedProps,r.memoizedState=a.memoizedState,r.updateQueue=a.updateQueue,r.type=a.type,n=a.dependencies,r.dependencies=n===null?null:{lanes:n.lanes,firstContext:n.firstContext}),r}function Hc(r,n,a,c,u,p){var x=0;if(c=r,typeof r=="function")Nf(r)&&(x=1);else if(typeof r=="string")x=g6(r,a,de.current)?26:r==="html"||r==="head"||r==="body"?27:5;else e:switch(r){case le:return r=Sr(31,a,n,u),r.elementType=le,r.lanes=p,r;case T:return so(a.children,u,p,n);case O:x=8,u|=24;break;case D:return r=Sr(12,a,n,u|2),r.elementType=D,r.lanes=p,r;case H:return r=Sr(13,a,n,u),r.elementType=H,r.lanes=p,r;case ne:return r=Sr(19,a,n,u),r.elementType=ne,r.lanes=p,r;default:if(typeof r=="object"&&r!==null)switch(r.$$typeof){case z:x=10;break e;case C:x=9;break e;case B:x=11;break e;case X:x=14;break e;case A:x=16,c=null;break e}x=29,a=Error(o(130,r===null?"null":typeof r,"")),c=null}return n=Sr(x,a,n,u),n.elementType=r,n.type=c,n.lanes=p,n}function so(r,n,a,c){return r=Sr(7,r,c,n),r.lanes=a,r}function $f(r,n,a){return r=Sr(6,r,null,n),r.lanes=a,r}function Wy(r){var n=Sr(18,null,null,0);return n.stateNode=r,n}function Bf(r,n,a){return n=Sr(4,r.children!==null?r.children:[],r.key,n),n.lanes=a,n.stateNode={containerInfo:r.containerInfo,pendingChildren:null,implementation:r.implementation},n}var Zy=new WeakMap;function Lr(r,n){if(typeof r=="object"&&r!==null){var a=Zy.get(r);return a!==void 0?a:(n={value:r,source:n,stack:Cc(n)},Zy.set(r,n),n)}return{value:r,source:n,stack:Cc(n)}}var ca=[],da=0,qc=null,Os=0,Nr=[],$r=0,gn=null,gi=1,yi="";function Hi(r,n){ca[da++]=Os,ca[da++]=qc,qc=r,Os=n}function Jy(r,n,a){Nr[$r++]=gi,Nr[$r++]=yi,Nr[$r++]=gn,gn=r;var c=gi;r=yi;var u=32-Qt(c)-1;c&=~(1<<u),a+=1;var p=32-Qt(n)+u;if(30<p){var x=u-u%5;p=(c&(1<<x)-1).toString(32),c>>=x,u-=x,gi=1<<32-Qt(n)+u|a<<u|c,yi=p+r}else gi=1<<p|a<<u|c,yi=r}function Uf(r){r.return!==null&&(Hi(r,1),Jy(r,1,0))}function If(r){for(;r===qc;)qc=ca[--da],ca[da]=null,Os=ca[--da],ca[da]=null;for(;r===gn;)gn=Nr[--$r],Nr[$r]=null,yi=Nr[--$r],Nr[$r]=null,gi=Nr[--$r],Nr[$r]=null}function eb(r,n){Nr[$r++]=gi,Nr[$r++]=yi,Nr[$r++]=gn,gi=n.id,yi=n.overflow,gn=r}var Vt=null,mt=null,qe=!1,yn=null,Br=!1,Vf=Error(o(519));function bn(r){var n=Error(o(418,1<arguments.length&&arguments[1]!==void 0&&arguments[1]?"text":"HTML",""));throw Cs(Lr(n,r)),Vf}function tb(r){var n=r.stateNode,a=r.type,c=r.memoizedProps;switch(n[fe]=r,n[me]=c,a){case"dialog":Ve("cancel",n),Ve("close",n);break;case"iframe":case"object":case"embed":Ve("load",n);break;case"video":case"audio":for(a=0;a<Qs.length;a++)Ve(Qs[a],n);break;case"source":Ve("error",n);break;case"img":case"image":case"link":Ve("error",n),Ve("load",n);break;case"details":Ve("toggle",n);break;case"input":Ve("invalid",n),py(n,c.value,c.defaultValue,c.checked,c.defaultChecked,c.type,c.name,!0);break;case"select":Ve("invalid",n);break;case"textarea":Ve("invalid",n),vy(n,c.value,c.defaultValue,c.children)}a=c.children,typeof a!="string"&&typeof a!="number"&&typeof a!="bigint"||n.textContent===""+a||c.suppressHydrationWarning===!0||yx(n.textContent,a)?(c.popover!=null&&(Ve("beforetoggle",n),Ve("toggle",n)),c.onScroll!=null&&Ve("scroll",n),c.onScrollEnd!=null&&Ve("scrollend",n),c.onClick!=null&&(n.onclick=Ii),n=!0):n=!1,n||bn(r,!0)}function rb(r){for(Vt=r.return;Vt;)switch(Vt.tag){case 5:case 31:case 13:Br=!1;return;case 27:case 3:Br=!0;return;default:Vt=Vt.return}}function ua(r){if(r!==Vt)return!1;if(!qe)return rb(r),qe=!0,!1;var n=r.tag,a;if((a=n!==3&&n!==27)&&((a=n===5)&&(a=r.type,a=!(a!=="form"&&a!=="button")||ap(r.type,r.memoizedProps)),a=!a),a&&mt&&bn(r),rb(r),n===13){if(r=r.memoizedState,r=r!==null?r.dehydrated:null,!r)throw Error(o(317));mt=Cx(r)}else if(n===31){if(r=r.memoizedState,r=r!==null?r.dehydrated:null,!r)throw Error(o(317));mt=Cx(r)}else n===27?(n=mt,Dn(r.type)?(r=up,up=null,mt=r):mt=n):mt=Vt?Ir(r.stateNode.nextSibling):null;return!0}function lo(){mt=Vt=null,qe=!1}function Ff(){var r=yn;return r!==null&&(yr===null?yr=r:yr.push.apply(yr,r),yn=null),r}function Cs(r){yn===null?yn=[r]:yn.push(r)}var Hf=M(null),co=null,qi=null;function xn(r,n,a){oe(Hf,n._currentValue),n._currentValue=a}function Ki(r){r._currentValue=Hf.current,q(Hf)}function qf(r,n,a){for(;r!==null;){var c=r.alternate;if((r.childLanes&n)!==n?(r.childLanes|=n,c!==null&&(c.childLanes|=n)):c!==null&&(c.childLanes&n)!==n&&(c.childLanes|=n),r===a)break;r=r.return}}function Kf(r,n,a,c){var u=r.child;for(u!==null&&(u.return=r);u!==null;){var p=u.dependencies;if(p!==null){var x=u.child;p=p.firstContext;e:for(;p!==null;){var S=p;p=u;for(var R=0;R<n.length;R++)if(S.context===n[R]){p.lanes|=a,S=p.alternate,S!==null&&(S.lanes|=a),qf(p.return,a,r),c||(x=null);break e}p=S.next}}else if(u.tag===18){if(x=u.return,x===null)throw Error(o(341));x.lanes|=a,p=x.alternate,p!==null&&(p.lanes|=a),qf(x,a,r),x=null}else x=u.child;if(x!==null)x.return=u;else for(x=u;x!==null;){if(x===r){x=null;break}if(u=x.sibling,u!==null){u.return=x.return,x=u;break}x=x.return}u=x}}function fa(r,n,a,c){r=null;for(var u=n,p=!1;u!==null;){if(!p){if((u.flags&524288)!==0)p=!0;else if((u.flags&262144)!==0)break}if(u.tag===10){var x=u.alternate;if(x===null)throw Error(o(387));if(x=x.memoizedProps,x!==null){var S=u.type;_r(u.pendingProps.value,x.value)||(r!==null?r.push(S):r=[S])}}else if(u===$e.current){if(x=u.alternate,x===null)throw Error(o(387));x.memoizedState.memoizedState!==u.memoizedState.memoizedState&&(r!==null?r.push(el):r=[el])}u=u.return}r!==null&&Kf(n,r,a,c),n.flags|=262144}function Kc(r){for(r=r.firstContext;r!==null;){if(!_r(r.context._currentValue,r.memoizedValue))return!0;r=r.next}return!1}function uo(r){co=r,qi=null,r=r.dependencies,r!==null&&(r.firstContext=null)}function Ft(r){return ib(co,r)}function Gc(r,n){return co===null&&uo(r),ib(r,n)}function ib(r,n){var a=n._currentValue;if(n={context:n,memoizedValue:a,next:null},qi===null){if(r===null)throw Error(o(308));qi=n,r.dependencies={lanes:0,firstContext:n},r.flags|=524288}else qi=qi.next=n;return a}var h5=typeof AbortController<"u"?AbortController:function(){var r=[],n=this.signal={aborted:!1,addEventListener:function(a,c){r.push(c)}};this.abort=function(){n.aborted=!0,r.forEach(function(a){return a()})}},p5=e.unstable_scheduleCallback,m5=e.unstable_NormalPriority,kt={$$typeof:z,Consumer:null,Provider:null,_currentValue:null,_currentValue2:null,_threadCount:0};function Gf(){return{controller:new h5,data:new Map,refCount:0}}function As(r){r.refCount--,r.refCount===0&&p5(m5,function(){r.controller.abort()})}var Rs=null,Yf=0,ha=0,pa=null;function v5(r,n){if(Rs===null){var a=Rs=[];Yf=0,ha=Wh(),pa={status:"pending",value:void 0,then:function(c){a.push(c)}}}return Yf++,n.then(nb,nb),n}function nb(){if(--Yf===0&&Rs!==null){pa!==null&&(pa.status="fulfilled");var r=Rs;Rs=null,ha=0,pa=null;for(var n=0;n<r.length;n++)(0,r[n])()}}function g5(r,n){var a=[],c={status:"pending",value:null,reason:null,then:function(u){a.push(u)}};return r.then(function(){c.status="fulfilled",c.value=n;for(var u=0;u<a.length;u++)(0,a[u])(n)},function(u){for(c.status="rejected",c.reason=u,u=0;u<a.length;u++)(0,a[u])(void 0)}),c}var ob=N.S;N.S=function(r,n){V0=tr(),typeof n=="object"&&n!==null&&typeof n.then=="function"&&v5(r,n),ob!==null&&ob(r,n)};var fo=M(null);function Qf(){var r=fo.current;return r!==null?r:ct.pooledCache}function Yc(r,n){n===null?oe(fo,fo.current):oe(fo,n.pool)}function ab(){var r=Qf();return r===null?null:{parent:kt._currentValue,pool:r}}var ma=Error(o(460)),Xf=Error(o(474)),Qc=Error(o(542)),Xc={then:function(){}};function sb(r){return r=r.status,r==="fulfilled"||r==="rejected"}function lb(r,n,a){switch(a=r[a],a===void 0?r.push(n):a!==n&&(n.then(Ii,Ii),n=a),n.status){case"fulfilled":return n.value;case"rejected":throw r=n.reason,db(r),r;default:if(typeof n.status=="string")n.then(Ii,Ii);else{if(r=ct,r!==null&&100<r.shellSuspendCounter)throw Error(o(482));r=n,r.status="pending",r.then(function(c){if(n.status==="pending"){var u=n;u.status="fulfilled",u.value=c}},function(c){if(n.status==="pending"){var u=n;u.status="rejected",u.reason=c}})}switch(n.status){case"fulfilled":return n.value;case"rejected":throw r=n.reason,db(r),r}throw po=n,ma}}function ho(r){try{var n=r._init;return n(r._payload)}catch(a){throw a!==null&&typeof a=="object"&&typeof a.then=="function"?(po=a,ma):a}}var po=null;function cb(){if(po===null)throw Error(o(459));var r=po;return po=null,r}function db(r){if(r===ma||r===Qc)throw Error(o(483))}var va=null,js=0;function Wc(r){var n=js;return js+=1,va===null&&(va=[]),lb(va,r,n)}function ks(r,n){n=n.props.ref,r.ref=n!==void 0?n:null}function Zc(r,n){throw n.$$typeof===b?Error(o(525)):(r=Object.prototype.toString.call(n),Error(o(31,r==="[object Object]"?"object with keys {"+Object.keys(n).join(", ")+"}":r)))}function ub(r){function n($,P){if(r){var U=$.deletions;U===null?($.deletions=[P],$.flags|=16):U.push(P)}}function a($,P){if(!r)return null;for(;P!==null;)n($,P),P=P.sibling;return null}function c($){for(var P=new Map;$!==null;)$.key!==null?P.set($.key,$):P.set($.index,$),$=$.sibling;return P}function u($,P){return $=Fi($,P),$.index=0,$.sibling=null,$}function p($,P,U){return $.index=U,r?(U=$.alternate,U!==null?(U=U.index,U<P?($.flags|=67108866,P):U):($.flags|=67108866,P)):($.flags|=1048576,P)}function x($){return r&&$.alternate===null&&($.flags|=67108866),$}function S($,P,U,W){return P===null||P.tag!==6?(P=$f(U,$.mode,W),P.return=$,P):(P=u(P,U),P.return=$,P)}function R($,P,U,W){var Ce=U.type;return Ce===T?Y($,P,U.props.children,W,U.key):P!==null&&(P.elementType===Ce||typeof Ce=="object"&&Ce!==null&&Ce.$$typeof===A&&ho(Ce)===P.type)?(P=u(P,U.props),ks(P,U),P.return=$,P):(P=Hc(U.type,U.key,U.props,null,$.mode,W),ks(P,U),P.return=$,P)}function I($,P,U,W){return P===null||P.tag!==4||P.stateNode.containerInfo!==U.containerInfo||P.stateNode.implementation!==U.implementation?(P=Bf(U,$.mode,W),P.return=$,P):(P=u(P,U.children||[]),P.return=$,P)}function Y($,P,U,W,Ce){return P===null||P.tag!==7?(P=so(U,$.mode,W,Ce),P.return=$,P):(P=u(P,U),P.return=$,P)}function Z($,P,U){if(typeof P=="string"&&P!==""||typeof P=="number"||typeof P=="bigint")return P=$f(""+P,$.mode,U),P.return=$,P;if(typeof P=="object"&&P!==null){switch(P.$$typeof){case _:return U=Hc(P.type,P.key,P.props,null,$.mode,U),ks(U,P),U.return=$,U;case E:return P=Bf(P,$.mode,U),P.return=$,P;case A:return P=ho(P),Z($,P,U)}if(xe(P)||ce(P))return P=so(P,$.mode,U,null),P.return=$,P;if(typeof P.then=="function")return Z($,Wc(P),U);if(P.$$typeof===z)return Z($,Gc($,P),U);Zc($,P)}return null}function F($,P,U,W){var Ce=P!==null?P.key:null;if(typeof U=="string"&&U!==""||typeof U=="number"||typeof U=="bigint")return Ce!==null?null:S($,P,""+U,W);if(typeof U=="object"&&U!==null){switch(U.$$typeof){case _:return U.key===Ce?R($,P,U,W):null;case E:return U.key===Ce?I($,P,U,W):null;case A:return U=ho(U),F($,P,U,W)}if(xe(U)||ce(U))return Ce!==null?null:Y($,P,U,W,null);if(typeof U.then=="function")return F($,P,Wc(U),W);if(U.$$typeof===z)return F($,P,Gc($,U),W);Zc($,U)}return null}function G($,P,U,W,Ce){if(typeof W=="string"&&W!==""||typeof W=="number"||typeof W=="bigint")return $=$.get(U)||null,S(P,$,""+W,Ce);if(typeof W=="object"&&W!==null){switch(W.$$typeof){case _:return $=$.get(W.key===null?U:W.key)||null,R(P,$,W,Ce);case E:return $=$.get(W.key===null?U:W.key)||null,I(P,$,W,Ce);case A:return W=ho(W),G($,P,U,W,Ce)}if(xe(W)||ce(W))return $=$.get(U)||null,Y(P,$,W,Ce,null);if(typeof W.then=="function")return G($,P,U,Wc(W),Ce);if(W.$$typeof===z)return G($,P,U,Gc(P,W),Ce);Zc(P,W)}return null}function ye($,P,U,W){for(var Ce=null,Xe=null,we=P,Le=P=0,He=null;we!==null&&Le<U.length;Le++){we.index>Le?(He=we,we=null):He=we.sibling;var We=F($,we,U[Le],W);if(We===null){we===null&&(we=He);break}r&&we&&We.alternate===null&&n($,we),P=p(We,P,Le),Xe===null?Ce=We:Xe.sibling=We,Xe=We,we=He}if(Le===U.length)return a($,we),qe&&Hi($,Le),Ce;if(we===null){for(;Le<U.length;Le++)we=Z($,U[Le],W),we!==null&&(P=p(we,P,Le),Xe===null?Ce=we:Xe.sibling=we,Xe=we);return qe&&Hi($,Le),Ce}for(we=c(we);Le<U.length;Le++)He=G(we,$,Le,U[Le],W),He!==null&&(r&&He.alternate!==null&&we.delete(He.key===null?Le:He.key),P=p(He,P,Le),Xe===null?Ce=He:Xe.sibling=He,Xe=He);return r&&we.forEach(function($n){return n($,$n)}),qe&&Hi($,Le),Ce}function je($,P,U,W){if(U==null)throw Error(o(151));for(var Ce=null,Xe=null,we=P,Le=P=0,He=null,We=U.next();we!==null&&!We.done;Le++,We=U.next()){we.index>Le?(He=we,we=null):He=we.sibling;var $n=F($,we,We.value,W);if($n===null){we===null&&(we=He);break}r&&we&&$n.alternate===null&&n($,we),P=p($n,P,Le),Xe===null?Ce=$n:Xe.sibling=$n,Xe=$n,we=He}if(We.done)return a($,we),qe&&Hi($,Le),Ce;if(we===null){for(;!We.done;Le++,We=U.next())We=Z($,We.value,W),We!==null&&(P=p(We,P,Le),Xe===null?Ce=We:Xe.sibling=We,Xe=We);return qe&&Hi($,Le),Ce}for(we=c(we);!We.done;Le++,We=U.next())We=G(we,$,Le,We.value,W),We!==null&&(r&&We.alternate!==null&&we.delete(We.key===null?Le:We.key),P=p(We,P,Le),Xe===null?Ce=We:Xe.sibling=We,Xe=We);return r&&we.forEach(function(A6){return n($,A6)}),qe&&Hi($,Le),Ce}function ot($,P,U,W){if(typeof U=="object"&&U!==null&&U.type===T&&U.key===null&&(U=U.props.children),typeof U=="object"&&U!==null){switch(U.$$typeof){case _:e:{for(var Ce=U.key;P!==null;){if(P.key===Ce){if(Ce=U.type,Ce===T){if(P.tag===7){a($,P.sibling),W=u(P,U.props.children),W.return=$,$=W;break e}}else if(P.elementType===Ce||typeof Ce=="object"&&Ce!==null&&Ce.$$typeof===A&&ho(Ce)===P.type){a($,P.sibling),W=u(P,U.props),ks(W,U),W.return=$,$=W;break e}a($,P);break}else n($,P);P=P.sibling}U.type===T?(W=so(U.props.children,$.mode,W,U.key),W.return=$,$=W):(W=Hc(U.type,U.key,U.props,null,$.mode,W),ks(W,U),W.return=$,$=W)}return x($);case E:e:{for(Ce=U.key;P!==null;){if(P.key===Ce)if(P.tag===4&&P.stateNode.containerInfo===U.containerInfo&&P.stateNode.implementation===U.implementation){a($,P.sibling),W=u(P,U.children||[]),W.return=$,$=W;break e}else{a($,P);break}else n($,P);P=P.sibling}W=Bf(U,$.mode,W),W.return=$,$=W}return x($);case A:return U=ho(U),ot($,P,U,W)}if(xe(U))return ye($,P,U,W);if(ce(U)){if(Ce=ce(U),typeof Ce!="function")throw Error(o(150));return U=Ce.call(U),je($,P,U,W)}if(typeof U.then=="function")return ot($,P,Wc(U),W);if(U.$$typeof===z)return ot($,P,Gc($,U),W);Zc($,U)}return typeof U=="string"&&U!==""||typeof U=="number"||typeof U=="bigint"?(U=""+U,P!==null&&P.tag===6?(a($,P.sibling),W=u(P,U),W.return=$,$=W):(a($,P),W=$f(U,$.mode,W),W.return=$,$=W),x($)):a($,P)}return function($,P,U,W){try{js=0;var Ce=ot($,P,U,W);return va=null,Ce}catch(we){if(we===ma||we===Qc)throw we;var Xe=Sr(29,we,null,$.mode);return Xe.lanes=W,Xe.return=$,Xe}}}var mo=ub(!0),fb=ub(!1),wn=!1;function Wf(r){r.updateQueue={baseState:r.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,lanes:0,hiddenCallbacks:null},callbacks:null}}function Zf(r,n){r=r.updateQueue,n.updateQueue===r&&(n.updateQueue={baseState:r.baseState,firstBaseUpdate:r.firstBaseUpdate,lastBaseUpdate:r.lastBaseUpdate,shared:r.shared,callbacks:null})}function _n(r){return{lane:r,tag:0,payload:null,callback:null,next:null}}function Sn(r,n,a){var c=r.updateQueue;if(c===null)return null;if(c=c.shared,(Ze&2)!==0){var u=c.pending;return u===null?n.next=n:(n.next=u.next,u.next=n),c.pending=n,n=Fc(r),Qy(r,null,a),n}return Vc(r,c,n,a),Fc(r)}function Ms(r,n,a){if(n=n.updateQueue,n!==null&&(n=n.shared,(a&4194048)!==0)){var c=n.lanes;c&=r.pendingLanes,a|=c,n.lanes=a,Mc(r,a)}}function Jf(r,n){var a=r.updateQueue,c=r.alternate;if(c!==null&&(c=c.updateQueue,a===c)){var u=null,p=null;if(a=a.firstBaseUpdate,a!==null){do{var x={lane:a.lane,tag:a.tag,payload:a.payload,callback:null,next:null};p===null?u=p=x:p=p.next=x,a=a.next}while(a!==null);p===null?u=p=n:p=p.next=n}else u=p=n;a={baseState:c.baseState,firstBaseUpdate:u,lastBaseUpdate:p,shared:c.shared,callbacks:c.callbacks},r.updateQueue=a;return}r=a.lastBaseUpdate,r===null?a.firstBaseUpdate=n:r.next=n,a.lastBaseUpdate=n}var eh=!1;function Ds(){if(eh){var r=pa;if(r!==null)throw r}}function zs(r,n,a,c){eh=!1;var u=r.updateQueue;wn=!1;var p=u.firstBaseUpdate,x=u.lastBaseUpdate,S=u.shared.pending;if(S!==null){u.shared.pending=null;var R=S,I=R.next;R.next=null,x===null?p=I:x.next=I,x=R;var Y=r.alternate;Y!==null&&(Y=Y.updateQueue,S=Y.lastBaseUpdate,S!==x&&(S===null?Y.firstBaseUpdate=I:S.next=I,Y.lastBaseUpdate=R))}if(p!==null){var Z=u.baseState;x=0,Y=I=R=null,S=p;do{var F=S.lane&-536870913,G=F!==S.lane;if(G?(Fe&F)===F:(c&F)===F){F!==0&&F===ha&&(eh=!0),Y!==null&&(Y=Y.next={lane:0,tag:S.tag,payload:S.payload,callback:null,next:null});e:{var ye=r,je=S;F=n;var ot=a;switch(je.tag){case 1:if(ye=je.payload,typeof ye=="function"){Z=ye.call(ot,Z,F);break e}Z=ye;break e;case 3:ye.flags=ye.flags&-65537|128;case 0:if(ye=je.payload,F=typeof ye=="function"?ye.call(ot,Z,F):ye,F==null)break e;Z=y({},Z,F);break e;case 2:wn=!0}}F=S.callback,F!==null&&(r.flags|=64,G&&(r.flags|=8192),G=u.callbacks,G===null?u.callbacks=[F]:G.push(F))}else G={lane:F,tag:S.tag,payload:S.payload,callback:S.callback,next:null},Y===null?(I=Y=G,R=Z):Y=Y.next=G,x|=F;if(S=S.next,S===null){if(S=u.shared.pending,S===null)break;G=S,S=G.next,G.next=null,u.lastBaseUpdate=G,u.shared.pending=null}}while(!0);Y===null&&(R=Z),u.baseState=R,u.firstBaseUpdate=I,u.lastBaseUpdate=Y,p===null&&(u.shared.lanes=0),An|=x,r.lanes=x,r.memoizedState=Z}}function hb(r,n){if(typeof r!="function")throw Error(o(191,r));r.call(n)}function pb(r,n){var a=r.callbacks;if(a!==null)for(r.callbacks=null,r=0;r<a.length;r++)hb(a[r],n)}var ga=M(null),Jc=M(0);function mb(r,n){r=tn,oe(Jc,r),oe(ga,n),tn=r|n.baseLanes}function th(){oe(Jc,tn),oe(ga,ga.current)}function rh(){tn=Jc.current,q(ga),q(Jc)}var Er=M(null),Ur=null;function En(r){var n=r.alternate;oe(Ot,Ot.current&1),oe(Er,r),Ur===null&&(n===null||ga.current!==null||n.memoizedState!==null)&&(Ur=r)}function ih(r){oe(Ot,Ot.current),oe(Er,r),Ur===null&&(Ur=r)}function vb(r){r.tag===22?(oe(Ot,Ot.current),oe(Er,r),Ur===null&&(Ur=r)):Tn()}function Tn(){oe(Ot,Ot.current),oe(Er,Er.current)}function Tr(r){q(Er),Ur===r&&(Ur=null),q(Ot)}var Ot=M(0);function ed(r){for(var n=r;n!==null;){if(n.tag===13){var a=n.memoizedState;if(a!==null&&(a=a.dehydrated,a===null||cp(a)||dp(a)))return n}else if(n.tag===19&&(n.memoizedProps.revealOrder==="forwards"||n.memoizedProps.revealOrder==="backwards"||n.memoizedProps.revealOrder==="unstable_legacy-backwards"||n.memoizedProps.revealOrder==="together")){if((n.flags&128)!==0)return n}else if(n.child!==null){n.child.return=n,n=n.child;continue}if(n===r)break;for(;n.sibling===null;){if(n.return===null||n.return===r)return null;n=n.return}n.sibling.return=n.return,n=n.sibling}return null}var Gi=0,Pe=null,it=null,Mt=null,td=!1,ya=!1,vo=!1,rd=0,Ps=0,ba=null,y5=0;function wt(){throw Error(o(321))}function nh(r,n){if(n===null)return!1;for(var a=0;a<n.length&&a<r.length;a++)if(!_r(r[a],n[a]))return!1;return!0}function oh(r,n,a,c,u,p){return Gi=p,Pe=n,n.memoizedState=null,n.updateQueue=null,n.lanes=0,N.H=r===null||r.memoizedState===null?Jb:xh,vo=!1,p=a(c,u),vo=!1,ya&&(p=yb(n,a,c,u)),gb(r),p}function gb(r){N.H=$s;var n=it!==null&&it.next!==null;if(Gi=0,Mt=it=Pe=null,td=!1,Ps=0,ba=null,n)throw Error(o(300));r===null||Dt||(r=r.dependencies,r!==null&&Kc(r)&&(Dt=!0))}function yb(r,n,a,c){Pe=r;var u=0;do{if(ya&&(ba=null),Ps=0,ya=!1,25<=u)throw Error(o(301));if(u+=1,Mt=it=null,r.updateQueue!=null){var p=r.updateQueue;p.lastEffect=null,p.events=null,p.stores=null,p.memoCache!=null&&(p.memoCache.index=0)}N.H=e0,p=n(a,c)}while(ya);return p}function b5(){var r=N.H,n=r.useState()[0];return n=typeof n.then=="function"?Ls(n):n,r=r.useState()[0],(it!==null?it.memoizedState:null)!==r&&(Pe.flags|=1024),n}function ah(){var r=rd!==0;return rd=0,r}function sh(r,n,a){n.updateQueue=r.updateQueue,n.flags&=-2053,r.lanes&=~a}function lh(r){if(td){for(r=r.memoizedState;r!==null;){var n=r.queue;n!==null&&(n.pending=null),r=r.next}td=!1}Gi=0,Mt=it=Pe=null,ya=!1,Ps=rd=0,ba=null}function or(){var r={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return Mt===null?Pe.memoizedState=Mt=r:Mt=Mt.next=r,Mt}function Ct(){if(it===null){var r=Pe.alternate;r=r!==null?r.memoizedState:null}else r=it.next;var n=Mt===null?Pe.memoizedState:Mt.next;if(n!==null)Mt=n,it=r;else{if(r===null)throw Pe.alternate===null?Error(o(467)):Error(o(310));it=r,r={memoizedState:it.memoizedState,baseState:it.baseState,baseQueue:it.baseQueue,queue:it.queue,next:null},Mt===null?Pe.memoizedState=Mt=r:Mt=Mt.next=r}return Mt}function id(){return{lastEffect:null,events:null,stores:null,memoCache:null}}function Ls(r){var n=Ps;return Ps+=1,ba===null&&(ba=[]),r=lb(ba,r,n),n=Pe,(Mt===null?n.memoizedState:Mt.next)===null&&(n=n.alternate,N.H=n===null||n.memoizedState===null?Jb:xh),r}function nd(r){if(r!==null&&typeof r=="object"){if(typeof r.then=="function")return Ls(r);if(r.$$typeof===z)return Ft(r)}throw Error(o(438,String(r)))}function ch(r){var n=null,a=Pe.updateQueue;if(a!==null&&(n=a.memoCache),n==null){var c=Pe.alternate;c!==null&&(c=c.updateQueue,c!==null&&(c=c.memoCache,c!=null&&(n={data:c.data.map(function(u){return u.slice()}),index:0})))}if(n==null&&(n={data:[],index:0}),a===null&&(a=id(),Pe.updateQueue=a),a.memoCache=n,a=n.data[n.index],a===void 0)for(a=n.data[n.index]=Array(r),c=0;c<r;c++)a[c]=ee;return n.index++,a}function Yi(r,n){return typeof n=="function"?n(r):n}function od(r){var n=Ct();return dh(n,it,r)}function dh(r,n,a){var c=r.queue;if(c===null)throw Error(o(311));c.lastRenderedReducer=a;var u=r.baseQueue,p=c.pending;if(p!==null){if(u!==null){var x=u.next;u.next=p.next,p.next=x}n.baseQueue=u=p,c.pending=null}if(p=r.baseState,u===null)r.memoizedState=p;else{n=u.next;var S=x=null,R=null,I=n,Y=!1;do{var Z=I.lane&-536870913;if(Z!==I.lane?(Fe&Z)===Z:(Gi&Z)===Z){var F=I.revertLane;if(F===0)R!==null&&(R=R.next={lane:0,revertLane:0,gesture:null,action:I.action,hasEagerState:I.hasEagerState,eagerState:I.eagerState,next:null}),Z===ha&&(Y=!0);else if((Gi&F)===F){I=I.next,F===ha&&(Y=!0);continue}else Z={lane:0,revertLane:I.revertLane,gesture:null,action:I.action,hasEagerState:I.hasEagerState,eagerState:I.eagerState,next:null},R===null?(S=R=Z,x=p):R=R.next=Z,Pe.lanes|=F,An|=F;Z=I.action,vo&&a(p,Z),p=I.hasEagerState?I.eagerState:a(p,Z)}else F={lane:Z,revertLane:I.revertLane,gesture:I.gesture,action:I.action,hasEagerState:I.hasEagerState,eagerState:I.eagerState,next:null},R===null?(S=R=F,x=p):R=R.next=F,Pe.lanes|=Z,An|=Z;I=I.next}while(I!==null&&I!==n);if(R===null?x=p:R.next=S,!_r(p,r.memoizedState)&&(Dt=!0,Y&&(a=pa,a!==null)))throw a;r.memoizedState=p,r.baseState=x,r.baseQueue=R,c.lastRenderedState=p}return u===null&&(c.lanes=0),[r.memoizedState,c.dispatch]}function uh(r){var n=Ct(),a=n.queue;if(a===null)throw Error(o(311));a.lastRenderedReducer=r;var c=a.dispatch,u=a.pending,p=n.memoizedState;if(u!==null){a.pending=null;var x=u=u.next;do p=r(p,x.action),x=x.next;while(x!==u);_r(p,n.memoizedState)||(Dt=!0),n.memoizedState=p,n.baseQueue===null&&(n.baseState=p),a.lastRenderedState=p}return[p,c]}function bb(r,n,a){var c=Pe,u=Ct(),p=qe;if(p){if(a===void 0)throw Error(o(407));a=a()}else a=n();var x=!_r((it||u).memoizedState,a);if(x&&(u.memoizedState=a,Dt=!0),u=u.queue,ph(_b.bind(null,c,u,r),[r]),u.getSnapshot!==n||x||Mt!==null&&Mt.memoizedState.tag&1){if(c.flags|=2048,xa(9,{destroy:void 0},wb.bind(null,c,u,a,n),null),ct===null)throw Error(o(349));p||(Gi&127)!==0||xb(c,n,a)}return a}function xb(r,n,a){r.flags|=16384,r={getSnapshot:n,value:a},n=Pe.updateQueue,n===null?(n=id(),Pe.updateQueue=n,n.stores=[r]):(a=n.stores,a===null?n.stores=[r]:a.push(r))}function wb(r,n,a,c){n.value=a,n.getSnapshot=c,Sb(n)&&Eb(r)}function _b(r,n,a){return a(function(){Sb(n)&&Eb(r)})}function Sb(r){var n=r.getSnapshot;r=r.value;try{var a=n();return!_r(r,a)}catch{return!0}}function Eb(r){var n=ao(r,2);n!==null&&br(n,r,2)}function fh(r){var n=or();if(typeof r=="function"){var a=r;if(r=a(),vo){Ut(!0);try{a()}finally{Ut(!1)}}}return n.memoizedState=n.baseState=r,n.queue={pending:null,lanes:0,dispatch:null,lastRenderedReducer:Yi,lastRenderedState:r},n}function Tb(r,n,a,c){return r.baseState=a,dh(r,it,typeof c=="function"?c:Yi)}function x5(r,n,a,c,u){if(ld(r))throw Error(o(485));if(r=n.action,r!==null){var p={payload:u,action:r,next:null,isTransition:!0,status:"pending",value:null,reason:null,listeners:[],then:function(x){p.listeners.push(x)}};N.T!==null?a(!0):p.isTransition=!1,c(p),a=n.pending,a===null?(p.next=n.pending=p,Ob(n,p)):(p.next=a.next,n.pending=a.next=p)}}function Ob(r,n){var a=n.action,c=n.payload,u=r.state;if(n.isTransition){var p=N.T,x={};N.T=x;try{var S=a(u,c),R=N.S;R!==null&&R(x,S),Cb(r,n,S)}catch(I){hh(r,n,I)}finally{p!==null&&x.types!==null&&(p.types=x.types),N.T=p}}else try{p=a(u,c),Cb(r,n,p)}catch(I){hh(r,n,I)}}function Cb(r,n,a){a!==null&&typeof a=="object"&&typeof a.then=="function"?a.then(function(c){Ab(r,n,c)},function(c){return hh(r,n,c)}):Ab(r,n,a)}function Ab(r,n,a){n.status="fulfilled",n.value=a,Rb(n),r.state=a,n=r.pending,n!==null&&(a=n.next,a===n?r.pending=null:(a=a.next,n.next=a,Ob(r,a)))}function hh(r,n,a){var c=r.pending;if(r.pending=null,c!==null){c=c.next;do n.status="rejected",n.reason=a,Rb(n),n=n.next;while(n!==c)}r.action=null}function Rb(r){r=r.listeners;for(var n=0;n<r.length;n++)(0,r[n])()}function jb(r,n){return n}function kb(r,n){if(qe){var a=ct.formState;if(a!==null){e:{var c=Pe;if(qe){if(mt){t:{for(var u=mt,p=Br;u.nodeType!==8;){if(!p){u=null;break t}if(u=Ir(u.nextSibling),u===null){u=null;break t}}p=u.data,u=p==="F!"||p==="F"?u:null}if(u){mt=Ir(u.nextSibling),c=u.data==="F!";break e}}bn(c)}c=!1}c&&(n=a[0])}}return a=or(),a.memoizedState=a.baseState=n,c={pending:null,lanes:0,dispatch:null,lastRenderedReducer:jb,lastRenderedState:n},a.queue=c,a=Xb.bind(null,Pe,c),c.dispatch=a,c=fh(!1),p=bh.bind(null,Pe,!1,c.queue),c=or(),u={state:n,dispatch:null,action:r,pending:null},c.queue=u,a=x5.bind(null,Pe,u,p,a),u.dispatch=a,c.memoizedState=r,[n,a,!1]}function Mb(r){var n=Ct();return Db(n,it,r)}function Db(r,n,a){if(n=dh(r,n,jb)[0],r=od(Yi)[0],typeof n=="object"&&n!==null&&typeof n.then=="function")try{var c=Ls(n)}catch(x){throw x===ma?Qc:x}else c=n;n=Ct();var u=n.queue,p=u.dispatch;return a!==n.memoizedState&&(Pe.flags|=2048,xa(9,{destroy:void 0},w5.bind(null,u,a),null)),[c,p,r]}function w5(r,n){r.action=n}function zb(r){var n=Ct(),a=it;if(a!==null)return Db(n,a,r);Ct(),n=n.memoizedState,a=Ct();var c=a.queue.dispatch;return a.memoizedState=r,[n,c,!1]}function xa(r,n,a,c){return r={tag:r,create:a,deps:c,inst:n,next:null},n=Pe.updateQueue,n===null&&(n=id(),Pe.updateQueue=n),a=n.lastEffect,a===null?n.lastEffect=r.next=r:(c=a.next,a.next=r,r.next=c,n.lastEffect=r),r}function Pb(){return Ct().memoizedState}function ad(r,n,a,c){var u=or();Pe.flags|=r,u.memoizedState=xa(1|n,{destroy:void 0},a,c===void 0?null:c)}function sd(r,n,a,c){var u=Ct();c=c===void 0?null:c;var p=u.memoizedState.inst;it!==null&&c!==null&&nh(c,it.memoizedState.deps)?u.memoizedState=xa(n,p,a,c):(Pe.flags|=r,u.memoizedState=xa(1|n,p,a,c))}function Lb(r,n){ad(8390656,8,r,n)}function ph(r,n){sd(2048,8,r,n)}function _5(r){Pe.flags|=4;var n=Pe.updateQueue;if(n===null)n=id(),Pe.updateQueue=n,n.events=[r];else{var a=n.events;a===null?n.events=[r]:a.push(r)}}function Nb(r){var n=Ct().memoizedState;return _5({ref:n,nextImpl:r}),function(){if((Ze&2)!==0)throw Error(o(440));return n.impl.apply(void 0,arguments)}}function $b(r,n){return sd(4,2,r,n)}function Bb(r,n){return sd(4,4,r,n)}function Ub(r,n){if(typeof n=="function"){r=r();var a=n(r);return function(){typeof a=="function"?a():n(null)}}if(n!=null)return r=r(),n.current=r,function(){n.current=null}}function Ib(r,n,a){a=a!=null?a.concat([r]):null,sd(4,4,Ub.bind(null,n,r),a)}function mh(){}function Vb(r,n){var a=Ct();n=n===void 0?null:n;var c=a.memoizedState;return n!==null&&nh(n,c[1])?c[0]:(a.memoizedState=[r,n],r)}function Fb(r,n){var a=Ct();n=n===void 0?null:n;var c=a.memoizedState;if(n!==null&&nh(n,c[1]))return c[0];if(c=r(),vo){Ut(!0);try{r()}finally{Ut(!1)}}return a.memoizedState=[c,n],c}function vh(r,n,a){return a===void 0||(Gi&1073741824)!==0&&(Fe&261930)===0?r.memoizedState=n:(r.memoizedState=a,r=H0(),Pe.lanes|=r,An|=r,a)}function Hb(r,n,a,c){return _r(a,n)?a:ga.current!==null?(r=vh(r,a,c),_r(r,n)||(Dt=!0),r):(Gi&42)===0||(Gi&1073741824)!==0&&(Fe&261930)===0?(Dt=!0,r.memoizedState=a):(r=H0(),Pe.lanes|=r,An|=r,n)}function qb(r,n,a,c,u){var p=Q.p;Q.p=p!==0&&8>p?p:8;var x=N.T,S={};N.T=S,bh(r,!1,n,a);try{var R=u(),I=N.S;if(I!==null&&I(S,R),R!==null&&typeof R=="object"&&typeof R.then=="function"){var Y=g5(R,c);Ns(r,n,Y,Ar(r))}else Ns(r,n,c,Ar(r))}catch(Z){Ns(r,n,{then:function(){},status:"rejected",reason:Z},Ar())}finally{Q.p=p,x!==null&&S.types!==null&&(x.types=S.types),N.T=x}}function S5(){}function gh(r,n,a,c){if(r.tag!==5)throw Error(o(476));var u=Kb(r).queue;qb(r,u,n,se,a===null?S5:function(){return Gb(r),a(c)})}function Kb(r){var n=r.memoizedState;if(n!==null)return n;n={memoizedState:se,baseState:se,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:Yi,lastRenderedState:se},next:null};var a={};return n.next={memoizedState:a,baseState:a,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:Yi,lastRenderedState:a},next:null},r.memoizedState=n,r=r.alternate,r!==null&&(r.memoizedState=n),n}function Gb(r){var n=Kb(r);n.next===null&&(n=r.alternate.memoizedState),Ns(r,n.next.queue,{},Ar())}function yh(){return Ft(el)}function Yb(){return Ct().memoizedState}function Qb(){return Ct().memoizedState}function E5(r){for(var n=r.return;n!==null;){switch(n.tag){case 24:case 3:var a=Ar();r=_n(a);var c=Sn(n,r,a);c!==null&&(br(c,n,a),Ms(c,n,a)),n={cache:Gf()},r.payload=n;return}n=n.return}}function T5(r,n,a){var c=Ar();a={lane:c,revertLane:0,gesture:null,action:a,hasEagerState:!1,eagerState:null,next:null},ld(r)?Wb(n,a):(a=Lf(r,n,a,c),a!==null&&(br(a,r,c),Zb(a,n,c)))}function Xb(r,n,a){var c=Ar();Ns(r,n,a,c)}function Ns(r,n,a,c){var u={lane:c,revertLane:0,gesture:null,action:a,hasEagerState:!1,eagerState:null,next:null};if(ld(r))Wb(n,u);else{var p=r.alternate;if(r.lanes===0&&(p===null||p.lanes===0)&&(p=n.lastRenderedReducer,p!==null))try{var x=n.lastRenderedState,S=p(x,a);if(u.hasEagerState=!0,u.eagerState=S,_r(S,x))return Vc(r,n,u,0),ct===null&&Ic(),!1}catch{}if(a=Lf(r,n,u,c),a!==null)return br(a,r,c),Zb(a,n,c),!0}return!1}function bh(r,n,a,c){if(c={lane:2,revertLane:Wh(),gesture:null,action:c,hasEagerState:!1,eagerState:null,next:null},ld(r)){if(n)throw Error(o(479))}else n=Lf(r,a,c,2),n!==null&&br(n,r,2)}function ld(r){var n=r.alternate;return r===Pe||n!==null&&n===Pe}function Wb(r,n){ya=td=!0;var a=r.pending;a===null?n.next=n:(n.next=a.next,a.next=n),r.pending=n}function Zb(r,n,a){if((a&4194048)!==0){var c=n.lanes;c&=r.pendingLanes,a|=c,n.lanes=a,Mc(r,a)}}var $s={readContext:Ft,use:nd,useCallback:wt,useContext:wt,useEffect:wt,useImperativeHandle:wt,useLayoutEffect:wt,useInsertionEffect:wt,useMemo:wt,useReducer:wt,useRef:wt,useState:wt,useDebugValue:wt,useDeferredValue:wt,useTransition:wt,useSyncExternalStore:wt,useId:wt,useHostTransitionStatus:wt,useFormState:wt,useActionState:wt,useOptimistic:wt,useMemoCache:wt,useCacheRefresh:wt};$s.useEffectEvent=wt;var Jb={readContext:Ft,use:nd,useCallback:function(r,n){return or().memoizedState=[r,n===void 0?null:n],r},useContext:Ft,useEffect:Lb,useImperativeHandle:function(r,n,a){a=a!=null?a.concat([r]):null,ad(4194308,4,Ub.bind(null,n,r),a)},useLayoutEffect:function(r,n){return ad(4194308,4,r,n)},useInsertionEffect:function(r,n){ad(4,2,r,n)},useMemo:function(r,n){var a=or();n=n===void 0?null:n;var c=r();if(vo){Ut(!0);try{r()}finally{Ut(!1)}}return a.memoizedState=[c,n],c},useReducer:function(r,n,a){var c=or();if(a!==void 0){var u=a(n);if(vo){Ut(!0);try{a(n)}finally{Ut(!1)}}}else u=n;return c.memoizedState=c.baseState=u,r={pending:null,lanes:0,dispatch:null,lastRenderedReducer:r,lastRenderedState:u},c.queue=r,r=r.dispatch=T5.bind(null,Pe,r),[c.memoizedState,r]},useRef:function(r){var n=or();return r={current:r},n.memoizedState=r},useState:function(r){r=fh(r);var n=r.queue,a=Xb.bind(null,Pe,n);return n.dispatch=a,[r.memoizedState,a]},useDebugValue:mh,useDeferredValue:function(r,n){var a=or();return vh(a,r,n)},useTransition:function(){var r=fh(!1);return r=qb.bind(null,Pe,r.queue,!0,!1),or().memoizedState=r,[!1,r]},useSyncExternalStore:function(r,n,a){var c=Pe,u=or();if(qe){if(a===void 0)throw Error(o(407));a=a()}else{if(a=n(),ct===null)throw Error(o(349));(Fe&127)!==0||xb(c,n,a)}u.memoizedState=a;var p={value:a,getSnapshot:n};return u.queue=p,Lb(_b.bind(null,c,p,r),[r]),c.flags|=2048,xa(9,{destroy:void 0},wb.bind(null,c,p,a,n),null),a},useId:function(){var r=or(),n=ct.identifierPrefix;if(qe){var a=yi,c=gi;a=(c&~(1<<32-Qt(c)-1)).toString(32)+a,n="_"+n+"R_"+a,a=rd++,0<a&&(n+="H"+a.toString(32)),n+="_"}else a=y5++,n="_"+n+"r_"+a.toString(32)+"_";return r.memoizedState=n},useHostTransitionStatus:yh,useFormState:kb,useActionState:kb,useOptimistic:function(r){var n=or();n.memoizedState=n.baseState=r;var a={pending:null,lanes:0,dispatch:null,lastRenderedReducer:null,lastRenderedState:null};return n.queue=a,n=bh.bind(null,Pe,!0,a),a.dispatch=n,[r,n]},useMemoCache:ch,useCacheRefresh:function(){return or().memoizedState=E5.bind(null,Pe)},useEffectEvent:function(r){var n=or(),a={impl:r};return n.memoizedState=a,function(){if((Ze&2)!==0)throw Error(o(440));return a.impl.apply(void 0,arguments)}}},xh={readContext:Ft,use:nd,useCallback:Vb,useContext:Ft,useEffect:ph,useImperativeHandle:Ib,useInsertionEffect:$b,useLayoutEffect:Bb,useMemo:Fb,useReducer:od,useRef:Pb,useState:function(){return od(Yi)},useDebugValue:mh,useDeferredValue:function(r,n){var a=Ct();return Hb(a,it.memoizedState,r,n)},useTransition:function(){var r=od(Yi)[0],n=Ct().memoizedState;return[typeof r=="boolean"?r:Ls(r),n]},useSyncExternalStore:bb,useId:Yb,useHostTransitionStatus:yh,useFormState:Mb,useActionState:Mb,useOptimistic:function(r,n){var a=Ct();return Tb(a,it,r,n)},useMemoCache:ch,useCacheRefresh:Qb};xh.useEffectEvent=Nb;var e0={readContext:Ft,use:nd,useCallback:Vb,useContext:Ft,useEffect:ph,useImperativeHandle:Ib,useInsertionEffect:$b,useLayoutEffect:Bb,useMemo:Fb,useReducer:uh,useRef:Pb,useState:function(){return uh(Yi)},useDebugValue:mh,useDeferredValue:function(r,n){var a=Ct();return it===null?vh(a,r,n):Hb(a,it.memoizedState,r,n)},useTransition:function(){var r=uh(Yi)[0],n=Ct().memoizedState;return[typeof r=="boolean"?r:Ls(r),n]},useSyncExternalStore:bb,useId:Yb,useHostTransitionStatus:yh,useFormState:zb,useActionState:zb,useOptimistic:function(r,n){var a=Ct();return it!==null?Tb(a,it,r,n):(a.baseState=r,[r,a.queue.dispatch])},useMemoCache:ch,useCacheRefresh:Qb};e0.useEffectEvent=Nb;function wh(r,n,a,c){n=r.memoizedState,a=a(c,n),a=a==null?n:y({},n,a),r.memoizedState=a,r.lanes===0&&(r.updateQueue.baseState=a)}var _h={enqueueSetState:function(r,n,a){r=r._reactInternals;var c=Ar(),u=_n(c);u.payload=n,a!=null&&(u.callback=a),n=Sn(r,u,c),n!==null&&(br(n,r,c),Ms(n,r,c))},enqueueReplaceState:function(r,n,a){r=r._reactInternals;var c=Ar(),u=_n(c);u.tag=1,u.payload=n,a!=null&&(u.callback=a),n=Sn(r,u,c),n!==null&&(br(n,r,c),Ms(n,r,c))},enqueueForceUpdate:function(r,n){r=r._reactInternals;var a=Ar(),c=_n(a);c.tag=2,n!=null&&(c.callback=n),n=Sn(r,c,a),n!==null&&(br(n,r,a),Ms(n,r,a))}};function t0(r,n,a,c,u,p,x){return r=r.stateNode,typeof r.shouldComponentUpdate=="function"?r.shouldComponentUpdate(c,p,x):n.prototype&&n.prototype.isPureReactComponent?!Es(a,c)||!Es(u,p):!0}function r0(r,n,a,c){r=n.state,typeof n.componentWillReceiveProps=="function"&&n.componentWillReceiveProps(a,c),typeof n.UNSAFE_componentWillReceiveProps=="function"&&n.UNSAFE_componentWillReceiveProps(a,c),n.state!==r&&_h.enqueueReplaceState(n,n.state,null)}function go(r,n){var a=n;if("ref"in n){a={};for(var c in n)c!=="ref"&&(a[c]=n[c])}if(r=r.defaultProps){a===n&&(a=y({},a));for(var u in r)a[u]===void 0&&(a[u]=r[u])}return a}function i0(r){Uc(r)}function n0(r){console.error(r)}function o0(r){Uc(r)}function cd(r,n){try{var a=r.onUncaughtError;a(n.value,{componentStack:n.stack})}catch(c){setTimeout(function(){throw c})}}function a0(r,n,a){try{var c=r.onCaughtError;c(a.value,{componentStack:a.stack,errorBoundary:n.tag===1?n.stateNode:null})}catch(u){setTimeout(function(){throw u})}}function Sh(r,n,a){return a=_n(a),a.tag=3,a.payload={element:null},a.callback=function(){cd(r,n)},a}function s0(r){return r=_n(r),r.tag=3,r}function l0(r,n,a,c){var u=a.type.getDerivedStateFromError;if(typeof u=="function"){var p=c.value;r.payload=function(){return u(p)},r.callback=function(){a0(n,a,c)}}var x=a.stateNode;x!==null&&typeof x.componentDidCatch=="function"&&(r.callback=function(){a0(n,a,c),typeof u!="function"&&(Rn===null?Rn=new Set([this]):Rn.add(this));var S=c.stack;this.componentDidCatch(c.value,{componentStack:S!==null?S:""})})}function O5(r,n,a,c,u){if(a.flags|=32768,c!==null&&typeof c=="object"&&typeof c.then=="function"){if(n=a.alternate,n!==null&&fa(n,a,u,!0),a=Er.current,a!==null){switch(a.tag){case 31:case 13:return Ur===null?wd():a.alternate===null&&_t===0&&(_t=3),a.flags&=-257,a.flags|=65536,a.lanes=u,c===Xc?a.flags|=16384:(n=a.updateQueue,n===null?a.updateQueue=new Set([c]):n.add(c),Yh(r,c,u)),!1;case 22:return a.flags|=65536,c===Xc?a.flags|=16384:(n=a.updateQueue,n===null?(n={transitions:null,markerInstances:null,retryQueue:new Set([c])},a.updateQueue=n):(a=n.retryQueue,a===null?n.retryQueue=new Set([c]):a.add(c)),Yh(r,c,u)),!1}throw Error(o(435,a.tag))}return Yh(r,c,u),wd(),!1}if(qe)return n=Er.current,n!==null?((n.flags&65536)===0&&(n.flags|=256),n.flags|=65536,n.lanes=u,c!==Vf&&(r=Error(o(422),{cause:c}),Cs(Lr(r,a)))):(c!==Vf&&(n=Error(o(423),{cause:c}),Cs(Lr(n,a))),r=r.current.alternate,r.flags|=65536,u&=-u,r.lanes|=u,c=Lr(c,a),u=Sh(r.stateNode,c,u),Jf(r,u),_t!==4&&(_t=2)),!1;var p=Error(o(520),{cause:c});if(p=Lr(p,a),Ks===null?Ks=[p]:Ks.push(p),_t!==4&&(_t=2),n===null)return!0;c=Lr(c,a),a=n;do{switch(a.tag){case 3:return a.flags|=65536,r=u&-u,a.lanes|=r,r=Sh(a.stateNode,c,r),Jf(a,r),!1;case 1:if(n=a.type,p=a.stateNode,(a.flags&128)===0&&(typeof n.getDerivedStateFromError=="function"||p!==null&&typeof p.componentDidCatch=="function"&&(Rn===null||!Rn.has(p))))return a.flags|=65536,u&=-u,a.lanes|=u,u=s0(u),l0(u,r,a,c),Jf(a,u),!1}a=a.return}while(a!==null);return!1}var Eh=Error(o(461)),Dt=!1;function Ht(r,n,a,c){n.child=r===null?fb(n,null,a,c):mo(n,r.child,a,c)}function c0(r,n,a,c,u){a=a.render;var p=n.ref;if("ref"in c){var x={};for(var S in c)S!=="ref"&&(x[S]=c[S])}else x=c;return uo(n),c=oh(r,n,a,x,p,u),S=ah(),r!==null&&!Dt?(sh(r,n,u),Qi(r,n,u)):(qe&&S&&Uf(n),n.flags|=1,Ht(r,n,c,u),n.child)}function d0(r,n,a,c,u){if(r===null){var p=a.type;return typeof p=="function"&&!Nf(p)&&p.defaultProps===void 0&&a.compare===null?(n.tag=15,n.type=p,u0(r,n,p,c,u)):(r=Hc(a.type,null,c,n,n.mode,u),r.ref=n.ref,r.return=n,n.child=r)}if(p=r.child,!Mh(r,u)){var x=p.memoizedProps;if(a=a.compare,a=a!==null?a:Es,a(x,c)&&r.ref===n.ref)return Qi(r,n,u)}return n.flags|=1,r=Fi(p,c),r.ref=n.ref,r.return=n,n.child=r}function u0(r,n,a,c,u){if(r!==null){var p=r.memoizedProps;if(Es(p,c)&&r.ref===n.ref)if(Dt=!1,n.pendingProps=c=p,Mh(r,u))(r.flags&131072)!==0&&(Dt=!0);else return n.lanes=r.lanes,Qi(r,n,u)}return Th(r,n,a,c,u)}function f0(r,n,a,c){var u=c.children,p=r!==null?r.memoizedState:null;if(r===null&&n.stateNode===null&&(n.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),c.mode==="hidden"){if((n.flags&128)!==0){if(p=p!==null?p.baseLanes|a:a,r!==null){for(c=n.child=r.child,u=0;c!==null;)u=u|c.lanes|c.childLanes,c=c.sibling;c=u&~p}else c=0,n.child=null;return h0(r,n,p,a,c)}if((a&536870912)!==0)n.memoizedState={baseLanes:0,cachePool:null},r!==null&&Yc(n,p!==null?p.cachePool:null),p!==null?mb(n,p):th(),vb(n);else return c=n.lanes=536870912,h0(r,n,p!==null?p.baseLanes|a:a,a,c)}else p!==null?(Yc(n,p.cachePool),mb(n,p),Tn(),n.memoizedState=null):(r!==null&&Yc(n,null),th(),Tn());return Ht(r,n,u,a),n.child}function Bs(r,n){return r!==null&&r.tag===22||n.stateNode!==null||(n.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),n.sibling}function h0(r,n,a,c,u){var p=Qf();return p=p===null?null:{parent:kt._currentValue,pool:p},n.memoizedState={baseLanes:a,cachePool:p},r!==null&&Yc(n,null),th(),vb(n),r!==null&&fa(r,n,c,!0),n.childLanes=u,null}function dd(r,n){return n=fd({mode:n.mode,children:n.children},r.mode),n.ref=r.ref,r.child=n,n.return=r,n}function p0(r,n,a){return mo(n,r.child,null,a),r=dd(n,n.pendingProps),r.flags|=2,Tr(n),n.memoizedState=null,r}function C5(r,n,a){var c=n.pendingProps,u=(n.flags&128)!==0;if(n.flags&=-129,r===null){if(qe){if(c.mode==="hidden")return r=dd(n,c),n.lanes=536870912,Bs(null,r);if(ih(n),(r=mt)?(r=Ox(r,Br),r=r!==null&&r.data==="&"?r:null,r!==null&&(n.memoizedState={dehydrated:r,treeContext:gn!==null?{id:gi,overflow:yi}:null,retryLane:536870912,hydrationErrors:null},a=Wy(r),a.return=n,n.child=a,Vt=n,mt=null)):r=null,r===null)throw bn(n);return n.lanes=536870912,null}return dd(n,c)}var p=r.memoizedState;if(p!==null){var x=p.dehydrated;if(ih(n),u)if(n.flags&256)n.flags&=-257,n=p0(r,n,a);else if(n.memoizedState!==null)n.child=r.child,n.flags|=128,n=null;else throw Error(o(558));else if(Dt||fa(r,n,a,!1),u=(a&r.childLanes)!==0,Dt||u){if(c=ct,c!==null&&(x=k(c,a),x!==0&&x!==p.retryLane))throw p.retryLane=x,ao(r,x),br(c,r,x),Eh;wd(),n=p0(r,n,a)}else r=p.treeContext,mt=Ir(x.nextSibling),Vt=n,qe=!0,yn=null,Br=!1,r!==null&&eb(n,r),n=dd(n,c),n.flags|=4096;return n}return r=Fi(r.child,{mode:c.mode,children:c.children}),r.ref=n.ref,n.child=r,r.return=n,r}function ud(r,n){var a=n.ref;if(a===null)r!==null&&r.ref!==null&&(n.flags|=4194816);else{if(typeof a!="function"&&typeof a!="object")throw Error(o(284));(r===null||r.ref!==a)&&(n.flags|=4194816)}}function Th(r,n,a,c,u){return uo(n),a=oh(r,n,a,c,void 0,u),c=ah(),r!==null&&!Dt?(sh(r,n,u),Qi(r,n,u)):(qe&&c&&Uf(n),n.flags|=1,Ht(r,n,a,u),n.child)}function m0(r,n,a,c,u,p){return uo(n),n.updateQueue=null,a=yb(n,c,a,u),gb(r),c=ah(),r!==null&&!Dt?(sh(r,n,p),Qi(r,n,p)):(qe&&c&&Uf(n),n.flags|=1,Ht(r,n,a,p),n.child)}function v0(r,n,a,c,u){if(uo(n),n.stateNode===null){var p=la,x=a.contextType;typeof x=="object"&&x!==null&&(p=Ft(x)),p=new a(c,p),n.memoizedState=p.state!==null&&p.state!==void 0?p.state:null,p.updater=_h,n.stateNode=p,p._reactInternals=n,p=n.stateNode,p.props=c,p.state=n.memoizedState,p.refs={},Wf(n),x=a.contextType,p.context=typeof x=="object"&&x!==null?Ft(x):la,p.state=n.memoizedState,x=a.getDerivedStateFromProps,typeof x=="function"&&(wh(n,a,x,c),p.state=n.memoizedState),typeof a.getDerivedStateFromProps=="function"||typeof p.getSnapshotBeforeUpdate=="function"||typeof p.UNSAFE_componentWillMount!="function"&&typeof p.componentWillMount!="function"||(x=p.state,typeof p.componentWillMount=="function"&&p.componentWillMount(),typeof p.UNSAFE_componentWillMount=="function"&&p.UNSAFE_componentWillMount(),x!==p.state&&_h.enqueueReplaceState(p,p.state,null),zs(n,c,p,u),Ds(),p.state=n.memoizedState),typeof p.componentDidMount=="function"&&(n.flags|=4194308),c=!0}else if(r===null){p=n.stateNode;var S=n.memoizedProps,R=go(a,S);p.props=R;var I=p.context,Y=a.contextType;x=la,typeof Y=="object"&&Y!==null&&(x=Ft(Y));var Z=a.getDerivedStateFromProps;Y=typeof Z=="function"||typeof p.getSnapshotBeforeUpdate=="function",S=n.pendingProps!==S,Y||typeof p.UNSAFE_componentWillReceiveProps!="function"&&typeof p.componentWillReceiveProps!="function"||(S||I!==x)&&r0(n,p,c,x),wn=!1;var F=n.memoizedState;p.state=F,zs(n,c,p,u),Ds(),I=n.memoizedState,S||F!==I||wn?(typeof Z=="function"&&(wh(n,a,Z,c),I=n.memoizedState),(R=wn||t0(n,a,R,c,F,I,x))?(Y||typeof p.UNSAFE_componentWillMount!="function"&&typeof p.componentWillMount!="function"||(typeof p.componentWillMount=="function"&&p.componentWillMount(),typeof p.UNSAFE_componentWillMount=="function"&&p.UNSAFE_componentWillMount()),typeof p.componentDidMount=="function"&&(n.flags|=4194308)):(typeof p.componentDidMount=="function"&&(n.flags|=4194308),n.memoizedProps=c,n.memoizedState=I),p.props=c,p.state=I,p.context=x,c=R):(typeof p.componentDidMount=="function"&&(n.flags|=4194308),c=!1)}else{p=n.stateNode,Zf(r,n),x=n.memoizedProps,Y=go(a,x),p.props=Y,Z=n.pendingProps,F=p.context,I=a.contextType,R=la,typeof I=="object"&&I!==null&&(R=Ft(I)),S=a.getDerivedStateFromProps,(I=typeof S=="function"||typeof p.getSnapshotBeforeUpdate=="function")||typeof p.UNSAFE_componentWillReceiveProps!="function"&&typeof p.componentWillReceiveProps!="function"||(x!==Z||F!==R)&&r0(n,p,c,R),wn=!1,F=n.memoizedState,p.state=F,zs(n,c,p,u),Ds();var G=n.memoizedState;x!==Z||F!==G||wn||r!==null&&r.dependencies!==null&&Kc(r.dependencies)?(typeof S=="function"&&(wh(n,a,S,c),G=n.memoizedState),(Y=wn||t0(n,a,Y,c,F,G,R)||r!==null&&r.dependencies!==null&&Kc(r.dependencies))?(I||typeof p.UNSAFE_componentWillUpdate!="function"&&typeof p.componentWillUpdate!="function"||(typeof p.componentWillUpdate=="function"&&p.componentWillUpdate(c,G,R),typeof p.UNSAFE_componentWillUpdate=="function"&&p.UNSAFE_componentWillUpdate(c,G,R)),typeof p.componentDidUpdate=="function"&&(n.flags|=4),typeof p.getSnapshotBeforeUpdate=="function"&&(n.flags|=1024)):(typeof p.componentDidUpdate!="function"||x===r.memoizedProps&&F===r.memoizedState||(n.flags|=4),typeof p.getSnapshotBeforeUpdate!="function"||x===r.memoizedProps&&F===r.memoizedState||(n.flags|=1024),n.memoizedProps=c,n.memoizedState=G),p.props=c,p.state=G,p.context=R,c=Y):(typeof p.componentDidUpdate!="function"||x===r.memoizedProps&&F===r.memoizedState||(n.flags|=4),typeof p.getSnapshotBeforeUpdate!="function"||x===r.memoizedProps&&F===r.memoizedState||(n.flags|=1024),c=!1)}return p=c,ud(r,n),c=(n.flags&128)!==0,p||c?(p=n.stateNode,a=c&&typeof a.getDerivedStateFromError!="function"?null:p.render(),n.flags|=1,r!==null&&c?(n.child=mo(n,r.child,null,u),n.child=mo(n,null,a,u)):Ht(r,n,a,u),n.memoizedState=p.state,r=n.child):r=Qi(r,n,u),r}function g0(r,n,a,c){return lo(),n.flags|=256,Ht(r,n,a,c),n.child}var Oh={dehydrated:null,treeContext:null,retryLane:0,hydrationErrors:null};function Ch(r){return{baseLanes:r,cachePool:ab()}}function Ah(r,n,a){return r=r!==null?r.childLanes&~a:0,n&&(r|=Cr),r}function y0(r,n,a){var c=n.pendingProps,u=!1,p=(n.flags&128)!==0,x;if((x=p)||(x=r!==null&&r.memoizedState===null?!1:(Ot.current&2)!==0),x&&(u=!0,n.flags&=-129),x=(n.flags&32)!==0,n.flags&=-33,r===null){if(qe){if(u?En(n):Tn(),(r=mt)?(r=Ox(r,Br),r=r!==null&&r.data!=="&"?r:null,r!==null&&(n.memoizedState={dehydrated:r,treeContext:gn!==null?{id:gi,overflow:yi}:null,retryLane:536870912,hydrationErrors:null},a=Wy(r),a.return=n,n.child=a,Vt=n,mt=null)):r=null,r===null)throw bn(n);return dp(r)?n.lanes=32:n.lanes=536870912,null}var S=c.children;return c=c.fallback,u?(Tn(),u=n.mode,S=fd({mode:"hidden",children:S},u),c=so(c,u,a,null),S.return=n,c.return=n,S.sibling=c,n.child=S,c=n.child,c.memoizedState=Ch(a),c.childLanes=Ah(r,x,a),n.memoizedState=Oh,Bs(null,c)):(En(n),Rh(n,S))}var R=r.memoizedState;if(R!==null&&(S=R.dehydrated,S!==null)){if(p)n.flags&256?(En(n),n.flags&=-257,n=jh(r,n,a)):n.memoizedState!==null?(Tn(),n.child=r.child,n.flags|=128,n=null):(Tn(),S=c.fallback,u=n.mode,c=fd({mode:"visible",children:c.children},u),S=so(S,u,a,null),S.flags|=2,c.return=n,S.return=n,c.sibling=S,n.child=c,mo(n,r.child,null,a),c=n.child,c.memoizedState=Ch(a),c.childLanes=Ah(r,x,a),n.memoizedState=Oh,n=Bs(null,c));else if(En(n),dp(S)){if(x=S.nextSibling&&S.nextSibling.dataset,x)var I=x.dgst;x=I,c=Error(o(419)),c.stack="",c.digest=x,Cs({value:c,source:null,stack:null}),n=jh(r,n,a)}else if(Dt||fa(r,n,a,!1),x=(a&r.childLanes)!==0,Dt||x){if(x=ct,x!==null&&(c=k(x,a),c!==0&&c!==R.retryLane))throw R.retryLane=c,ao(r,c),br(x,r,c),Eh;cp(S)||wd(),n=jh(r,n,a)}else cp(S)?(n.flags|=192,n.child=r.child,n=null):(r=R.treeContext,mt=Ir(S.nextSibling),Vt=n,qe=!0,yn=null,Br=!1,r!==null&&eb(n,r),n=Rh(n,c.children),n.flags|=4096);return n}return u?(Tn(),S=c.fallback,u=n.mode,R=r.child,I=R.sibling,c=Fi(R,{mode:"hidden",children:c.children}),c.subtreeFlags=R.subtreeFlags&65011712,I!==null?S=Fi(I,S):(S=so(S,u,a,null),S.flags|=2),S.return=n,c.return=n,c.sibling=S,n.child=c,Bs(null,c),c=n.child,S=r.child.memoizedState,S===null?S=Ch(a):(u=S.cachePool,u!==null?(R=kt._currentValue,u=u.parent!==R?{parent:R,pool:R}:u):u=ab(),S={baseLanes:S.baseLanes|a,cachePool:u}),c.memoizedState=S,c.childLanes=Ah(r,x,a),n.memoizedState=Oh,Bs(r.child,c)):(En(n),a=r.child,r=a.sibling,a=Fi(a,{mode:"visible",children:c.children}),a.return=n,a.sibling=null,r!==null&&(x=n.deletions,x===null?(n.deletions=[r],n.flags|=16):x.push(r)),n.child=a,n.memoizedState=null,a)}function Rh(r,n){return n=fd({mode:"visible",children:n},r.mode),n.return=r,r.child=n}function fd(r,n){return r=Sr(22,r,null,n),r.lanes=0,r}function jh(r,n,a){return mo(n,r.child,null,a),r=Rh(n,n.pendingProps.children),r.flags|=2,n.memoizedState=null,r}function b0(r,n,a){r.lanes|=n;var c=r.alternate;c!==null&&(c.lanes|=n),qf(r.return,n,a)}function kh(r,n,a,c,u,p){var x=r.memoizedState;x===null?r.memoizedState={isBackwards:n,rendering:null,renderingStartTime:0,last:c,tail:a,tailMode:u,treeForkCount:p}:(x.isBackwards=n,x.rendering=null,x.renderingStartTime=0,x.last=c,x.tail=a,x.tailMode=u,x.treeForkCount=p)}function x0(r,n,a){var c=n.pendingProps,u=c.revealOrder,p=c.tail;c=c.children;var x=Ot.current,S=(x&2)!==0;if(S?(x=x&1|2,n.flags|=128):x&=1,oe(Ot,x),Ht(r,n,c,a),c=qe?Os:0,!S&&r!==null&&(r.flags&128)!==0)e:for(r=n.child;r!==null;){if(r.tag===13)r.memoizedState!==null&&b0(r,a,n);else if(r.tag===19)b0(r,a,n);else if(r.child!==null){r.child.return=r,r=r.child;continue}if(r===n)break e;for(;r.sibling===null;){if(r.return===null||r.return===n)break e;r=r.return}r.sibling.return=r.return,r=r.sibling}switch(u){case"forwards":for(a=n.child,u=null;a!==null;)r=a.alternate,r!==null&&ed(r)===null&&(u=a),a=a.sibling;a=u,a===null?(u=n.child,n.child=null):(u=a.sibling,a.sibling=null),kh(n,!1,u,a,p,c);break;case"backwards":case"unstable_legacy-backwards":for(a=null,u=n.child,n.child=null;u!==null;){if(r=u.alternate,r!==null&&ed(r)===null){n.child=u;break}r=u.sibling,u.sibling=a,a=u,u=r}kh(n,!0,a,null,p,c);break;case"together":kh(n,!1,null,null,void 0,c);break;default:n.memoizedState=null}return n.child}function Qi(r,n,a){if(r!==null&&(n.dependencies=r.dependencies),An|=n.lanes,(a&n.childLanes)===0)if(r!==null){if(fa(r,n,a,!1),(a&n.childLanes)===0)return null}else return null;if(r!==null&&n.child!==r.child)throw Error(o(153));if(n.child!==null){for(r=n.child,a=Fi(r,r.pendingProps),n.child=a,a.return=n;r.sibling!==null;)r=r.sibling,a=a.sibling=Fi(r,r.pendingProps),a.return=n;a.sibling=null}return n.child}function Mh(r,n){return(r.lanes&n)!==0?!0:(r=r.dependencies,!!(r!==null&&Kc(r)))}function A5(r,n,a){switch(n.tag){case 3:jt(n,n.stateNode.containerInfo),xn(n,kt,r.memoizedState.cache),lo();break;case 27:case 5:eo(n);break;case 4:jt(n,n.stateNode.containerInfo);break;case 10:xn(n,n.type,n.memoizedProps.value);break;case 31:if(n.memoizedState!==null)return n.flags|=128,ih(n),null;break;case 13:var c=n.memoizedState;if(c!==null)return c.dehydrated!==null?(En(n),n.flags|=128,null):(a&n.child.childLanes)!==0?y0(r,n,a):(En(n),r=Qi(r,n,a),r!==null?r.sibling:null);En(n);break;case 19:var u=(r.flags&128)!==0;if(c=(a&n.childLanes)!==0,c||(fa(r,n,a,!1),c=(a&n.childLanes)!==0),u){if(c)return x0(r,n,a);n.flags|=128}if(u=n.memoizedState,u!==null&&(u.rendering=null,u.tail=null,u.lastEffect=null),oe(Ot,Ot.current),c)break;return null;case 22:return n.lanes=0,f0(r,n,a,n.pendingProps);case 24:xn(n,kt,r.memoizedState.cache)}return Qi(r,n,a)}function w0(r,n,a){if(r!==null)if(r.memoizedProps!==n.pendingProps)Dt=!0;else{if(!Mh(r,a)&&(n.flags&128)===0)return Dt=!1,A5(r,n,a);Dt=(r.flags&131072)!==0}else Dt=!1,qe&&(n.flags&1048576)!==0&&Jy(n,Os,n.index);switch(n.lanes=0,n.tag){case 16:e:{var c=n.pendingProps;if(r=ho(n.elementType),n.type=r,typeof r=="function")Nf(r)?(c=go(r,c),n.tag=1,n=v0(null,n,r,c,a)):(n.tag=0,n=Th(null,n,r,c,a));else{if(r!=null){var u=r.$$typeof;if(u===B){n.tag=11,n=c0(null,n,r,c,a);break e}else if(u===X){n.tag=14,n=d0(null,n,r,c,a);break e}}throw n=ie(r)||r,Error(o(306,n,""))}}return n;case 0:return Th(r,n,n.type,n.pendingProps,a);case 1:return c=n.type,u=go(c,n.pendingProps),v0(r,n,c,u,a);case 3:e:{if(jt(n,n.stateNode.containerInfo),r===null)throw Error(o(387));c=n.pendingProps;var p=n.memoizedState;u=p.element,Zf(r,n),zs(n,c,null,a);var x=n.memoizedState;if(c=x.cache,xn(n,kt,c),c!==p.cache&&Kf(n,[kt],a,!0),Ds(),c=x.element,p.isDehydrated)if(p={element:c,isDehydrated:!1,cache:x.cache},n.updateQueue.baseState=p,n.memoizedState=p,n.flags&256){n=g0(r,n,c,a);break e}else if(c!==u){u=Lr(Error(o(424)),n),Cs(u),n=g0(r,n,c,a);break e}else for(r=n.stateNode.containerInfo,r.nodeType===9?r=r.body:r=r.nodeName==="HTML"?r.ownerDocument.body:r,mt=Ir(r.firstChild),Vt=n,qe=!0,yn=null,Br=!0,a=fb(n,null,c,a),n.child=a;a;)a.flags=a.flags&-3|4096,a=a.sibling;else{if(lo(),c===u){n=Qi(r,n,a);break e}Ht(r,n,c,a)}n=n.child}return n;case 26:return ud(r,n),r===null?(a=Mx(n.type,null,n.pendingProps,null))?n.memoizedState=a:qe||(a=n.type,r=n.pendingProps,c=Ad(Ee.current).createElement(a),c[fe]=n,c[me]=r,qt(c,a,r),Ge(c),n.stateNode=c):n.memoizedState=Mx(n.type,r.memoizedProps,n.pendingProps,r.memoizedState),null;case 27:return eo(n),r===null&&qe&&(c=n.stateNode=Rx(n.type,n.pendingProps,Ee.current),Vt=n,Br=!0,u=mt,Dn(n.type)?(up=u,mt=Ir(c.firstChild)):mt=u),Ht(r,n,n.pendingProps.children,a),ud(r,n),r===null&&(n.flags|=4194304),n.child;case 5:return r===null&&qe&&((u=c=mt)&&(c=n6(c,n.type,n.pendingProps,Br),c!==null?(n.stateNode=c,Vt=n,mt=Ir(c.firstChild),Br=!1,u=!0):u=!1),u||bn(n)),eo(n),u=n.type,p=n.pendingProps,x=r!==null?r.memoizedProps:null,c=p.children,ap(u,p)?c=null:x!==null&&ap(u,x)&&(n.flags|=32),n.memoizedState!==null&&(u=oh(r,n,b5,null,null,a),el._currentValue=u),ud(r,n),Ht(r,n,c,a),n.child;case 6:return r===null&&qe&&((r=a=mt)&&(a=o6(a,n.pendingProps,Br),a!==null?(n.stateNode=a,Vt=n,mt=null,r=!0):r=!1),r||bn(n)),null;case 13:return y0(r,n,a);case 4:return jt(n,n.stateNode.containerInfo),c=n.pendingProps,r===null?n.child=mo(n,null,c,a):Ht(r,n,c,a),n.child;case 11:return c0(r,n,n.type,n.pendingProps,a);case 7:return Ht(r,n,n.pendingProps,a),n.child;case 8:return Ht(r,n,n.pendingProps.children,a),n.child;case 12:return Ht(r,n,n.pendingProps.children,a),n.child;case 10:return c=n.pendingProps,xn(n,n.type,c.value),Ht(r,n,c.children,a),n.child;case 9:return u=n.type._context,c=n.pendingProps.children,uo(n),u=Ft(u),c=c(u),n.flags|=1,Ht(r,n,c,a),n.child;case 14:return d0(r,n,n.type,n.pendingProps,a);case 15:return u0(r,n,n.type,n.pendingProps,a);case 19:return x0(r,n,a);case 31:return C5(r,n,a);case 22:return f0(r,n,a,n.pendingProps);case 24:return uo(n),c=Ft(kt),r===null?(u=Qf(),u===null&&(u=ct,p=Gf(),u.pooledCache=p,p.refCount++,p!==null&&(u.pooledCacheLanes|=a),u=p),n.memoizedState={parent:c,cache:u},Wf(n),xn(n,kt,u)):((r.lanes&a)!==0&&(Zf(r,n),zs(n,null,null,a),Ds()),u=r.memoizedState,p=n.memoizedState,u.parent!==c?(u={parent:c,cache:c},n.memoizedState=u,n.lanes===0&&(n.memoizedState=n.updateQueue.baseState=u),xn(n,kt,c)):(c=p.cache,xn(n,kt,c),c!==u.cache&&Kf(n,[kt],a,!0))),Ht(r,n,n.pendingProps.children,a),n.child;case 29:throw n.pendingProps}throw Error(o(156,n.tag))}function Xi(r){r.flags|=4}function Dh(r,n,a,c,u){if((n=(r.mode&32)!==0)&&(n=!1),n){if(r.flags|=16777216,(u&335544128)===u)if(r.stateNode.complete)r.flags|=8192;else if(Y0())r.flags|=8192;else throw po=Xc,Xf}else r.flags&=-16777217}function _0(r,n){if(n.type!=="stylesheet"||(n.state.loading&4)!==0)r.flags&=-16777217;else if(r.flags|=16777216,!Nx(n))if(Y0())r.flags|=8192;else throw po=Xc,Xf}function hd(r,n){n!==null&&(r.flags|=4),r.flags&16384&&(n=r.tag!==22?ms():536870912,r.lanes|=n,Ea|=n)}function Us(r,n){if(!qe)switch(r.tailMode){case"hidden":n=r.tail;for(var a=null;n!==null;)n.alternate!==null&&(a=n),n=n.sibling;a===null?r.tail=null:a.sibling=null;break;case"collapsed":a=r.tail;for(var c=null;a!==null;)a.alternate!==null&&(c=a),a=a.sibling;c===null?n||r.tail===null?r.tail=null:r.tail.sibling=null:c.sibling=null}}function vt(r){var n=r.alternate!==null&&r.alternate.child===r.child,a=0,c=0;if(n)for(var u=r.child;u!==null;)a|=u.lanes|u.childLanes,c|=u.subtreeFlags&65011712,c|=u.flags&65011712,u.return=r,u=u.sibling;else for(u=r.child;u!==null;)a|=u.lanes|u.childLanes,c|=u.subtreeFlags,c|=u.flags,u.return=r,u=u.sibling;return r.subtreeFlags|=c,r.childLanes=a,n}function R5(r,n,a){var c=n.pendingProps;switch(If(n),n.tag){case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return vt(n),null;case 1:return vt(n),null;case 3:return a=n.stateNode,c=null,r!==null&&(c=r.memoizedState.cache),n.memoizedState.cache!==c&&(n.flags|=2048),Ki(kt),st(),a.pendingContext&&(a.context=a.pendingContext,a.pendingContext=null),(r===null||r.child===null)&&(ua(n)?Xi(n):r===null||r.memoizedState.isDehydrated&&(n.flags&256)===0||(n.flags|=1024,Ff())),vt(n),null;case 26:var u=n.type,p=n.memoizedState;return r===null?(Xi(n),p!==null?(vt(n),_0(n,p)):(vt(n),Dh(n,u,null,c,a))):p?p!==r.memoizedState?(Xi(n),vt(n),_0(n,p)):(vt(n),n.flags&=-16777217):(r=r.memoizedProps,r!==c&&Xi(n),vt(n),Dh(n,u,r,c,a)),null;case 27:if(Ko(n),a=Ee.current,u=n.type,r!==null&&n.stateNode!=null)r.memoizedProps!==c&&Xi(n);else{if(!c){if(n.stateNode===null)throw Error(o(166));return vt(n),null}r=de.current,ua(n)?tb(n):(r=Rx(u,c,a),n.stateNode=r,Xi(n))}return vt(n),null;case 5:if(Ko(n),u=n.type,r!==null&&n.stateNode!=null)r.memoizedProps!==c&&Xi(n);else{if(!c){if(n.stateNode===null)throw Error(o(166));return vt(n),null}if(p=de.current,ua(n))tb(n);else{var x=Ad(Ee.current);switch(p){case 1:p=x.createElementNS("http://www.w3.org/2000/svg",u);break;case 2:p=x.createElementNS("http://www.w3.org/1998/Math/MathML",u);break;default:switch(u){case"svg":p=x.createElementNS("http://www.w3.org/2000/svg",u);break;case"math":p=x.createElementNS("http://www.w3.org/1998/Math/MathML",u);break;case"script":p=x.createElement("div"),p.innerHTML="<script><\/script>",p=p.removeChild(p.firstChild);break;case"select":p=typeof c.is=="string"?x.createElement("select",{is:c.is}):x.createElement("select"),c.multiple?p.multiple=!0:c.size&&(p.size=c.size);break;default:p=typeof c.is=="string"?x.createElement(u,{is:c.is}):x.createElement(u)}}p[fe]=n,p[me]=c;e:for(x=n.child;x!==null;){if(x.tag===5||x.tag===6)p.appendChild(x.stateNode);else if(x.tag!==4&&x.tag!==27&&x.child!==null){x.child.return=x,x=x.child;continue}if(x===n)break e;for(;x.sibling===null;){if(x.return===null||x.return===n)break e;x=x.return}x.sibling.return=x.return,x=x.sibling}n.stateNode=p;e:switch(qt(p,u,c),u){case"button":case"input":case"select":case"textarea":c=!!c.autoFocus;break e;case"img":c=!0;break e;default:c=!1}c&&Xi(n)}}return vt(n),Dh(n,n.type,r===null?null:r.memoizedProps,n.pendingProps,a),null;case 6:if(r&&n.stateNode!=null)r.memoizedProps!==c&&Xi(n);else{if(typeof c!="string"&&n.stateNode===null)throw Error(o(166));if(r=Ee.current,ua(n)){if(r=n.stateNode,a=n.memoizedProps,c=null,u=Vt,u!==null)switch(u.tag){case 27:case 5:c=u.memoizedProps}r[fe]=n,r=!!(r.nodeValue===a||c!==null&&c.suppressHydrationWarning===!0||yx(r.nodeValue,a)),r||bn(n,!0)}else r=Ad(r).createTextNode(c),r[fe]=n,n.stateNode=r}return vt(n),null;case 31:if(a=n.memoizedState,r===null||r.memoizedState!==null){if(c=ua(n),a!==null){if(r===null){if(!c)throw Error(o(318));if(r=n.memoizedState,r=r!==null?r.dehydrated:null,!r)throw Error(o(557));r[fe]=n}else lo(),(n.flags&128)===0&&(n.memoizedState=null),n.flags|=4;vt(n),r=!1}else a=Ff(),r!==null&&r.memoizedState!==null&&(r.memoizedState.hydrationErrors=a),r=!0;if(!r)return n.flags&256?(Tr(n),n):(Tr(n),null);if((n.flags&128)!==0)throw Error(o(558))}return vt(n),null;case 13:if(c=n.memoizedState,r===null||r.memoizedState!==null&&r.memoizedState.dehydrated!==null){if(u=ua(n),c!==null&&c.dehydrated!==null){if(r===null){if(!u)throw Error(o(318));if(u=n.memoizedState,u=u!==null?u.dehydrated:null,!u)throw Error(o(317));u[fe]=n}else lo(),(n.flags&128)===0&&(n.memoizedState=null),n.flags|=4;vt(n),u=!1}else u=Ff(),r!==null&&r.memoizedState!==null&&(r.memoizedState.hydrationErrors=u),u=!0;if(!u)return n.flags&256?(Tr(n),n):(Tr(n),null)}return Tr(n),(n.flags&128)!==0?(n.lanes=a,n):(a=c!==null,r=r!==null&&r.memoizedState!==null,a&&(c=n.child,u=null,c.alternate!==null&&c.alternate.memoizedState!==null&&c.alternate.memoizedState.cachePool!==null&&(u=c.alternate.memoizedState.cachePool.pool),p=null,c.memoizedState!==null&&c.memoizedState.cachePool!==null&&(p=c.memoizedState.cachePool.pool),p!==u&&(c.flags|=2048)),a!==r&&a&&(n.child.flags|=8192),hd(n,n.updateQueue),vt(n),null);case 4:return st(),r===null&&tp(n.stateNode.containerInfo),vt(n),null;case 10:return Ki(n.type),vt(n),null;case 19:if(q(Ot),c=n.memoizedState,c===null)return vt(n),null;if(u=(n.flags&128)!==0,p=c.rendering,p===null)if(u)Us(c,!1);else{if(_t!==0||r!==null&&(r.flags&128)!==0)for(r=n.child;r!==null;){if(p=ed(r),p!==null){for(n.flags|=128,Us(c,!1),r=p.updateQueue,n.updateQueue=r,hd(n,r),n.subtreeFlags=0,r=a,a=n.child;a!==null;)Xy(a,r),a=a.sibling;return oe(Ot,Ot.current&1|2),qe&&Hi(n,c.treeForkCount),n.child}r=r.sibling}c.tail!==null&&tr()>yd&&(n.flags|=128,u=!0,Us(c,!1),n.lanes=4194304)}else{if(!u)if(r=ed(p),r!==null){if(n.flags|=128,u=!0,r=r.updateQueue,n.updateQueue=r,hd(n,r),Us(c,!0),c.tail===null&&c.tailMode==="hidden"&&!p.alternate&&!qe)return vt(n),null}else 2*tr()-c.renderingStartTime>yd&&a!==536870912&&(n.flags|=128,u=!0,Us(c,!1),n.lanes=4194304);c.isBackwards?(p.sibling=n.child,n.child=p):(r=c.last,r!==null?r.sibling=p:n.child=p,c.last=p)}return c.tail!==null?(r=c.tail,c.rendering=r,c.tail=r.sibling,c.renderingStartTime=tr(),r.sibling=null,a=Ot.current,oe(Ot,u?a&1|2:a&1),qe&&Hi(n,c.treeForkCount),r):(vt(n),null);case 22:case 23:return Tr(n),rh(),c=n.memoizedState!==null,r!==null?r.memoizedState!==null!==c&&(n.flags|=8192):c&&(n.flags|=8192),c?(a&536870912)!==0&&(n.flags&128)===0&&(vt(n),n.subtreeFlags&6&&(n.flags|=8192)):vt(n),a=n.updateQueue,a!==null&&hd(n,a.retryQueue),a=null,r!==null&&r.memoizedState!==null&&r.memoizedState.cachePool!==null&&(a=r.memoizedState.cachePool.pool),c=null,n.memoizedState!==null&&n.memoizedState.cachePool!==null&&(c=n.memoizedState.cachePool.pool),c!==a&&(n.flags|=2048),r!==null&&q(fo),null;case 24:return a=null,r!==null&&(a=r.memoizedState.cache),n.memoizedState.cache!==a&&(n.flags|=2048),Ki(kt),vt(n),null;case 25:return null;case 30:return null}throw Error(o(156,n.tag))}function j5(r,n){switch(If(n),n.tag){case 1:return r=n.flags,r&65536?(n.flags=r&-65537|128,n):null;case 3:return Ki(kt),st(),r=n.flags,(r&65536)!==0&&(r&128)===0?(n.flags=r&-65537|128,n):null;case 26:case 27:case 5:return Ko(n),null;case 31:if(n.memoizedState!==null){if(Tr(n),n.alternate===null)throw Error(o(340));lo()}return r=n.flags,r&65536?(n.flags=r&-65537|128,n):null;case 13:if(Tr(n),r=n.memoizedState,r!==null&&r.dehydrated!==null){if(n.alternate===null)throw Error(o(340));lo()}return r=n.flags,r&65536?(n.flags=r&-65537|128,n):null;case 19:return q(Ot),null;case 4:return st(),null;case 10:return Ki(n.type),null;case 22:case 23:return Tr(n),rh(),r!==null&&q(fo),r=n.flags,r&65536?(n.flags=r&-65537|128,n):null;case 24:return Ki(kt),null;case 25:return null;default:return null}}function S0(r,n){switch(If(n),n.tag){case 3:Ki(kt),st();break;case 26:case 27:case 5:Ko(n);break;case 4:st();break;case 31:n.memoizedState!==null&&Tr(n);break;case 13:Tr(n);break;case 19:q(Ot);break;case 10:Ki(n.type);break;case 22:case 23:Tr(n),rh(),r!==null&&q(fo);break;case 24:Ki(kt)}}function Is(r,n){try{var a=n.updateQueue,c=a!==null?a.lastEffect:null;if(c!==null){var u=c.next;a=u;do{if((a.tag&r)===r){c=void 0;var p=a.create,x=a.inst;c=p(),x.destroy=c}a=a.next}while(a!==u)}}catch(S){rt(n,n.return,S)}}function On(r,n,a){try{var c=n.updateQueue,u=c!==null?c.lastEffect:null;if(u!==null){var p=u.next;c=p;do{if((c.tag&r)===r){var x=c.inst,S=x.destroy;if(S!==void 0){x.destroy=void 0,u=n;var R=a,I=S;try{I()}catch(Y){rt(u,R,Y)}}}c=c.next}while(c!==p)}}catch(Y){rt(n,n.return,Y)}}function E0(r){var n=r.updateQueue;if(n!==null){var a=r.stateNode;try{pb(n,a)}catch(c){rt(r,r.return,c)}}}function T0(r,n,a){a.props=go(r.type,r.memoizedProps),a.state=r.memoizedState;try{a.componentWillUnmount()}catch(c){rt(r,n,c)}}function Vs(r,n){try{var a=r.ref;if(a!==null){switch(r.tag){case 26:case 27:case 5:var c=r.stateNode;break;case 30:c=r.stateNode;break;default:c=r.stateNode}typeof a=="function"?r.refCleanup=a(c):a.current=c}}catch(u){rt(r,n,u)}}function bi(r,n){var a=r.ref,c=r.refCleanup;if(a!==null)if(typeof c=="function")try{c()}catch(u){rt(r,n,u)}finally{r.refCleanup=null,r=r.alternate,r!=null&&(r.refCleanup=null)}else if(typeof a=="function")try{a(null)}catch(u){rt(r,n,u)}else a.current=null}function O0(r){var n=r.type,a=r.memoizedProps,c=r.stateNode;try{e:switch(n){case"button":case"input":case"select":case"textarea":a.autoFocus&&c.focus();break e;case"img":a.src?c.src=a.src:a.srcSet&&(c.srcset=a.srcSet)}}catch(u){rt(r,r.return,u)}}function zh(r,n,a){try{var c=r.stateNode;Z5(c,r.type,a,n),c[me]=n}catch(u){rt(r,r.return,u)}}function C0(r){return r.tag===5||r.tag===3||r.tag===26||r.tag===27&&Dn(r.type)||r.tag===4}function Ph(r){e:for(;;){for(;r.sibling===null;){if(r.return===null||C0(r.return))return null;r=r.return}for(r.sibling.return=r.return,r=r.sibling;r.tag!==5&&r.tag!==6&&r.tag!==18;){if(r.tag===27&&Dn(r.type)||r.flags&2||r.child===null||r.tag===4)continue e;r.child.return=r,r=r.child}if(!(r.flags&2))return r.stateNode}}function Lh(r,n,a){var c=r.tag;if(c===5||c===6)r=r.stateNode,n?(a.nodeType===9?a.body:a.nodeName==="HTML"?a.ownerDocument.body:a).insertBefore(r,n):(n=a.nodeType===9?a.body:a.nodeName==="HTML"?a.ownerDocument.body:a,n.appendChild(r),a=a._reactRootContainer,a!=null||n.onclick!==null||(n.onclick=Ii));else if(c!==4&&(c===27&&Dn(r.type)&&(a=r.stateNode,n=null),r=r.child,r!==null))for(Lh(r,n,a),r=r.sibling;r!==null;)Lh(r,n,a),r=r.sibling}function pd(r,n,a){var c=r.tag;if(c===5||c===6)r=r.stateNode,n?a.insertBefore(r,n):a.appendChild(r);else if(c!==4&&(c===27&&Dn(r.type)&&(a=r.stateNode),r=r.child,r!==null))for(pd(r,n,a),r=r.sibling;r!==null;)pd(r,n,a),r=r.sibling}function A0(r){var n=r.stateNode,a=r.memoizedProps;try{for(var c=r.type,u=n.attributes;u.length;)n.removeAttributeNode(u[0]);qt(n,c,a),n[fe]=r,n[me]=a}catch(p){rt(r,r.return,p)}}var Wi=!1,zt=!1,Nh=!1,R0=typeof WeakSet=="function"?WeakSet:Set,It=null;function k5(r,n){if(r=r.containerInfo,np=Pd,r=Iy(r),jf(r)){if("selectionStart"in r)var a={start:r.selectionStart,end:r.selectionEnd};else e:{a=(a=r.ownerDocument)&&a.defaultView||window;var c=a.getSelection&&a.getSelection();if(c&&c.rangeCount!==0){a=c.anchorNode;var u=c.anchorOffset,p=c.focusNode;c=c.focusOffset;try{a.nodeType,p.nodeType}catch{a=null;break e}var x=0,S=-1,R=-1,I=0,Y=0,Z=r,F=null;t:for(;;){for(var G;Z!==a||u!==0&&Z.nodeType!==3||(S=x+u),Z!==p||c!==0&&Z.nodeType!==3||(R=x+c),Z.nodeType===3&&(x+=Z.nodeValue.length),(G=Z.firstChild)!==null;)F=Z,Z=G;for(;;){if(Z===r)break t;if(F===a&&++I===u&&(S=x),F===p&&++Y===c&&(R=x),(G=Z.nextSibling)!==null)break;Z=F,F=Z.parentNode}Z=G}a=S===-1||R===-1?null:{start:S,end:R}}else a=null}a=a||{start:0,end:0}}else a=null;for(op={focusedElem:r,selectionRange:a},Pd=!1,It=n;It!==null;)if(n=It,r=n.child,(n.subtreeFlags&1028)!==0&&r!==null)r.return=n,It=r;else for(;It!==null;){switch(n=It,p=n.alternate,r=n.flags,n.tag){case 0:if((r&4)!==0&&(r=n.updateQueue,r=r!==null?r.events:null,r!==null))for(a=0;a<r.length;a++)u=r[a],u.ref.impl=u.nextImpl;break;case 11:case 15:break;case 1:if((r&1024)!==0&&p!==null){r=void 0,a=n,u=p.memoizedProps,p=p.memoizedState,c=a.stateNode;try{var ye=go(a.type,u);r=c.getSnapshotBeforeUpdate(ye,p),c.__reactInternalSnapshotBeforeUpdate=r}catch(je){rt(a,a.return,je)}}break;case 3:if((r&1024)!==0){if(r=n.stateNode.containerInfo,a=r.nodeType,a===9)lp(r);else if(a===1)switch(r.nodeName){case"HEAD":case"HTML":case"BODY":lp(r);break;default:r.textContent=""}}break;case 5:case 26:case 27:case 6:case 4:case 17:break;default:if((r&1024)!==0)throw Error(o(163))}if(r=n.sibling,r!==null){r.return=n.return,It=r;break}It=n.return}}function j0(r,n,a){var c=a.flags;switch(a.tag){case 0:case 11:case 15:Ji(r,a),c&4&&Is(5,a);break;case 1:if(Ji(r,a),c&4)if(r=a.stateNode,n===null)try{r.componentDidMount()}catch(x){rt(a,a.return,x)}else{var u=go(a.type,n.memoizedProps);n=n.memoizedState;try{r.componentDidUpdate(u,n,r.__reactInternalSnapshotBeforeUpdate)}catch(x){rt(a,a.return,x)}}c&64&&E0(a),c&512&&Vs(a,a.return);break;case 3:if(Ji(r,a),c&64&&(r=a.updateQueue,r!==null)){if(n=null,a.child!==null)switch(a.child.tag){case 27:case 5:n=a.child.stateNode;break;case 1:n=a.child.stateNode}try{pb(r,n)}catch(x){rt(a,a.return,x)}}break;case 27:n===null&&c&4&&A0(a);case 26:case 5:Ji(r,a),n===null&&c&4&&O0(a),c&512&&Vs(a,a.return);break;case 12:Ji(r,a);break;case 31:Ji(r,a),c&4&&D0(r,a);break;case 13:Ji(r,a),c&4&&z0(r,a),c&64&&(r=a.memoizedState,r!==null&&(r=r.dehydrated,r!==null&&(a=U5.bind(null,a),a6(r,a))));break;case 22:if(c=a.memoizedState!==null||Wi,!c){n=n!==null&&n.memoizedState!==null||zt,u=Wi;var p=zt;Wi=c,(zt=n)&&!p?en(r,a,(a.subtreeFlags&8772)!==0):Ji(r,a),Wi=u,zt=p}break;case 30:break;default:Ji(r,a)}}function k0(r){var n=r.alternate;n!==null&&(r.alternate=null,k0(n)),r.child=null,r.deletions=null,r.sibling=null,r.tag===5&&(n=r.stateNode,n!==null&&Qe(n)),r.stateNode=null,r.return=null,r.dependencies=null,r.memoizedProps=null,r.memoizedState=null,r.pendingProps=null,r.stateNode=null,r.updateQueue=null}var gt=null,mr=!1;function Zi(r,n,a){for(a=a.child;a!==null;)M0(r,n,a),a=a.sibling}function M0(r,n,a){if(rr&&typeof rr.onCommitFiberUnmount=="function")try{rr.onCommitFiberUnmount(Li,a)}catch{}switch(a.tag){case 26:zt||bi(a,n),Zi(r,n,a),a.memoizedState?a.memoizedState.count--:a.stateNode&&(a=a.stateNode,a.parentNode.removeChild(a));break;case 27:zt||bi(a,n);var c=gt,u=mr;Dn(a.type)&&(gt=a.stateNode,mr=!1),Zi(r,n,a),Ws(a.stateNode),gt=c,mr=u;break;case 5:zt||bi(a,n);case 6:if(c=gt,u=mr,gt=null,Zi(r,n,a),gt=c,mr=u,gt!==null)if(mr)try{(gt.nodeType===9?gt.body:gt.nodeName==="HTML"?gt.ownerDocument.body:gt).removeChild(a.stateNode)}catch(p){rt(a,n,p)}else try{gt.removeChild(a.stateNode)}catch(p){rt(a,n,p)}break;case 18:gt!==null&&(mr?(r=gt,Ex(r.nodeType===9?r.body:r.nodeName==="HTML"?r.ownerDocument.body:r,a.stateNode),Ma(r)):Ex(gt,a.stateNode));break;case 4:c=gt,u=mr,gt=a.stateNode.containerInfo,mr=!0,Zi(r,n,a),gt=c,mr=u;break;case 0:case 11:case 14:case 15:On(2,a,n),zt||On(4,a,n),Zi(r,n,a);break;case 1:zt||(bi(a,n),c=a.stateNode,typeof c.componentWillUnmount=="function"&&T0(a,n,c)),Zi(r,n,a);break;case 21:Zi(r,n,a);break;case 22:zt=(c=zt)||a.memoizedState!==null,Zi(r,n,a),zt=c;break;default:Zi(r,n,a)}}function D0(r,n){if(n.memoizedState===null&&(r=n.alternate,r!==null&&(r=r.memoizedState,r!==null))){r=r.dehydrated;try{Ma(r)}catch(a){rt(n,n.return,a)}}}function z0(r,n){if(n.memoizedState===null&&(r=n.alternate,r!==null&&(r=r.memoizedState,r!==null&&(r=r.dehydrated,r!==null))))try{Ma(r)}catch(a){rt(n,n.return,a)}}function M5(r){switch(r.tag){case 31:case 13:case 19:var n=r.stateNode;return n===null&&(n=r.stateNode=new R0),n;case 22:return r=r.stateNode,n=r._retryCache,n===null&&(n=r._retryCache=new R0),n;default:throw Error(o(435,r.tag))}}function md(r,n){var a=M5(r);n.forEach(function(c){if(!a.has(c)){a.add(c);var u=I5.bind(null,r,c);c.then(u,u)}})}function vr(r,n){var a=n.deletions;if(a!==null)for(var c=0;c<a.length;c++){var u=a[c],p=r,x=n,S=x;e:for(;S!==null;){switch(S.tag){case 27:if(Dn(S.type)){gt=S.stateNode,mr=!1;break e}break;case 5:gt=S.stateNode,mr=!1;break e;case 3:case 4:gt=S.stateNode.containerInfo,mr=!0;break e}S=S.return}if(gt===null)throw Error(o(160));M0(p,x,u),gt=null,mr=!1,p=u.alternate,p!==null&&(p.return=null),u.return=null}if(n.subtreeFlags&13886)for(n=n.child;n!==null;)P0(n,r),n=n.sibling}var ai=null;function P0(r,n){var a=r.alternate,c=r.flags;switch(r.tag){case 0:case 11:case 14:case 15:vr(n,r),gr(r),c&4&&(On(3,r,r.return),Is(3,r),On(5,r,r.return));break;case 1:vr(n,r),gr(r),c&512&&(zt||a===null||bi(a,a.return)),c&64&&Wi&&(r=r.updateQueue,r!==null&&(c=r.callbacks,c!==null&&(a=r.shared.hiddenCallbacks,r.shared.hiddenCallbacks=a===null?c:a.concat(c))));break;case 26:var u=ai;if(vr(n,r),gr(r),c&512&&(zt||a===null||bi(a,a.return)),c&4){var p=a!==null?a.memoizedState:null;if(c=r.memoizedState,a===null)if(c===null)if(r.stateNode===null){e:{c=r.type,a=r.memoizedProps,u=u.ownerDocument||u;t:switch(c){case"title":p=u.getElementsByTagName("title")[0],(!p||p[Be]||p[fe]||p.namespaceURI==="http://www.w3.org/2000/svg"||p.hasAttribute("itemprop"))&&(p=u.createElement(c),u.head.insertBefore(p,u.querySelector("head > title"))),qt(p,c,a),p[fe]=r,Ge(p),c=p;break e;case"link":var x=Px("link","href",u).get(c+(a.href||""));if(x){for(var S=0;S<x.length;S++)if(p=x[S],p.getAttribute("href")===(a.href==null||a.href===""?null:a.href)&&p.getAttribute("rel")===(a.rel==null?null:a.rel)&&p.getAttribute("title")===(a.title==null?null:a.title)&&p.getAttribute("crossorigin")===(a.crossOrigin==null?null:a.crossOrigin)){x.splice(S,1);break t}}p=u.createElement(c),qt(p,c,a),u.head.appendChild(p);break;case"meta":if(x=Px("meta","content",u).get(c+(a.content||""))){for(S=0;S<x.length;S++)if(p=x[S],p.getAttribute("content")===(a.content==null?null:""+a.content)&&p.getAttribute("name")===(a.name==null?null:a.name)&&p.getAttribute("property")===(a.property==null?null:a.property)&&p.getAttribute("http-equiv")===(a.httpEquiv==null?null:a.httpEquiv)&&p.getAttribute("charset")===(a.charSet==null?null:a.charSet)){x.splice(S,1);break t}}p=u.createElement(c),qt(p,c,a),u.head.appendChild(p);break;default:throw Error(o(468,c))}p[fe]=r,Ge(p),c=p}r.stateNode=c}else Lx(u,r.type,r.stateNode);else r.stateNode=zx(u,c,r.memoizedProps);else p!==c?(p===null?a.stateNode!==null&&(a=a.stateNode,a.parentNode.removeChild(a)):p.count--,c===null?Lx(u,r.type,r.stateNode):zx(u,c,r.memoizedProps)):c===null&&r.stateNode!==null&&zh(r,r.memoizedProps,a.memoizedProps)}break;case 27:vr(n,r),gr(r),c&512&&(zt||a===null||bi(a,a.return)),a!==null&&c&4&&zh(r,r.memoizedProps,a.memoizedProps);break;case 5:if(vr(n,r),gr(r),c&512&&(zt||a===null||bi(a,a.return)),r.flags&32){u=r.stateNode;try{ta(u,"")}catch(ye){rt(r,r.return,ye)}}c&4&&r.stateNode!=null&&(u=r.memoizedProps,zh(r,u,a!==null?a.memoizedProps:u)),c&1024&&(Nh=!0);break;case 6:if(vr(n,r),gr(r),c&4){if(r.stateNode===null)throw Error(o(162));c=r.memoizedProps,a=r.stateNode;try{a.nodeValue=c}catch(ye){rt(r,r.return,ye)}}break;case 3:if(kd=null,u=ai,ai=Rd(n.containerInfo),vr(n,r),ai=u,gr(r),c&4&&a!==null&&a.memoizedState.isDehydrated)try{Ma(n.containerInfo)}catch(ye){rt(r,r.return,ye)}Nh&&(Nh=!1,L0(r));break;case 4:c=ai,ai=Rd(r.stateNode.containerInfo),vr(n,r),gr(r),ai=c;break;case 12:vr(n,r),gr(r);break;case 31:vr(n,r),gr(r),c&4&&(c=r.updateQueue,c!==null&&(r.updateQueue=null,md(r,c)));break;case 13:vr(n,r),gr(r),r.child.flags&8192&&r.memoizedState!==null!=(a!==null&&a.memoizedState!==null)&&(gd=tr()),c&4&&(c=r.updateQueue,c!==null&&(r.updateQueue=null,md(r,c)));break;case 22:u=r.memoizedState!==null;var R=a!==null&&a.memoizedState!==null,I=Wi,Y=zt;if(Wi=I||u,zt=Y||R,vr(n,r),zt=Y,Wi=I,gr(r),c&8192)e:for(n=r.stateNode,n._visibility=u?n._visibility&-2:n._visibility|1,u&&(a===null||R||Wi||zt||yo(r)),a=null,n=r;;){if(n.tag===5||n.tag===26){if(a===null){R=a=n;try{if(p=R.stateNode,u)x=p.style,typeof x.setProperty=="function"?x.setProperty("display","none","important"):x.display="none";else{S=R.stateNode;var Z=R.memoizedProps.style,F=Z!=null&&Z.hasOwnProperty("display")?Z.display:null;S.style.display=F==null||typeof F=="boolean"?"":(""+F).trim()}}catch(ye){rt(R,R.return,ye)}}}else if(n.tag===6){if(a===null){R=n;try{R.stateNode.nodeValue=u?"":R.memoizedProps}catch(ye){rt(R,R.return,ye)}}}else if(n.tag===18){if(a===null){R=n;try{var G=R.stateNode;u?Tx(G,!0):Tx(R.stateNode,!1)}catch(ye){rt(R,R.return,ye)}}}else if((n.tag!==22&&n.tag!==23||n.memoizedState===null||n===r)&&n.child!==null){n.child.return=n,n=n.child;continue}if(n===r)break e;for(;n.sibling===null;){if(n.return===null||n.return===r)break e;a===n&&(a=null),n=n.return}a===n&&(a=null),n.sibling.return=n.return,n=n.sibling}c&4&&(c=r.updateQueue,c!==null&&(a=c.retryQueue,a!==null&&(c.retryQueue=null,md(r,a))));break;case 19:vr(n,r),gr(r),c&4&&(c=r.updateQueue,c!==null&&(r.updateQueue=null,md(r,c)));break;case 30:break;case 21:break;default:vr(n,r),gr(r)}}function gr(r){var n=r.flags;if(n&2){try{for(var a,c=r.return;c!==null;){if(C0(c)){a=c;break}c=c.return}if(a==null)throw Error(o(160));switch(a.tag){case 27:var u=a.stateNode,p=Ph(r);pd(r,p,u);break;case 5:var x=a.stateNode;a.flags&32&&(ta(x,""),a.flags&=-33);var S=Ph(r);pd(r,S,x);break;case 3:case 4:var R=a.stateNode.containerInfo,I=Ph(r);Lh(r,I,R);break;default:throw Error(o(161))}}catch(Y){rt(r,r.return,Y)}r.flags&=-3}n&4096&&(r.flags&=-4097)}function L0(r){if(r.subtreeFlags&1024)for(r=r.child;r!==null;){var n=r;L0(n),n.tag===5&&n.flags&1024&&n.stateNode.reset(),r=r.sibling}}function Ji(r,n){if(n.subtreeFlags&8772)for(n=n.child;n!==null;)j0(r,n.alternate,n),n=n.sibling}function yo(r){for(r=r.child;r!==null;){var n=r;switch(n.tag){case 0:case 11:case 14:case 15:On(4,n,n.return),yo(n);break;case 1:bi(n,n.return);var a=n.stateNode;typeof a.componentWillUnmount=="function"&&T0(n,n.return,a),yo(n);break;case 27:Ws(n.stateNode);case 26:case 5:bi(n,n.return),yo(n);break;case 22:n.memoizedState===null&&yo(n);break;case 30:yo(n);break;default:yo(n)}r=r.sibling}}function en(r,n,a){for(a=a&&(n.subtreeFlags&8772)!==0,n=n.child;n!==null;){var c=n.alternate,u=r,p=n,x=p.flags;switch(p.tag){case 0:case 11:case 15:en(u,p,a),Is(4,p);break;case 1:if(en(u,p,a),c=p,u=c.stateNode,typeof u.componentDidMount=="function")try{u.componentDidMount()}catch(I){rt(c,c.return,I)}if(c=p,u=c.updateQueue,u!==null){var S=c.stateNode;try{var R=u.shared.hiddenCallbacks;if(R!==null)for(u.shared.hiddenCallbacks=null,u=0;u<R.length;u++)hb(R[u],S)}catch(I){rt(c,c.return,I)}}a&&x&64&&E0(p),Vs(p,p.return);break;case 27:A0(p);case 26:case 5:en(u,p,a),a&&c===null&&x&4&&O0(p),Vs(p,p.return);break;case 12:en(u,p,a);break;case 31:en(u,p,a),a&&x&4&&D0(u,p);break;case 13:en(u,p,a),a&&x&4&&z0(u,p);break;case 22:p.memoizedState===null&&en(u,p,a),Vs(p,p.return);break;case 30:break;default:en(u,p,a)}n=n.sibling}}function $h(r,n){var a=null;r!==null&&r.memoizedState!==null&&r.memoizedState.cachePool!==null&&(a=r.memoizedState.cachePool.pool),r=null,n.memoizedState!==null&&n.memoizedState.cachePool!==null&&(r=n.memoizedState.cachePool.pool),r!==a&&(r!=null&&r.refCount++,a!=null&&As(a))}function Bh(r,n){r=null,n.alternate!==null&&(r=n.alternate.memoizedState.cache),n=n.memoizedState.cache,n!==r&&(n.refCount++,r!=null&&As(r))}function si(r,n,a,c){if(n.subtreeFlags&10256)for(n=n.child;n!==null;)N0(r,n,a,c),n=n.sibling}function N0(r,n,a,c){var u=n.flags;switch(n.tag){case 0:case 11:case 15:si(r,n,a,c),u&2048&&Is(9,n);break;case 1:si(r,n,a,c);break;case 3:si(r,n,a,c),u&2048&&(r=null,n.alternate!==null&&(r=n.alternate.memoizedState.cache),n=n.memoizedState.cache,n!==r&&(n.refCount++,r!=null&&As(r)));break;case 12:if(u&2048){si(r,n,a,c),r=n.stateNode;try{var p=n.memoizedProps,x=p.id,S=p.onPostCommit;typeof S=="function"&&S(x,n.alternate===null?"mount":"update",r.passiveEffectDuration,-0)}catch(R){rt(n,n.return,R)}}else si(r,n,a,c);break;case 31:si(r,n,a,c);break;case 13:si(r,n,a,c);break;case 23:break;case 22:p=n.stateNode,x=n.alternate,n.memoizedState!==null?p._visibility&2?si(r,n,a,c):Fs(r,n):p._visibility&2?si(r,n,a,c):(p._visibility|=2,wa(r,n,a,c,(n.subtreeFlags&10256)!==0||!1)),u&2048&&$h(x,n);break;case 24:si(r,n,a,c),u&2048&&Bh(n.alternate,n);break;default:si(r,n,a,c)}}function wa(r,n,a,c,u){for(u=u&&((n.subtreeFlags&10256)!==0||!1),n=n.child;n!==null;){var p=r,x=n,S=a,R=c,I=x.flags;switch(x.tag){case 0:case 11:case 15:wa(p,x,S,R,u),Is(8,x);break;case 23:break;case 22:var Y=x.stateNode;x.memoizedState!==null?Y._visibility&2?wa(p,x,S,R,u):Fs(p,x):(Y._visibility|=2,wa(p,x,S,R,u)),u&&I&2048&&$h(x.alternate,x);break;case 24:wa(p,x,S,R,u),u&&I&2048&&Bh(x.alternate,x);break;default:wa(p,x,S,R,u)}n=n.sibling}}function Fs(r,n){if(n.subtreeFlags&10256)for(n=n.child;n!==null;){var a=r,c=n,u=c.flags;switch(c.tag){case 22:Fs(a,c),u&2048&&$h(c.alternate,c);break;case 24:Fs(a,c),u&2048&&Bh(c.alternate,c);break;default:Fs(a,c)}n=n.sibling}}var Hs=8192;function _a(r,n,a){if(r.subtreeFlags&Hs)for(r=r.child;r!==null;)$0(r,n,a),r=r.sibling}function $0(r,n,a){switch(r.tag){case 26:_a(r,n,a),r.flags&Hs&&r.memoizedState!==null&&y6(a,ai,r.memoizedState,r.memoizedProps);break;case 5:_a(r,n,a);break;case 3:case 4:var c=ai;ai=Rd(r.stateNode.containerInfo),_a(r,n,a),ai=c;break;case 22:r.memoizedState===null&&(c=r.alternate,c!==null&&c.memoizedState!==null?(c=Hs,Hs=16777216,_a(r,n,a),Hs=c):_a(r,n,a));break;default:_a(r,n,a)}}function B0(r){var n=r.alternate;if(n!==null&&(r=n.child,r!==null)){n.child=null;do n=r.sibling,r.sibling=null,r=n;while(r!==null)}}function qs(r){var n=r.deletions;if((r.flags&16)!==0){if(n!==null)for(var a=0;a<n.length;a++){var c=n[a];It=c,I0(c,r)}B0(r)}if(r.subtreeFlags&10256)for(r=r.child;r!==null;)U0(r),r=r.sibling}function U0(r){switch(r.tag){case 0:case 11:case 15:qs(r),r.flags&2048&&On(9,r,r.return);break;case 3:qs(r);break;case 12:qs(r);break;case 22:var n=r.stateNode;r.memoizedState!==null&&n._visibility&2&&(r.return===null||r.return.tag!==13)?(n._visibility&=-3,vd(r)):qs(r);break;default:qs(r)}}function vd(r){var n=r.deletions;if((r.flags&16)!==0){if(n!==null)for(var a=0;a<n.length;a++){var c=n[a];It=c,I0(c,r)}B0(r)}for(r=r.child;r!==null;){switch(n=r,n.tag){case 0:case 11:case 15:On(8,n,n.return),vd(n);break;case 22:a=n.stateNode,a._visibility&2&&(a._visibility&=-3,vd(n));break;default:vd(n)}r=r.sibling}}function I0(r,n){for(;It!==null;){var a=It;switch(a.tag){case 0:case 11:case 15:On(8,a,n);break;case 23:case 22:if(a.memoizedState!==null&&a.memoizedState.cachePool!==null){var c=a.memoizedState.cachePool.pool;c!=null&&c.refCount++}break;case 24:As(a.memoizedState.cache)}if(c=a.child,c!==null)c.return=a,It=c;else e:for(a=r;It!==null;){c=It;var u=c.sibling,p=c.return;if(k0(c),c===a){It=null;break e}if(u!==null){u.return=p,It=u;break e}It=p}}}var D5={getCacheForType:function(r){var n=Ft(kt),a=n.data.get(r);return a===void 0&&(a=r(),n.data.set(r,a)),a},cacheSignal:function(){return Ft(kt).controller.signal}},z5=typeof WeakMap=="function"?WeakMap:Map,Ze=0,ct=null,Ie=null,Fe=0,tt=0,Or=null,Cn=!1,Sa=!1,Uh=!1,tn=0,_t=0,An=0,bo=0,Ih=0,Cr=0,Ea=0,Ks=null,yr=null,Vh=!1,gd=0,V0=0,yd=1/0,bd=null,Rn=null,Nt=0,jn=null,Ta=null,rn=0,Fh=0,Hh=null,F0=null,Gs=0,qh=null;function Ar(){return(Ze&2)!==0&&Fe!==0?Fe&-Fe:N.T!==null?Wh():te()}function H0(){if(Cr===0)if((Fe&536870912)===0||qe){var r=Ni;Ni<<=1,(Ni&3932160)===0&&(Ni=262144),Cr=r}else Cr=536870912;return r=Er.current,r!==null&&(r.flags|=32),Cr}function br(r,n,a){(r===ct&&(tt===2||tt===9)||r.cancelPendingCommit!==null)&&(Oa(r,0),kn(r,Fe,Cr,!1)),vi(r,a),((Ze&2)===0||r!==ct)&&(r===ct&&((Ze&2)===0&&(bo|=a),_t===4&&kn(r,Fe,Cr,!1)),xi(r))}function q0(r,n,a){if((Ze&6)!==0)throw Error(o(327));var c=!a&&(n&127)===0&&(n&r.expiredLanes)===0||hn(r,n),u=c?N5(r,n):Gh(r,n,!0),p=c;do{if(u===0){Sa&&!c&&kn(r,n,0,!1);break}else{if(a=r.current.alternate,p&&!P5(a)){u=Gh(r,n,!1),p=!1;continue}if(u===2){if(p=n,r.errorRecoveryDisabledLanes&p)var x=0;else x=r.pendingLanes&-536870913,x=x!==0?x:x&536870912?536870912:0;if(x!==0){n=x;e:{var S=r;u=Ks;var R=S.current.memoizedState.isDehydrated;if(R&&(Oa(S,x).flags|=256),x=Gh(S,x,!1),x!==2){if(Uh&&!R){S.errorRecoveryDisabledLanes|=p,bo|=p,u=4;break e}p=yr,yr=u,p!==null&&(yr===null?yr=p:yr.push.apply(yr,p))}u=x}if(p=!1,u!==2)continue}}if(u===1){Oa(r,0),kn(r,n,0,!0);break}e:{switch(c=r,p=u,p){case 0:case 1:throw Error(o(345));case 4:if((n&4194048)!==n)break;case 6:kn(c,n,Cr,!Cn);break e;case 2:yr=null;break;case 3:case 5:break;default:throw Error(o(329))}if((n&62914560)===n&&(u=gd+300-tr(),10<u)){if(kn(c,n,Cr,!Cn),Qo(c,0,!0)!==0)break e;rn=n,c.timeoutHandle=_x(K0.bind(null,c,a,yr,bd,Vh,n,Cr,bo,Ea,Cn,p,"Throttled",-0,0),u);break e}K0(c,a,yr,bd,Vh,n,Cr,bo,Ea,Cn,p,null,-0,0)}}break}while(!0);xi(r)}function K0(r,n,a,c,u,p,x,S,R,I,Y,Z,F,G){if(r.timeoutHandle=-1,Z=n.subtreeFlags,Z&8192||(Z&16785408)===16785408){Z={stylesheets:null,count:0,imgCount:0,imgBytes:0,suspenseyImages:[],waitingForImages:!0,waitingForViewTransition:!1,unsuspend:Ii},$0(n,p,Z);var ye=(p&62914560)===p?gd-tr():(p&4194048)===p?V0-tr():0;if(ye=b6(Z,ye),ye!==null){rn=p,r.cancelPendingCommit=ye(ex.bind(null,r,n,p,a,c,u,x,S,R,Y,Z,null,F,G)),kn(r,p,x,!I);return}}ex(r,n,p,a,c,u,x,S,R)}function P5(r){for(var n=r;;){var a=n.tag;if((a===0||a===11||a===15)&&n.flags&16384&&(a=n.updateQueue,a!==null&&(a=a.stores,a!==null)))for(var c=0;c<a.length;c++){var u=a[c],p=u.getSnapshot;u=u.value;try{if(!_r(p(),u))return!1}catch{return!1}}if(a=n.child,n.subtreeFlags&16384&&a!==null)a.return=n,n=a;else{if(n===r)break;for(;n.sibling===null;){if(n.return===null||n.return===r)return!0;n=n.return}n.sibling.return=n.return,n=n.sibling}}return!0}function kn(r,n,a,c){n&=~Ih,n&=~bo,r.suspendedLanes|=n,r.pingedLanes&=~n,c&&(r.warmLanes|=n),c=r.expirationTimes;for(var u=n;0<u;){var p=31-Qt(u),x=1<<p;c[p]=-1,u&=~x}a!==0&&kc(r,a,n)}function xd(){return(Ze&6)===0?(Ys(0),!1):!0}function Kh(){if(Ie!==null){if(tt===0)var r=Ie.return;else r=Ie,qi=co=null,lh(r),va=null,js=0,r=Ie;for(;r!==null;)S0(r.alternate,r),r=r.return;Ie=null}}function Oa(r,n){var a=r.timeoutHandle;a!==-1&&(r.timeoutHandle=-1,t6(a)),a=r.cancelPendingCommit,a!==null&&(r.cancelPendingCommit=null,a()),rn=0,Kh(),ct=r,Ie=a=Fi(r.current,null),Fe=n,tt=0,Or=null,Cn=!1,Sa=hn(r,n),Uh=!1,Ea=Cr=Ih=bo=An=_t=0,yr=Ks=null,Vh=!1,(n&8)!==0&&(n|=n&32);var c=r.entangledLanes;if(c!==0)for(r=r.entanglements,c&=n;0<c;){var u=31-Qt(c),p=1<<u;n|=r[u],c&=~p}return tn=n,Ic(),a}function G0(r,n){Pe=null,N.H=$s,n===ma||n===Qc?(n=cb(),tt=3):n===Xf?(n=cb(),tt=4):tt=n===Eh?8:n!==null&&typeof n=="object"&&typeof n.then=="function"?6:1,Or=n,Ie===null&&(_t=1,cd(r,Lr(n,r.current)))}function Y0(){var r=Er.current;return r===null?!0:(Fe&4194048)===Fe?Ur===null:(Fe&62914560)===Fe||(Fe&536870912)!==0?r===Ur:!1}function Q0(){var r=N.H;return N.H=$s,r===null?$s:r}function X0(){var r=N.A;return N.A=D5,r}function wd(){_t=4,Cn||(Fe&4194048)!==Fe&&Er.current!==null||(Sa=!0),(An&134217727)===0&&(bo&134217727)===0||ct===null||kn(ct,Fe,Cr,!1)}function Gh(r,n,a){var c=Ze;Ze|=2;var u=Q0(),p=X0();(ct!==r||Fe!==n)&&(bd=null,Oa(r,n)),n=!1;var x=_t;e:do try{if(tt!==0&&Ie!==null){var S=Ie,R=Or;switch(tt){case 8:Kh(),x=6;break e;case 3:case 2:case 9:case 6:Er.current===null&&(n=!0);var I=tt;if(tt=0,Or=null,Ca(r,S,R,I),a&&Sa){x=0;break e}break;default:I=tt,tt=0,Or=null,Ca(r,S,R,I)}}L5(),x=_t;break}catch(Y){G0(r,Y)}while(!0);return n&&r.shellSuspendCounter++,qi=co=null,Ze=c,N.H=u,N.A=p,Ie===null&&(ct=null,Fe=0,Ic()),x}function L5(){for(;Ie!==null;)W0(Ie)}function N5(r,n){var a=Ze;Ze|=2;var c=Q0(),u=X0();ct!==r||Fe!==n?(bd=null,yd=tr()+500,Oa(r,n)):Sa=hn(r,n);e:do try{if(tt!==0&&Ie!==null){n=Ie;var p=Or;t:switch(tt){case 1:tt=0,Or=null,Ca(r,n,p,1);break;case 2:case 9:if(sb(p)){tt=0,Or=null,Z0(n);break}n=function(){tt!==2&&tt!==9||ct!==r||(tt=7),xi(r)},p.then(n,n);break e;case 3:tt=7;break e;case 4:tt=5;break e;case 7:sb(p)?(tt=0,Or=null,Z0(n)):(tt=0,Or=null,Ca(r,n,p,7));break;case 5:var x=null;switch(Ie.tag){case 26:x=Ie.memoizedState;case 5:case 27:var S=Ie;if(x?Nx(x):S.stateNode.complete){tt=0,Or=null;var R=S.sibling;if(R!==null)Ie=R;else{var I=S.return;I!==null?(Ie=I,_d(I)):Ie=null}break t}}tt=0,Or=null,Ca(r,n,p,5);break;case 6:tt=0,Or=null,Ca(r,n,p,6);break;case 8:Kh(),_t=6;break e;default:throw Error(o(462))}}$5();break}catch(Y){G0(r,Y)}while(!0);return qi=co=null,N.H=c,N.A=u,Ze=a,Ie!==null?0:(ct=null,Fe=0,Ic(),_t)}function $5(){for(;Ie!==null&&!df();)W0(Ie)}function W0(r){var n=w0(r.alternate,r,tn);r.memoizedProps=r.pendingProps,n===null?_d(r):Ie=n}function Z0(r){var n=r,a=n.alternate;switch(n.tag){case 15:case 0:n=m0(a,n,n.pendingProps,n.type,void 0,Fe);break;case 11:n=m0(a,n,n.pendingProps,n.type.render,n.ref,Fe);break;case 5:lh(n);default:S0(a,n),n=Ie=Xy(n,tn),n=w0(a,n,tn)}r.memoizedProps=r.pendingProps,n===null?_d(r):Ie=n}function Ca(r,n,a,c){qi=co=null,lh(n),va=null,js=0;var u=n.return;try{if(O5(r,u,n,a,Fe)){_t=1,cd(r,Lr(a,r.current)),Ie=null;return}}catch(p){if(u!==null)throw Ie=u,p;_t=1,cd(r,Lr(a,r.current)),Ie=null;return}n.flags&32768?(qe||c===1?r=!0:Sa||(Fe&536870912)!==0?r=!1:(Cn=r=!0,(c===2||c===9||c===3||c===6)&&(c=Er.current,c!==null&&c.tag===13&&(c.flags|=16384))),J0(n,r)):_d(n)}function _d(r){var n=r;do{if((n.flags&32768)!==0){J0(n,Cn);return}r=n.return;var a=R5(n.alternate,n,tn);if(a!==null){Ie=a;return}if(n=n.sibling,n!==null){Ie=n;return}Ie=n=r}while(n!==null);_t===0&&(_t=5)}function J0(r,n){do{var a=j5(r.alternate,r);if(a!==null){a.flags&=32767,Ie=a;return}if(a=r.return,a!==null&&(a.flags|=32768,a.subtreeFlags=0,a.deletions=null),!n&&(r=r.sibling,r!==null)){Ie=r;return}Ie=r=a}while(r!==null);_t=6,Ie=null}function ex(r,n,a,c,u,p,x,S,R){r.cancelPendingCommit=null;do Sd();while(Nt!==0);if((Ze&6)!==0)throw Error(o(327));if(n!==null){if(n===r.current)throw Error(o(177));if(p=n.lanes|n.childLanes,p|=Pf,jc(r,a,p,x,S,R),r===ct&&(Ie=ct=null,Fe=0),Ta=n,jn=r,rn=a,Fh=p,Hh=u,F0=c,(n.subtreeFlags&10256)!==0||(n.flags&10256)!==0?(r.callbackNode=null,r.callbackPriority=0,V5(fn,function(){return ox(),null})):(r.callbackNode=null,r.callbackPriority=0),c=(n.flags&13878)!==0,(n.subtreeFlags&13878)!==0||c){c=N.T,N.T=null,u=Q.p,Q.p=2,x=Ze,Ze|=4;try{k5(r,n,a)}finally{Ze=x,Q.p=u,N.T=c}}Nt=1,tx(),rx(),ix()}}function tx(){if(Nt===1){Nt=0;var r=jn,n=Ta,a=(n.flags&13878)!==0;if((n.subtreeFlags&13878)!==0||a){a=N.T,N.T=null;var c=Q.p;Q.p=2;var u=Ze;Ze|=4;try{P0(n,r);var p=op,x=Iy(r.containerInfo),S=p.focusedElem,R=p.selectionRange;if(x!==S&&S&&S.ownerDocument&&Uy(S.ownerDocument.documentElement,S)){if(R!==null&&jf(S)){var I=R.start,Y=R.end;if(Y===void 0&&(Y=I),"selectionStart"in S)S.selectionStart=I,S.selectionEnd=Math.min(Y,S.value.length);else{var Z=S.ownerDocument||document,F=Z&&Z.defaultView||window;if(F.getSelection){var G=F.getSelection(),ye=S.textContent.length,je=Math.min(R.start,ye),ot=R.end===void 0?je:Math.min(R.end,ye);!G.extend&&je>ot&&(x=ot,ot=je,je=x);var $=By(S,je),P=By(S,ot);if($&&P&&(G.rangeCount!==1||G.anchorNode!==$.node||G.anchorOffset!==$.offset||G.focusNode!==P.node||G.focusOffset!==P.offset)){var U=Z.createRange();U.setStart($.node,$.offset),G.removeAllRanges(),je>ot?(G.addRange(U),G.extend(P.node,P.offset)):(U.setEnd(P.node,P.offset),G.addRange(U))}}}}for(Z=[],G=S;G=G.parentNode;)G.nodeType===1&&Z.push({element:G,left:G.scrollLeft,top:G.scrollTop});for(typeof S.focus=="function"&&S.focus(),S=0;S<Z.length;S++){var W=Z[S];W.element.scrollLeft=W.left,W.element.scrollTop=W.top}}Pd=!!np,op=np=null}finally{Ze=u,Q.p=c,N.T=a}}r.current=n,Nt=2}}function rx(){if(Nt===2){Nt=0;var r=jn,n=Ta,a=(n.flags&8772)!==0;if((n.subtreeFlags&8772)!==0||a){a=N.T,N.T=null;var c=Q.p;Q.p=2;var u=Ze;Ze|=4;try{j0(r,n.alternate,n)}finally{Ze=u,Q.p=c,N.T=a}}Nt=3}}function ix(){if(Nt===4||Nt===3){Nt=0,uf();var r=jn,n=Ta,a=rn,c=F0;(n.subtreeFlags&10256)!==0||(n.flags&10256)!==0?Nt=5:(Nt=0,Ta=jn=null,nx(r,r.pendingLanes));var u=r.pendingLanes;if(u===0&&(Rn=null),V(a),n=n.stateNode,rr&&typeof rr.onCommitFiberRoot=="function")try{rr.onCommitFiberRoot(Li,n,void 0,(n.current.flags&128)===128)}catch{}if(c!==null){n=N.T,u=Q.p,Q.p=2,N.T=null;try{for(var p=r.onRecoverableError,x=0;x<c.length;x++){var S=c[x];p(S.value,{componentStack:S.stack})}}finally{N.T=n,Q.p=u}}(rn&3)!==0&&Sd(),xi(r),u=r.pendingLanes,(a&261930)!==0&&(u&42)!==0?r===qh?Gs++:(Gs=0,qh=r):Gs=0,Ys(0)}}function nx(r,n){(r.pooledCacheLanes&=n)===0&&(n=r.pooledCache,n!=null&&(r.pooledCache=null,As(n)))}function Sd(){return tx(),rx(),ix(),ox()}function ox(){if(Nt!==5)return!1;var r=jn,n=Fh;Fh=0;var a=V(rn),c=N.T,u=Q.p;try{Q.p=32>a?32:a,N.T=null,a=Hh,Hh=null;var p=jn,x=rn;if(Nt=0,Ta=jn=null,rn=0,(Ze&6)!==0)throw Error(o(331));var S=Ze;if(Ze|=4,U0(p.current),N0(p,p.current,x,a),Ze=S,Ys(0,!1),rr&&typeof rr.onPostCommitFiberRoot=="function")try{rr.onPostCommitFiberRoot(Li,p)}catch{}return!0}finally{Q.p=u,N.T=c,nx(r,n)}}function ax(r,n,a){n=Lr(a,n),n=Sh(r.stateNode,n,2),r=Sn(r,n,2),r!==null&&(vi(r,2),xi(r))}function rt(r,n,a){if(r.tag===3)ax(r,r,a);else for(;n!==null;){if(n.tag===3){ax(n,r,a);break}else if(n.tag===1){var c=n.stateNode;if(typeof n.type.getDerivedStateFromError=="function"||typeof c.componentDidCatch=="function"&&(Rn===null||!Rn.has(c))){r=Lr(a,r),a=s0(2),c=Sn(n,a,2),c!==null&&(l0(a,c,n,r),vi(c,2),xi(c));break}}n=n.return}}function Yh(r,n,a){var c=r.pingCache;if(c===null){c=r.pingCache=new z5;var u=new Set;c.set(n,u)}else u=c.get(n),u===void 0&&(u=new Set,c.set(n,u));u.has(a)||(Uh=!0,u.add(a),r=B5.bind(null,r,n,a),n.then(r,r))}function B5(r,n,a){var c=r.pingCache;c!==null&&c.delete(n),r.pingedLanes|=r.suspendedLanes&a,r.warmLanes&=~a,ct===r&&(Fe&a)===a&&(_t===4||_t===3&&(Fe&62914560)===Fe&&300>tr()-gd?(Ze&2)===0&&Oa(r,0):Ih|=a,Ea===Fe&&(Ea=0)),xi(r)}function sx(r,n){n===0&&(n=ms()),r=ao(r,n),r!==null&&(vi(r,n),xi(r))}function U5(r){var n=r.memoizedState,a=0;n!==null&&(a=n.retryLane),sx(r,a)}function I5(r,n){var a=0;switch(r.tag){case 31:case 13:var c=r.stateNode,u=r.memoizedState;u!==null&&(a=u.retryLane);break;case 19:c=r.stateNode;break;case 22:c=r.stateNode._retryCache;break;default:throw Error(o(314))}c!==null&&c.delete(n),sx(r,a)}function V5(r,n){return Yo(r,n)}var Ed=null,Aa=null,Qh=!1,Td=!1,Xh=!1,Mn=0;function xi(r){r!==Aa&&r.next===null&&(Aa===null?Ed=Aa=r:Aa=Aa.next=r),Td=!0,Qh||(Qh=!0,H5())}function Ys(r,n){if(!Xh&&Td){Xh=!0;do for(var a=!1,c=Ed;c!==null;){if(r!==0){var u=c.pendingLanes;if(u===0)var p=0;else{var x=c.suspendedLanes,S=c.pingedLanes;p=(1<<31-Qt(42|r)+1)-1,p&=u&~(x&~S),p=p&201326741?p&201326741|1:p?p|2:0}p!==0&&(a=!0,ux(c,p))}else p=Fe,p=Qo(c,c===ct?p:0,c.cancelPendingCommit!==null||c.timeoutHandle!==-1),(p&3)===0||hn(c,p)||(a=!0,ux(c,p));c=c.next}while(a);Xh=!1}}function F5(){lx()}function lx(){Td=Qh=!1;var r=0;Mn!==0&&e6()&&(r=Mn);for(var n=tr(),a=null,c=Ed;c!==null;){var u=c.next,p=cx(c,n);p===0?(c.next=null,a===null?Ed=u:a.next=u,u===null&&(Aa=a)):(a=c,(r!==0||(p&3)!==0)&&(Td=!0)),c=u}Nt!==0&&Nt!==5||Ys(r),Mn!==0&&(Mn=0)}function cx(r,n){for(var a=r.suspendedLanes,c=r.pingedLanes,u=r.expirationTimes,p=r.pendingLanes&-62914561;0<p;){var x=31-Qt(p),S=1<<x,R=u[x];R===-1?((S&a)===0||(S&c)!==0)&&(u[x]=mf(S,n)):R<=n&&(r.expiredLanes|=S),p&=~S}if(n=ct,a=Fe,a=Qo(r,r===n?a:0,r.cancelPendingCommit!==null||r.timeoutHandle!==-1),c=r.callbackNode,a===0||r===n&&(tt===2||tt===9)||r.cancelPendingCommit!==null)return c!==null&&c!==null&&hs(c),r.callbackNode=null,r.callbackPriority=0;if((a&3)===0||hn(r,a)){if(n=a&-a,n===r.callbackPriority)return n;switch(c!==null&&hs(c),V(a)){case 2:case 8:a=ps;break;case 32:a=fn;break;case 268435456:a=Dr;break;default:a=fn}return c=dx.bind(null,r),a=Yo(a,c),r.callbackPriority=n,r.callbackNode=a,n}return c!==null&&c!==null&&hs(c),r.callbackPriority=2,r.callbackNode=null,2}function dx(r,n){if(Nt!==0&&Nt!==5)return r.callbackNode=null,r.callbackPriority=0,null;var a=r.callbackNode;if(Sd()&&r.callbackNode!==a)return null;var c=Fe;return c=Qo(r,r===ct?c:0,r.cancelPendingCommit!==null||r.timeoutHandle!==-1),c===0?null:(q0(r,c,n),cx(r,tr()),r.callbackNode!=null&&r.callbackNode===a?dx.bind(null,r):null)}function ux(r,n){if(Sd())return null;q0(r,n,!0)}function H5(){r6(function(){(Ze&6)!==0?Yo(un,F5):lx()})}function Wh(){if(Mn===0){var r=ha;r===0&&(r=to,to<<=1,(to&261888)===0&&(to=256)),Mn=r}return Mn}function fx(r){return r==null||typeof r=="symbol"||typeof r=="boolean"?null:typeof r=="function"?r:Dc(""+r)}function hx(r,n){var a=n.ownerDocument.createElement("input");return a.name=n.name,a.value=n.value,r.id&&a.setAttribute("form",r.id),n.parentNode.insertBefore(a,n),r=new FormData(r),a.parentNode.removeChild(a),r}function q5(r,n,a,c,u){if(n==="submit"&&a&&a.stateNode===u){var p=fx((u[me]||null).action),x=c.submitter;x&&(n=(n=x[me]||null)?fx(n.formAction):x.getAttribute("formAction"),n!==null&&(p=n,x=null));var S=new Nc("action","action",null,c,u);r.push({event:S,listeners:[{instance:null,listener:function(){if(c.defaultPrevented){if(Mn!==0){var R=x?hx(u,x):new FormData(u);gh(a,{pending:!0,data:R,method:u.method,action:p},null,R)}}else typeof p=="function"&&(S.preventDefault(),R=x?hx(u,x):new FormData(u),gh(a,{pending:!0,data:R,method:u.method,action:p},p,R))},currentTarget:u}]})}}for(var Zh=0;Zh<zf.length;Zh++){var Jh=zf[Zh],K5=Jh.toLowerCase(),G5=Jh[0].toUpperCase()+Jh.slice(1);oi(K5,"on"+G5)}oi(Hy,"onAnimationEnd"),oi(qy,"onAnimationIteration"),oi(Ky,"onAnimationStart"),oi("dblclick","onDoubleClick"),oi("focusin","onFocus"),oi("focusout","onBlur"),oi(c5,"onTransitionRun"),oi(d5,"onTransitionStart"),oi(u5,"onTransitionCancel"),oi(Gy,"onTransitionEnd"),ir("onMouseEnter",["mouseout","mouseover"]),ir("onMouseLeave",["mouseout","mouseover"]),ir("onPointerEnter",["pointerout","pointerover"]),ir("onPointerLeave",["pointerout","pointerover"]),hr("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),hr("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),hr("onBeforeInput",["compositionend","keypress","textInput","paste"]),hr("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),hr("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),hr("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Qs="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Y5=new Set("beforetoggle cancel close invalid load scroll scrollend toggle".split(" ").concat(Qs));function px(r,n){n=(n&4)!==0;for(var a=0;a<r.length;a++){var c=r[a],u=c.event;c=c.listeners;e:{var p=void 0;if(n)for(var x=c.length-1;0<=x;x--){var S=c[x],R=S.instance,I=S.currentTarget;if(S=S.listener,R!==p&&u.isPropagationStopped())break e;p=S,u.currentTarget=I;try{p(u)}catch(Y){Uc(Y)}u.currentTarget=null,p=R}else for(x=0;x<c.length;x++){if(S=c[x],R=S.instance,I=S.currentTarget,S=S.listener,R!==p&&u.isPropagationStopped())break e;p=S,u.currentTarget=I;try{p(u)}catch(Y){Uc(Y)}u.currentTarget=null,p=R}}}}function Ve(r,n){var a=n[Ae];a===void 0&&(a=n[Ae]=new Set);var c=r+"__bubble";a.has(c)||(mx(n,r,2,!1),a.add(c))}function ep(r,n,a){var c=0;n&&(c|=4),mx(a,r,c,n)}var Od="_reactListening"+Math.random().toString(36).slice(2);function tp(r){if(!r[Od]){r[Od]=!0,mn.forEach(function(a){a!=="selectionchange"&&(Y5.has(a)||ep(a,!1,r),ep(a,!0,r))});var n=r.nodeType===9?r:r.ownerDocument;n===null||n[Od]||(n[Od]=!0,ep("selectionchange",!1,n))}}function mx(r,n,a,c){switch(Hx(n)){case 2:var u=_6;break;case 8:u=S6;break;default:u=vp}a=u.bind(null,n,a,r),u=void 0,!wf||n!=="touchstart"&&n!=="touchmove"&&n!=="wheel"||(u=!0),c?u!==void 0?r.addEventListener(n,a,{capture:!0,passive:u}):r.addEventListener(n,a,!0):u!==void 0?r.addEventListener(n,a,{passive:u}):r.addEventListener(n,a,!1)}function rp(r,n,a,c,u){var p=c;if((n&1)===0&&(n&2)===0&&c!==null)e:for(;;){if(c===null)return;var x=c.tag;if(x===3||x===4){var S=c.stateNode.containerInfo;if(S===u)break;if(x===4)for(x=c.return;x!==null;){var R=x.tag;if((R===3||R===4)&&x.stateNode.containerInfo===u)return;x=x.return}for(;S!==null;){if(x=pt(S),x===null)return;if(R=x.tag,R===5||R===6||R===26||R===27){c=p=x;continue e}S=S.parentNode}}c=c.return}xy(function(){var I=p,Y=bf(a),Z=[];e:{var F=Yy.get(r);if(F!==void 0){var G=Nc,ye=r;switch(r){case"keypress":if(Pc(a)===0)break e;case"keydown":case"keyup":G=IE;break;case"focusin":ye="focus",G=Tf;break;case"focusout":ye="blur",G=Tf;break;case"beforeblur":case"afterblur":G=Tf;break;case"click":if(a.button===2)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":G=Sy;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":G=RE;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":G=HE;break;case Hy:case qy:case Ky:G=ME;break;case Gy:G=KE;break;case"scroll":case"scrollend":G=CE;break;case"wheel":G=YE;break;case"copy":case"cut":case"paste":G=zE;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":G=Ty;break;case"toggle":case"beforetoggle":G=XE}var je=(n&4)!==0,ot=!je&&(r==="scroll"||r==="scrollend"),$=je?F!==null?F+"Capture":null:F;je=[];for(var P=I,U;P!==null;){var W=P;if(U=W.stateNode,W=W.tag,W!==5&&W!==26&&W!==27||U===null||$===null||(W=gs(P,$),W!=null&&je.push(Xs(P,W,U))),ot)break;P=P.return}0<je.length&&(F=new G(F,ye,null,a,Y),Z.push({event:F,listeners:je}))}}if((n&7)===0){e:{if(F=r==="mouseover"||r==="pointerover",G=r==="mouseout"||r==="pointerout",F&&a!==yf&&(ye=a.relatedTarget||a.fromElement)&&(pt(ye)||ye[pe]))break e;if((G||F)&&(F=Y.window===Y?Y:(F=Y.ownerDocument)?F.defaultView||F.parentWindow:window,G?(ye=a.relatedTarget||a.toElement,G=I,ye=ye?pt(ye):null,ye!==null&&(ot=l(ye),je=ye.tag,ye!==ot||je!==5&&je!==27&&je!==6)&&(ye=null)):(G=null,ye=I),G!==ye)){if(je=Sy,W="onMouseLeave",$="onMouseEnter",P="mouse",(r==="pointerout"||r==="pointerover")&&(je=Ty,W="onPointerLeave",$="onPointerEnter",P="pointer"),ot=G==null?F:Ke(G),U=ye==null?F:Ke(ye),F=new je(W,P+"leave",G,a,Y),F.target=ot,F.relatedTarget=U,W=null,pt(Y)===I&&(je=new je($,P+"enter",ye,a,Y),je.target=U,je.relatedTarget=ot,W=je),ot=W,G&&ye)t:{for(je=Q5,$=G,P=ye,U=0,W=$;W;W=je(W))U++;W=0;for(var Ce=P;Ce;Ce=je(Ce))W++;for(;0<U-W;)$=je($),U--;for(;0<W-U;)P=je(P),W--;for(;U--;){if($===P||P!==null&&$===P.alternate){je=$;break t}$=je($),P=je(P)}je=null}else je=null;G!==null&&vx(Z,F,G,je,!1),ye!==null&&ot!==null&&vx(Z,ot,ye,je,!0)}}e:{if(F=I?Ke(I):window,G=F.nodeName&&F.nodeName.toLowerCase(),G==="select"||G==="input"&&F.type==="file")var Xe=Dy;else if(ky(F))if(zy)Xe=a5;else{Xe=n5;var we=i5}else G=F.nodeName,!G||G.toLowerCase()!=="input"||F.type!=="checkbox"&&F.type!=="radio"?I&&gf(I.elementType)&&(Xe=Dy):Xe=o5;if(Xe&&(Xe=Xe(r,I))){My(Z,Xe,a,Y);break e}we&&we(r,F,I),r==="focusout"&&I&&F.type==="number"&&I.memoizedProps.value!=null&&vf(F,"number",F.value)}switch(we=I?Ke(I):window,r){case"focusin":(ky(we)||we.contentEditable==="true")&&(oa=we,kf=I,Ts=null);break;case"focusout":Ts=kf=oa=null;break;case"mousedown":Mf=!0;break;case"contextmenu":case"mouseup":case"dragend":Mf=!1,Vy(Z,a,Y);break;case"selectionchange":if(l5)break;case"keydown":case"keyup":Vy(Z,a,Y)}var Le;if(Cf)e:{switch(r){case"compositionstart":var He="onCompositionStart";break e;case"compositionend":He="onCompositionEnd";break e;case"compositionupdate":He="onCompositionUpdate";break e}He=void 0}else na?Ry(r,a)&&(He="onCompositionEnd"):r==="keydown"&&a.keyCode===229&&(He="onCompositionStart");He&&(Oy&&a.locale!=="ko"&&(na||He!=="onCompositionStart"?He==="onCompositionEnd"&&na&&(Le=wy()):(vn=Y,_f="value"in vn?vn.value:vn.textContent,na=!0)),we=Cd(I,He),0<we.length&&(He=new Ey(He,r,null,a,Y),Z.push({event:He,listeners:we}),Le?He.data=Le:(Le=jy(a),Le!==null&&(He.data=Le)))),(Le=ZE?JE(r,a):e5(r,a))&&(He=Cd(I,"onBeforeInput"),0<He.length&&(we=new Ey("onBeforeInput","beforeinput",null,a,Y),Z.push({event:we,listeners:He}),we.data=Le)),q5(Z,r,I,a,Y)}px(Z,n)})}function Xs(r,n,a){return{instance:r,listener:n,currentTarget:a}}function Cd(r,n){for(var a=n+"Capture",c=[];r!==null;){var u=r,p=u.stateNode;if(u=u.tag,u!==5&&u!==26&&u!==27||p===null||(u=gs(r,a),u!=null&&c.unshift(Xs(r,u,p)),u=gs(r,n),u!=null&&c.push(Xs(r,u,p))),r.tag===3)return c;r=r.return}return[]}function Q5(r){if(r===null)return null;do r=r.return;while(r&&r.tag!==5&&r.tag!==27);return r||null}function vx(r,n,a,c,u){for(var p=n._reactName,x=[];a!==null&&a!==c;){var S=a,R=S.alternate,I=S.stateNode;if(S=S.tag,R!==null&&R===c)break;S!==5&&S!==26&&S!==27||I===null||(R=I,u?(I=gs(a,p),I!=null&&x.unshift(Xs(a,I,R))):u||(I=gs(a,p),I!=null&&x.push(Xs(a,I,R)))),a=a.return}x.length!==0&&r.push({event:n,listeners:x})}var X5=/\r\n?/g,W5=/\u0000|\uFFFD/g;function gx(r){return(typeof r=="string"?r:""+r).replace(X5,`
+`).replace(W5,"")}function yx(r,n){return n=gx(n),gx(r)===n}function nt(r,n,a,c,u,p){switch(a){case"children":typeof c=="string"?n==="body"||n==="textarea"&&c===""||ta(r,c):(typeof c=="number"||typeof c=="bigint")&&n!=="body"&&ta(r,""+c);break;case"className":Bi(r,"class",c);break;case"tabIndex":Bi(r,"tabindex",c);break;case"dir":case"role":case"viewBox":case"width":case"height":Bi(r,a,c);break;case"style":yy(r,c,p);break;case"data":if(n!=="object"){Bi(r,"data",c);break}case"src":case"href":if(c===""&&(n!=="a"||a!=="href")){r.removeAttribute(a);break}if(c==null||typeof c=="function"||typeof c=="symbol"||typeof c=="boolean"){r.removeAttribute(a);break}c=Dc(""+c),r.setAttribute(a,c);break;case"action":case"formAction":if(typeof c=="function"){r.setAttribute(a,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof p=="function"&&(a==="formAction"?(n!=="input"&&nt(r,n,"name",u.name,u,null),nt(r,n,"formEncType",u.formEncType,u,null),nt(r,n,"formMethod",u.formMethod,u,null),nt(r,n,"formTarget",u.formTarget,u,null)):(nt(r,n,"encType",u.encType,u,null),nt(r,n,"method",u.method,u,null),nt(r,n,"target",u.target,u,null)));if(c==null||typeof c=="symbol"||typeof c=="boolean"){r.removeAttribute(a);break}c=Dc(""+c),r.setAttribute(a,c);break;case"onClick":c!=null&&(r.onclick=Ii);break;case"onScroll":c!=null&&Ve("scroll",r);break;case"onScrollEnd":c!=null&&Ve("scrollend",r);break;case"dangerouslySetInnerHTML":if(c!=null){if(typeof c!="object"||!("__html"in c))throw Error(o(61));if(a=c.__html,a!=null){if(u.children!=null)throw Error(o(60));r.innerHTML=a}}break;case"multiple":r.multiple=c&&typeof c!="function"&&typeof c!="symbol";break;case"muted":r.muted=c&&typeof c!="function"&&typeof c!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(c==null||typeof c=="function"||typeof c=="boolean"||typeof c=="symbol"){r.removeAttribute("xlink:href");break}a=Dc(""+c),r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",a);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":c!=null&&typeof c!="function"&&typeof c!="symbol"?r.setAttribute(a,""+c):r.removeAttribute(a);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":c&&typeof c!="function"&&typeof c!="symbol"?r.setAttribute(a,""):r.removeAttribute(a);break;case"capture":case"download":c===!0?r.setAttribute(a,""):c!==!1&&c!=null&&typeof c!="function"&&typeof c!="symbol"?r.setAttribute(a,c):r.removeAttribute(a);break;case"cols":case"rows":case"size":case"span":c!=null&&typeof c!="function"&&typeof c!="symbol"&&!isNaN(c)&&1<=c?r.setAttribute(a,c):r.removeAttribute(a);break;case"rowSpan":case"start":c==null||typeof c=="function"||typeof c=="symbol"||isNaN(c)?r.removeAttribute(a):r.setAttribute(a,c);break;case"popover":Ve("beforetoggle",r),Ve("toggle",r),$i(r,"popover",c);break;case"xlinkActuate":Me(r,"http://www.w3.org/1999/xlink","xlink:actuate",c);break;case"xlinkArcrole":Me(r,"http://www.w3.org/1999/xlink","xlink:arcrole",c);break;case"xlinkRole":Me(r,"http://www.w3.org/1999/xlink","xlink:role",c);break;case"xlinkShow":Me(r,"http://www.w3.org/1999/xlink","xlink:show",c);break;case"xlinkTitle":Me(r,"http://www.w3.org/1999/xlink","xlink:title",c);break;case"xlinkType":Me(r,"http://www.w3.org/1999/xlink","xlink:type",c);break;case"xmlBase":Me(r,"http://www.w3.org/XML/1998/namespace","xml:base",c);break;case"xmlLang":Me(r,"http://www.w3.org/XML/1998/namespace","xml:lang",c);break;case"xmlSpace":Me(r,"http://www.w3.org/XML/1998/namespace","xml:space",c);break;case"is":$i(r,"is",c);break;case"innerText":case"textContent":break;default:(!(2<a.length)||a[0]!=="o"&&a[0]!=="O"||a[1]!=="n"&&a[1]!=="N")&&(a=TE.get(a)||a,$i(r,a,c))}}function ip(r,n,a,c,u,p){switch(a){case"style":yy(r,c,p);break;case"dangerouslySetInnerHTML":if(c!=null){if(typeof c!="object"||!("__html"in c))throw Error(o(61));if(a=c.__html,a!=null){if(u.children!=null)throw Error(o(60));r.innerHTML=a}}break;case"children":typeof c=="string"?ta(r,c):(typeof c=="number"||typeof c=="bigint")&&ta(r,""+c);break;case"onScroll":c!=null&&Ve("scroll",r);break;case"onScrollEnd":c!=null&&Ve("scrollend",r);break;case"onClick":c!=null&&(r.onclick=Ii);break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"innerHTML":case"ref":break;case"innerText":case"textContent":break;default:if(!ri.hasOwnProperty(a))e:{if(a[0]==="o"&&a[1]==="n"&&(u=a.endsWith("Capture"),n=a.slice(2,u?a.length-7:void 0),p=r[me]||null,p=p!=null?p[a]:null,typeof p=="function"&&r.removeEventListener(n,p,u),typeof c=="function")){typeof p!="function"&&p!==null&&(a in r?r[a]=null:r.hasAttribute(a)&&r.removeAttribute(a)),r.addEventListener(n,c,u);break e}a in r?r[a]=c:c===!0?r.setAttribute(a,""):$i(r,a,c)}}}function qt(r,n,a){switch(n){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"img":Ve("error",r),Ve("load",r);var c=!1,u=!1,p;for(p in a)if(a.hasOwnProperty(p)){var x=a[p];if(x!=null)switch(p){case"src":c=!0;break;case"srcSet":u=!0;break;case"children":case"dangerouslySetInnerHTML":throw Error(o(137,n));default:nt(r,n,p,x,a,null)}}u&&nt(r,n,"srcSet",a.srcSet,a,null),c&&nt(r,n,"src",a.src,a,null);return;case"input":Ve("invalid",r);var S=p=x=u=null,R=null,I=null;for(c in a)if(a.hasOwnProperty(c)){var Y=a[c];if(Y!=null)switch(c){case"name":u=Y;break;case"type":x=Y;break;case"checked":R=Y;break;case"defaultChecked":I=Y;break;case"value":p=Y;break;case"defaultValue":S=Y;break;case"children":case"dangerouslySetInnerHTML":if(Y!=null)throw Error(o(137,n));break;default:nt(r,n,c,Y,a,null)}}py(r,p,S,R,I,x,u,!1);return;case"select":Ve("invalid",r),c=x=p=null;for(u in a)if(a.hasOwnProperty(u)&&(S=a[u],S!=null))switch(u){case"value":p=S;break;case"defaultValue":x=S;break;case"multiple":c=S;default:nt(r,n,u,S,a,null)}n=p,a=x,r.multiple=!!c,n!=null?ea(r,!!c,n,!1):a!=null&&ea(r,!!c,a,!0);return;case"textarea":Ve("invalid",r),p=u=c=null;for(x in a)if(a.hasOwnProperty(x)&&(S=a[x],S!=null))switch(x){case"value":c=S;break;case"defaultValue":u=S;break;case"children":p=S;break;case"dangerouslySetInnerHTML":if(S!=null)throw Error(o(91));break;default:nt(r,n,x,S,a,null)}vy(r,c,u,p);return;case"option":for(R in a)a.hasOwnProperty(R)&&(c=a[R],c!=null)&&(R==="selected"?r.selected=c&&typeof c!="function"&&typeof c!="symbol":nt(r,n,R,c,a,null));return;case"dialog":Ve("beforetoggle",r),Ve("toggle",r),Ve("cancel",r),Ve("close",r);break;case"iframe":case"object":Ve("load",r);break;case"video":case"audio":for(c=0;c<Qs.length;c++)Ve(Qs[c],r);break;case"image":Ve("error",r),Ve("load",r);break;case"details":Ve("toggle",r);break;case"embed":case"source":case"link":Ve("error",r),Ve("load",r);case"area":case"base":case"br":case"col":case"hr":case"keygen":case"meta":case"param":case"track":case"wbr":case"menuitem":for(I in a)if(a.hasOwnProperty(I)&&(c=a[I],c!=null))switch(I){case"children":case"dangerouslySetInnerHTML":throw Error(o(137,n));default:nt(r,n,I,c,a,null)}return;default:if(gf(n)){for(Y in a)a.hasOwnProperty(Y)&&(c=a[Y],c!==void 0&&ip(r,n,Y,c,a,void 0));return}}for(S in a)a.hasOwnProperty(S)&&(c=a[S],c!=null&&nt(r,n,S,c,a,null))}function Z5(r,n,a,c){switch(n){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"input":var u=null,p=null,x=null,S=null,R=null,I=null,Y=null;for(G in a){var Z=a[G];if(a.hasOwnProperty(G)&&Z!=null)switch(G){case"checked":break;case"value":break;case"defaultValue":R=Z;default:c.hasOwnProperty(G)||nt(r,n,G,null,c,Z)}}for(var F in c){var G=c[F];if(Z=a[F],c.hasOwnProperty(F)&&(G!=null||Z!=null))switch(F){case"type":p=G;break;case"name":u=G;break;case"checked":I=G;break;case"defaultChecked":Y=G;break;case"value":x=G;break;case"defaultValue":S=G;break;case"children":case"dangerouslySetInnerHTML":if(G!=null)throw Error(o(137,n));break;default:G!==Z&&nt(r,n,F,G,c,Z)}}vs(r,x,S,R,I,Y,p,u);return;case"select":G=x=S=F=null;for(p in a)if(R=a[p],a.hasOwnProperty(p)&&R!=null)switch(p){case"value":break;case"multiple":G=R;default:c.hasOwnProperty(p)||nt(r,n,p,null,c,R)}for(u in c)if(p=c[u],R=a[u],c.hasOwnProperty(u)&&(p!=null||R!=null))switch(u){case"value":F=p;break;case"defaultValue":S=p;break;case"multiple":x=p;default:p!==R&&nt(r,n,u,p,c,R)}n=S,a=x,c=G,F!=null?ea(r,!!a,F,!1):!!c!=!!a&&(n!=null?ea(r,!!a,n,!0):ea(r,!!a,a?[]:"",!1));return;case"textarea":G=F=null;for(S in a)if(u=a[S],a.hasOwnProperty(S)&&u!=null&&!c.hasOwnProperty(S))switch(S){case"value":break;case"children":break;default:nt(r,n,S,null,c,u)}for(x in c)if(u=c[x],p=a[x],c.hasOwnProperty(x)&&(u!=null||p!=null))switch(x){case"value":F=u;break;case"defaultValue":G=u;break;case"children":break;case"dangerouslySetInnerHTML":if(u!=null)throw Error(o(91));break;default:u!==p&&nt(r,n,x,u,c,p)}my(r,F,G);return;case"option":for(var ye in a)F=a[ye],a.hasOwnProperty(ye)&&F!=null&&!c.hasOwnProperty(ye)&&(ye==="selected"?r.selected=!1:nt(r,n,ye,null,c,F));for(R in c)F=c[R],G=a[R],c.hasOwnProperty(R)&&F!==G&&(F!=null||G!=null)&&(R==="selected"?r.selected=F&&typeof F!="function"&&typeof F!="symbol":nt(r,n,R,F,c,G));return;case"img":case"link":case"area":case"base":case"br":case"col":case"embed":case"hr":case"keygen":case"meta":case"param":case"source":case"track":case"wbr":case"menuitem":for(var je in a)F=a[je],a.hasOwnProperty(je)&&F!=null&&!c.hasOwnProperty(je)&&nt(r,n,je,null,c,F);for(I in c)if(F=c[I],G=a[I],c.hasOwnProperty(I)&&F!==G&&(F!=null||G!=null))switch(I){case"children":case"dangerouslySetInnerHTML":if(F!=null)throw Error(o(137,n));break;default:nt(r,n,I,F,c,G)}return;default:if(gf(n)){for(var ot in a)F=a[ot],a.hasOwnProperty(ot)&&F!==void 0&&!c.hasOwnProperty(ot)&&ip(r,n,ot,void 0,c,F);for(Y in c)F=c[Y],G=a[Y],!c.hasOwnProperty(Y)||F===G||F===void 0&&G===void 0||ip(r,n,Y,F,c,G);return}}for(var $ in a)F=a[$],a.hasOwnProperty($)&&F!=null&&!c.hasOwnProperty($)&&nt(r,n,$,null,c,F);for(Z in c)F=c[Z],G=a[Z],!c.hasOwnProperty(Z)||F===G||F==null&&G==null||nt(r,n,Z,F,c,G)}function bx(r){switch(r){case"css":case"script":case"font":case"img":case"image":case"input":case"link":return!0;default:return!1}}function J5(){if(typeof performance.getEntriesByType=="function"){for(var r=0,n=0,a=performance.getEntriesByType("resource"),c=0;c<a.length;c++){var u=a[c],p=u.transferSize,x=u.initiatorType,S=u.duration;if(p&&S&&bx(x)){for(x=0,S=u.responseEnd,c+=1;c<a.length;c++){var R=a[c],I=R.startTime;if(I>S)break;var Y=R.transferSize,Z=R.initiatorType;Y&&bx(Z)&&(R=R.responseEnd,x+=Y*(R<S?1:(S-I)/(R-I)))}if(--c,n+=8*(p+x)/(u.duration/1e3),r++,10<r)break}}if(0<r)return n/r/1e6}return navigator.connection&&(r=navigator.connection.downlink,typeof r=="number")?r:5}var np=null,op=null;function Ad(r){return r.nodeType===9?r:r.ownerDocument}function xx(r){switch(r){case"http://www.w3.org/2000/svg":return 1;case"http://www.w3.org/1998/Math/MathML":return 2;default:return 0}}function wx(r,n){if(r===0)switch(n){case"svg":return 1;case"math":return 2;default:return 0}return r===1&&n==="foreignObject"?0:r}function ap(r,n){return r==="textarea"||r==="noscript"||typeof n.children=="string"||typeof n.children=="number"||typeof n.children=="bigint"||typeof n.dangerouslySetInnerHTML=="object"&&n.dangerouslySetInnerHTML!==null&&n.dangerouslySetInnerHTML.__html!=null}var sp=null;function e6(){var r=window.event;return r&&r.type==="popstate"?r===sp?!1:(sp=r,!0):(sp=null,!1)}var _x=typeof setTimeout=="function"?setTimeout:void 0,t6=typeof clearTimeout=="function"?clearTimeout:void 0,Sx=typeof Promise=="function"?Promise:void 0,r6=typeof queueMicrotask=="function"?queueMicrotask:typeof Sx<"u"?function(r){return Sx.resolve(null).then(r).catch(i6)}:_x;function i6(r){setTimeout(function(){throw r})}function Dn(r){return r==="head"}function Ex(r,n){var a=n,c=0;do{var u=a.nextSibling;if(r.removeChild(a),u&&u.nodeType===8)if(a=u.data,a==="/$"||a==="/&"){if(c===0){r.removeChild(u),Ma(n);return}c--}else if(a==="$"||a==="$?"||a==="$~"||a==="$!"||a==="&")c++;else if(a==="html")Ws(r.ownerDocument.documentElement);else if(a==="head"){a=r.ownerDocument.head,Ws(a);for(var p=a.firstChild;p;){var x=p.nextSibling,S=p.nodeName;p[Be]||S==="SCRIPT"||S==="STYLE"||S==="LINK"&&p.rel.toLowerCase()==="stylesheet"||a.removeChild(p),p=x}}else a==="body"&&Ws(r.ownerDocument.body);a=u}while(a);Ma(n)}function Tx(r,n){var a=r;r=0;do{var c=a.nextSibling;if(a.nodeType===1?n?(a._stashedDisplay=a.style.display,a.style.display="none"):(a.style.display=a._stashedDisplay||"",a.getAttribute("style")===""&&a.removeAttribute("style")):a.nodeType===3&&(n?(a._stashedText=a.nodeValue,a.nodeValue=""):a.nodeValue=a._stashedText||""),c&&c.nodeType===8)if(a=c.data,a==="/$"){if(r===0)break;r--}else a!=="$"&&a!=="$?"&&a!=="$~"&&a!=="$!"||r++;a=c}while(a)}function lp(r){var n=r.firstChild;for(n&&n.nodeType===10&&(n=n.nextSibling);n;){var a=n;switch(n=n.nextSibling,a.nodeName){case"HTML":case"HEAD":case"BODY":lp(a),Qe(a);continue;case"SCRIPT":case"STYLE":continue;case"LINK":if(a.rel.toLowerCase()==="stylesheet")continue}r.removeChild(a)}}function n6(r,n,a,c){for(;r.nodeType===1;){var u=a;if(r.nodeName.toLowerCase()!==n.toLowerCase()){if(!c&&(r.nodeName!=="INPUT"||r.type!=="hidden"))break}else if(c){if(!r[Be])switch(n){case"meta":if(!r.hasAttribute("itemprop"))break;return r;case"link":if(p=r.getAttribute("rel"),p==="stylesheet"&&r.hasAttribute("data-precedence"))break;if(p!==u.rel||r.getAttribute("href")!==(u.href==null||u.href===""?null:u.href)||r.getAttribute("crossorigin")!==(u.crossOrigin==null?null:u.crossOrigin)||r.getAttribute("title")!==(u.title==null?null:u.title))break;return r;case"style":if(r.hasAttribute("data-precedence"))break;return r;case"script":if(p=r.getAttribute("src"),(p!==(u.src==null?null:u.src)||r.getAttribute("type")!==(u.type==null?null:u.type)||r.getAttribute("crossorigin")!==(u.crossOrigin==null?null:u.crossOrigin))&&p&&r.hasAttribute("async")&&!r.hasAttribute("itemprop"))break;return r;default:return r}}else if(n==="input"&&r.type==="hidden"){var p=u.name==null?null:""+u.name;if(u.type==="hidden"&&r.getAttribute("name")===p)return r}else return r;if(r=Ir(r.nextSibling),r===null)break}return null}function o6(r,n,a){if(n==="")return null;for(;r.nodeType!==3;)if((r.nodeType!==1||r.nodeName!=="INPUT"||r.type!=="hidden")&&!a||(r=Ir(r.nextSibling),r===null))return null;return r}function Ox(r,n){for(;r.nodeType!==8;)if((r.nodeType!==1||r.nodeName!=="INPUT"||r.type!=="hidden")&&!n||(r=Ir(r.nextSibling),r===null))return null;return r}function cp(r){return r.data==="$?"||r.data==="$~"}function dp(r){return r.data==="$!"||r.data==="$?"&&r.ownerDocument.readyState!=="loading"}function a6(r,n){var a=r.ownerDocument;if(r.data==="$~")r._reactRetry=n;else if(r.data!=="$?"||a.readyState!=="loading")n();else{var c=function(){n(),a.removeEventListener("DOMContentLoaded",c)};a.addEventListener("DOMContentLoaded",c),r._reactRetry=c}}function Ir(r){for(;r!=null;r=r.nextSibling){var n=r.nodeType;if(n===1||n===3)break;if(n===8){if(n=r.data,n==="$"||n==="$!"||n==="$?"||n==="$~"||n==="&"||n==="F!"||n==="F")break;if(n==="/$"||n==="/&")return null}}return r}var up=null;function Cx(r){r=r.nextSibling;for(var n=0;r;){if(r.nodeType===8){var a=r.data;if(a==="/$"||a==="/&"){if(n===0)return Ir(r.nextSibling);n--}else a!=="$"&&a!=="$!"&&a!=="$?"&&a!=="$~"&&a!=="&"||n++}r=r.nextSibling}return null}function Ax(r){r=r.previousSibling;for(var n=0;r;){if(r.nodeType===8){var a=r.data;if(a==="$"||a==="$!"||a==="$?"||a==="$~"||a==="&"){if(n===0)return r;n--}else a!=="/$"&&a!=="/&"||n++}r=r.previousSibling}return null}function Rx(r,n,a){switch(n=Ad(a),r){case"html":if(r=n.documentElement,!r)throw Error(o(452));return r;case"head":if(r=n.head,!r)throw Error(o(453));return r;case"body":if(r=n.body,!r)throw Error(o(454));return r;default:throw Error(o(451))}}function Ws(r){for(var n=r.attributes;n.length;)r.removeAttributeNode(n[0]);Qe(r)}var Vr=new Map,jx=new Set;function Rd(r){return typeof r.getRootNode=="function"?r.getRootNode():r.nodeType===9?r:r.ownerDocument}var nn=Q.d;Q.d={f:s6,r:l6,D:c6,C:d6,L:u6,m:f6,X:p6,S:h6,M:m6};function s6(){var r=nn.f(),n=xd();return r||n}function l6(r){var n=Je(r);n!==null&&n.tag===5&&n.type==="form"?Gb(n):nn.r(r)}var Ra=typeof document>"u"?null:document;function kx(r,n,a){var c=Ra;if(c&&typeof n=="string"&&n){var u=nr(n);u='link[rel="'+r+'"][href="'+u+'"]',typeof a=="string"&&(u+='[crossorigin="'+a+'"]'),jx.has(u)||(jx.add(u),r={rel:r,crossOrigin:a,href:n},c.querySelector(u)===null&&(n=c.createElement("link"),qt(n,"link",r),Ge(n),c.head.appendChild(n)))}}function c6(r){nn.D(r),kx("dns-prefetch",r,null)}function d6(r,n){nn.C(r,n),kx("preconnect",r,n)}function u6(r,n,a){nn.L(r,n,a);var c=Ra;if(c&&r&&n){var u='link[rel="preload"][as="'+nr(n)+'"]';n==="image"&&a&&a.imageSrcSet?(u+='[imagesrcset="'+nr(a.imageSrcSet)+'"]',typeof a.imageSizes=="string"&&(u+='[imagesizes="'+nr(a.imageSizes)+'"]')):u+='[href="'+nr(r)+'"]';var p=u;switch(n){case"style":p=ja(r);break;case"script":p=ka(r)}Vr.has(p)||(r=y({rel:"preload",href:n==="image"&&a&&a.imageSrcSet?void 0:r,as:n},a),Vr.set(p,r),c.querySelector(u)!==null||n==="style"&&c.querySelector(Zs(p))||n==="script"&&c.querySelector(Js(p))||(n=c.createElement("link"),qt(n,"link",r),Ge(n),c.head.appendChild(n)))}}function f6(r,n){nn.m(r,n);var a=Ra;if(a&&r){var c=n&&typeof n.as=="string"?n.as:"script",u='link[rel="modulepreload"][as="'+nr(c)+'"][href="'+nr(r)+'"]',p=u;switch(c){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":p=ka(r)}if(!Vr.has(p)&&(r=y({rel:"modulepreload",href:r},n),Vr.set(p,r),a.querySelector(u)===null)){switch(c){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":if(a.querySelector(Js(p)))return}c=a.createElement("link"),qt(c,"link",r),Ge(c),a.head.appendChild(c)}}}function h6(r,n,a){nn.S(r,n,a);var c=Ra;if(c&&r){var u=Tt(c).hoistableStyles,p=ja(r);n=n||"default";var x=u.get(p);if(!x){var S={loading:0,preload:null};if(x=c.querySelector(Zs(p)))S.loading=5;else{r=y({rel:"stylesheet",href:r,"data-precedence":n},a),(a=Vr.get(p))&&fp(r,a);var R=x=c.createElement("link");Ge(R),qt(R,"link",r),R._p=new Promise(function(I,Y){R.onload=I,R.onerror=Y}),R.addEventListener("load",function(){S.loading|=1}),R.addEventListener("error",function(){S.loading|=2}),S.loading|=4,jd(x,n,c)}x={type:"stylesheet",instance:x,count:1,state:S},u.set(p,x)}}}function p6(r,n){nn.X(r,n);var a=Ra;if(a&&r){var c=Tt(a).hoistableScripts,u=ka(r),p=c.get(u);p||(p=a.querySelector(Js(u)),p||(r=y({src:r,async:!0},n),(n=Vr.get(u))&&hp(r,n),p=a.createElement("script"),Ge(p),qt(p,"link",r),a.head.appendChild(p)),p={type:"script",instance:p,count:1,state:null},c.set(u,p))}}function m6(r,n){nn.M(r,n);var a=Ra;if(a&&r){var c=Tt(a).hoistableScripts,u=ka(r),p=c.get(u);p||(p=a.querySelector(Js(u)),p||(r=y({src:r,async:!0,type:"module"},n),(n=Vr.get(u))&&hp(r,n),p=a.createElement("script"),Ge(p),qt(p,"link",r),a.head.appendChild(p)),p={type:"script",instance:p,count:1,state:null},c.set(u,p))}}function Mx(r,n,a,c){var u=(u=Ee.current)?Rd(u):null;if(!u)throw Error(o(446));switch(r){case"meta":case"title":return null;case"style":return typeof a.precedence=="string"&&typeof a.href=="string"?(n=ja(a.href),a=Tt(u).hoistableStyles,c=a.get(n),c||(c={type:"style",instance:null,count:0,state:null},a.set(n,c)),c):{type:"void",instance:null,count:0,state:null};case"link":if(a.rel==="stylesheet"&&typeof a.href=="string"&&typeof a.precedence=="string"){r=ja(a.href);var p=Tt(u).hoistableStyles,x=p.get(r);if(x||(u=u.ownerDocument||u,x={type:"stylesheet",instance:null,count:0,state:{loading:0,preload:null}},p.set(r,x),(p=u.querySelector(Zs(r)))&&!p._p&&(x.instance=p,x.state.loading=5),Vr.has(r)||(a={rel:"preload",as:"style",href:a.href,crossOrigin:a.crossOrigin,integrity:a.integrity,media:a.media,hrefLang:a.hrefLang,referrerPolicy:a.referrerPolicy},Vr.set(r,a),p||v6(u,r,a,x.state))),n&&c===null)throw Error(o(528,""));return x}if(n&&c!==null)throw Error(o(529,""));return null;case"script":return n=a.async,a=a.src,typeof a=="string"&&n&&typeof n!="function"&&typeof n!="symbol"?(n=ka(a),a=Tt(u).hoistableScripts,c=a.get(n),c||(c={type:"script",instance:null,count:0,state:null},a.set(n,c)),c):{type:"void",instance:null,count:0,state:null};default:throw Error(o(444,r))}}function ja(r){return'href="'+nr(r)+'"'}function Zs(r){return'link[rel="stylesheet"]['+r+"]"}function Dx(r){return y({},r,{"data-precedence":r.precedence,precedence:null})}function v6(r,n,a,c){r.querySelector('link[rel="preload"][as="style"]['+n+"]")?c.loading=1:(n=r.createElement("link"),c.preload=n,n.addEventListener("load",function(){return c.loading|=1}),n.addEventListener("error",function(){return c.loading|=2}),qt(n,"link",a),Ge(n),r.head.appendChild(n))}function ka(r){return'[src="'+nr(r)+'"]'}function Js(r){return"script[async]"+r}function zx(r,n,a){if(n.count++,n.instance===null)switch(n.type){case"style":var c=r.querySelector('style[data-href~="'+nr(a.href)+'"]');if(c)return n.instance=c,Ge(c),c;var u=y({},a,{"data-href":a.href,"data-precedence":a.precedence,href:null,precedence:null});return c=(r.ownerDocument||r).createElement("style"),Ge(c),qt(c,"style",u),jd(c,a.precedence,r),n.instance=c;case"stylesheet":u=ja(a.href);var p=r.querySelector(Zs(u));if(p)return n.state.loading|=4,n.instance=p,Ge(p),p;c=Dx(a),(u=Vr.get(u))&&fp(c,u),p=(r.ownerDocument||r).createElement("link"),Ge(p);var x=p;return x._p=new Promise(function(S,R){x.onload=S,x.onerror=R}),qt(p,"link",c),n.state.loading|=4,jd(p,a.precedence,r),n.instance=p;case"script":return p=ka(a.src),(u=r.querySelector(Js(p)))?(n.instance=u,Ge(u),u):(c=a,(u=Vr.get(p))&&(c=y({},a),hp(c,u)),r=r.ownerDocument||r,u=r.createElement("script"),Ge(u),qt(u,"link",c),r.head.appendChild(u),n.instance=u);case"void":return null;default:throw Error(o(443,n.type))}else n.type==="stylesheet"&&(n.state.loading&4)===0&&(c=n.instance,n.state.loading|=4,jd(c,a.precedence,r));return n.instance}function jd(r,n,a){for(var c=a.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]'),u=c.length?c[c.length-1]:null,p=u,x=0;x<c.length;x++){var S=c[x];if(S.dataset.precedence===n)p=S;else if(p!==u)break}p?p.parentNode.insertBefore(r,p.nextSibling):(n=a.nodeType===9?a.head:a,n.insertBefore(r,n.firstChild))}function fp(r,n){r.crossOrigin==null&&(r.crossOrigin=n.crossOrigin),r.referrerPolicy==null&&(r.referrerPolicy=n.referrerPolicy),r.title==null&&(r.title=n.title)}function hp(r,n){r.crossOrigin==null&&(r.crossOrigin=n.crossOrigin),r.referrerPolicy==null&&(r.referrerPolicy=n.referrerPolicy),r.integrity==null&&(r.integrity=n.integrity)}var kd=null;function Px(r,n,a){if(kd===null){var c=new Map,u=kd=new Map;u.set(a,c)}else u=kd,c=u.get(a),c||(c=new Map,u.set(a,c));if(c.has(r))return c;for(c.set(r,null),a=a.getElementsByTagName(r),u=0;u<a.length;u++){var p=a[u];if(!(p[Be]||p[fe]||r==="link"&&p.getAttribute("rel")==="stylesheet")&&p.namespaceURI!=="http://www.w3.org/2000/svg"){var x=p.getAttribute(n)||"";x=r+x;var S=c.get(x);S?S.push(p):c.set(x,[p])}}return c}function Lx(r,n,a){r=r.ownerDocument||r,r.head.insertBefore(a,n==="title"?r.querySelector("head > title"):null)}function g6(r,n,a){if(a===1||n.itemProp!=null)return!1;switch(r){case"meta":case"title":return!0;case"style":if(typeof n.precedence!="string"||typeof n.href!="string"||n.href==="")break;return!0;case"link":if(typeof n.rel!="string"||typeof n.href!="string"||n.href===""||n.onLoad||n.onError)break;return n.rel==="stylesheet"?(r=n.disabled,typeof n.precedence=="string"&&r==null):!0;case"script":if(n.async&&typeof n.async!="function"&&typeof n.async!="symbol"&&!n.onLoad&&!n.onError&&n.src&&typeof n.src=="string")return!0}return!1}function Nx(r){return!(r.type==="stylesheet"&&(r.state.loading&3)===0)}function y6(r,n,a,c){if(a.type==="stylesheet"&&(typeof c.media!="string"||matchMedia(c.media).matches!==!1)&&(a.state.loading&4)===0){if(a.instance===null){var u=ja(c.href),p=n.querySelector(Zs(u));if(p){n=p._p,n!==null&&typeof n=="object"&&typeof n.then=="function"&&(r.count++,r=Md.bind(r),n.then(r,r)),a.state.loading|=4,a.instance=p,Ge(p);return}p=n.ownerDocument||n,c=Dx(c),(u=Vr.get(u))&&fp(c,u),p=p.createElement("link"),Ge(p);var x=p;x._p=new Promise(function(S,R){x.onload=S,x.onerror=R}),qt(p,"link",c),a.instance=p}r.stylesheets===null&&(r.stylesheets=new Map),r.stylesheets.set(a,n),(n=a.state.preload)&&(a.state.loading&3)===0&&(r.count++,a=Md.bind(r),n.addEventListener("load",a),n.addEventListener("error",a))}}var pp=0;function b6(r,n){return r.stylesheets&&r.count===0&&zd(r,r.stylesheets),0<r.count||0<r.imgCount?function(a){var c=setTimeout(function(){if(r.stylesheets&&zd(r,r.stylesheets),r.unsuspend){var p=r.unsuspend;r.unsuspend=null,p()}},6e4+n);0<r.imgBytes&&pp===0&&(pp=62500*J5());var u=setTimeout(function(){if(r.waitingForImages=!1,r.count===0&&(r.stylesheets&&zd(r,r.stylesheets),r.unsuspend)){var p=r.unsuspend;r.unsuspend=null,p()}},(r.imgBytes>pp?50:800)+n);return r.unsuspend=a,function(){r.unsuspend=null,clearTimeout(c),clearTimeout(u)}}:null}function Md(){if(this.count--,this.count===0&&(this.imgCount===0||!this.waitingForImages)){if(this.stylesheets)zd(this,this.stylesheets);else if(this.unsuspend){var r=this.unsuspend;this.unsuspend=null,r()}}}var Dd=null;function zd(r,n){r.stylesheets=null,r.unsuspend!==null&&(r.count++,Dd=new Map,n.forEach(x6,r),Dd=null,Md.call(r))}function x6(r,n){if(!(n.state.loading&4)){var a=Dd.get(r);if(a)var c=a.get(null);else{a=new Map,Dd.set(r,a);for(var u=r.querySelectorAll("link[data-precedence],style[data-precedence]"),p=0;p<u.length;p++){var x=u[p];(x.nodeName==="LINK"||x.getAttribute("media")!=="not all")&&(a.set(x.dataset.precedence,x),c=x)}c&&a.set(null,c)}u=n.instance,x=u.getAttribute("data-precedence"),p=a.get(x)||c,p===c&&a.set(null,u),a.set(x,u),this.count++,c=Md.bind(this),u.addEventListener("load",c),u.addEventListener("error",c),p?p.parentNode.insertBefore(u,p.nextSibling):(r=r.nodeType===9?r.head:r,r.insertBefore(u,r.firstChild)),n.state.loading|=4}}var el={$$typeof:z,Provider:null,Consumer:null,_currentValue:se,_currentValue2:se,_threadCount:0};function w6(r,n,a,c,u,p,x,S,R){this.tag=1,this.containerInfo=r,this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.next=this.pendingContext=this.context=this.cancelPendingCommit=null,this.callbackPriority=0,this.expirationTimes=pn(-1),this.entangledLanes=this.shellSuspendCounter=this.errorRecoveryDisabledLanes=this.expiredLanes=this.warmLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=pn(0),this.hiddenUpdates=pn(null),this.identifierPrefix=c,this.onUncaughtError=u,this.onCaughtError=p,this.onRecoverableError=x,this.pooledCache=null,this.pooledCacheLanes=0,this.formState=R,this.incompleteTransitions=new Map}function $x(r,n,a,c,u,p,x,S,R,I,Y,Z){return r=new w6(r,n,a,x,R,I,Y,Z,S),n=1,p===!0&&(n|=24),p=Sr(3,null,null,n),r.current=p,p.stateNode=r,n=Gf(),n.refCount++,r.pooledCache=n,n.refCount++,p.memoizedState={element:c,isDehydrated:a,cache:n},Wf(p),r}function Bx(r){return r?(r=la,r):la}function Ux(r,n,a,c,u,p){u=Bx(u),c.context===null?c.context=u:c.pendingContext=u,c=_n(n),c.payload={element:a},p=p===void 0?null:p,p!==null&&(c.callback=p),a=Sn(r,c,n),a!==null&&(br(a,r,n),Ms(a,r,n))}function Ix(r,n){if(r=r.memoizedState,r!==null&&r.dehydrated!==null){var a=r.retryLane;r.retryLane=a!==0&&a<n?a:n}}function mp(r,n){Ix(r,n),(r=r.alternate)&&Ix(r,n)}function Vx(r){if(r.tag===13||r.tag===31){var n=ao(r,67108864);n!==null&&br(n,r,67108864),mp(r,67108864)}}function Fx(r){if(r.tag===13||r.tag===31){var n=Ar();n=L(n);var a=ao(r,n);a!==null&&br(a,r,n),mp(r,n)}}var Pd=!0;function _6(r,n,a,c){var u=N.T;N.T=null;var p=Q.p;try{Q.p=2,vp(r,n,a,c)}finally{Q.p=p,N.T=u}}function S6(r,n,a,c){var u=N.T;N.T=null;var p=Q.p;try{Q.p=8,vp(r,n,a,c)}finally{Q.p=p,N.T=u}}function vp(r,n,a,c){if(Pd){var u=gp(c);if(u===null)rp(r,n,c,Ld,a),qx(r,c);else if(T6(u,r,n,a,c))c.stopPropagation();else if(qx(r,c),n&4&&-1<E6.indexOf(r)){for(;u!==null;){var p=Je(u);if(p!==null)switch(p.tag){case 3:if(p=p.stateNode,p.current.memoizedState.isDehydrated){var x=ti(p.pendingLanes);if(x!==0){var S=p;for(S.pendingLanes|=2,S.entangledLanes|=2;x;){var R=1<<31-Qt(x);S.entanglements[1]|=R,x&=~R}xi(p),(Ze&6)===0&&(yd=tr()+500,Ys(0))}}break;case 31:case 13:S=ao(p,2),S!==null&&br(S,p,2),xd(),mp(p,2)}if(p=gp(c),p===null&&rp(r,n,c,Ld,a),p===u)break;u=p}u!==null&&c.stopPropagation()}else rp(r,n,c,null,a)}}function gp(r){return r=bf(r),yp(r)}var Ld=null;function yp(r){if(Ld=null,r=pt(r),r!==null){var n=l(r);if(n===null)r=null;else{var a=n.tag;if(a===13){if(r=d(n),r!==null)return r;r=null}else if(a===31){if(r=f(n),r!==null)return r;r=null}else if(a===3){if(n.stateNode.current.memoizedState.isDehydrated)return n.tag===3?n.stateNode.containerInfo:null;r=null}else n!==r&&(r=null)}}return Ld=r,null}function Hx(r){switch(r){case"beforetoggle":case"cancel":case"click":case"close":case"contextmenu":case"copy":case"cut":case"auxclick":case"dblclick":case"dragend":case"dragstart":case"drop":case"focusin":case"focusout":case"input":case"invalid":case"keydown":case"keypress":case"keyup":case"mousedown":case"mouseup":case"paste":case"pause":case"play":case"pointercancel":case"pointerdown":case"pointerup":case"ratechange":case"reset":case"resize":case"seeked":case"submit":case"toggle":case"touchcancel":case"touchend":case"touchstart":case"volumechange":case"change":case"selectionchange":case"textInput":case"compositionstart":case"compositionend":case"compositionupdate":case"beforeblur":case"afterblur":case"beforeinput":case"blur":case"fullscreenchange":case"focus":case"hashchange":case"popstate":case"select":case"selectstart":return 2;case"drag":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"mousemove":case"mouseout":case"mouseover":case"pointermove":case"pointerout":case"pointerover":case"scroll":case"touchmove":case"wheel":case"mouseenter":case"mouseleave":case"pointerenter":case"pointerleave":return 8;case"message":switch(Pi()){case un:return 2;case ps:return 8;case fn:case ei:return 32;case Dr:return 268435456;default:return 32}default:return 32}}var bp=!1,zn=null,Pn=null,Ln=null,tl=new Map,rl=new Map,Nn=[],E6="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset".split(" ");function qx(r,n){switch(r){case"focusin":case"focusout":zn=null;break;case"dragenter":case"dragleave":Pn=null;break;case"mouseover":case"mouseout":Ln=null;break;case"pointerover":case"pointerout":tl.delete(n.pointerId);break;case"gotpointercapture":case"lostpointercapture":rl.delete(n.pointerId)}}function il(r,n,a,c,u,p){return r===null||r.nativeEvent!==p?(r={blockedOn:n,domEventName:a,eventSystemFlags:c,nativeEvent:p,targetContainers:[u]},n!==null&&(n=Je(n),n!==null&&Vx(n)),r):(r.eventSystemFlags|=c,n=r.targetContainers,u!==null&&n.indexOf(u)===-1&&n.push(u),r)}function T6(r,n,a,c,u){switch(n){case"focusin":return zn=il(zn,r,n,a,c,u),!0;case"dragenter":return Pn=il(Pn,r,n,a,c,u),!0;case"mouseover":return Ln=il(Ln,r,n,a,c,u),!0;case"pointerover":var p=u.pointerId;return tl.set(p,il(tl.get(p)||null,r,n,a,c,u)),!0;case"gotpointercapture":return p=u.pointerId,rl.set(p,il(rl.get(p)||null,r,n,a,c,u)),!0}return!1}function Kx(r){var n=pt(r.target);if(n!==null){var a=l(n);if(a!==null){if(n=a.tag,n===13){if(n=d(a),n!==null){r.blockedOn=n,re(r.priority,function(){Fx(a)});return}}else if(n===31){if(n=f(a),n!==null){r.blockedOn=n,re(r.priority,function(){Fx(a)});return}}else if(n===3&&a.stateNode.current.memoizedState.isDehydrated){r.blockedOn=a.tag===3?a.stateNode.containerInfo:null;return}}}r.blockedOn=null}function Nd(r){if(r.blockedOn!==null)return!1;for(var n=r.targetContainers;0<n.length;){var a=gp(r.nativeEvent);if(a===null){a=r.nativeEvent;var c=new a.constructor(a.type,a);yf=c,a.target.dispatchEvent(c),yf=null}else return n=Je(a),n!==null&&Vx(n),r.blockedOn=a,!1;n.shift()}return!0}function Gx(r,n,a){Nd(r)&&a.delete(n)}function O6(){bp=!1,zn!==null&&Nd(zn)&&(zn=null),Pn!==null&&Nd(Pn)&&(Pn=null),Ln!==null&&Nd(Ln)&&(Ln=null),tl.forEach(Gx),rl.forEach(Gx)}function $d(r,n){r.blockedOn===n&&(r.blockedOn=null,bp||(bp=!0,e.unstable_scheduleCallback(e.unstable_NormalPriority,O6)))}var Bd=null;function Yx(r){Bd!==r&&(Bd=r,e.unstable_scheduleCallback(e.unstable_NormalPriority,function(){Bd===r&&(Bd=null);for(var n=0;n<r.length;n+=3){var a=r[n],c=r[n+1],u=r[n+2];if(typeof c!="function"){if(yp(c||a)===null)continue;break}var p=Je(a);p!==null&&(r.splice(n,3),n-=3,gh(p,{pending:!0,data:u,method:a.method,action:c},c,u))}}))}function Ma(r){function n(R){return $d(R,r)}zn!==null&&$d(zn,r),Pn!==null&&$d(Pn,r),Ln!==null&&$d(Ln,r),tl.forEach(n),rl.forEach(n);for(var a=0;a<Nn.length;a++){var c=Nn[a];c.blockedOn===r&&(c.blockedOn=null)}for(;0<Nn.length&&(a=Nn[0],a.blockedOn===null);)Kx(a),a.blockedOn===null&&Nn.shift();if(a=(r.ownerDocument||r).$$reactFormReplay,a!=null)for(c=0;c<a.length;c+=3){var u=a[c],p=a[c+1],x=u[me]||null;if(typeof p=="function")x||Yx(a);else if(x){var S=null;if(p&&p.hasAttribute("formAction")){if(u=p,x=p[me]||null)S=x.formAction;else if(yp(u)!==null)continue}else S=x.action;typeof S=="function"?a[c+1]=S:(a.splice(c,3),c-=3),Yx(a)}}}function Qx(){function r(p){p.canIntercept&&p.info==="react-transition"&&p.intercept({handler:function(){return new Promise(function(x){return u=x})},focusReset:"manual",scroll:"manual"})}function n(){u!==null&&(u(),u=null),c||setTimeout(a,20)}function a(){if(!c&&!navigation.transition){var p=navigation.currentEntry;p&&p.url!=null&&navigation.navigate(p.url,{state:p.getState(),info:"react-transition",history:"replace"})}}if(typeof navigation=="object"){var c=!1,u=null;return navigation.addEventListener("navigate",r),navigation.addEventListener("navigatesuccess",n),navigation.addEventListener("navigateerror",n),setTimeout(a,100),function(){c=!0,navigation.removeEventListener("navigate",r),navigation.removeEventListener("navigatesuccess",n),navigation.removeEventListener("navigateerror",n),u!==null&&(u(),u=null)}}}function xp(r){this._internalRoot=r}Ud.prototype.render=xp.prototype.render=function(r){var n=this._internalRoot;if(n===null)throw Error(o(409));var a=n.current,c=Ar();Ux(a,c,r,n,null,null)},Ud.prototype.unmount=xp.prototype.unmount=function(){var r=this._internalRoot;if(r!==null){this._internalRoot=null;var n=r.containerInfo;Ux(r.current,2,null,r,null,null),xd(),n[pe]=null}};function Ud(r){this._internalRoot=r}Ud.prototype.unstable_scheduleHydration=function(r){if(r){var n=te();r={blockedOn:null,target:r,priority:n};for(var a=0;a<Nn.length&&n!==0&&n<Nn[a].priority;a++);Nn.splice(a,0,r),a===0&&Kx(r)}};var Xx=t.version;if(Xx!=="19.2.6")throw Error(o(527,Xx,"19.2.6"));Q.findDOMNode=function(r){var n=r._reactInternals;if(n===void 0)throw typeof r.render=="function"?Error(o(188)):(r=Object.keys(r).join(","),Error(o(268,r)));return r=m(n),r=r!==null?g(r):null,r=r===null?null:r.stateNode,r};var C6={bundleType:0,version:"19.2.6",rendererPackageName:"react-dom",currentDispatcherRef:N,reconcilerVersion:"19.2.6"};if(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"){var Id=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!Id.isDisabled&&Id.supportsFiber)try{Li=Id.inject(C6),rr=Id}catch{}}return ol.createRoot=function(r,n){if(!s(r))throw Error(o(299));var a=!1,c="",u=i0,p=n0,x=o0;return n!=null&&(n.unstable_strictMode===!0&&(a=!0),n.identifierPrefix!==void 0&&(c=n.identifierPrefix),n.onUncaughtError!==void 0&&(u=n.onUncaughtError),n.onCaughtError!==void 0&&(p=n.onCaughtError),n.onRecoverableError!==void 0&&(x=n.onRecoverableError)),n=$x(r,1,!1,null,null,a,c,null,u,p,x,Qx),r[pe]=n.current,tp(r),new xp(n)},ol.hydrateRoot=function(r,n,a){if(!s(r))throw Error(o(299));var c=!1,u="",p=i0,x=n0,S=o0,R=null;return a!=null&&(a.unstable_strictMode===!0&&(c=!0),a.identifierPrefix!==void 0&&(u=a.identifierPrefix),a.onUncaughtError!==void 0&&(p=a.onUncaughtError),a.onCaughtError!==void 0&&(x=a.onCaughtError),a.onRecoverableError!==void 0&&(S=a.onRecoverableError),a.formState!==void 0&&(R=a.formState)),n=$x(r,1,!0,n,a??null,c,u,R,p,x,S,Qx),n.context=Bx(null),a=n.current,c=Ar(),c=L(c),u=_n(c),u.callback=null,Sn(a,u,c),a=c,n.current.lanes=a,vi(n,a),xi(n),r[pe]=n.current,tp(r),new Ud(n)},ol.version="19.2.6",ol}var a1;function U6(){if(a1)return Sp.exports;a1=1;function e(){if(!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}return e(),Sp.exports=B6(),Sp.exports}var I6=U6(),Ja=class{constructor(){this.listeners=new Set,this.subscribe=this.subscribe.bind(this)}subscribe(e){return this.listeners.add(e),this.onSubscribe(),()=>{this.listeners.delete(e),this.onUnsubscribe()}}hasListeners(){return this.listeners.size>0}onSubscribe(){}onUnsubscribe(){}},V6=class extends Ja{#e;#t;#r;constructor(){super(),this.#r=e=>{if(typeof window<"u"&&window.addEventListener){const t=()=>e();return window.addEventListener("visibilitychange",t,!1),()=>{window.removeEventListener("visibilitychange",t)}}}}onSubscribe(){this.#t||this.setEventListener(this.#r)}onUnsubscribe(){this.hasListeners()||(this.#t?.(),this.#t=void 0)}setEventListener(e){this.#r=e,this.#t?.(),this.#t=e(t=>{typeof t=="boolean"?this.setFocused(t):this.onFocus()})}setFocused(e){this.#e!==e&&(this.#e=e,this.onFocus())}onFocus(){const e=this.isFocused();this.listeners.forEach(t=>{t(e)})}isFocused(){return typeof this.#e=="boolean"?this.#e:globalThis.document?.visibilityState!=="hidden"}},Gv=new V6,F6={setTimeout:(e,t)=>setTimeout(e,t),clearTimeout:e=>clearTimeout(e),setInterval:(e,t)=>setInterval(e,t),clearInterval:e=>clearInterval(e)},H6=class{#e=F6;#t=!1;setTimeoutProvider(e){this.#e=e}setTimeout(e,t){return this.#e.setTimeout(e,t)}clearTimeout(e){this.#e.clearTimeout(e)}setInterval(e,t){return this.#e.setInterval(e,t)}clearInterval(e){this.#e.clearInterval(e)}},Eo=new H6;function q6(e){setTimeout(e,0)}var K6=typeof window>"u"||"Deno"in globalThis;function sr(){}function G6(e,t){return typeof e=="function"?e(t):e}function km(e){return typeof e=="number"&&e>=0&&e!==1/0}function A_(e,t){return Math.max(e+(t||0)-Date.now(),0)}function Kn(e,t){return typeof e=="function"?e(t):e}function Rr(e,t){return typeof e=="function"?e(t):e}function s1(e,t){const{type:i="all",exact:o,fetchStatus:s,predicate:l,queryKey:d,stale:f}=e;if(d){if(o){if(t.queryHash!==Yv(d,t.options))return!1}else if(!Rl(t.queryKey,d))return!1}if(i!=="all"){const h=t.isActive();if(i==="active"&&!h||i==="inactive"&&h)return!1}return!(typeof f=="boolean"&&t.isStale()!==f||s&&s!==t.state.fetchStatus||l&&!l(t))}function l1(e,t){const{exact:i,status:o,predicate:s,mutationKey:l}=e;if(l){if(!t.options.mutationKey)return!1;if(i){if(zo(t.options.mutationKey)!==zo(l))return!1}else if(!Rl(t.options.mutationKey,l))return!1}return!(o&&t.state.status!==o||s&&!s(t))}function Yv(e,t){return(t?.queryKeyHashFn||zo)(e)}function zo(e){return JSON.stringify(e,(t,i)=>Mm(i)?Object.keys(i).sort().reduce((o,s)=>(o[s]=i[s],o),{}):i)}function Rl(e,t){return e===t?!0:typeof e!=typeof t?!1:e&&t&&typeof e=="object"&&typeof t=="object"?Object.keys(t).every(i=>Rl(e[i],t[i])):!1}var Y6=Object.prototype.hasOwnProperty;function R_(e,t,i=0){if(e===t)return e;if(i>500)return t;const o=c1(e)&&c1(t);if(!o&&!(Mm(e)&&Mm(t)))return t;const l=(o?e:Object.keys(e)).length,d=o?t:Object.keys(t),f=d.length,h=o?new Array(f):{};let m=0;for(let g=0;g<f;g++){const y=o?g:d[g],b=e[y],_=t[y];if(b===_){h[y]=b,(o?g<l:Y6.call(e,y))&&m++;continue}if(b===null||_===null||typeof b!="object"||typeof _!="object"){h[y]=_;continue}const E=R_(b,_,i+1);h[y]=E,E===b&&m++}return l===f&&m===l?e:h}function xu(e,t){if(!t||Object.keys(e).length!==Object.keys(t).length)return!1;for(const i in e)if(e[i]!==t[i])return!1;return!0}function c1(e){return Array.isArray(e)&&e.length===Object.keys(e).length}function Mm(e){if(!d1(e))return!1;const t=e.constructor;if(t===void 0)return!0;const i=t.prototype;return!(!d1(i)||!i.hasOwnProperty("isPrototypeOf")||Object.getPrototypeOf(e)!==Object.prototype)}function d1(e){return Object.prototype.toString.call(e)==="[object Object]"}function Q6(e){return new Promise(t=>{Eo.setTimeout(t,e)})}function Dm(e,t,i){return typeof i.structuralSharing=="function"?i.structuralSharing(e,t):i.structuralSharing!==!1?R_(e,t):t}function X6(e){return e}function W6(e,t,i=0){const o=[...e,t];return i&&o.length>i?o.slice(1):o}function Z6(e,t,i=0){const o=[t,...e];return i&&o.length>i?o.slice(0,-1):o}var Qv=Symbol();function j_(e,t){return!e.queryFn&&t?.initialPromise?()=>t.initialPromise:!e.queryFn||e.queryFn===Qv?()=>Promise.reject(new Error(`Missing queryFn: '${e.queryHash}'`)):e.queryFn}function Xv(e,t){return typeof e=="function"?e(...t):!!e}function J6(e,t,i){let o=!1,s;return Object.defineProperty(e,"signal",{enumerable:!0,get:()=>(s??=t(),o||(o=!0,s.aborted?i():s.addEventListener("abort",i,{once:!0})),s)}),e}var jl=(()=>{let e=()=>K6;return{isServer(){return e()},setIsServer(t){e=t}}})();function zm(){let e,t;const i=new Promise((s,l)=>{e=s,t=l});i.status="pending",i.catch(()=>{});function o(s){Object.assign(i,s),delete i.resolve,delete i.reject}return i.resolve=s=>{o({status:"fulfilled",value:s}),e(s)},i.reject=s=>{o({status:"rejected",reason:s}),t(s)},i}var eT=q6;function tT(){let e=[],t=0,i=f=>{f()},o=f=>{f()},s=eT;const l=f=>{t?e.push(f):s(()=>{i(f)})},d=()=>{const f=e;e=[],f.length&&s(()=>{o(()=>{f.forEach(h=>{i(h)})})})};return{batch:f=>{let h;t++;try{h=f()}finally{t--,t||d()}return h},batchCalls:f=>(...h)=>{l(()=>{f(...h)})},schedule:l,setNotifyFunction:f=>{i=f},setBatchNotifyFunction:f=>{o=f},setScheduler:f=>{s=f}}}var Bt=tT(),rT=class extends Ja{#e=!0;#t;#r;constructor(){super(),this.#r=e=>{if(typeof window<"u"&&window.addEventListener){const t=()=>e(!0),i=()=>e(!1);return window.addEventListener("online",t,!1),window.addEventListener("offline",i,!1),()=>{window.removeEventListener("online",t),window.removeEventListener("offline",i)}}}}onSubscribe(){this.#t||this.setEventListener(this.#r)}onUnsubscribe(){this.hasListeners()||(this.#t?.(),this.#t=void 0)}setEventListener(e){this.#r=e,this.#t?.(),this.#t=e(this.setOnline.bind(this))}setOnline(e){this.#e!==e&&(this.#e=e,this.listeners.forEach(i=>{i(e)}))}isOnline(){return this.#e}},wu=new rT;function iT(e){return Math.min(1e3*2**e,3e4)}function k_(e){return(e??"online")==="online"?wu.isOnline():!0}var Pm=class extends Error{constructor(e){super("CancelledError"),this.revert=e?.revert,this.silent=e?.silent}};function M_(e){let t=!1,i=0,o;const s=zm(),l=()=>s.status!=="pending",d=T=>{if(!l()){const O=new Pm(T);b(O),e.onCancel?.(O)}},f=()=>{t=!0},h=()=>{t=!1},m=()=>Gv.isFocused()&&(e.networkMode==="always"||wu.isOnline())&&e.canRun(),g=()=>k_(e.networkMode)&&e.canRun(),y=T=>{l()||(o?.(),s.resolve(T))},b=T=>{l()||(o?.(),s.reject(T))},_=()=>new Promise(T=>{o=O=>{(l()||m())&&T(O)},e.onPause?.()}).then(()=>{o=void 0,l()||e.onContinue?.()}),E=()=>{if(l())return;let T;const O=i===0?e.initialPromise:void 0;try{T=O??e.fn()}catch(D){T=Promise.reject(D)}Promise.resolve(T).then(y).catch(D=>{if(l())return;const C=e.retry??(jl.isServer()?0:3),z=e.retryDelay??iT,B=typeof z=="function"?z(i,D):z,H=C===!0||typeof C=="number"&&i<C||typeof C=="function"&&C(i,D);if(t||!H){b(D);return}i++,e.onFail?.(i,D),Q6(B).then(()=>m()?void 0:_()).then(()=>{t?b(D):E()})})};return{promise:s,status:()=>s.status,cancel:d,continue:()=>(o?.(),s),cancelRetry:f,continueRetry:h,canStart:g,start:()=>(g()?E():_().then(E),s)}}var D_=class{#e;destroy(){this.clearGcTimeout()}scheduleGc(){this.clearGcTimeout(),km(this.gcTime)&&(this.#e=Eo.setTimeout(()=>{this.optionalRemove()},this.gcTime))}updateGcTime(e){this.gcTime=Math.max(this.gcTime||0,e??(jl.isServer()?1/0:300*1e3))}clearGcTimeout(){this.#e!==void 0&&(Eo.clearTimeout(this.#e),this.#e=void 0)}};function nT(e){return{onFetch:(t,i)=>{const o=t.options,s=t.fetchOptions?.meta?.fetchMore?.direction,l=t.state.data?.pages||[],d=t.state.data?.pageParams||[];let f={pages:[],pageParams:[]},h=0;const m=async()=>{let g=!1;const y=E=>{J6(E,()=>t.signal,()=>g=!0)},b=j_(t.options,t.fetchOptions),_=async(E,T,O)=>{if(g)return Promise.reject(t.signal.reason);if(T==null&&E.pages.length)return Promise.resolve(E);const C=(()=>{const ne={client:t.client,queryKey:t.queryKey,pageParam:T,direction:O?"backward":"forward",meta:t.options.meta};return y(ne),ne})(),z=await b(C),{maxPages:B}=t.options,H=O?Z6:W6;return{pages:H(E.pages,z,B),pageParams:H(E.pageParams,T,B)}};if(s&&l.length){const E=s==="backward",T=E?oT:u1,O={pages:l,pageParams:d},D=T(o,O);f=await _(O,D,E)}else{const E=e??l.length;do{const T=h===0?d[0]??o.initialPageParam:u1(o,f);if(h>0&&T==null)break;f=await _(f,T),h++}while(h<E)}return f};t.options.persister?t.fetchFn=()=>t.options.persister?.(m,{client:t.client,queryKey:t.queryKey,meta:t.options.meta,signal:t.signal},i):t.fetchFn=m}}}function u1(e,{pages:t,pageParams:i}){const o=t.length-1;return t.length>0?e.getNextPageParam(t[o],t,i[o],i):void 0}function oT(e,{pages:t,pageParams:i}){return t.length>0?e.getPreviousPageParam?.(t[0],t,i[0],i):void 0}var aT=class extends D_{#e;#t;#r;#i;#o;#n;#s;#a;constructor(e){super(),this.#a=!1,this.#s=e.defaultOptions,this.setOptions(e.options),this.observers=[],this.#o=e.client,this.#i=this.#o.getQueryCache(),this.queryKey=e.queryKey,this.queryHash=e.queryHash,this.#t=h1(this.options),this.state=e.state??this.#t,this.scheduleGc()}get meta(){return this.options.meta}get queryType(){return this.#e}get promise(){return this.#n?.promise}setOptions(e){if(this.options={...this.#s,...e},e?._type&&(this.#e=e._type),this.updateGcTime(this.options.gcTime),this.state&&this.state.data===void 0){const t=h1(this.options);t.data!==void 0&&(this.setState(f1(t.data,t.dataUpdatedAt)),this.#t=t)}}optionalRemove(){!this.observers.length&&this.state.fetchStatus==="idle"&&this.#i.remove(this)}setData(e,t){const i=Dm(this.state.data,e,this.options);return this.#l({data:i,type:"success",dataUpdatedAt:t?.updatedAt,manual:t?.manual}),i}setState(e){this.#l({type:"setState",state:e})}cancel(e){const t=this.#n?.promise;return this.#n?.cancel(e),t?t.then(sr).catch(sr):Promise.resolve()}destroy(){super.destroy(),this.cancel({silent:!0})}get resetState(){return this.#t}reset(){this.destroy(),this.setState(this.resetState)}isActive(){return this.observers.some(e=>Rr(e.options.enabled,this)!==!1)}isDisabled(){return this.getObserversCount()>0?!this.isActive():this.options.queryFn===Qv||!this.isFetched()}isFetched(){return this.state.dataUpdateCount+this.state.errorUpdateCount>0}isStatic(){return this.getObserversCount()>0?this.observers.some(e=>Kn(e.options.staleTime,this)==="static"):!1}isStale(){return this.getObserversCount()>0?this.observers.some(e=>e.getCurrentResult().isStale):this.state.data===void 0||this.state.isInvalidated}isStaleByTime(e=0){return this.state.data===void 0?!0:e==="static"?!1:this.state.isInvalidated?!0:!A_(this.state.dataUpdatedAt,e)}onFocus(){this.observers.find(t=>t.shouldFetchOnWindowFocus())?.refetch({cancelRefetch:!1}),this.#n?.continue()}onOnline(){this.observers.find(t=>t.shouldFetchOnReconnect())?.refetch({cancelRefetch:!1}),this.#n?.continue()}addObserver(e){this.observers.includes(e)||(this.observers.push(e),this.clearGcTimeout(),this.#i.notify({type:"observerAdded",query:this,observer:e}))}removeObserver(e){this.observers.includes(e)&&(this.observers=this.observers.filter(t=>t!==e),this.observers.length||(this.#n&&(this.#a||this.#d()?this.#n.cancel({revert:!0}):this.#n.cancelRetry()),this.scheduleGc()),this.#i.notify({type:"observerRemoved",query:this,observer:e}))}getObserversCount(){return this.observers.length}#d(){return this.state.fetchStatus==="paused"&&this.state.status==="pending"}invalidate(){this.state.isInvalidated||this.#l({type:"invalidate"})}async fetch(e,t){if(this.state.fetchStatus!=="idle"&&this.#n?.status()!=="rejected"){if(this.state.data!==void 0&&t?.cancelRefetch)this.cancel({silent:!0});else if(this.#n)return this.#n.continueRetry(),this.#n.promise}if(e&&this.setOptions(e),!this.options.queryFn){const h=this.observers.find(m=>m.options.queryFn);h&&this.setOptions(h.options)}const i=new AbortController,o=h=>{Object.defineProperty(h,"signal",{enumerable:!0,get:()=>(this.#a=!0,i.signal)})},s=()=>{const h=j_(this.options,t),g=(()=>{const y={client:this.#o,queryKey:this.queryKey,meta:this.meta};return o(y),y})();return this.#a=!1,this.options.persister?this.options.persister(h,g,this):h(g)},d=(()=>{const h={fetchOptions:t,options:this.options,queryKey:this.queryKey,client:this.#o,state:this.state,fetchFn:s};return o(h),h})();(this.#e==="infinite"?nT(this.options.pages):this.options.behavior)?.onFetch(d,this),this.#r=this.state,(this.state.fetchStatus==="idle"||this.state.fetchMeta!==d.fetchOptions?.meta)&&this.#l({type:"fetch",meta:d.fetchOptions?.meta}),this.#n=M_({initialPromise:t?.initialPromise,fn:d.fetchFn,onCancel:h=>{h instanceof Pm&&h.revert&&this.setState({...this.#r,fetchStatus:"idle"}),i.abort()},onFail:(h,m)=>{this.#l({type:"failed",failureCount:h,error:m})},onPause:()=>{this.#l({type:"pause"})},onContinue:()=>{this.#l({type:"continue"})},retry:d.options.retry,retryDelay:d.options.retryDelay,networkMode:d.options.networkMode,canRun:()=>!0});try{const h=await this.#n.start();if(h===void 0)throw new Error(`${this.queryHash} data is undefined`);return this.setData(h),this.#i.config.onSuccess?.(h,this),this.#i.config.onSettled?.(h,this.state.error,this),h}catch(h){if(h instanceof Pm){if(h.silent)return this.#n.promise;if(h.revert){if(this.state.data===void 0)throw h;return this.state.data}}throw this.#l({type:"error",error:h}),this.#i.config.onError?.(h,this),this.#i.config.onSettled?.(this.state.data,h,this),h}finally{this.scheduleGc()}}#l(e){const t=i=>{switch(e.type){case"failed":return{...i,fetchFailureCount:e.failureCount,fetchFailureReason:e.error};case"pause":return{...i,fetchStatus:"paused"};case"continue":return{...i,fetchStatus:"fetching"};case"fetch":return{...i,...z_(i.data,this.options),fetchMeta:e.meta??null};case"success":const o={...i,...f1(e.data,e.dataUpdatedAt),dataUpdateCount:i.dataUpdateCount+1,...!e.manual&&{fetchStatus:"idle",fetchFailureCount:0,fetchFailureReason:null}};return this.#r=e.manual?o:void 0,o;case"error":const s=e.error;return{...i,error:s,errorUpdateCount:i.errorUpdateCount+1,errorUpdatedAt:Date.now(),fetchFailureCount:i.fetchFailureCount+1,fetchFailureReason:s,fetchStatus:"idle",status:"error",isInvalidated:!0};case"invalidate":return{...i,isInvalidated:!0};case"setState":return{...i,...e.state}}};this.state=t(this.state),Bt.batch(()=>{this.observers.forEach(i=>{i.onQueryUpdate()}),this.#i.notify({query:this,type:"updated",action:e})})}};function z_(e,t){return{fetchFailureCount:0,fetchFailureReason:null,fetchStatus:k_(t.networkMode)?"fetching":"paused",...e===void 0&&{error:null,status:"pending"}}}function f1(e,t){return{data:e,dataUpdatedAt:t??Date.now(),error:null,isInvalidated:!1,status:"success"}}function h1(e){const t=typeof e.initialData=="function"?e.initialData():e.initialData,i=t!==void 0,o=i?typeof e.initialDataUpdatedAt=="function"?e.initialDataUpdatedAt():e.initialDataUpdatedAt:0;return{data:t,dataUpdateCount:0,dataUpdatedAt:i?o??Date.now():0,error:null,errorUpdateCount:0,errorUpdatedAt:0,fetchFailureCount:0,fetchFailureReason:null,fetchMeta:null,isInvalidated:!1,status:i?"success":"pending",fetchStatus:"idle"}}var sT=class extends Ja{constructor(e,t){super(),this.options=t,this.#e=e,this.#a=null,this.#s=zm(),this.bindMethods(),this.setOptions(t)}#e;#t=void 0;#r=void 0;#i=void 0;#o;#n;#s;#a;#d;#l;#p;#u;#f;#c;#m=new Set;bindMethods(){this.refetch=this.refetch.bind(this)}onSubscribe(){this.listeners.size===1&&(this.#t.addObserver(this),p1(this.#t,this.options)?this.#h():this.updateResult(),this.#b())}onUnsubscribe(){this.hasListeners()||this.destroy()}shouldFetchOnReconnect(){return Lm(this.#t,this.options,this.options.refetchOnReconnect)}shouldFetchOnWindowFocus(){return Lm(this.#t,this.options,this.options.refetchOnWindowFocus)}destroy(){this.listeners=new Set,this.#x(),this.#w(),this.#t.removeObserver(this)}setOptions(e){const t=this.options,i=this.#t;if(this.options=this.#e.defaultQueryOptions(e),this.options.enabled!==void 0&&typeof this.options.enabled!="boolean"&&typeof this.options.enabled!="function"&&typeof Rr(this.options.enabled,this.#t)!="boolean")throw new Error("Expected enabled to be a boolean or a callback that returns a boolean");this.#_(),this.#t.setOptions(this.options),t._defaulted&&!xu(this.options,t)&&this.#e.getQueryCache().notify({type:"observerOptionsUpdated",query:this.#t,observer:this});const o=this.hasListeners();o&&m1(this.#t,i,this.options,t)&&this.#h(),this.updateResult(),o&&(this.#t!==i||Rr(this.options.enabled,this.#t)!==Rr(t.enabled,this.#t)||Kn(this.options.staleTime,this.#t)!==Kn(t.staleTime,this.#t))&&this.#v();const s=this.#g();o&&(this.#t!==i||Rr(this.options.enabled,this.#t)!==Rr(t.enabled,this.#t)||s!==this.#c)&&this.#y(s)}getOptimisticResult(e){const t=this.#e.getQueryCache().build(this.#e,e),i=this.createResult(t,e);return cT(this,i)&&(this.#i=i,this.#n=this.options,this.#o=this.#t.state),i}getCurrentResult(){return this.#i}trackResult(e,t){return new Proxy(e,{get:(i,o)=>(this.trackProp(o),t?.(o),o==="promise"&&(this.trackProp("data"),!this.options.experimental_prefetchInRender&&this.#s.status==="pending"&&this.#s.reject(new Error("experimental_prefetchInRender feature flag is not enabled"))),Reflect.get(i,o))})}trackProp(e){this.#m.add(e)}getCurrentQuery(){return this.#t}refetch({...e}={}){return this.fetch({...e})}fetchOptimistic(e){const t=this.#e.defaultQueryOptions(e),i=this.#e.getQueryCache().build(this.#e,t);return i.fetch().then(()=>this.createResult(i,t))}fetch(e){return this.#h({...e,cancelRefetch:e.cancelRefetch??!0}).then(()=>(this.updateResult(),this.#i))}#h(e){this.#_();let t=this.#t.fetch(this.options,e);return e?.throwOnError||(t=t.catch(sr)),t}#v(){this.#x();const e=Kn(this.options.staleTime,this.#t);if(jl.isServer()||this.#i.isStale||!km(e))return;const i=A_(this.#i.dataUpdatedAt,e)+1;this.#u=Eo.setTimeout(()=>{this.#i.isStale||this.updateResult()},i)}#g(){return(typeof this.options.refetchInterval=="function"?this.options.refetchInterval(this.#t):this.options.refetchInterval)??!1}#y(e){this.#w(),this.#c=e,!(jl.isServer()||Rr(this.options.enabled,this.#t)===!1||!km(this.#c)||this.#c===0)&&(this.#f=Eo.setInterval(()=>{(this.options.refetchIntervalInBackground||Gv.isFocused())&&this.#h()},this.#c))}#b(){this.#v(),this.#y(this.#g())}#x(){this.#u!==void 0&&(Eo.clearTimeout(this.#u),this.#u=void 0)}#w(){this.#f!==void 0&&(Eo.clearInterval(this.#f),this.#f=void 0)}createResult(e,t){const i=this.#t,o=this.options,s=this.#i,l=this.#o,d=this.#n,h=e!==i?e.state:this.#r,{state:m}=e;let g={...m},y=!1,b;if(t._optimisticResults){const A=this.hasListeners(),le=!A&&p1(e,t),ee=A&&m1(e,i,t,o);(le||ee)&&(g={...g,...z_(m.data,e.options)}),t._optimisticResults==="isRestoring"&&(g.fetchStatus="idle")}let{error:_,errorUpdatedAt:E,status:T}=g;b=g.data;let O=!1;if(t.placeholderData!==void 0&&b===void 0&&T==="pending"){let A;s?.isPlaceholderData&&t.placeholderData===d?.placeholderData?(A=s.data,O=!0):A=typeof t.placeholderData=="function"?t.placeholderData(this.#p?.state.data,this.#p):t.placeholderData,A!==void 0&&(T="success",b=Dm(s?.data,A,t),y=!0)}if(t.select&&b!==void 0&&!O)if(s&&b===l?.data&&t.select===this.#d)b=this.#l;else try{this.#d=t.select,b=t.select(b),b=Dm(s?.data,b,t),this.#l=b,this.#a=null}catch(A){this.#a=A}this.#a&&(_=this.#a,b=this.#l,E=Date.now(),T="error");const D=g.fetchStatus==="fetching",C=T==="pending",z=T==="error",B=C&&D,H=b!==void 0,X={status:T,fetchStatus:g.fetchStatus,isPending:C,isSuccess:T==="success",isError:z,isInitialLoading:B,isLoading:B,data:b,dataUpdatedAt:g.dataUpdatedAt,error:_,errorUpdatedAt:E,failureCount:g.fetchFailureCount,failureReason:g.fetchFailureReason,errorUpdateCount:g.errorUpdateCount,isFetched:e.isFetched(),isFetchedAfterMount:g.dataUpdateCount>h.dataUpdateCount||g.errorUpdateCount>h.errorUpdateCount,isFetching:D,isRefetching:D&&!C,isLoadingError:z&&!H,isPaused:g.fetchStatus==="paused",isPlaceholderData:y,isRefetchError:z&&H,isStale:Wv(e,t),refetch:this.refetch,promise:this.#s,isEnabled:Rr(t.enabled,e)!==!1};if(this.options.experimental_prefetchInRender){const A=X.data!==void 0,le=X.status==="error"&&!A,ee=_e=>{le?_e.reject(X.error):A&&_e.resolve(X.data)},J=()=>{const _e=this.#s=X.promise=zm();ee(_e)},ce=this.#s;switch(ce.status){case"pending":e.queryHash===i.queryHash&&ee(ce);break;case"fulfilled":(le||X.data!==ce.value)&&J();break;case"rejected":(!le||X.error!==ce.reason)&&J();break}}return X}updateResult(){const e=this.#i,t=this.createResult(this.#t,this.options);if(this.#o=this.#t.state,this.#n=this.options,this.#o.data!==void 0&&(this.#p=this.#t),xu(t,e))return;this.#i=t;const i=()=>{if(!e)return!0;const{notifyOnChangeProps:o}=this.options,s=typeof o=="function"?o():o;if(s==="all"||!s&&!this.#m.size)return!0;const l=new Set(s??this.#m);return this.options.throwOnError&&l.add("error"),Object.keys(this.#i).some(d=>{const f=d;return this.#i[f]!==e[f]&&l.has(f)})};this.#S({listeners:i()})}#_(){const e=this.#e.getQueryCache().build(this.#e,this.options);if(e===this.#t)return;const t=this.#t;this.#t=e,this.#r=e.state,this.hasListeners()&&(t?.removeObserver(this),e.addObserver(this))}onQueryUpdate(){this.updateResult(),this.hasListeners()&&this.#b()}#S(e){Bt.batch(()=>{e.listeners&&this.listeners.forEach(t=>{t(this.#i)}),this.#e.getQueryCache().notify({query:this.#t,type:"observerResultsUpdated"})})}};function lT(e,t){return Rr(t.enabled,e)!==!1&&e.state.data===void 0&&!(e.state.status==="error"&&Rr(t.retryOnMount,e)===!1)}function p1(e,t){return lT(e,t)||e.state.data!==void 0&&Lm(e,t,t.refetchOnMount)}function Lm(e,t,i){if(Rr(t.enabled,e)!==!1&&Kn(t.staleTime,e)!=="static"){const o=typeof i=="function"?i(e):i;return o==="always"||o!==!1&&Wv(e,t)}return!1}function m1(e,t,i,o){return(e!==t||Rr(o.enabled,e)===!1)&&(!i.suspense||e.state.status!=="error")&&Wv(e,i)}function Wv(e,t){return Rr(t.enabled,e)!==!1&&e.isStaleByTime(Kn(t.staleTime,e))}function cT(e,t){return!xu(e.getCurrentResult(),t)}var dT=class extends D_{#e;#t;#r;#i;constructor(e){super(),this.#e=e.client,this.mutationId=e.mutationId,this.#r=e.mutationCache,this.#t=[],this.state=e.state||P_(),this.setOptions(e.options),this.scheduleGc()}setOptions(e){this.options=e,this.updateGcTime(this.options.gcTime)}get meta(){return this.options.meta}addObserver(e){this.#t.includes(e)||(this.#t.push(e),this.clearGcTimeout(),this.#r.notify({type:"observerAdded",mutation:this,observer:e}))}removeObserver(e){this.#t=this.#t.filter(t=>t!==e),this.scheduleGc(),this.#r.notify({type:"observerRemoved",mutation:this,observer:e})}optionalRemove(){this.#t.length||(this.state.status==="pending"?this.scheduleGc():this.#r.remove(this))}continue(){return this.#i?.continue()??this.execute(this.state.variables)}async execute(e){const t=()=>{this.#o({type:"continue"})},i={client:this.#e,meta:this.options.meta,mutationKey:this.options.mutationKey};this.#i=M_({fn:()=>this.options.mutationFn?this.options.mutationFn(e,i):Promise.reject(new Error("No mutationFn found")),onFail:(l,d)=>{this.#o({type:"failed",failureCount:l,error:d})},onPause:()=>{this.#o({type:"pause"})},onContinue:t,retry:this.options.retry??0,retryDelay:this.options.retryDelay,networkMode:this.options.networkMode,canRun:()=>this.#r.canRun(this)});const o=this.state.status==="pending",s=!this.#i.canStart();try{if(o)t();else{this.#o({type:"pending",variables:e,isPaused:s}),this.#r.config.onMutate&&await this.#r.config.onMutate(e,this,i);const d=await this.options.onMutate?.(e,i);d!==this.state.context&&this.#o({type:"pending",context:d,variables:e,isPaused:s})}const l=await this.#i.start();return await this.#r.config.onSuccess?.(l,e,this.state.context,this,i),await this.options.onSuccess?.(l,e,this.state.context,i),await this.#r.config.onSettled?.(l,null,this.state.variables,this.state.context,this,i),await this.options.onSettled?.(l,null,e,this.state.context,i),this.#o({type:"success",data:l}),l}catch(l){try{await this.#r.config.onError?.(l,e,this.state.context,this,i)}catch(d){Promise.reject(d)}try{await this.options.onError?.(l,e,this.state.context,i)}catch(d){Promise.reject(d)}try{await this.#r.config.onSettled?.(void 0,l,this.state.variables,this.state.context,this,i)}catch(d){Promise.reject(d)}try{await this.options.onSettled?.(void 0,l,e,this.state.context,i)}catch(d){Promise.reject(d)}throw this.#o({type:"error",error:l}),l}finally{this.#r.runNext(this)}}#o(e){const t=i=>{switch(e.type){case"failed":return{...i,failureCount:e.failureCount,failureReason:e.error};case"pause":return{...i,isPaused:!0};case"continue":return{...i,isPaused:!1};case"pending":return{...i,context:e.context,data:void 0,failureCount:0,failureReason:null,error:null,isPaused:e.isPaused,status:"pending",variables:e.variables,submittedAt:Date.now()};case"success":return{...i,data:e.data,failureCount:0,failureReason:null,error:null,status:"success",isPaused:!1};case"error":return{...i,data:void 0,error:e.error,failureCount:i.failureCount+1,failureReason:e.error,isPaused:!1,status:"error"}}};this.state=t(this.state),Bt.batch(()=>{this.#t.forEach(i=>{i.onMutationUpdate(e)}),this.#r.notify({mutation:this,type:"updated",action:e})})}};function P_(){return{context:void 0,data:void 0,error:null,failureCount:0,failureReason:null,isPaused:!1,status:"idle",variables:void 0,submittedAt:0}}var uT=class extends Ja{constructor(e={}){super(),this.config=e,this.#e=new Set,this.#t=new Map,this.#r=0}#e;#t;#r;build(e,t,i){const o=new dT({client:e,mutationCache:this,mutationId:++this.#r,options:e.defaultMutationOptions(t),state:i});return this.add(o),o}add(e){this.#e.add(e);const t=Vd(e);if(typeof t=="string"){const i=this.#t.get(t);i?i.push(e):this.#t.set(t,[e])}this.notify({type:"added",mutation:e})}remove(e){if(this.#e.delete(e)){const t=Vd(e);if(typeof t=="string"){const i=this.#t.get(t);if(i)if(i.length>1){const o=i.indexOf(e);o!==-1&&i.splice(o,1)}else i[0]===e&&this.#t.delete(t)}}this.notify({type:"removed",mutation:e})}canRun(e){const t=Vd(e);if(typeof t=="string"){const o=this.#t.get(t)?.find(s=>s.state.status==="pending");return!o||o===e}else return!0}runNext(e){const t=Vd(e);return typeof t=="string"?this.#t.get(t)?.find(o=>o!==e&&o.state.isPaused)?.continue()??Promise.resolve():Promise.resolve()}clear(){Bt.batch(()=>{this.#e.forEach(e=>{this.notify({type:"removed",mutation:e})}),this.#e.clear(),this.#t.clear()})}getAll(){return Array.from(this.#e)}find(e){const t={exact:!0,...e};return this.getAll().find(i=>l1(t,i))}findAll(e={}){return this.getAll().filter(t=>l1(e,t))}notify(e){Bt.batch(()=>{this.listeners.forEach(t=>{t(e)})})}resumePausedMutations(){const e=this.getAll().filter(t=>t.state.isPaused);return Bt.batch(()=>Promise.all(e.map(t=>t.continue().catch(sr))))}};function Vd(e){return e.options.scope?.id}var fT=class extends Ja{#e;#t=void 0;#r;#i;constructor(t,i){super(),this.#e=t,this.setOptions(i),this.bindMethods(),this.#o()}bindMethods(){this.mutate=this.mutate.bind(this),this.reset=this.reset.bind(this)}setOptions(t){const i=this.options;this.options=this.#e.defaultMutationOptions(t),xu(this.options,i)||this.#e.getMutationCache().notify({type:"observerOptionsUpdated",mutation:this.#r,observer:this}),i?.mutationKey&&this.options.mutationKey&&zo(i.mutationKey)!==zo(this.options.mutationKey)?this.reset():this.#r?.state.status==="pending"&&this.#r.setOptions(this.options)}onUnsubscribe(){this.hasListeners()||this.#r?.removeObserver(this)}onMutationUpdate(t){this.#o(),this.#n(t)}getCurrentResult(){return this.#t}reset(){this.#r?.removeObserver(this),this.#r=void 0,this.#o(),this.#n()}mutate(t,i){return this.#i=i,this.#r?.removeObserver(this),this.#r=this.#e.getMutationCache().build(this.#e,this.options),this.#r.addObserver(this),this.#r.execute(t)}#o(){const t=this.#r?.state??P_();this.#t={...t,isPending:t.status==="pending",isSuccess:t.status==="success",isError:t.status==="error",isIdle:t.status==="idle",mutate:this.mutate,reset:this.reset}}#n(t){Bt.batch(()=>{if(this.#i&&this.hasListeners()){const i=this.#t.variables,o=this.#t.context,s={client:this.#e,meta:this.options.meta,mutationKey:this.options.mutationKey};if(t?.type==="success"){try{this.#i.onSuccess?.(t.data,i,o,s)}catch(l){Promise.reject(l)}try{this.#i.onSettled?.(t.data,null,i,o,s)}catch(l){Promise.reject(l)}}else if(t?.type==="error"){try{this.#i.onError?.(t.error,i,o,s)}catch(l){Promise.reject(l)}try{this.#i.onSettled?.(void 0,t.error,i,o,s)}catch(l){Promise.reject(l)}}}this.listeners.forEach(i=>{i(this.#t)})})}},hT=class extends Ja{constructor(e={}){super(),this.config=e,this.#e=new Map}#e;build(e,t,i){const o=t.queryKey,s=t.queryHash??Yv(o,t);let l=this.get(s);return l||(l=new aT({client:e,queryKey:o,queryHash:s,options:e.defaultQueryOptions(t),state:i,defaultOptions:e.getQueryDefaults(o)}),this.add(l)),l}add(e){this.#e.has(e.queryHash)||(this.#e.set(e.queryHash,e),this.notify({type:"added",query:e}))}remove(e){const t=this.#e.get(e.queryHash);t&&(e.destroy(),t===e&&this.#e.delete(e.queryHash),this.notify({type:"removed",query:e}))}clear(){Bt.batch(()=>{this.getAll().forEach(e=>{this.remove(e)})})}get(e){return this.#e.get(e)}getAll(){return[...this.#e.values()]}find(e){const t={exact:!0,...e};return this.getAll().find(i=>s1(t,i))}findAll(e={}){const t=this.getAll();return Object.keys(e).length>0?t.filter(i=>s1(e,i)):t}notify(e){Bt.batch(()=>{this.listeners.forEach(t=>{t(e)})})}onFocus(){Bt.batch(()=>{this.getAll().forEach(e=>{e.onFocus()})})}onOnline(){Bt.batch(()=>{this.getAll().forEach(e=>{e.onOnline()})})}},pT=class{#e;#t;#r;#i;#o;#n;#s;#a;constructor(e={}){this.#e=e.queryCache||new hT,this.#t=e.mutationCache||new uT,this.#r=e.defaultOptions||{},this.#i=new Map,this.#o=new Map,this.#n=0}mount(){this.#n++,this.#n===1&&(this.#s=Gv.subscribe(async e=>{e&&(await this.resumePausedMutations(),this.#e.onFocus())}),this.#a=wu.subscribe(async e=>{e&&(await this.resumePausedMutations(),this.#e.onOnline())}))}unmount(){this.#n--,this.#n===0&&(this.#s?.(),this.#s=void 0,this.#a?.(),this.#a=void 0)}isFetching(e){return this.#e.findAll({...e,fetchStatus:"fetching"}).length}isMutating(e){return this.#t.findAll({...e,status:"pending"}).length}getQueryData(e){const t=this.defaultQueryOptions({queryKey:e});return this.#e.get(t.queryHash)?.state.data}ensureQueryData(e){const t=this.defaultQueryOptions(e),i=this.#e.build(this,t),o=i.state.data;return o===void 0?this.fetchQuery(e):(e.revalidateIfStale&&i.isStaleByTime(Kn(t.staleTime,i))&&this.prefetchQuery(t),Promise.resolve(o))}getQueriesData(e){return this.#e.findAll(e).map(({queryKey:t,state:i})=>{const o=i.data;return[t,o]})}setQueryData(e,t,i){const o=this.defaultQueryOptions({queryKey:e}),l=this.#e.get(o.queryHash)?.state.data,d=G6(t,l);if(d!==void 0)return this.#e.build(this,o).setData(d,{...i,manual:!0})}setQueriesData(e,t,i){return Bt.batch(()=>this.#e.findAll(e).map(({queryKey:o})=>[o,this.setQueryData(o,t,i)]))}getQueryState(e){const t=this.defaultQueryOptions({queryKey:e});return this.#e.get(t.queryHash)?.state}removeQueries(e){const t=this.#e;Bt.batch(()=>{t.findAll(e).forEach(i=>{t.remove(i)})})}resetQueries(e,t){const i=this.#e;return Bt.batch(()=>(i.findAll(e).forEach(o=>{o.reset()}),this.refetchQueries({type:"active",...e},t)))}cancelQueries(e,t={}){const i={revert:!0,...t},o=Bt.batch(()=>this.#e.findAll(e).map(s=>s.cancel(i)));return Promise.all(o).then(sr).catch(sr)}invalidateQueries(e,t={}){return Bt.batch(()=>(this.#e.findAll(e).forEach(i=>{i.invalidate()}),e?.refetchType==="none"?Promise.resolve():this.refetchQueries({...e,type:e?.refetchType??e?.type??"active"},t)))}refetchQueries(e,t={}){const i={...t,cancelRefetch:t.cancelRefetch??!0},o=Bt.batch(()=>this.#e.findAll(e).filter(s=>!s.isDisabled()&&!s.isStatic()).map(s=>{let l=s.fetch(void 0,i);return i.throwOnError||(l=l.catch(sr)),s.state.fetchStatus==="paused"?Promise.resolve():l}));return Promise.all(o).then(sr)}fetchQuery(e){const t=this.defaultQueryOptions(e);t.retry===void 0&&(t.retry=!1);const i=this.#e.build(this,t);return i.isStaleByTime(Kn(t.staleTime,i))?i.fetch(t):Promise.resolve(i.state.data)}prefetchQuery(e){return this.fetchQuery(e).then(sr).catch(sr)}fetchInfiniteQuery(e){return e._type="infinite",this.fetchQuery(e)}prefetchInfiniteQuery(e){return this.fetchInfiniteQuery(e).then(sr).catch(sr)}ensureInfiniteQueryData(e){return e._type="infinite",this.ensureQueryData(e)}resumePausedMutations(){return wu.isOnline()?this.#t.resumePausedMutations():Promise.resolve()}getQueryCache(){return this.#e}getMutationCache(){return this.#t}getDefaultOptions(){return this.#r}setDefaultOptions(e){this.#r=e}setQueryDefaults(e,t){this.#i.set(zo(e),{queryKey:e,defaultOptions:t})}getQueryDefaults(e){const t=[...this.#i.values()],i={};return t.forEach(o=>{Rl(e,o.queryKey)&&Object.assign(i,o.defaultOptions)}),i}setMutationDefaults(e,t){this.#o.set(zo(e),{mutationKey:e,defaultOptions:t})}getMutationDefaults(e){const t=[...this.#o.values()],i={};return t.forEach(o=>{Rl(e,o.mutationKey)&&Object.assign(i,o.defaultOptions)}),i}defaultQueryOptions(e){if(e._defaulted)return e;const t={...this.#r.queries,...this.getQueryDefaults(e.queryKey),...e,_defaulted:!0};return t.queryHash||(t.queryHash=Yv(t.queryKey,t)),t.refetchOnReconnect===void 0&&(t.refetchOnReconnect=t.networkMode!=="always"),t.throwOnError===void 0&&(t.throwOnError=!!t.suspense),!t.networkMode&&t.persister&&(t.networkMode="offlineFirst"),t.queryFn===Qv&&(t.enabled=!1),t}defaultMutationOptions(e){return e?._defaulted?e:{...this.#r.mutations,...e?.mutationKey&&this.getMutationDefaults(e.mutationKey),...e,_defaulted:!0}}clear(){this.#e.clear(),this.#t.clear()}},L_=w.createContext(void 0),es=e=>{const t=w.useContext(L_);if(!t)throw new Error("No QueryClient set, use QueryClientProvider to set one");return t},mT=({client:e,children:t})=>(w.useEffect(()=>(e.mount(),()=>{e.unmount()}),[e]),v.jsx(L_.Provider,{value:e,children:t})),N_=w.createContext(!1),vT=()=>w.useContext(N_);N_.Provider;function gT(){let e=!1;return{clearReset:()=>{e=!1},reset:()=>{e=!0},isReset:()=>e}}var yT=w.createContext(gT()),bT=()=>w.useContext(yT),xT=(e,t,i)=>{const o=i?.state.error&&typeof e.throwOnError=="function"?Xv(e.throwOnError,[i.state.error,i]):e.throwOnError;(e.suspense||e.experimental_prefetchInRender||o)&&(t.isReset()||(e.retryOnMount=!1))},wT=e=>{w.useEffect(()=>{e.clearReset()},[e])},_T=({result:e,errorResetBoundary:t,throwOnError:i,query:o,suspense:s})=>e.isError&&!t.isReset()&&!e.isFetching&&o&&(s&&e.data===void 0||Xv(i,[e.error,o])),ST=e=>{if(e.suspense){const i=s=>s==="static"?s:Math.max(s??1e3,1e3),o=e.staleTime;e.staleTime=typeof o=="function"?(...s)=>i(o(...s)):i(o),typeof e.gcTime=="number"&&(e.gcTime=Math.max(e.gcTime,1e3))}},ET=(e,t)=>e.isLoading&&e.isFetching&&!t,TT=(e,t)=>e?.suspense&&t.isPending,v1=(e,t,i)=>t.fetchOptimistic(e).catch(()=>{i.clearReset()});function OT(e,t,i){const o=vT(),s=bT(),l=es(),d=l.defaultQueryOptions(e);l.getDefaultOptions().queries?._experimental_beforeQuery?.(d);const f=l.getQueryCache().get(d.queryHash),h=e.subscribed!==!1;d._optimisticResults=o?"isRestoring":h?"optimistic":void 0,ST(d),xT(d,s,f),wT(s);const m=!l.getQueryCache().get(d.queryHash),[g]=w.useState(()=>new t(l,d)),y=g.getOptimisticResult(d),b=!o&&h;if(w.useSyncExternalStore(w.useCallback(_=>{const E=b?g.subscribe(Bt.batchCalls(_)):sr;return g.updateResult(),E},[g,b]),()=>g.getCurrentResult(),()=>g.getCurrentResult()),w.useEffect(()=>{g.setOptions(d)},[d,g]),TT(d,y))throw v1(d,g,s);if(_T({result:y,errorResetBoundary:s,throwOnError:d.throwOnError,query:f,suspense:d.suspense}))throw y.error;return l.getDefaultOptions().queries?._experimental_afterQuery?.(d,y),d.experimental_prefetchInRender&&!jl.isServer()&&ET(y,o)&&(m?v1(d,g,s):f?.promise)?.catch(sr).finally(()=>{g.updateResult()}),d.notifyOnChangeProps?y:g.trackResult(y)}function Zv(e,t){return OT(e,sT)}function Jv(e,t){const i=es(),[o]=w.useState(()=>new fT(i,e));w.useEffect(()=>{o.setOptions(e)},[o,e]);const s=w.useSyncExternalStore(w.useCallback(d=>o.subscribe(Bt.batchCalls(d)),[o]),()=>o.getCurrentResult(),()=>o.getCurrentResult()),l=w.useCallback((d,f)=>{o.mutate(d,f).catch(sr)},[o]);if(s.error&&Xv(o.options.throwOnError,[s.error]))throw s.error;return{...s,mutate:l,mutateAsync:s.mutate}}var $_=e=>{throw TypeError(e)},B_=(e,t,i)=>t.has(e)||$_("Cannot "+i),qr=(e,t,i)=>(B_(e,t,"read from private field"),i?i.call(e):t.get(e)),ml=(e,t,i)=>t.has(e)?$_("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),wi=(e,t,i,o)=>(B_(e,t,"write to private field"),t.set(e,i),i),g1="popstate";function y1(e){return typeof e=="object"&&e!=null&&"pathname"in e&&"search"in e&&"hash"in e&&"state"in e&&"key"in e}function CT(e={}){function t(o,s){let l=s.state?.masked,{pathname:d,search:f,hash:h}=l||o.location;return kl("",{pathname:d,search:f,hash:h},s.state&&s.state.usr||null,s.state&&s.state.key||"default",l?{pathname:o.location.pathname,search:o.location.search,hash:o.location.hash}:void 0)}function i(o,s){return typeof s=="string"?s:Ai(s)}return RT(t,i,null,e)}function Ne(e,t){if(e===!1||e===null||typeof e>"u")throw new Error(t)}function At(e,t){if(!e){typeof console<"u"&&console.warn(t);try{throw new Error(t)}catch{}}}function AT(){return Math.random().toString(36).substring(2,10)}function b1(e,t){return{usr:e.state,key:e.key,idx:t,masked:e.mask?{pathname:e.pathname,search:e.search,hash:e.hash}:void 0}}function kl(e,t,i=null,o,s){return{pathname:typeof e=="string"?e:e.pathname,search:"",hash:"",...typeof t=="string"?ji(t):t,state:i,key:t&&t.key||o||AT(),mask:s}}function Ai({pathname:e="/",search:t="",hash:i=""}){return t&&t!=="?"&&(e+=t.charAt(0)==="?"?t:"?"+t),i&&i!=="#"&&(e+=i.charAt(0)==="#"?i:"#"+i),e}function ji(e){let t={};if(e){let i=e.indexOf("#");i>=0&&(t.hash=e.substring(i),e=e.substring(0,i));let o=e.indexOf("?");o>=0&&(t.search=e.substring(o),e=e.substring(0,o)),e&&(t.pathname=e)}return t}function RT(e,t,i,o={}){let{window:s=document.defaultView,v5Compat:l=!1}=o,d=s.history,f="POP",h=null,m=g();m==null&&(m=0,d.replaceState({...d.state,idx:m},""));function g(){return(d.state||{idx:null}).idx}function y(){f="POP";let O=g(),D=O==null?null:O-m;m=O,h&&h({action:f,location:T.location,delta:D})}function b(O,D){f="PUSH";let C=y1(O)?O:kl(T.location,O,D);m=g()+1;let z=b1(C,m),B=T.createHref(C.mask||C);try{d.pushState(z,"",B)}catch(H){if(H instanceof DOMException&&H.name==="DataCloneError")throw H;s.location.assign(B)}l&&h&&h({action:f,location:T.location,delta:1})}function _(O,D){f="REPLACE";let C=y1(O)?O:kl(T.location,O,D);m=g();let z=b1(C,m),B=T.createHref(C.mask||C);d.replaceState(z,"",B),l&&h&&h({action:f,location:T.location,delta:0})}function E(O){return U_(O)}let T={get action(){return f},get location(){return e(s,d)},listen(O){if(h)throw new Error("A history only accepts one active listener");return s.addEventListener(g1,y),h=O,()=>{s.removeEventListener(g1,y),h=null}},createHref(O){return t(s,O)},createURL:E,encodeLocation(O){let D=E(O);return{pathname:D.pathname,search:D.search,hash:D.hash}},push:b,replace:_,go(O){return d.go(O)}};return T}function U_(e,t=!1){let i="http://localhost";typeof window<"u"&&(i=window.location.origin!=="null"?window.location.origin:window.location.href),Ne(i,"No window.location.(origin|href) available to create URL");let o=typeof e=="string"?e:Ai(e);return o=o.replace(/ $/,"%20"),!t&&o.startsWith("//")&&(o=i+o),new URL(o,i)}var vl,x1=class{constructor(e){if(ml(this,vl,new Map),e)for(let[t,i]of e)this.set(t,i)}get(e){if(qr(this,vl).has(e))return qr(this,vl).get(e);if(e.defaultValue!==void 0)return e.defaultValue;throw new Error("No value found for context")}set(e,t){qr(this,vl).set(e,t)}};vl=new WeakMap;var jT=new Set(["lazy","caseSensitive","path","id","index","children"]);function kT(e){return jT.has(e)}var MT=new Set(["lazy","caseSensitive","path","id","index","middleware","children"]);function DT(e){return MT.has(e)}function zT(e){return e.index===!0}function Ml(e,t,i=[],o={},s=!1){return e.map((l,d)=>{let f=[...i,String(d)],h=typeof l.id=="string"?l.id:f.join("-");if(Ne(l.index!==!0||!l.children,"Cannot specify children on an index route"),Ne(s||!o[h],`Found a route id collision on id "${h}".  Route id's must be globally unique within Data Router usages`),zT(l)){let m={...l,id:h};return o[h]=w1(m,t(m)),m}else{let m={...l,id:h,children:void 0};return o[h]=w1(m,t(m)),l.children&&(m.children=Ml(l.children,t,f,o,s)),m}})}function w1(e,t){return Object.assign(e,{...t,...typeof t.lazy=="object"&&t.lazy!=null?{lazy:{...e.lazy,...t.lazy}}:{}})}function I_(e,t,i="/"){return ci(e,t,i,!1)}function ci(e,t,i,o,s){let l=typeof t=="string"?ji(t):t,d=Zr(l.pathname||"/",i);if(d==null)return null;let f=s??su(e),h=null,m=GT(d);for(let g=0;h==null&&g<f.length;++g)h=qT(f[g],m,o);return h}function PT(e,t){let{route:i,pathname:o,params:s}=e;return{id:i.id,pathname:o,params:s,data:t[i.id],loaderData:t[i.id],handle:i.handle}}function su(e){let t=V_(e);return LT(t),t}function V_(e,t=[],i=[],o="",s=!1){let l=(d,f,h=s,m)=>{let g={relativePath:m===void 0?d.path||"":m,caseSensitive:d.caseSensitive===!0,childrenIndex:f,route:d};if(g.relativePath.startsWith("/")){if(!g.relativePath.startsWith(o)&&h)return;Ne(g.relativePath.startsWith(o),`Absolute route path "${g.relativePath}" nested under path "${o}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`),g.relativePath=g.relativePath.slice(o.length)}let y=Qr([o,g.relativePath]),b=i.concat(g);d.children&&d.children.length>0&&(Ne(d.index!==!0,`Index routes must not have child routes. Please remove all child routes from route path "${y}".`),V_(d.children,t,b,y,h)),!(d.path==null&&!d.index)&&t.push({path:y,score:FT(y,d.index),routesMeta:b})};return e.forEach((d,f)=>{if(d.path===""||!d.path?.includes("?"))l(d,f);else for(let h of F_(d.path))l(d,f,!0,h)}),t}function F_(e){let t=e.split("/");if(t.length===0)return[];let[i,...o]=t,s=i.endsWith("?"),l=i.replace(/\?$/,"");if(o.length===0)return s?[l,""]:[l];let d=F_(o.join("/")),f=[];return f.push(...d.map(h=>h===""?l:[l,h].join("/"))),s&&f.push(...d),f.map(h=>e.startsWith("/")&&h===""?"/":h)}function LT(e){e.sort((t,i)=>t.score!==i.score?i.score-t.score:HT(t.routesMeta.map(o=>o.childrenIndex),i.routesMeta.map(o=>o.childrenIndex)))}var NT=/^:[\w-]+$/,$T=3,BT=2,UT=1,IT=10,VT=-2,_1=e=>e==="*";function FT(e,t){let i=e.split("/"),o=i.length;return i.some(_1)&&(o+=VT),t&&(o+=BT),i.filter(s=>!_1(s)).reduce((s,l)=>s+(NT.test(l)?$T:l===""?UT:IT),o)}function HT(e,t){return e.length===t.length&&e.slice(0,-1).every((o,s)=>o===t[s])?e[e.length-1]-t[t.length-1]:0}function qT(e,t,i=!1){let{routesMeta:o}=e,s={},l="/",d=[];for(let f=0;f<o.length;++f){let h=o[f],m=f===o.length-1,g=l==="/"?t:t.slice(l.length)||"/",y=_u({path:h.relativePath,caseSensitive:h.caseSensitive,end:m},g),b=h.route;if(!y&&m&&i&&!o[o.length-1].route.index&&(y=_u({path:h.relativePath,caseSensitive:h.caseSensitive,end:!1},g)),!y)return null;Object.assign(s,y.params),d.push({params:s,pathname:Qr([l,y.pathname]),pathnameBase:XT(Qr([l,y.pathnameBase])),route:b}),y.pathnameBase!=="/"&&(l=Qr([l,y.pathnameBase]))}return d}function _u(e,t){typeof e=="string"&&(e={path:e,caseSensitive:!1,end:!0});let[i,o]=KT(e.path,e.caseSensitive,e.end),s=t.match(i);if(!s)return null;let l=s[0],d=l.replace(/(.)\/+$/,"$1"),f=s.slice(1);return{params:o.reduce((m,{paramName:g,isOptional:y},b)=>{if(g==="*"){let E=f[b]||"";d=l.slice(0,l.length-E.length).replace(/(.)\/+$/,"$1")}const _=f[b];return y&&!_?m[g]=void 0:m[g]=(_||"").replace(/%2F/g,"/"),m},{}),pathname:l,pathnameBase:d,pattern:e}}function KT(e,t=!1,i=!0){At(e==="*"||!e.endsWith("*")||e.endsWith("/*"),`Route path "${e}" will be treated as if it were "${e.replace(/\*$/,"/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${e.replace(/\*$/,"/*")}".`);let o=[],s="^"+e.replace(/\/*\*?$/,"").replace(/^\/*/,"/").replace(/[\\.*+^${}|()[\]]/g,"\\$&").replace(/\/:([\w-]+)(\?)?/g,(d,f,h,m,g)=>{if(o.push({paramName:f,isOptional:h!=null}),h){let y=g.charAt(m+d.length);return y&&y!=="/"?"/([^\\/]*)":"(?:/([^\\/]*))?"}return"/([^\\/]+)"}).replace(/\/([\w-]+)\?(\/|$)/g,"(/$1)?$2");return e.endsWith("*")?(o.push({paramName:"*"}),s+=e==="*"||e==="/*"?"(.*)$":"(?:\\/(.+)|\\/*)$"):i?s+="\\/*$":e!==""&&e!=="/"&&(s+="(?:(?=\\/|$))"),[new RegExp(s,t?void 0:"i"),o]}function GT(e){try{return e.split("/").map(t=>decodeURIComponent(t).replace(/\//g,"%2F")).join("/")}catch(t){return At(!1,`The URL path "${e}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${t}).`),e}}function Zr(e,t){if(t==="/")return e;if(!e.toLowerCase().startsWith(t.toLowerCase()))return null;let i=t.endsWith("/")?t.length-1:t.length,o=e.charAt(i);return o&&o!=="/"?null:e.slice(i)||"/"}function YT({basename:e,pathname:t}){return t==="/"?e:Qr([e,t])}var H_=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,eg=e=>H_.test(e);function QT(e,t="/"){let{pathname:i,search:o="",hash:s=""}=typeof e=="string"?ji(e):e,l;return i?(i=tg(i),i.startsWith("/")?l=S1(i.substring(1),"/"):l=S1(i,t)):l=t,{pathname:l,search:WT(o),hash:ZT(s)}}function S1(e,t){let i=Su(t).split("/");return e.split("/").forEach(s=>{s===".."?i.length>1&&i.pop():s!=="."&&i.push(s)}),i.length>1?i.join("/"):"/"}function Cp(e,t,i,o){return`Cannot include a '${e}' character in a manually specified \`to.${t}\` field [${JSON.stringify(o)}].  Please separate it out to the \`to.${i}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`}function q_(e){return e.filter((t,i)=>i===0||t.route.path&&t.route.path.length>0)}function Gu(e){let t=q_(e);return t.map((i,o)=>o===t.length-1?i.pathname:i.pathnameBase)}function hc(e,t,i,o=!1){let s;typeof e=="string"?s=ji(e):(s={...e},Ne(!s.pathname||!s.pathname.includes("?"),Cp("?","pathname","search",s)),Ne(!s.pathname||!s.pathname.includes("#"),Cp("#","pathname","hash",s)),Ne(!s.search||!s.search.includes("#"),Cp("#","search","hash",s)));let l=e===""||s.pathname==="",d=l?"/":s.pathname,f;if(d==null)f=i;else{let y=t.length-1;if(!o&&d.startsWith("..")){let b=d.split("/");for(;b[0]==="..";)b.shift(),y-=1;s.pathname=b.join("/")}f=y>=0?t[y]:"/"}let h=QT(s,f),m=d&&d!=="/"&&d.endsWith("/"),g=(l||d===".")&&i.endsWith("/");return!h.pathname.endsWith("/")&&(m||g)&&(h.pathname+="/"),h}var tg=e=>e.replace(/\/\/+/g,"/"),Qr=e=>tg(e.join("/")),Su=e=>e.replace(/\/+$/,""),XT=e=>Su(e).replace(/^\/*/,"/"),WT=e=>!e||e==="?"?"":e.startsWith("?")?e:"?"+e,ZT=e=>!e||e==="#"?"":e.startsWith("#")?e:"#"+e,pc=class{constructor(e,t,i,o=!1){this.status=e,this.statusText=t||"",this.internal=o,i instanceof Error?(this.data=i.toString(),this.error=i):this.data=i}};function Dl(e){return e!=null&&typeof e.status=="number"&&typeof e.statusText=="string"&&typeof e.internal=="boolean"&&"data"in e}function mc(e){let t=e.map(i=>i.route.path).filter(Boolean);return Qr(t)||"/"}var K_=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u";function G_(e,t){let i=e;if(typeof i!="string"||!H_.test(i))return{absoluteURL:void 0,isExternal:!1,to:i};let o=i,s=!1;if(K_)try{let l=new URL(window.location.href),d=i.startsWith("//")?new URL(l.protocol+i):new URL(i),f=Zr(d.pathname,t);d.origin===l.origin&&f!=null?i=f+d.search+d.hash:s=!0}catch{At(!1,`<Link to="${i}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`)}return{absoluteURL:o,isExternal:s,to:i}}var Hn=Symbol("Uninstrumented");function JT(e,t){let i={lazy:[],"lazy.loader":[],"lazy.action":[],"lazy.middleware":[],middleware:[],loader:[],action:[]};e.forEach(s=>s({id:t.id,index:t.index,path:t.path,instrument(l){let d=Object.keys(i);for(let f of d)l[f]&&i[f].push(l[f])}}));let o={};if(typeof t.lazy=="function"&&i.lazy.length>0){let s=Ua(i.lazy,t.lazy,()=>{});s&&(o.lazy=s)}if(typeof t.lazy=="object"){let s=t.lazy;["middleware","loader","action"].forEach(l=>{let d=s[l],f=i[`lazy.${l}`];if(typeof d=="function"&&f.length>0){let h=Ua(f,d,()=>{});h&&(o.lazy=Object.assign(o.lazy||{},{[l]:h}))}})}return["loader","action"].forEach(s=>{let l=t[s];if(typeof l=="function"&&i[s].length>0){let d=l[Hn]??l,f=Ua(i[s],d,(...h)=>E1(h[0]));f&&(s==="loader"&&d.hydrate===!0&&(f.hydrate=!0),f[Hn]=d,o[s]=f)}}),t.middleware&&t.middleware.length>0&&i.middleware.length>0&&(o.middleware=t.middleware.map(s=>{let l=s[Hn]??s,d=Ua(i.middleware,l,(...f)=>E1(f[0]));return d?(d[Hn]=l,d):s})),o}function eO(e,t){let i={navigate:[],fetch:[]};if(t.forEach(o=>o({instrument(s){let l=Object.keys(s);for(let d of l)s[d]&&i[d].push(s[d])}})),i.navigate.length>0){let o=e.navigate[Hn]??e.navigate,s=Ua(i.navigate,o,(...l)=>{let[d,f]=l;return{to:typeof d=="number"||typeof d=="string"?d:d?Ai(d):".",...T1(e,f??{})}});s&&(s[Hn]=o,e.navigate=s)}if(i.fetch.length>0){let o=e.fetch[Hn]??e.fetch,s=Ua(i.fetch,o,(...l)=>{let[d,,f,h]=l;return{href:f??".",fetcherKey:d,...T1(e,h??{})}});s&&(s[Hn]=o,e.fetch=s)}return e}function Ua(e,t,i){return e.length===0?null:async(...o)=>{let s=await Y_(e,i(...o),()=>t(...o),e.length-1);if(s.type==="error")throw s.value;return s.value}}async function Y_(e,t,i,o){let s=e[o],l;if(s){let d,f=async()=>(d?console.error("You cannot call instrumented handlers more than once"):d=Y_(e,t,i,o-1),l=await d,Ne(l,"Expected a result"),l.type==="error"&&l.value instanceof Error?{status:"error",error:l.value}:{status:"success",error:void 0});try{await s(f,t)}catch(h){console.error("An instrumentation function threw an error:",h)}d||await f(),await d}else try{l={type:"success",value:await i()}}catch(d){l={type:"error",value:d}}return l||{type:"error",value:new Error("No result assigned in instrumentation chain.")}}function E1(e){let{request:t,context:i,params:o,pattern:s}=e;return{request:tO(t),params:{...o},pattern:s,context:rO(i)}}function T1(e,t){return{currentUrl:Ai(e.state.location),..."formMethod"in t?{formMethod:t.formMethod}:{},..."formEncType"in t?{formEncType:t.formEncType}:{},..."formData"in t?{formData:t.formData}:{},..."body"in t?{body:t.body}:{}}}function tO(e){return{method:e.method,url:e.url,headers:{get:(...t)=>e.headers.get(...t)}}}function rO(e){if(nO(e)){let t={...e};return Object.freeze(t),t}else return{get:t=>e.get(t)}}var iO=Object.getOwnPropertyNames(Object.prototype).sort().join("\0");function nO(e){if(e===null||typeof e!="object")return!1;const t=Object.getPrototypeOf(e);return t===Object.prototype||t===null||Object.getOwnPropertyNames(t).sort().join("\0")===iO}var Q_=["POST","PUT","PATCH","DELETE"],oO=new Set(Q_),aO=["GET",...Q_],sO=new Set(aO),X_=new Set([301,302,303,307,308]),lO=new Set([307,308]),Ap={state:"idle",location:void 0,matches:void 0,historyAction:void 0,formMethod:void 0,formAction:void 0,formEncType:void 0,formData:void 0,json:void 0,text:void 0},cO={state:"idle",data:void 0,formMethod:void 0,formAction:void 0,formEncType:void 0,formData:void 0,json:void 0,text:void 0},al={state:"unblocked",proceed:void 0,reset:void 0,location:void 0},dO=e=>({hasErrorBoundary:!!e.hasErrorBoundary}),W_="remix-router-transitions",Z_=Symbol("ResetLoaderData"),_o,za,Un,Pa,uO=class{constructor(e){ml(this,_o),ml(this,za),ml(this,Un),ml(this,Pa),wi(this,_o,e),wi(this,za,su(e))}get stableRoutes(){return qr(this,_o)}get activeRoutes(){return qr(this,Un)??qr(this,_o)}get branches(){return qr(this,Pa)??qr(this,za)}get hasHMRRoutes(){return qr(this,Un)!=null}setRoutes(e){wi(this,_o,e),wi(this,za,su(e))}setHmrRoutes(e){wi(this,Un,e),wi(this,Pa,su(e))}commitHmrRoutes(){qr(this,Un)&&(wi(this,_o,qr(this,Un)),wi(this,za,qr(this,Pa)),wi(this,Un,void 0),wi(this,Pa,void 0))}};_o=new WeakMap;za=new WeakMap;Un=new WeakMap;Pa=new WeakMap;function fO(e){const t=e.window?e.window:typeof window<"u"?window:void 0,i=typeof t<"u"&&typeof t.document<"u"&&typeof t.document.createElement<"u";Ne(e.routes.length>0,"You must provide a non-empty routes array to createRouter");let o=e.hydrationRouteProperties||[],s=e.mapRouteProperties||dO,l=s;if(e.instrumentations){let k=e.instrumentations;l=L=>({...s(L),...JT(k.map(V=>V.route).filter(Boolean),L)})}let d={},f=new uO(Ml(e.routes,l,void 0,d)),h=e.basename||"/";h.startsWith("/")||(h=`/${h}`);let m=e.dataStrategy||gO,g={...e.future},y=null,b=new Set,_=null,E=null,T=null,O=null,D=e.hydrationData!=null,C=ci(f.activeRoutes,e.history.location,h,!1,f.branches),z=!1,B=null,H,ne;if(C==null&&!e.patchRoutesOnNavigation){let k=Kr(404,{pathname:e.history.location.pathname}),{matches:L,route:V}=Fd(f.activeRoutes);H=!0,ne=!H,C=L,B={[V.id]:k}}else if(C&&!e.hydrationData&&pn(C,f.activeRoutes,e.history.location.pathname).active&&(C=null),C)if(C.some(k=>k.route.lazy))H=!1,ne=!H;else if(!C.some(k=>rg(k.route)))H=!0,ne=!H;else{let k=e.hydrationData?e.hydrationData.loaderData:null,L=e.hydrationData?e.hydrationData.errors:null,V=C;if(L){let te=C.findIndex(re=>L[re.route.id]!==void 0);V=V.slice(0,te+1)}ne=!1,H=!0,V.forEach(te=>{let re=J_(te.route,k,L);ne=ne||re.renderFallback,H=H&&!re.shouldLoad})}else{H=!1,ne=!H,C=[];let k=pn(null,f.activeRoutes,e.history.location.pathname);k.active&&k.matches&&(z=!0,C=k.matches)}let X,A={historyAction:e.history.action,location:e.history.location,matches:C,initialized:H,renderFallback:ne,navigation:Ap,restoreScrollPosition:e.hydrationData!=null?!1:null,preventScrollReset:!1,revalidation:"idle",loaderData:e.hydrationData&&e.hydrationData.loaderData||{},actionData:e.hydrationData&&e.hydrationData.actionData||null,errors:e.hydrationData&&e.hydrationData.errors||B,fetchers:new Map,blockers:new Map},le="POP",ee=null,J=!1,ce,_e=!1,ie=new Map,xe=null,N=!1,Q=!1,se=new Set,he=new Map,Te=0,M=-1,q=new Map,oe=new Set,de=new Map,Se=new Map,Ee=new Set,$e=new Map,jt,st=null;function eo(){if(y=e.history.listen(({action:k,location:L,delta:V})=>{if(jt){jt(),jt=void 0;return}At($e.size===0||V!=null,"You are trying to use a blocker on a POP navigation to a location that was not created by @remix-run/router. This will fail silently in production. This can happen if you are navigating outside the router via `window.history.pushState`/`window.location.hash` instead of using router navigation APIs.  This can also happen if you are using createHashRouter and the user manually changes the URL.");let te=ro({currentLocation:A.location,nextLocation:L,historyAction:k});if(te&&V!=null){let re=new Promise(ge=>{jt=ge});e.history.go(V*-1),Ni(te,{state:"blocked",location:L,proceed(){Ni(te,{state:"proceeding",proceed:void 0,reset:void 0,location:L}),re.then(()=>e.history.go(V))},reset(){let ge=new Map(A.blockers);ge.set(te,al),Lt({blockers:ge})}}),ee?.resolve(),ee=null;return}return zi(k,L)}),i){PO(t,ie);let k=()=>LO(t,ie);t.addEventListener("pagehide",k),xe=()=>t.removeEventListener("pagehide",k)}return A.initialized||zi("POP",A.location,{initialHydration:!0}),X}function Ko(){y&&y(),xe&&xe(),b.clear(),ce&&ce.abort(),A.fetchers.forEach((k,L)=>Li(A.fetchers,L)),A.blockers.forEach((k,L)=>to(L))}function ds(k){if(b.add(k),_){let{newErrors:L}=_;_=null,k(A,{deletedFetchers:[],newErrors:L,viewTransitionOpts:void 0,flushSync:!1})}return()=>b.delete(k)}function Lt(k,L={}){k.matches&&(k.matches=k.matches.map(re=>{let ge=d[re.route.id],fe=re.route;return fe.element!==ge.element||fe.errorElement!==ge.errorElement||fe.hydrateFallbackElement!==ge.hydrateFallbackElement?{...re,route:ge}:re})),A={...A,...k};let V=[],te=[];A.fetchers.forEach((re,ge)=>{re.state==="idle"&&(Ee.has(ge)?V.push(ge):te.push(ge))}),Ee.forEach(re=>{!A.fetchers.has(re)&&!he.has(re)&&V.push(re)}),b.size===0&&(_={newErrors:k.errors??null}),[...b].forEach(re=>re(A,{deletedFetchers:V,newErrors:k.errors??null,viewTransitionOpts:L.viewTransitionOpts,flushSync:L.flushSync===!0})),V.forEach(re=>Li(A.fetchers,re)),te.forEach(re=>A.fetchers.delete(re))}function fr(k,L,{flushSync:V}={}){let te=A.actionData!=null&&A.navigation.formMethod!=null&&Wt(A.navigation.formMethod)&&A.navigation.state==="loading"&&k.state?._isRedirect!==!0,re;L.actionData?Object.keys(L.actionData).length>0?re=L.actionData:re=null:te?re=A.actionData:re=null;let ge=L.loaderData?L1(A.loaderData,L.loaderData,L.matches||[],L.errors):A.loaderData,fe=A.blockers;fe.size>0&&(fe=new Map(fe),fe.forEach((Re,ze)=>fe.set(ze,al)));let me=N?!1:ms(k,L.matches||A.matches),pe=J===!0||A.navigation.formMethod!=null&&Wt(A.navigation.formMethod)&&k.state?._isRedirect!==!0;f.commitHmrRoutes(),N||le==="POP"||(le==="PUSH"?e.history.push(k,k.state):le==="REPLACE"&&e.history.replace(k,k.state));let Ae;if(le==="POP"){let Re=ie.get(A.location.pathname);Re&&Re.has(k.pathname)?Ae={currentLocation:A.location,nextLocation:k}:ie.has(k.pathname)&&(Ae={currentLocation:k,nextLocation:A.location})}else if(_e){let Re=ie.get(A.location.pathname);Re?Re.add(k.pathname):(Re=new Set([k.pathname]),ie.set(A.location.pathname,Re)),Ae={currentLocation:A.location,nextLocation:k}}Lt({...L,actionData:re,loaderData:ge,historyAction:le,location:k,initialized:!0,renderFallback:!1,navigation:Ap,revalidation:"idle",restoreScrollPosition:me,preventScrollReset:pe,blockers:fe},{viewTransitionOpts:Ae,flushSync:V===!0}),le="POP",J=!1,_e=!1,N=!1,Q=!1,ee?.resolve(),ee=null,st?.resolve(),st=null}async function Go(k,L){if(ee?.resolve(),ee=null,typeof k=="number"){ee||(ee=U1());let Qe=ee.promise;return e.history.go(k),Qe}let V=Nm(A.location,A.matches,h,k,L?.fromRouteId,L?.relative),{path:te,submission:re,error:ge}=O1(!1,V,L),fe;L?.mask&&(fe={pathname:"",search:"",hash:"",...typeof L.mask=="string"?ji(L.mask):{...A.location.mask,...L.mask}});let me=A.location,pe=kl(me,te,L&&L.state,void 0,fe);pe={...pe,...e.history.encodeLocation(pe)};let Ae=L&&L.replace!=null?L.replace:void 0,Re="PUSH";Ae===!0?Re="REPLACE":Ae===!1||re!=null&&Wt(re.formMethod)&&re.formAction===A.location.pathname+A.location.search&&(Re="REPLACE");let ze=L&&"preventScrollReset"in L?L.preventScrollReset===!0:void 0,ke=(L&&L.flushSync)===!0,Be=ro({currentLocation:me,nextLocation:pe,historyAction:Re});if(Be){Ni(Be,{state:"blocked",location:pe,proceed(){Ni(Be,{state:"proceeding",proceed:void 0,reset:void 0,location:pe}),Go(k,L)},reset(){let Qe=new Map(A.blockers);Qe.set(Be,al),Lt({blockers:Qe})}});return}await zi(Re,pe,{submission:re,pendingError:ge,preventScrollReset:ze,replace:L&&L.replace,enableViewTransition:L&&L.viewTransition,flushSync:ke,callSiteDefaultShouldRevalidate:L&&L.defaultShouldRevalidate})}function us(){st||(st=U1()),fn(),Lt({revalidation:"loading"});let k=st.promise;return A.navigation.state==="submitting"?k:A.navigation.state==="idle"?(zi(A.historyAction,A.location,{startUninterruptedRevalidation:!0}),k):(zi(le||A.historyAction,A.navigation.location,{overrideNavigation:A.navigation,enableViewTransition:_e===!0}),k)}async function zi(k,L,V){ce&&ce.abort(),ce=null,le=k,N=(V&&V.startUninterruptedRevalidation)===!0,mf(A.location,A.matches),J=(V&&V.preventScrollReset)===!0,_e=(V&&V.enableViewTransition)===!0;let te=f.activeRoutes,re=V?.initialHydration&&A.matches&&A.matches.length>0&&!z?A.matches:ci(te,L,h,!1,f.branches),ge=(V&&V.flushSync)===!0;if(re&&A.initialized&&!Q&&TO(A.location,L)&&!(V&&V.submission&&Wt(V.submission.formMethod))){fr(L,{matches:re},{flushSync:ge});return}let fe=pn(re,te,L.pathname);if(fe.active&&fe.matches&&(re=fe.matches),!re){let{error:Je,notFoundMatches:Ke,route:Tt}=ti(L.pathname);fr(L,{matches:Ke,loaderData:{},errors:{[Tt.id]:Je}},{flushSync:ge});return}let me=V&&V.overrideNavigation?{...V.overrideNavigation,matches:re,historyAction:k}:void 0;ce=new AbortController;let pe=La(e.history,L,ce.signal,V&&V.submission),Ae=e.getContext?await e.getContext():new x1,Re;if(V&&V.pendingError)Re=[Vn(re).route.id,{type:"error",error:V.pendingError}];else if(V&&V.submission&&Wt(V.submission.formMethod)){let Je=await Cc(pe,L,V.submission,re,k,Ae,fe.active,V&&V.initialHydration===!0,{replace:V.replace,flushSync:ge});if(Je.shortCircuited)return;if(Je.pendingActionResult){let[Ke,Tt]=Je.pendingActionResult;if(jr(Tt)&&Dl(Tt.error)&&Tt.error.status===404){ce=null,fr(L,{matches:Je.matches,loaderData:{},errors:{[Ke]:Tt.error}});return}}re=Je.matches||re,Re=Je.pendingActionResult,me=Rp(L,re,k,V.submission),ge=!1,fe.active=!1,pe=La(e.history,pe.url,pe.signal)}let{shortCircuited:ze,matches:ke,loaderData:Be,errors:Qe,workingFetchers:pt}=await fs(pe,L,re,k,Ae,fe.active,me,V&&V.submission,V&&V.fetcherSubmission,V&&V.replace,V&&V.initialHydration===!0,ge,Re,V&&V.callSiteDefaultShouldRevalidate);ze||(ce=null,fr(L,{matches:ke||re,...N1(Re),loaderData:Be,errors:Qe,...pt?{fetchers:pt}:{}}))}async function Cc(k,L,V,te,re,ge,fe,me,pe={}){fn();let Ae=DO(L,te,re,V);if(Lt({navigation:Ae},{flushSync:pe.flushSync===!0}),fe){let ke=await vi(te,L.pathname,k.signal);if(ke.type==="aborted")return{shortCircuited:!0};if(ke.type==="error"){if(ke.partialMatches.length===0){let{matches:Qe,route:pt}=Fd(f.activeRoutes);return{matches:Qe,pendingActionResult:[pt.id,{type:"error",error:ke.error}]}}let Be=Vn(ke.partialMatches).route.id;return{matches:ke.partialMatches,pendingActionResult:[Be,{type:"error",error:ke.error}]}}else if(ke.matches)te=ke.matches;else{let{notFoundMatches:Be,error:Qe,route:pt}=ti(L.pathname);return{matches:Be,pendingActionResult:[pt.id,{type:"error",error:Qe}]}}}let Re,ze=lu(te,L);if(!ze.route.action&&!ze.route.lazy)Re={type:"error",error:Kr(405,{method:k.method,pathname:L.pathname,routeId:ze.route.id})};else{let ke=Ka(l,d,k,L,te,ze,me?[]:o,ge),Be=await un(k,L,ke,ge,null);if(Re=Be[ze.route.id],!Re){for(let Qe of te)if(Be[Qe.route.id]){Re=Be[Qe.route.id];break}}if(k.signal.aborted)return{shortCircuited:!0}}if(To(Re)){let ke;return pe&&pe.replace!=null?ke=pe.replace:ke=D1(Re.response.headers.get("Location"),new URL(k.url),h,e.history)===A.location.pathname+A.location.search,await Pi(k,Re,!0,{submission:V,replace:ke}),{shortCircuited:!0}}if(jr(Re)){let ke=Vn(te,ze.route.id);return(pe&&pe.replace)!==!0&&(le="PUSH"),{matches:te,pendingActionResult:[ke.route.id,Re,ze.route.id]}}return{matches:te,pendingActionResult:[ze.route.id,Re]}}async function fs(k,L,V,te,re,ge,fe,me,pe,Ae,Re,ze,ke,Be){let Qe=fe||Rp(L,V,te,me),pt=me||pe||B1(Qe),Je=!N&&!Re;if(ge){if(Je){let lt=Yo(ke);Lt({navigation:Qe,...lt!==void 0?{actionData:lt}:{}},{flushSync:ze})}let Me=await vi(V,L.pathname,k.signal);if(Me.type==="aborted")return{shortCircuited:!0};if(Me.type==="error"){if(Me.partialMatches.length===0){let{matches:wr,route:ni}=Fd(f.activeRoutes);return{matches:wr,loaderData:{},errors:{[ni.id]:Me.error}}}let lt=Vn(Me.partialMatches).route.id;return{matches:Me.partialMatches,loaderData:{},errors:{[lt]:Me.error}}}else if(Me.matches)V=Me.matches;else{let{error:lt,notFoundMatches:wr,route:ni}=ti(L.pathname);return{matches:wr,loaderData:{},errors:{[ni.id]:lt}}}}let Ke=f.activeRoutes,{dsMatches:Tt,revalidatingFetchers:Ge}=C1(k,re,l,d,e.history,A,V,pt,L,Re?[]:o,Re===!0,Q,se,Ee,de,oe,Ke,h,e.patchRoutesOnNavigation!=null,f.branches,ke,Be);if(M=++Te,!e.dataStrategy&&!Tt.some(Me=>Me.shouldLoad)&&!Tt.some(Me=>Me.route.middleware&&Me.route.middleware.length>0)&&Ge.length===0){let Me=new Map(A.fetchers),lt=Ac(Me);return fr(L,{matches:V,loaderData:{},errors:ke&&jr(ke[1])?{[ke[0]]:ke[1].error}:null,...N1(ke),...lt?{fetchers:Me}:{}},{flushSync:ze}),{shortCircuited:!0}}if(Je){let Me={};if(!ge){Me.navigation=Qe;let lt=Yo(ke);lt!==void 0&&(Me.actionData=lt)}Ge.length>0&&(Me.fetchers=hs(Ge)),Lt(Me,{flushSync:ze})}Ge.forEach(Me=>{Ut(Me.key),Me.controller&&he.set(Me.key,Me.controller)});let mn=()=>Ge.forEach(Me=>Ut(Me.key));ce&&ce.signal.addEventListener("abort",mn);let{loaderResults:ri,fetcherResults:hr}=await ps(Tt,Ge,k,L,re);if(k.signal.aborted)return{shortCircuited:!0};ce&&ce.signal.removeEventListener("abort",mn),Ge.forEach(Me=>he.delete(Me.key));let ir=Hd(ri);if(ir)return await Pi(k,ir.result,!0,{replace:Ae}),{shortCircuited:!0};if(ir=Hd(hr),ir)return oe.add(ir.key),await Pi(k,ir.result,!0,{replace:Ae}),{shortCircuited:!0};let zr=new Map(A.fetchers),{loaderData:Xo,errors:ii}=P1(A,V,ri,ke,Ge,hr,zr);Re&&A.errors&&(ii={...A.errors,...ii});let Wo=Ac(zr),$i=Rc(M,zr),Bi=Wo||$i||Ge.length>0;return{matches:V,loaderData:Xo,errors:ii,...Bi?{workingFetchers:zr}:{}}}function Yo(k){if(k&&!jr(k[1]))return{[k[0]]:k[1].data};if(A.actionData)return Object.keys(A.actionData).length===0?null:A.actionData}function hs(k){let L=new Map(A.fetchers);return k.forEach(V=>{let te=L.get(V.key),re=sl(void 0,te?te.data:void 0);L.set(V.key,re)}),L}async function df(k,L,V,te){Ut(k);let re=(te&&te.flushSync)===!0,ge=f.activeRoutes,fe=Nm(A.location,A.matches,h,V,L,te?.relative),me=ci(ge,fe,h,!1,f.branches),pe=pn(me,ge,fe);if(pe.active&&pe.matches&&(me=pe.matches),!me){Dr(k,L,Kr(404,{pathname:fe}),{flushSync:re});return}let{path:Ae,submission:Re,error:ze}=O1(!0,fe,te);if(ze){Dr(k,L,ze,{flushSync:re});return}let ke=e.getContext?await e.getContext():new x1,Be=(te&&te.preventScrollReset)===!0;if(Re&&Wt(Re.formMethod)){await uf(k,L,Ae,me,ke,pe.active,re,Be,Re,te&&te.defaultShouldRevalidate);return}de.set(k,{routeId:L,path:Ae}),await tr(k,L,Ae,me,ke,pe.active,re,Be,Re)}async function uf(k,L,V,te,re,ge,fe,me,pe,Ae){fn(),de.delete(k);let Re=A.fetchers.get(k);ei(k,zO(pe,Re),{flushSync:fe});let ze=new AbortController,ke=La(e.history,V,ze.signal,pe);if(ge){let et=await vi(te,new URL(ke.url).pathname,ke.signal,k);if(et.type==="aborted")return;if(et.type==="error"){Dr(k,L,et.error,{flushSync:fe});return}else if(et.matches)te=et.matches;else{Dr(k,L,Kr(404,{pathname:V}),{flushSync:fe});return}}let Be=lu(te,V);if(!Be.route.action&&!Be.route.lazy){let et=Kr(405,{method:pe.formMethod,pathname:V,routeId:L});Dr(k,L,et,{flushSync:fe});return}he.set(k,ze);let Qe=Te,pt=Ka(l,d,ke,V,te,Be,o,re),Je=await un(ke,V,pt,re,k),Ke=Je[Be.route.id];if(!Ke){for(let et of pt)if(Je[et.route.id]){Ke=Je[et.route.id];break}}if(ke.signal.aborted){he.get(k)===ze&&he.delete(k);return}if(Ee.has(k)){if(To(Ke)||jr(Ke)){ei(k,_i(void 0));return}}else{if(To(Ke))if(he.delete(k),M>Qe){ei(k,_i(void 0));return}else return oe.add(k),ei(k,sl(pe)),Pi(ke,Ke,!1,{fetcherSubmission:pe,preventScrollReset:me});if(jr(Ke)){Dr(k,L,Ke.error);return}}let Tt=A.navigation.location||A.location,Ge=La(e.history,Tt,ze.signal),mn=f.activeRoutes,ri=A.navigation.state!=="idle"?ci(mn,A.navigation.location,h,!1,f.branches):A.matches;Ne(ri,"Didn't find any matches after fetcher action");let hr=++Te;q.set(k,hr);let{dsMatches:ir,revalidatingFetchers:zr}=C1(Ge,re,l,d,e.history,A,ri,pe,Tt,o,!1,Q,se,Ee,de,oe,mn,h,e.patchRoutesOnNavigation!=null,f.branches,[Be.route.id,Ke],Ae),Xo=sl(pe,Ke.data),ii=new Map(A.fetchers);ii.set(k,Xo),zr.filter(et=>et.key!==k).forEach(et=>{let Ui=et.key,nr=ii.get(Ui),vs=sl(void 0,nr?nr.data:void 0);ii.set(Ui,vs),Ut(Ui),et.controller&&he.set(Ui,et.controller)}),Lt({fetchers:ii});let Wo=()=>zr.forEach(et=>Ut(et.key));ze.signal.addEventListener("abort",Wo);let{loaderResults:$i,fetcherResults:Bi}=await ps(ir,zr,Ge,Tt,re);if(ze.signal.aborted)return;ze.signal.removeEventListener("abort",Wo),q.delete(k),he.delete(k),zr.forEach(et=>he.delete(et.key));let Me=A.fetchers.has(k),lt=et=>{if(!Me)return et;let Ui=new Map(et.fetchers);return Ui.set(k,_i(Ke.data)),{...et,fetchers:Ui}},wr=Hd($i);if(wr)return A=lt(A),Pi(Ge,wr.result,!1,{preventScrollReset:me});if(wr=Hd(Bi),wr)return oe.add(wr.key),A=lt(A),Pi(Ge,wr.result,!1,{preventScrollReset:me});let ni=new Map(A.fetchers);Me&&ni.set(k,_i(Ke.data));let{loaderData:Zo,errors:Jo}=P1(A,ri,$i,void 0,zr,Bi,ni);Rc(hr,ni),A.navigation.state==="loading"&&hr>M?(Ne(le,"Expected pending action"),ce&&ce.abort(),fr(A.navigation.location,{matches:ri,loaderData:Zo,errors:Jo,fetchers:ni})):(Lt({errors:Jo,loaderData:L1(A.loaderData,Zo,ri,Jo),fetchers:ni}),Q=!1)}async function tr(k,L,V,te,re,ge,fe,me,pe){let Ae=A.fetchers.get(k);ei(k,sl(pe,Ae?Ae.data:void 0),{flushSync:fe});let Re=new AbortController,ze=La(e.history,V,Re.signal);if(ge){let Ke=await vi(te,new URL(ze.url).pathname,ze.signal,k);if(Ke.type==="aborted")return;if(Ke.type==="error"){Dr(k,L,Ke.error,{flushSync:fe});return}else if(Ke.matches)te=Ke.matches;else{Dr(k,L,Kr(404,{pathname:V}),{flushSync:fe});return}}let ke=lu(te,V);he.set(k,Re);let Be=Te,Qe=Ka(l,d,ze,V,te,ke,o,re),pt=await un(ze,V,Qe,re,k),Je=pt[ke.route.id];if(!Je){for(let Ke of te)if(pt[Ke.route.id]){Je=pt[Ke.route.id];break}}if(he.get(k)===Re&&he.delete(k),!ze.signal.aborted){if(Ee.has(k)){ei(k,_i(void 0));return}if(To(Je))if(M>Be){ei(k,_i(void 0));return}else{oe.add(k),await Pi(ze,Je,!1,{preventScrollReset:me});return}if(jr(Je)){Dr(k,L,Je.error);return}ei(k,_i(Je.data))}}async function Pi(k,L,V,{submission:te,fetcherSubmission:re,preventScrollReset:ge,replace:fe}={}){V||(ee?.resolve(),ee=null),L.response.headers.has("X-Remix-Revalidate")&&(Q=!0);let me=L.response.headers.get("Location");Ne(me,"Expected a Location header on the redirect Response"),me=D1(me,new URL(k.url),h,e.history);let pe=kl(A.location,me,{_isRedirect:!0});if(i){let Qe=!1;if(L.response.headers.has("X-Remix-Reload-Document"))Qe=!0;else if(eg(me)){const pt=U_(me,!0);Qe=pt.origin!==t.location.origin||Zr(pt.pathname,h)==null}if(Qe){fe?t.location.replace(me):t.location.assign(me);return}}ce=null;let Ae=fe===!0||L.response.headers.has("X-Remix-Replace")?"REPLACE":"PUSH",{formMethod:Re,formAction:ze,formEncType:ke}=A.navigation;!te&&!re&&Re&&ze&&ke&&(te=B1(A.navigation));let Be=te||re;if(lO.has(L.response.status)&&Be&&Wt(Be.formMethod))await zi(Ae,pe,{submission:{...Be,formAction:me},preventScrollReset:ge||J,enableViewTransition:V?_e:void 0});else{let Qe=Rp(pe,[],Ae,te);await zi(Ae,pe,{overrideNavigation:Qe,fetcherSubmission:re,preventScrollReset:ge||J,enableViewTransition:V?_e:void 0})}}async function un(k,L,V,te,re){let ge,fe={};try{ge=await bO(m,k,L,V,re,te,!1)}catch(me){return V.filter(pe=>pe.shouldLoad).forEach(pe=>{fe[pe.route.id]={type:"error",error:me}}),fe}if(k.signal.aborted)return fe;if(!Wt(k.method))for(let me of V){if(ge[me.route.id]?.type==="error")break;!ge.hasOwnProperty(me.route.id)&&!A.loaderData.hasOwnProperty(me.route.id)&&(!A.errors||!A.errors.hasOwnProperty(me.route.id))&&me.shouldCallHandler()&&(ge[me.route.id]={type:"error",result:new Error(`No result returned from dataStrategy for route ${me.route.id}`)})}for(let[me,pe]of Object.entries(ge))if(RO(pe)){let Ae=pe.result;fe[me]={type:"redirect",response:SO(Ae,k,me,V,h)}}else fe[me]=await _O(pe);return fe}async function ps(k,L,V,te,re){let ge=un(V,te,k,re,null),fe=Promise.all(L.map(async Ae=>{if(Ae.matches&&Ae.match&&Ae.request&&Ae.controller){let ze=(await un(Ae.request,Ae.path,Ae.matches,re,Ae.key))[Ae.match.route.id];return{[Ae.key]:ze}}else return Promise.resolve({[Ae.key]:{type:"error",error:Kr(404,{pathname:Ae.path})}})})),me=await ge,pe=(await fe).reduce((Ae,Re)=>Object.assign(Ae,Re),{});return{loaderResults:me,fetcherResults:pe}}function fn(){Q=!0,de.forEach((k,L)=>{he.has(L)&&se.add(L),Ut(L)})}function ei(k,L,V={}){let te=new Map(A.fetchers);te.set(k,L),Lt({fetchers:te},{flushSync:(V&&V.flushSync)===!0})}function Dr(k,L,V,te={}){let re=Vn(A.matches,L),ge=new Map(A.fetchers);Li(ge,k),Lt({errors:{[re.route.id]:V},fetchers:ge},{flushSync:(te&&te.flushSync)===!0})}function ff(k){return Se.set(k,(Se.get(k)||0)+1),Ee.has(k)&&Ee.delete(k),A.fetchers.get(k)||cO}function hf(k,L){Ut(k,L?.reason),ei(k,_i(null))}function Li(k,L){let V=A.fetchers.get(L);he.has(L)&&!(V&&V.state==="loading"&&q.has(L))&&Ut(L),de.delete(L),q.delete(L),oe.delete(L),Ee.delete(L),se.delete(L),k.delete(L)}function rr(k){let L=(Se.get(k)||0)-1;L<=0?(Se.delete(k),Ee.add(k)):Se.set(k,L),Lt({fetchers:new Map(A.fetchers)})}function Ut(k,L){let V=he.get(k);V&&(V.abort(L),he.delete(k))}function Qt(k,L){for(let V of k){let te=L.get(V);Ne(te,`Expected fetcher: ${V}`);let re=_i(te.data);L.set(V,re)}}function Ac(k){let L=[],V=!1;for(let te of oe){let re=k.get(te);Ne(re,`Expected fetcher: ${te}`),re.state==="loading"&&(oe.delete(te),L.push(te),V=!0)}return Qt(L,k),V}function Rc(k,L){let V=[];for(let[te,re]of q)if(re<k){let ge=L.get(te);Ne(ge,`Expected fetcher: ${te}`),ge.state==="loading"&&(Ut(te),q.delete(te),V.push(te))}return Qt(V,L),V.length>0}function pf(k,L){let V=A.blockers.get(k)||al;return $e.get(k)!==L&&$e.set(k,L),V}function to(k){A.blockers.delete(k),$e.delete(k)}function Ni(k,L){let V=A.blockers.get(k)||al;Ne(V.state==="unblocked"&&L.state==="blocked"||V.state==="blocked"&&L.state==="blocked"||V.state==="blocked"&&L.state==="proceeding"||V.state==="blocked"&&L.state==="unblocked"||V.state==="proceeding"&&L.state==="unblocked",`Invalid blocker state transition: ${V.state} -> ${L.state}`);let te=new Map(A.blockers);te.set(k,L),Lt({blockers:te})}function ro({currentLocation:k,nextLocation:L,historyAction:V}){if($e.size===0)return;$e.size>1&&At(!1,"A router only supports one blocker at a time");let te=Array.from($e.entries()),[re,ge]=te[te.length-1],fe=A.blockers.get(re);if(!(fe&&fe.state==="proceeding")&&ge({currentLocation:k,nextLocation:L,historyAction:V}))return re}function ti(k){let L=Kr(404,{pathname:k}),V=f.activeRoutes,{matches:te,route:re}=Fd(V);return{notFoundMatches:te,route:re,error:L}}function Qo(k,L,V){if(E=k,O=L,T=V||null,!D&&A.navigation===Ap){D=!0;let te=ms(A.location,A.matches);te!=null&&Lt({restoreScrollPosition:te})}return()=>{E=null,O=null,T=null}}function hn(k,L){return T&&T(k,L.map(te=>PT(te,A.loaderData)))||k.key}function mf(k,L){if(E&&O){let V=hn(k,L);E[V]=O()}}function ms(k,L){if(E){let V=hn(k,L),te=E[V];if(typeof te=="number")return te}return null}function pn(k,L,V){if(e.patchRoutesOnNavigation){let te=f.branches;if(k){if(Object.keys(k[0].params).length>0)return{active:!0,matches:ci(L,V,h,!0,te)}}else return{active:!0,matches:ci(L,V,h,!0,te)||[]}}return{active:!1,matches:null}}async function vi(k,L,V,te){if(!e.patchRoutesOnNavigation)return{type:"success",matches:k};let re=k;for(;;){let ge=d;try{await e.patchRoutesOnNavigation({signal:V,path:L,matches:re,fetcherKey:te,patch:(Ae,Re)=>{V.aborted||A1(Ae,Re,f,ge,l,!1)}})}catch(Ae){return{type:"error",error:Ae,partialMatches:re}}if(V.aborted)return{type:"aborted"};let fe=f.branches,me=ci(f.activeRoutes,L,h,!1,fe),pe=null;if(me){if(Object.keys(me[0].params).length===0)return{type:"success",matches:me};if(pe=ci(f.activeRoutes,L,h,!0,fe),!(pe&&re.length<pe.length&&jc(re,pe.slice(0,re.length))))return{type:"success",matches:me}}if(pe||(pe=ci(f.activeRoutes,L,h,!0,fe)),!pe||jc(re,pe))return{type:"success",matches:null};re=pe}}function jc(k,L){return k.length===L.length&&k.every((V,te)=>V.route.id===L[te].route.id)}function kc(k){d={},f.setHmrRoutes(Ml(k,l,void 0,d))}function Mc(k,L,V=!1){A1(k,L,f,d,l,V),f.hasHMRRoutes||Lt({})}return X={get basename(){return h},get future(){return g},get state(){return A},get routes(){return f.stableRoutes},get branches(){return f.branches},get manifest(){return d},get window(){return t},initialize:eo,subscribe:ds,enableScrollRestoration:Qo,navigate:Go,fetch:df,revalidate:us,createHref:k=>e.history.createHref(k),encodeLocation:k=>e.history.encodeLocation(k),getFetcher:ff,resetFetcher:hf,deleteFetcher:rr,dispose:Ko,getBlocker:pf,deleteBlocker:to,patchRoutes:Mc,_internalFetchControllers:he,_internalSetRoutes:kc,_internalSetStateDoNotUseOrYouWillBreakYourApp(k){Lt(k)}},e.instrumentations&&(X=eO(X,e.instrumentations.map(k=>k.router).filter(Boolean))),X}function hO(e){return e!=null&&("formData"in e&&e.formData!=null||"body"in e&&e.body!==void 0)}function Nm(e,t,i,o,s,l){let d,f;if(s){d=[];for(let m of t)if(d.push(m),m.route.id===s){f=m;break}}else d=t,f=t[t.length-1];let h=hc(o||".",Gu(d),Zr(e.pathname,i)||e.pathname,l==="path");if(o==null&&(h.search=e.search,h.hash=e.hash),(o==null||o===""||o===".")&&f){let m=ng(h.search);if(f.route.index&&!m)h.search=h.search?h.search.replace(/^\?/,"?index&"):"?index";else if(!f.route.index&&m){let g=new URLSearchParams(h.search),y=g.getAll("index");g.delete("index"),y.filter(_=>_).forEach(_=>g.append("index",_));let b=g.toString();h.search=b?`?${b}`:""}}return i!=="/"&&(h.pathname=YT({basename:i,pathname:h.pathname})),Ai(h)}function O1(e,t,i){if(!i||!hO(i))return{path:t};if(i.formMethod&&!MO(i.formMethod))return{path:t,error:Kr(405,{method:i.formMethod})};let o=()=>({path:t,error:Kr(400,{type:"invalid-body"})}),l=(i.formMethod||"get").toUpperCase(),d=a4(t);if(i.body!==void 0){if(i.formEncType==="text/plain"){if(!Wt(l))return o();let y=typeof i.body=="string"?i.body:i.body instanceof FormData||i.body instanceof URLSearchParams?Array.from(i.body.entries()).reduce((b,[_,E])=>`${b}${_}=${E}
+`,""):String(i.body);return{path:t,submission:{formMethod:l,formAction:d,formEncType:i.formEncType,formData:void 0,json:void 0,text:y}}}else if(i.formEncType==="application/json"){if(!Wt(l))return o();try{let y=typeof i.body=="string"?JSON.parse(i.body):i.body;return{path:t,submission:{formMethod:l,formAction:d,formEncType:i.formEncType,formData:void 0,json:y,text:void 0}}}catch{return o()}}}Ne(typeof FormData=="function","FormData is not available in this environment");let f,h;if(i.formData)f=Bm(i.formData),h=i.formData;else if(i.body instanceof FormData)f=Bm(i.body),h=i.body;else if(i.body instanceof URLSearchParams)f=i.body,h=z1(f);else if(i.body==null)f=new URLSearchParams,h=new FormData;else try{f=new URLSearchParams(i.body),h=z1(f)}catch{return o()}let m={formMethod:l,formAction:d,formEncType:i&&i.formEncType||"application/x-www-form-urlencoded",formData:h,json:void 0,text:void 0};if(Wt(m.formMethod))return{path:t,submission:m};let g=ji(t);return e&&g.search&&ng(g.search)&&f.append("index",""),g.search=`?${f}`,{path:Ai(g),submission:m}}function C1(e,t,i,o,s,l,d,f,h,m,g,y,b,_,E,T,O,D,C,z,B,H){let ne=B?jr(B[1])?B[1].error:B[1].data:void 0,X=s.createURL(l.location),A=s.createURL(h),le;if(g&&l.errors){let N=Object.keys(l.errors)[0];le=d.findIndex(Q=>Q.route.id===N)}else if(B&&jr(B[1])){let N=B[0];le=d.findIndex(Q=>Q.route.id===N)-1}let ee=B?B[1].statusCode:void 0,J=ee&&ee>=400,ce={currentUrl:X,currentParams:l.matches[0]?.params||{},nextUrl:A,nextParams:d[0].params,...f,actionResult:ne,actionStatus:ee},_e=mc(d),ie=d.map((N,Q)=>{let{route:se}=N,he=null;if(le!=null&&Q>le)he=!1;else if(se.lazy)he=!0;else if(!rg(se))he=!1;else if(g){let{shouldLoad:oe}=J_(se,l.loaderData,l.errors);he=oe}else pO(l.loaderData,l.matches[Q],N)&&(he=!0);if(he!==null)return $m(i,o,e,h,_e,N,m,t,he);let Te=!1;typeof H=="boolean"?Te=H:J?Te=!1:(y||X.pathname+X.search===A.pathname+A.search||X.search!==A.search||mO(l.matches[Q],N))&&(Te=!0);let M={...ce,defaultShouldRevalidate:Te},q=xl(N,M);return $m(i,o,e,h,_e,N,m,t,q,M,H)}),xe=[];return E.forEach((N,Q)=>{if(g||!d.some(Se=>Se.route.id===N.routeId)||_.has(Q))return;let se=l.fetchers.get(Q),he=se&&se.state!=="idle"&&se.data===void 0,Te=ci(O,N.path,D??"/",!1,z);if(!Te){if(C&&he)return;xe.push({key:Q,routeId:N.routeId,path:N.path,matches:null,match:null,request:null,controller:null});return}if(T.has(Q))return;let M=lu(Te,N.path),q=new AbortController,oe=La(s,N.path,q.signal),de=null;if(b.has(Q))b.delete(Q),de=Ka(i,o,oe,N.path,Te,M,m,t);else if(he)y&&(de=Ka(i,o,oe,N.path,Te,M,m,t));else{let Se;typeof H=="boolean"?Se=H:J?Se=!1:Se=y;let Ee={...ce,defaultShouldRevalidate:Se};xl(M,Ee)&&(de=Ka(i,o,oe,N.path,Te,M,m,t,Ee))}de&&xe.push({key:Q,routeId:N.routeId,path:N.path,matches:de,match:M,request:oe,controller:q})}),{dsMatches:ie,revalidatingFetchers:xe}}function rg(e){return e.loader!=null||e.middleware!=null&&e.middleware.length>0}function J_(e,t,i){if(e.lazy)return{shouldLoad:!0,renderFallback:!0};if(!rg(e))return{shouldLoad:!1,renderFallback:!1};let o=t!=null&&e.id in t,s=i!=null&&i[e.id]!==void 0;if(!o&&s)return{shouldLoad:!1,renderFallback:!1};if(typeof e.loader=="function"&&e.loader.hydrate===!0)return{shouldLoad:!0,renderFallback:!o};let l=!o&&!s;return{shouldLoad:l,renderFallback:l}}function pO(e,t,i){let o=!t||i.route.id!==t.route.id,s=!e.hasOwnProperty(i.route.id);return o||s}function mO(e,t){let i=e.route.path;return e.pathname!==t.pathname||i!=null&&i.endsWith("*")&&e.params["*"]!==t.params["*"]}function xl(e,t){if(e.route.shouldRevalidate){let i=e.route.shouldRevalidate(t);if(typeof i=="boolean")return i}return t.defaultShouldRevalidate}function A1(e,t,i,o,s,l){let d;if(e){let m=o[e];Ne(m,`No route found to patch children into: routeId = ${e}`),m.children||(m.children=[]),d=m.children}else d=i.activeRoutes;let f=[],h=[];if(t.forEach(m=>{let g=d.find(y=>e4(m,y));g?h.push({existingRoute:g,newRoute:m}):f.push(m)}),f.length>0){let m=Ml(f,s,[e||"_","patch",String(d?.length||"0")],o);d.push(...m)}if(l&&h.length>0)for(let m=0;m<h.length;m++){let{existingRoute:g,newRoute:y}=h[m],b=g,[_]=Ml([y],s,[],{},!0);Object.assign(b,{element:_.element?_.element:b.element,errorElement:_.errorElement?_.errorElement:b.errorElement,hydrateFallbackElement:_.hydrateFallbackElement?_.hydrateFallbackElement:b.hydrateFallbackElement})}i.hasHMRRoutes||i.setRoutes([...i.activeRoutes])}function e4(e,t){return"id"in e&&"id"in t&&e.id===t.id?!0:e.index===t.index&&e.path===t.path&&e.caseSensitive===t.caseSensitive?(!e.children||e.children.length===0)&&(!t.children||t.children.length===0)?!0:e.children?.every((i,o)=>t.children?.some(s=>e4(i,s)))??!1:!1}var R1=new WeakMap,t4=({key:e,route:t,manifest:i,mapRouteProperties:o})=>{let s=i[t.id];if(Ne(s,"No route found in manifest"),!s.lazy||typeof s.lazy!="object")return;let l=s.lazy[e];if(!l)return;let d=R1.get(s);d||(d={},R1.set(s,d));let f=d[e];if(f)return f;let h=(async()=>{let m=kT(e),y=s[e]!==void 0&&e!=="hasErrorBoundary";if(m)At(!m,"Route property "+e+" is not a supported lazy route property. This property will be ignored."),d[e]=Promise.resolve();else if(y)At(!1,`Route "${s.id}" has a static property "${e}" defined. The lazy property will be ignored.`);else{let b=await l();b!=null&&(Object.assign(s,{[e]:b}),Object.assign(s,o(s)))}typeof s.lazy=="object"&&(s.lazy[e]=void 0,Object.values(s.lazy).every(b=>b===void 0)&&(s.lazy=void 0))})();return d[e]=h,h},j1=new WeakMap;function vO(e,t,i,o,s){let l=i[e.id];if(Ne(l,"No route found in manifest"),!e.lazy)return{lazyRoutePromise:void 0,lazyHandlerPromise:void 0};if(typeof e.lazy=="function"){let g=j1.get(l);if(g)return{lazyRoutePromise:g,lazyHandlerPromise:g};let y=(async()=>{Ne(typeof e.lazy=="function","No lazy route function found");let b=await e.lazy(),_={};for(let E in b){let T=b[E];if(T===void 0)continue;let O=DT(E),C=l[E]!==void 0&&E!=="hasErrorBoundary";O?At(!O,"Route property "+E+" is not a supported property to be returned from a lazy route function. This property will be ignored."):C?At(!C,`Route "${l.id}" has a static property "${E}" defined but its lazy function is also returning a value for this property. The lazy route property "${E}" will be ignored.`):_[E]=T}Object.assign(l,_),Object.assign(l,{...o(l),lazy:void 0})})();return j1.set(l,y),y.catch(()=>{}),{lazyRoutePromise:y,lazyHandlerPromise:y}}let d=Object.keys(e.lazy),f=[],h;for(let g of d){if(s&&s.includes(g))continue;let y=t4({key:g,route:e,manifest:i,mapRouteProperties:o});y&&(f.push(y),g===t&&(h=y))}let m=f.length>0?Promise.all(f).then(()=>{}):void 0;return m?.catch(()=>{}),h?.catch(()=>{}),{lazyRoutePromise:m,lazyHandlerPromise:h}}async function k1(e){let t=e.matches.filter(s=>s.shouldLoad),i={};return(await Promise.all(t.map(s=>s.resolve()))).forEach((s,l)=>{i[t[l].route.id]=s}),i}async function gO(e){return e.matches.some(t=>t.route.middleware)?r4(e,()=>k1(e)):k1(e)}function r4(e,t){return yO(e,t,o=>{if(kO(o))throw o;return o},CO,i);function i(o,s,l){if(l)return Promise.resolve(Object.assign(l.value,{[s]:{type:"error",result:o}}));{let{matches:d}=e,f=Math.min(Math.max(d.findIndex(m=>m.route.id===s),0),Math.max(d.findIndex(m=>m.shouldCallHandler()),0)),h=Vn(d,d[f].route.id).route.id;return Promise.resolve({[h]:{type:"error",result:o}})}}}async function yO(e,t,i,o,s){let{matches:l,...d}=e,f=l.flatMap(m=>m.route.middleware?m.route.middleware.map(g=>[m.route.id,g]):[]);return await i4(d,f,t,i,o,s)}async function i4(e,t,i,o,s,l,d=0){let{request:f}=e;if(f.signal.aborted)throw f.signal.reason??new Error(`Request aborted: ${f.method} ${f.url}`);let h=t[d];if(!h)return await i();let[m,g]=h,y,b=async()=>{if(y)throw new Error("You may only call `next()` once per middleware");try{return y={value:await i4(e,t,i,o,s,l,d+1)},y.value}catch(_){return y={value:await l(_,m,y)},y.value}};try{let _=await g(e,b),E=_!=null?o(_):void 0;return s(E)?E:y?E??y.value:(y={value:await b()},y.value)}catch(_){return await l(_,m,y)}}function n4(e,t,i,o,s){let l=t4({key:"middleware",route:o.route,manifest:t,mapRouteProperties:e}),d=vO(o.route,Wt(i.method)?"action":"loader",t,e,s);return{middleware:l,route:d.lazyRoutePromise,handler:d.lazyHandlerPromise}}function $m(e,t,i,o,s,l,d,f,h,m=null,g){let y=!1,b=n4(e,t,i,l,d);return{...l,_lazyPromises:b,shouldLoad:h,shouldRevalidateArgs:m,shouldCallHandler(_){return y=!0,m?typeof g=="boolean"?xl(l,{...m,defaultShouldRevalidate:g}):typeof _=="boolean"?xl(l,{...m,defaultShouldRevalidate:_}):xl(l,m):h},resolve(_){let{lazy:E,loader:T,middleware:O}=l.route,D=y||h||_&&!Wt(i.method)&&(E||T),C=O&&O.length>0&&!T&&!E;return D&&(Wt(i.method)||!C)?xO({request:i,path:o,pattern:s,match:l,lazyHandlerPromise:b?.handler,lazyRoutePromise:b?.route,handlerOverride:_,scopedContext:f}):Promise.resolve({type:"data",result:void 0})}}}function Ka(e,t,i,o,s,l,d,f,h=null){return s.map(m=>m.route.id!==l.route.id?{...m,shouldLoad:!1,shouldRevalidateArgs:h,shouldCallHandler:()=>!1,_lazyPromises:n4(e,t,i,m,d),resolve:()=>Promise.resolve({type:"data",result:void 0})}:$m(e,t,i,o,mc(s),m,d,f,!0,h))}async function bO(e,t,i,o,s,l,d){o.some(g=>g._lazyPromises?.middleware)&&await Promise.all(o.map(g=>g._lazyPromises?.middleware));let f={request:t,url:o4(t,i),pattern:mc(o),params:o[0].params,context:l,matches:o},m=await e({...f,fetcherKey:s,runClientMiddleware:g=>{let y=f;return r4(y,()=>g({...y,fetcherKey:s,runClientMiddleware:()=>{throw new Error("Cannot call `runClientMiddleware()` from within an `runClientMiddleware` handler")}}))}});try{await Promise.all(o.flatMap(g=>[g._lazyPromises?.handler,g._lazyPromises?.route]))}catch{}return m}async function xO({request:e,path:t,pattern:i,match:o,lazyHandlerPromise:s,lazyRoutePromise:l,handlerOverride:d,scopedContext:f}){let h,m,g=Wt(e.method),y=g?"action":"loader",b=_=>{let E,T=new Promise((C,z)=>E=z);m=()=>E(),e.signal.addEventListener("abort",m);let O=C=>typeof _!="function"?Promise.reject(new Error(`You cannot call the handler for a route which defines a boolean "${y}" [routeId: ${o.route.id}]`)):_({request:e,url:o4(e,t),pattern:i,params:o.params,context:f},...C!==void 0?[C]:[]),D=(async()=>{try{return{type:"data",result:await(d?d(z=>O(z)):O())}}catch(C){return{type:"error",result:C}}})();return Promise.race([D,T])};try{let _=g?o.route.action:o.route.loader;if(s||l)if(_){let E,[T]=await Promise.all([b(_).catch(O=>{E=O}),s,l]);if(E!==void 0)throw E;h=T}else{await s;let E=g?o.route.action:o.route.loader;if(E)[h]=await Promise.all([b(E),l]);else if(y==="action"){let T=new URL(e.url),O=T.pathname+T.search;throw Kr(405,{method:e.method,pathname:O,routeId:o.route.id})}else return{type:"data",result:void 0}}else if(_)h=await b(_);else{let E=new URL(e.url),T=E.pathname+E.search;throw Kr(404,{pathname:T})}}catch(_){return{type:"error",result:_}}finally{m&&e.signal.removeEventListener("abort",m)}return h}async function wO(e){let t=e.headers.get("Content-Type");return t&&/\bapplication\/json\b/.test(t)?e.body==null?null:e.json():e.text()}async function _O(e){let{result:t,type:i}=e;if(ig(t)){let o;try{o=await wO(t)}catch(s){return{type:"error",error:s}}return i==="error"?{type:"error",error:new pc(t.status,t.statusText,o),statusCode:t.status,headers:t.headers}:{type:"data",data:o,statusCode:t.status,headers:t.headers}}return i==="error"?$1(t)?t.data instanceof Error?{type:"error",error:t.data,statusCode:t.init?.status,headers:t.init?.headers?new Headers(t.init.headers):void 0}:{type:"error",error:OO(t),statusCode:Dl(t)?t.status:void 0,headers:t.init?.headers?new Headers(t.init.headers):void 0}:{type:"error",error:t,statusCode:Dl(t)?t.status:void 0}:$1(t)?{type:"data",data:t.data,statusCode:t.init?.status,headers:t.init?.headers?new Headers(t.init.headers):void 0}:{type:"data",data:t}}function SO(e,t,i,o,s){let l=e.headers.get("Location");if(Ne(l,"Redirects returned/thrown from loaders/actions must have a Location header"),!eg(l)){let d=o.slice(0,o.findIndex(f=>f.route.id===i)+1);l=Nm(new URL(t.url),d,s,l),e.headers.set("Location",l)}return e}var M1=["about:","blob:","chrome:","chrome-untrusted:","content:","data:","devtools:","file:","filesystem:","javascript:"];function D1(e,t,i,o){if(eg(e)){let s=e,l=s.startsWith("//")?new URL(t.protocol+s):new URL(s);if(M1.includes(l.protocol))throw new Error("Invalid redirect location");let d=Zr(l.pathname,i)!=null;if(l.origin===t.origin&&d)return tg(l.pathname)+l.search+l.hash}try{let s=o.createURL(e);if(M1.includes(s.protocol))throw new Error("Invalid redirect location")}catch{}return e}function La(e,t,i,o){let s=e.createURL(a4(t)).toString(),l={signal:i};if(o&&Wt(o.formMethod)){let{formMethod:d,formEncType:f}=o;l.method=d.toUpperCase(),f==="application/json"?(l.headers=new Headers({"Content-Type":f}),l.body=JSON.stringify(o.json)):f==="text/plain"?l.body=o.text:f==="application/x-www-form-urlencoded"&&o.formData?l.body=Bm(o.formData):l.body=o.formData}return new Request(s,l)}function o4(e,t){let i=new URL(e.url),o=typeof t=="string"?ji(t):t;if(i.pathname=o.pathname||"/",o.search){let s=new URLSearchParams(o.search),l=s.getAll("index");s.delete("index");for(let d of l.filter(Boolean))s.append("index",d);i.search=s.size?`?${s.toString()}`:""}else i.search="";return i.hash=o.hash||"",i}function Bm(e){let t=new URLSearchParams;for(let[i,o]of e.entries())t.append(i,typeof o=="string"?o:o.name);return t}function z1(e){let t=new FormData;for(let[i,o]of e.entries())t.append(i,o);return t}function EO(e,t,i,o=!1,s=!1){let l={},d=null,f,h=!1,m={},g=i&&jr(i[1])?i[1].error:void 0;return e.forEach(y=>{if(!(y.route.id in t))return;let b=y.route.id,_=t[b];if(Ne(!To(_),"Cannot handle redirect results in processLoaderData"),jr(_)){let E=_.error;if(g!==void 0&&(E=g,g=void 0),d=d||{},s)d[b]=E;else{let T=Vn(e,b);d[T.route.id]==null&&(d[T.route.id]=E)}o||(l[b]=Z_),h||(h=!0,f=Dl(_.error)?_.error.status:500),_.headers&&(m[b]=_.headers)}else l[b]=_.data,_.statusCode&&_.statusCode!==200&&!h&&(f=_.statusCode),_.headers&&(m[b]=_.headers)}),g!==void 0&&i&&(d={[i[0]]:g},i[2]&&(l[i[2]]=void 0)),{loaderData:l,errors:d,statusCode:f||200,loaderHeaders:m}}function P1(e,t,i,o,s,l,d){let{loaderData:f,errors:h}=EO(t,i,o);return s.filter(m=>!m.matches||m.matches.some(g=>g.shouldLoad)).forEach(m=>{let{key:g,match:y,controller:b}=m;if(b&&b.signal.aborted)return;let _=l[g];if(Ne(_,"Did not find corresponding fetcher result"),jr(_)){let E=Vn(e.matches,y?.route.id);h&&h[E.route.id]||(h={...h,[E.route.id]:_.error}),d.delete(g)}else if(To(_))Ne(!1,"Unhandled fetcher revalidation redirect");else{let E=_i(_.data);d.set(g,E)}}),{loaderData:f,errors:h}}function L1(e,t,i,o){let s=Object.entries(t).filter(([,l])=>l!==Z_).reduce((l,[d,f])=>(l[d]=f,l),{});for(let l of i){let d=l.route.id;if(!t.hasOwnProperty(d)&&e.hasOwnProperty(d)&&l.route.loader&&(s[d]=e[d]),o&&o.hasOwnProperty(d))break}return s}function N1(e){return e?jr(e[1])?{actionData:{}}:{actionData:{[e[0]]:e[1].data}}:{}}function Vn(e,t){return(t?e.slice(0,e.findIndex(o=>o.route.id===t)+1):[...e]).reverse().find(o=>o.route.hasErrorBoundary===!0)||e[0]}function Fd(e){let t=e.length===1?e[0]:e.find(i=>i.index||!i.path||i.path==="/")||{id:"__shim-error-route__"};return{matches:[{params:{},pathname:"",pathnameBase:"",route:t}],route:t}}function Kr(e,{pathname:t,routeId:i,method:o,type:s,message:l}={}){let d="Unknown Server Error",f="Unknown @remix-run/router error";return e===400?(d="Bad Request",o&&t&&i?f=`You made a ${o} request to "${t}" but did not provide a \`loader\` for route "${i}", so there is no way to handle the request.`:s==="invalid-body"&&(f="Unable to encode submission body")):e===403?(d="Forbidden",f=`Route "${i}" does not match URL "${t}"`):e===404?(d="Not Found",f=`No route matches URL "${t}"`):e===405&&(d="Method Not Allowed",o&&t&&i?f=`You made a ${o.toUpperCase()} request to "${t}" but did not provide an \`action\` for route "${i}", so there is no way to handle the request.`:o&&(f=`Invalid request method "${o.toUpperCase()}"`)),new pc(e||500,d,new Error(f),!0)}function Hd(e){let t=Object.entries(e);for(let i=t.length-1;i>=0;i--){let[o,s]=t[i];if(To(s))return{key:o,result:s}}}function a4(e){let t=typeof e=="string"?ji(e):e;return Ai({...t,hash:""})}function TO(e,t){return e.pathname!==t.pathname||e.search!==t.search?!1:e.hash===""?t.hash!=="":e.hash===t.hash?!0:t.hash!==""}function OO(e){return new pc(e.init?.status??500,e.init?.statusText??"Internal Server Error",e.data)}function CO(e){return e!=null&&typeof e=="object"&&Object.entries(e).every(([t,i])=>typeof t=="string"&&AO(i))}function AO(e){return e!=null&&typeof e=="object"&&"type"in e&&"result"in e&&(e.type==="data"||e.type==="error")}function RO(e){return ig(e.result)&&X_.has(e.result.status)}function jr(e){return e.type==="error"}function To(e){return(e&&e.type)==="redirect"}function $1(e){return typeof e=="object"&&e!=null&&"type"in e&&"data"in e&&"init"in e&&e.type==="DataWithResponseInit"}function ig(e){return e!=null&&typeof e.status=="number"&&typeof e.statusText=="string"&&typeof e.headers=="object"&&typeof e.body<"u"}function jO(e){return X_.has(e)}function kO(e){return ig(e)&&jO(e.status)&&e.headers.has("Location")}function MO(e){return sO.has(e.toUpperCase())}function Wt(e){return oO.has(e.toUpperCase())}function ng(e){return new URLSearchParams(e).getAll("index").some(t=>t==="")}function lu(e,t){let i=typeof t=="string"?ji(t).search:t.search;if(e[e.length-1].route.index&&ng(i||""))return e[e.length-1];let o=q_(e);return o[o.length-1]}function B1(e){let{formMethod:t,formAction:i,formEncType:o,text:s,formData:l,json:d}=e;if(!(!t||!i||!o)){if(s!=null)return{formMethod:t,formAction:i,formEncType:o,formData:void 0,json:void 0,text:s};if(l!=null)return{formMethod:t,formAction:i,formEncType:o,formData:l,json:void 0,text:void 0};if(d!==void 0)return{formMethod:t,formAction:i,formEncType:o,formData:void 0,json:d,text:void 0}}}function Rp(e,t,i,o){return o?{state:"loading",location:e,matches:t,historyAction:i,formMethod:o.formMethod,formAction:o.formAction,formEncType:o.formEncType,formData:o.formData,json:o.json,text:o.text}:{state:"loading",location:e,matches:t,historyAction:i,formMethod:void 0,formAction:void 0,formEncType:void 0,formData:void 0,json:void 0,text:void 0}}function DO(e,t,i,o){return{state:"submitting",location:e,matches:t,historyAction:i,formMethod:o.formMethod,formAction:o.formAction,formEncType:o.formEncType,formData:o.formData,json:o.json,text:o.text}}function sl(e,t){return e?{state:"loading",formMethod:e.formMethod,formAction:e.formAction,formEncType:e.formEncType,formData:e.formData,json:e.json,text:e.text,data:t}:{state:"loading",formMethod:void 0,formAction:void 0,formEncType:void 0,formData:void 0,json:void 0,text:void 0,data:t}}function zO(e,t){return{state:"submitting",formMethod:e.formMethod,formAction:e.formAction,formEncType:e.formEncType,formData:e.formData,json:e.json,text:e.text,data:t?t.data:void 0}}function _i(e){return{state:"idle",formMethod:void 0,formAction:void 0,formEncType:void 0,formData:void 0,json:void 0,text:void 0,data:e}}function PO(e,t){try{let i=e.sessionStorage.getItem(W_);if(i){let o=JSON.parse(i);for(let[s,l]of Object.entries(o||{}))l&&Array.isArray(l)&&t.set(s,new Set(l||[]))}}catch{}}function LO(e,t){if(t.size>0){let i={};for(let[o,s]of t)i[o]=[...s];try{e.sessionStorage.setItem(W_,JSON.stringify(i))}catch(o){At(!1,`Failed to save applied view transitions in sessionStorage (${o}).`)}}}function U1(){let e,t,i=new Promise((o,s)=>{e=async l=>{o(l);try{await i}catch{}},t=async l=>{s(l);try{await i}catch{}}});return{promise:i,resolve:e,reject:t}}var $o=w.createContext(null);$o.displayName="DataRouter";var vc=w.createContext(null);vc.displayName="DataRouterState";var s4=w.createContext(!1);function l4(){return w.useContext(s4)}var og=w.createContext({isTransitioning:!1});og.displayName="ViewTransition";var c4=w.createContext(new Map);c4.displayName="Fetchers";var NO=w.createContext(null);NO.displayName="Await";var Mr=w.createContext(null);Mr.displayName="Navigation";var Yu=w.createContext(null);Yu.displayName="Location";var mi=w.createContext({outlet:null,matches:[],isDataRoute:!1});mi.displayName="Route";var ag=w.createContext(null);ag.displayName="RouteError";var d4="REACT_ROUTER_ERROR",$O="REDIRECT",BO="ROUTE_ERROR_RESPONSE";function UO(e){if(e.startsWith(`${d4}:${$O}:{`))try{let t=JSON.parse(e.slice(28));if(typeof t=="object"&&t&&typeof t.status=="number"&&typeof t.statusText=="string"&&typeof t.location=="string"&&typeof t.reloadDocument=="boolean"&&typeof t.replace=="boolean")return t}catch{}}function IO(e){if(e.startsWith(`${d4}:${BO}:{`))try{let t=JSON.parse(e.slice(40));if(typeof t=="object"&&t&&typeof t.status=="number"&&typeof t.statusText=="string")return new pc(t.status,t.statusText,t.data)}catch{}}function VO(e,{relative:t}={}){Ne(ts(),"useHref() may be used only in the context of a <Router> component.");let{basename:i,navigator:o}=w.useContext(Mr),{hash:s,pathname:l,search:d}=gc(e,{relative:t}),f=l;return i!=="/"&&(f=l==="/"?i:Qr([i,l])),o.createHref({pathname:f,search:d,hash:s})}function ts(){return w.useContext(Yu)!=null}function ki(){return Ne(ts(),"useLocation() may be used only in the context of a <Router> component."),w.useContext(Yu).location}var u4="You should call navigate() in a React.useEffect(), not when your component is first rendered.";function f4(e){w.useContext(Mr).static||w.useLayoutEffect(e)}function h4(){let{isDataRoute:e}=w.useContext(mi);return e?iC():FO()}function FO(){Ne(ts(),"useNavigate() may be used only in the context of a <Router> component.");let e=w.useContext($o),{basename:t,navigator:i}=w.useContext(Mr),{matches:o}=w.useContext(mi),{pathname:s}=ki(),l=JSON.stringify(Gu(o)),d=w.useRef(!1);return f4(()=>{d.current=!0}),w.useCallback((h,m={})=>{if(At(d.current,u4),!d.current)return;if(typeof h=="number"){i.go(h);return}let g=hc(h,JSON.parse(l),s,m.relative==="path");e==null&&t!=="/"&&(g.pathname=g.pathname==="/"?t:Qr([t,g.pathname])),(m.replace?i.replace:i.push)(g,m.state,m)},[t,i,l,s,e])}var HO=w.createContext(null);function qO(e){let t=w.useContext(mi).outlet;return w.useMemo(()=>t&&w.createElement(HO.Provider,{value:e},t),[t,e])}function gc(e,{relative:t}={}){let{matches:i}=w.useContext(mi),{pathname:o}=ki(),s=JSON.stringify(Gu(i));return w.useMemo(()=>hc(e,JSON.parse(s),o,t==="path"),[e,s,o,t])}function KO(e,t,i){Ne(ts(),"useRoutes() may be used only in the context of a <Router> component.");let{navigator:o}=w.useContext(Mr),{matches:s}=w.useContext(mi),l=s[s.length-1],d=l?l.params:{},f=l?l.pathname:"/",h=l?l.pathnameBase:"/",m=l&&l.route;{let O=m&&m.path||"";m4(f,!m||O.endsWith("*")||O.endsWith("*?"),`You rendered descendant <Routes> (or called \`useRoutes()\`) at "${f}" (under <Route path="${O}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="${O}"> to <Route path="${O==="/"?"*":`${O}/*`}">.`)}let g=ki(),y;y=g;let b=y.pathname||"/",_=b;if(h!=="/"){let O=h.replace(/^\//,"").split("/");_="/"+b.replace(/^\//,"").split("/").slice(O.length).join("/")}let E=i&&i.state.matches.length?i.state.matches.map(O=>Object.assign(O,{route:i.manifest[O.route.id]||O.route})):I_(e,{pathname:_});return At(m||E!=null,`No routes matched location "${y.pathname}${y.search}${y.hash}" `),At(E==null||E[E.length-1].route.element!==void 0||E[E.length-1].route.Component!==void 0||E[E.length-1].route.lazy!==void 0,`Matched leaf route at location "${y.pathname}${y.search}${y.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`),WO(E&&E.map(O=>Object.assign({},O,{params:Object.assign({},d,O.params),pathname:Qr([h,o.encodeLocation?o.encodeLocation(O.pathname.replace(/%/g,"%25").replace(/\?/g,"%3F").replace(/#/g,"%23")).pathname:O.pathname]),pathnameBase:O.pathnameBase==="/"?h:Qr([h,o.encodeLocation?o.encodeLocation(O.pathnameBase.replace(/%/g,"%25").replace(/\?/g,"%3F").replace(/#/g,"%23")).pathname:O.pathnameBase])})),s,i)}function GO(){let e=rC(),t=Dl(e)?`${e.status} ${e.statusText}`:e instanceof Error?e.message:JSON.stringify(e),i=e instanceof Error?e.stack:null,o="rgba(200,200,200, 0.5)",s={padding:"0.5rem",backgroundColor:o},l={padding:"2px 4px",backgroundColor:o},d=null;return console.error("Error handled by React Router default ErrorBoundary:",e),d=w.createElement(w.Fragment,null,w.createElement("p",null,"💿 Hey developer 👋"),w.createElement("p",null,"You can provide a way better UX than this when your app throws errors by providing your own ",w.createElement("code",{style:l},"ErrorBoundary")," or"," ",w.createElement("code",{style:l},"errorElement")," prop on your route.")),w.createElement(w.Fragment,null,w.createElement("h2",null,"Unexpected Application Error!"),w.createElement("h3",{style:{fontStyle:"italic"}},t),i?w.createElement("pre",{style:s},i):null,d)}var YO=w.createElement(GO,null),p4=class extends w.Component{constructor(e){super(e),this.state={location:e.location,revalidation:e.revalidation,error:e.error}}static getDerivedStateFromError(e){return{error:e}}static getDerivedStateFromProps(e,t){return t.location!==e.location||t.revalidation!=="idle"&&e.revalidation==="idle"?{error:e.error,location:e.location,revalidation:e.revalidation}:{error:e.error!==void 0?e.error:t.error,location:t.location,revalidation:e.revalidation||t.revalidation}}componentDidCatch(e,t){this.props.onError?this.props.onError(e,t):console.error("React Router caught the following error during render",e)}render(){let e=this.state.error;if(this.context&&typeof e=="object"&&e&&"digest"in e&&typeof e.digest=="string"){const i=IO(e.digest);i&&(e=i)}let t=e!==void 0?w.createElement(mi.Provider,{value:this.props.routeContext},w.createElement(ag.Provider,{value:e,children:this.props.component})):this.props.children;return this.context?w.createElement(QO,{error:e},t):t}};p4.contextType=s4;var jp=new WeakMap;function QO({children:e,error:t}){let{basename:i}=w.useContext(Mr);if(typeof t=="object"&&t&&"digest"in t&&typeof t.digest=="string"){let o=UO(t.digest);if(o){let s=jp.get(t);if(s)throw s;let l=G_(o.location,i);if(K_&&!jp.get(t))if(l.isExternal||o.reloadDocument)window.location.href=l.absoluteURL||l.to;else{const d=Promise.resolve().then(()=>window.__reactRouterDataRouter.navigate(l.to,{replace:o.replace}));throw jp.set(t,d),d}return w.createElement("meta",{httpEquiv:"refresh",content:`0;url=${l.absoluteURL||l.to}`})}}return e}function XO({routeContext:e,match:t,children:i}){let o=w.useContext($o);return o&&o.static&&o.staticContext&&(t.route.errorElement||t.route.ErrorBoundary)&&(o.staticContext._deepestRenderedBoundaryId=t.route.id),w.createElement(mi.Provider,{value:e},i)}function WO(e,t=[],i){let o=i?.state;if(e==null){if(!o)return null;if(o.errors)e=o.matches;else if(t.length===0&&!o.initialized&&o.matches.length>0)e=o.matches;else return null}let s=e,l=o?.errors;if(l!=null){let g=s.findIndex(y=>y.route.id&&l?.[y.route.id]!==void 0);Ne(g>=0,`Could not find a matching route for errors on route IDs: ${Object.keys(l).join(",")}`),s=s.slice(0,Math.min(s.length,g+1))}let d=!1,f=-1;if(i&&o){d=o.renderFallback;for(let g=0;g<s.length;g++){let y=s[g];if((y.route.HydrateFallback||y.route.hydrateFallbackElement)&&(f=g),y.route.id){let{loaderData:b,errors:_}=o,E=y.route.loader&&!b.hasOwnProperty(y.route.id)&&(!_||_[y.route.id]===void 0);if(y.route.lazy||E){i.isStatic&&(d=!0),f>=0?s=s.slice(0,f+1):s=[s[0]];break}}}}let h=i?.onError,m=o&&h?(g,y)=>{h(g,{location:o.location,params:o.matches?.[0]?.params??{},pattern:mc(o.matches),errorInfo:y})}:void 0;return s.reduceRight((g,y,b)=>{let _,E=!1,T=null,O=null;o&&(_=l&&y.route.id?l[y.route.id]:void 0,T=y.route.errorElement||YO,d&&(f<0&&b===0?(m4("route-fallback",!1,"No `HydrateFallback` element provided to render during initial hydration"),E=!0,O=null):f===b&&(E=!0,O=y.route.hydrateFallbackElement||null)));let D=t.concat(s.slice(0,b+1)),C=()=>{let z;return _?z=T:E?z=O:y.route.Component?z=w.createElement(y.route.Component,null):y.route.element?z=y.route.element:z=g,w.createElement(XO,{match:y,routeContext:{outlet:g,matches:D,isDataRoute:o!=null},children:z})};return o&&(y.route.ErrorBoundary||y.route.errorElement||b===0)?w.createElement(p4,{location:o.location,revalidation:o.revalidation,component:T,error:_,children:C(),routeContext:{outlet:null,matches:D,isDataRoute:!0},onError:m}):C()},null)}function sg(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}function ZO(e){let t=w.useContext($o);return Ne(t,sg(e)),t}function JO(e){let t=w.useContext(vc);return Ne(t,sg(e)),t}function eC(e){let t=w.useContext(mi);return Ne(t,sg(e)),t}function lg(e){let t=eC(e),i=t.matches[t.matches.length-1];return Ne(i.route.id,`${e} can only be used on routes that contain a unique "id"`),i.route.id}function tC(){return lg("useRouteId")}function rC(){let e=w.useContext(ag),t=JO("useRouteError"),i=lg("useRouteError");return e!==void 0?e:t.errors?.[i]}function iC(){let{router:e}=ZO("useNavigate"),t=lg("useNavigate"),i=w.useRef(!1);return f4(()=>{i.current=!0}),w.useCallback(async(s,l={})=>{At(i.current,u4),i.current&&(typeof s=="number"?await e.navigate(s):await e.navigate(s,{fromRouteId:t,...l}))},[e,t])}var I1={};function m4(e,t,i){!t&&!I1[e]&&(I1[e]=!0,At(!1,i))}var V1={};function F1(e,t){!e&&!V1[t]&&(V1[t]=!0,console.warn(t))}var nC="useOptimistic",H1=P6[nC],oC=()=>{};function aC(e){return H1?H1(e):[e,oC]}function sC(e){let t={hasErrorBoundary:e.hasErrorBoundary||e.ErrorBoundary!=null||e.errorElement!=null};return e.Component&&(e.element&&At(!1,"You should not include both `Component` and `element` on your route - `Component` will be used."),Object.assign(t,{element:w.createElement(e.Component),Component:void 0})),e.HydrateFallback&&(e.hydrateFallbackElement&&At(!1,"You should not include both `HydrateFallback` and `hydrateFallbackElement` on your route - `HydrateFallback` will be used."),Object.assign(t,{hydrateFallbackElement:w.createElement(e.HydrateFallback),HydrateFallback:void 0})),e.ErrorBoundary&&(e.errorElement&&At(!1,"You should not include both `ErrorBoundary` and `errorElement` on your route - `ErrorBoundary` will be used."),Object.assign(t,{errorElement:w.createElement(e.ErrorBoundary),ErrorBoundary:void 0})),t}var lC=["HydrateFallback","hydrateFallbackElement"],cC=class{constructor(){this.status="pending",this.promise=new Promise((e,t)=>{this.resolve=i=>{this.status==="pending"&&(this.status="resolved",e(i))},this.reject=i=>{this.status==="pending"&&(this.status="rejected",t(i))}})}};function dC({router:e,flushSync:t,onError:i,useTransitions:o}){o=l4()||o;let[l,d]=w.useState(e.state),[f,h]=aC(l),[m,g]=w.useState(),[y,b]=w.useState({isTransitioning:!1}),[_,E]=w.useState(),[T,O]=w.useState(),[D,C]=w.useState(),z=w.useRef(new Map),B=w.useCallback((A,{deletedFetchers:le,newErrors:ee,flushSync:J,viewTransitionOpts:ce})=>{ee&&i&&Object.values(ee).forEach(ie=>i(ie,{location:A.location,params:A.matches[0]?.params??{},pattern:mc(A.matches)})),A.fetchers.forEach((ie,xe)=>{ie.data!==void 0&&z.current.set(xe,ie.data)}),le.forEach(ie=>z.current.delete(ie)),F1(J===!1||t!=null,'You provided the `flushSync` option to a router update, but you are not using the `<RouterProvider>` from `react-router/dom` so `ReactDOM.flushSync()` is unavailable.  Please update your app to `import { RouterProvider } from "react-router/dom"` and ensure you have `react-dom` installed as a dependency to use the `flushSync` option.');let _e=e.window!=null&&e.window.document!=null&&typeof e.window.document.startViewTransition=="function";if(F1(ce==null||_e,"You provided the `viewTransition` option to a router update, but you do not appear to be running in a DOM environment as `window.startViewTransition` is not available."),!ce||!_e){t&&J?t(()=>d(A)):o===!1?d(A):w.startTransition(()=>{o===!0&&h(ie=>q1(ie,A)),d(A)});return}if(t&&J){t(()=>{T&&(_?.resolve(),T.skipTransition()),b({isTransitioning:!0,flushSync:!0,currentLocation:ce.currentLocation,nextLocation:ce.nextLocation})});let ie=e.window.document.startViewTransition(()=>{t(()=>d(A))});ie.finished.finally(()=>{t(()=>{E(void 0),O(void 0),g(void 0),b({isTransitioning:!1})})}),t(()=>O(ie));return}T?(_?.resolve(),T.skipTransition(),C({state:A,currentLocation:ce.currentLocation,nextLocation:ce.nextLocation})):(g(A),b({isTransitioning:!0,flushSync:!1,currentLocation:ce.currentLocation,nextLocation:ce.nextLocation}))},[e.window,t,T,_,o,h,i]);w.useLayoutEffect(()=>e.subscribe(B),[e,B]),w.useEffect(()=>{y.isTransitioning&&!y.flushSync&&E(new cC)},[y]),w.useEffect(()=>{if(_&&m&&e.window){let A=m,le=_.promise,ee=e.window.document.startViewTransition(async()=>{o===!1?d(A):w.startTransition(()=>{o===!0&&h(J=>q1(J,A)),d(A)}),await le});ee.finished.finally(()=>{E(void 0),O(void 0),g(void 0),b({isTransitioning:!1})}),O(ee)}},[m,_,e.window,o,h]),w.useEffect(()=>{_&&m&&f.location.key===m.location.key&&_.resolve()},[_,T,f.location,m]),w.useEffect(()=>{!y.isTransitioning&&D&&(g(D.state),b({isTransitioning:!0,flushSync:!1,currentLocation:D.currentLocation,nextLocation:D.nextLocation}),C(void 0))},[y.isTransitioning,D]);let H=w.useMemo(()=>({createHref:e.createHref,encodeLocation:e.encodeLocation,go:A=>e.navigate(A),push:(A,le,ee)=>e.navigate(A,{state:le,preventScrollReset:ee?.preventScrollReset}),replace:(A,le,ee)=>e.navigate(A,{replace:!0,state:le,preventScrollReset:ee?.preventScrollReset})}),[e]),ne=e.basename||"/",X=w.useMemo(()=>({router:e,navigator:H,static:!1,basename:ne,onError:i}),[e,H,ne,i]);return w.createElement(w.Fragment,null,w.createElement($o.Provider,{value:X},w.createElement(vc.Provider,{value:f},w.createElement(c4.Provider,{value:z.current},w.createElement(og.Provider,{value:y},w.createElement(hC,{basename:ne,location:f.location,navigationType:f.historyAction,navigator:H,useTransitions:o},w.createElement(uC,{routes:e.routes,manifest:e.manifest,future:e.future,state:f,isStatic:!1,onError:i})))))),null)}function q1(e,t){return{...e,navigation:t.navigation.state!=="idle"?t.navigation:e.navigation,revalidation:t.revalidation!=="idle"?t.revalidation:e.revalidation,actionData:t.navigation.state!=="submitting"?t.actionData:e.actionData,fetchers:t.fetchers}}var uC=w.memo(fC);function fC({routes:e,manifest:t,future:i,state:o,isStatic:s,onError:l}){return KO(e,void 0,{manifest:t,state:o,isStatic:s,onError:l})}function K1({to:e,replace:t,state:i,relative:o}){Ne(ts(),"<Navigate> may be used only in the context of a <Router> component.");let{static:s}=w.useContext(Mr);At(!s,"<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change.");let{matches:l}=w.useContext(mi),{pathname:d}=ki(),f=h4(),h=hc(e,Gu(l),d,o==="path"),m=JSON.stringify(h);return w.useEffect(()=>{f(JSON.parse(m),{replace:t,state:i,relative:o})},[f,m,o,t,i]),null}function v4(e){return qO(e.context)}function hC({basename:e="/",children:t=null,location:i,navigationType:o="POP",navigator:s,static:l=!1,useTransitions:d}){Ne(!ts(),"You cannot render a <Router> inside another <Router>. You should never have more than one in your app.");let f=e.replace(/^\/*/,"/"),h=w.useMemo(()=>({basename:f,navigator:s,static:l,useTransitions:d,future:{}}),[f,s,l,d]);typeof i=="string"&&(i=ji(i));let{pathname:m="/",search:g="",hash:y="",state:b=null,key:_="default",mask:E}=i,T=w.useMemo(()=>{let O=Zr(m,f);return O==null?null:{location:{pathname:O,search:g,hash:y,state:b,key:_,mask:E},navigationType:o}},[f,m,g,y,b,_,o,E]);return At(T!=null,`<Router basename="${f}"> is not able to match the URL "${m}${g}${y}" because it does not start with the basename, so the <Router> won't render anything.`),T==null?null:w.createElement(Mr.Provider,{value:h},w.createElement(Yu.Provider,{children:t,value:T}))}var cu="get",du="application/x-www-form-urlencoded";function Qu(e){return typeof HTMLElement<"u"&&e instanceof HTMLElement}function pC(e){return Qu(e)&&e.tagName.toLowerCase()==="button"}function mC(e){return Qu(e)&&e.tagName.toLowerCase()==="form"}function vC(e){return Qu(e)&&e.tagName.toLowerCase()==="input"}function gC(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function yC(e,t){return e.button===0&&(!t||t==="_self")&&!gC(e)}var qd=null;function bC(){if(qd===null)try{new FormData(document.createElement("form"),0),qd=!1}catch{qd=!0}return qd}var xC=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function kp(e){return e!=null&&!xC.has(e)?(At(!1,`"${e}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${du}"`),null):e}function wC(e,t){let i,o,s,l,d;if(mC(e)){let f=e.getAttribute("action");o=f?Zr(f,t):null,i=e.getAttribute("method")||cu,s=kp(e.getAttribute("enctype"))||du,l=new FormData(e)}else if(pC(e)||vC(e)&&(e.type==="submit"||e.type==="image")){let f=e.form;if(f==null)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let h=e.getAttribute("formaction")||f.getAttribute("action");if(o=h?Zr(h,t):null,i=e.getAttribute("formmethod")||f.getAttribute("method")||cu,s=kp(e.getAttribute("formenctype"))||kp(f.getAttribute("enctype"))||du,l=new FormData(f,e),!bC()){let{name:m,type:g,value:y}=e;if(g==="image"){let b=m?`${m}.`:"";l.append(`${b}x`,"0"),l.append(`${b}y`,"0")}else m&&l.append(m,y)}}else{if(Qu(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');i=cu,o=null,s=du,d=e}return l&&s==="text/plain"&&(d=l,l=void 0),{action:o,method:i.toLowerCase(),encType:s,formData:l,body:d}}Object.getOwnPropertyNames(Object.prototype).sort().join("\0");function cg(e,t){if(e===!1||e===null||typeof e>"u")throw new Error(t)}function g4(e,t,i,o){let s=typeof e=="string"?new URL(e,typeof window>"u"?"server://singlefetch/":window.location.origin):e;return i?s.pathname.endsWith("/")?s.pathname=`${s.pathname}_.${o}`:s.pathname=`${s.pathname}.${o}`:s.pathname==="/"?s.pathname=`_root.${o}`:t&&Zr(s.pathname,t)==="/"?s.pathname=`${Su(t)}/_root.${o}`:s.pathname=`${Su(s.pathname)}.${o}`,s}async function _C(e,t){if(e.id in t)return t[e.id];try{let i=await import(e.module);return t[e.id]=i,i}catch(i){return console.error(`Error loading route module \`${e.module}\`, reloading page...`),console.error(i),window.__reactRouterContext&&window.__reactRouterContext.isSpaMode,window.location.reload(),new Promise(()=>{})}}function SC(e){return e==null?!1:e.href==null?e.rel==="preload"&&typeof e.imageSrcSet=="string"&&typeof e.imageSizes=="string":typeof e.rel=="string"&&typeof e.href=="string"}async function EC(e,t,i){let o=await Promise.all(e.map(async s=>{let l=t.routes[s.route.id];if(l){let d=await _C(l,i);return d.links?d.links():[]}return[]}));return AC(o.flat(1).filter(SC).filter(s=>s.rel==="stylesheet"||s.rel==="preload").map(s=>s.rel==="stylesheet"?{...s,rel:"prefetch",as:"style"}:{...s,rel:"prefetch"}))}function G1(e,t,i,o,s,l){let d=(h,m)=>i[m]?h.route.id!==i[m].route.id:!0,f=(h,m)=>i[m].pathname!==h.pathname||i[m].route.path?.endsWith("*")&&i[m].params["*"]!==h.params["*"];return l==="assets"?t.filter((h,m)=>d(h,m)||f(h,m)):l==="data"?t.filter((h,m)=>{let g=o.routes[h.route.id];if(!g||!g.hasLoader)return!1;if(d(h,m)||f(h,m))return!0;if(h.route.shouldRevalidate){let y=h.route.shouldRevalidate({currentUrl:new URL(s.pathname+s.search+s.hash,window.origin),currentParams:i[0]?.params||{},nextUrl:new URL(e,window.origin),nextParams:h.params,defaultShouldRevalidate:!0});if(typeof y=="boolean")return y}return!0}):[]}function TC(e,t,{includeHydrateFallback:i}={}){return OC(e.map(o=>{let s=t.routes[o.route.id];if(!s)return[];let l=[s.module];return s.clientActionModule&&(l=l.concat(s.clientActionModule)),s.clientLoaderModule&&(l=l.concat(s.clientLoaderModule)),i&&s.hydrateFallbackModule&&(l=l.concat(s.hydrateFallbackModule)),s.imports&&(l=l.concat(s.imports)),l}).flat(1))}function OC(e){return[...new Set(e)]}function CC(e){let t={},i=Object.keys(e).sort();for(let o of i)t[o]=e[o];return t}function AC(e,t){let i=new Set;return new Set(t),e.reduce((o,s)=>{let l=JSON.stringify(CC(s));return i.has(l)||(i.add(l),o.push({key:l,link:s})),o},[])}function dg(){let e=w.useContext($o);return cg(e,"You must render this element inside a <DataRouterContext.Provider> element"),e}function RC(){let e=w.useContext(vc);return cg(e,"You must render this element inside a <DataRouterStateContext.Provider> element"),e}var ug=w.createContext(void 0);ug.displayName="FrameworkContext";function fg(){let e=w.useContext(ug);return cg(e,"You must render this element inside a <HydratedRouter> element"),e}function jC(e,t){let i=w.useContext(ug),[o,s]=w.useState(!1),[l,d]=w.useState(!1),{onFocus:f,onBlur:h,onMouseEnter:m,onMouseLeave:g,onTouchStart:y}=t,b=w.useRef(null);w.useEffect(()=>{if(e==="render"&&d(!0),e==="viewport"){let T=D=>{D.forEach(C=>{d(C.isIntersecting)})},O=new IntersectionObserver(T,{threshold:.5});return b.current&&O.observe(b.current),()=>{O.disconnect()}}},[e]),w.useEffect(()=>{if(o){let T=setTimeout(()=>{d(!0)},100);return()=>{clearTimeout(T)}}},[o]);let _=()=>{s(!0)},E=()=>{s(!1),d(!1)};return i?e!=="intent"?[l,b,{}]:[l,b,{onFocus:ll(f,_),onBlur:ll(h,E),onMouseEnter:ll(m,_),onMouseLeave:ll(g,E),onTouchStart:ll(y,_)}]:[!1,b,{}]}function ll(e,t){return i=>{e&&e(i),i.defaultPrevented||t(i)}}function kC({page:e,...t}){let i=l4(),{router:o}=dg(),s=w.useMemo(()=>I_(o.routes,e,o.basename),[o.routes,e,o.basename]);return s?i?w.createElement(DC,{page:e,matches:s,...t}):w.createElement(zC,{page:e,matches:s,...t}):null}function MC(e){let{manifest:t,routeModules:i}=fg(),[o,s]=w.useState([]);return w.useEffect(()=>{let l=!1;return EC(e,t,i).then(d=>{l||s(d)}),()=>{l=!0}},[e,t,i]),o}function DC({page:e,matches:t,...i}){let o=ki(),{future:s}=fg(),{basename:l}=dg(),d=w.useMemo(()=>{if(e===o.pathname+o.search+o.hash)return[];let f=g4(e,l,s.unstable_trailingSlashAwareDataRequests,"rsc"),h=!1,m=[];for(let g of t)typeof g.route.shouldRevalidate=="function"?h=!0:m.push(g.route.id);return h&&m.length>0&&f.searchParams.set("_routes",m.join(",")),[f.pathname+f.search]},[l,s.unstable_trailingSlashAwareDataRequests,e,o,t]);return w.createElement(w.Fragment,null,d.map(f=>w.createElement("link",{key:f,rel:"prefetch",as:"fetch",href:f,...i})))}function zC({page:e,matches:t,...i}){let o=ki(),{future:s,manifest:l,routeModules:d}=fg(),{basename:f}=dg(),{loaderData:h,matches:m}=RC(),g=w.useMemo(()=>G1(e,t,m,l,o,"data"),[e,t,m,l,o]),y=w.useMemo(()=>G1(e,t,m,l,o,"assets"),[e,t,m,l,o]),b=w.useMemo(()=>{if(e===o.pathname+o.search+o.hash)return[];let T=new Set,O=!1;if(t.forEach(C=>{let z=l.routes[C.route.id];!z||!z.hasLoader||(!g.some(B=>B.route.id===C.route.id)&&C.route.id in h&&d[C.route.id]?.shouldRevalidate||z.hasClientLoader?O=!0:T.add(C.route.id))}),T.size===0)return[];let D=g4(e,f,s.unstable_trailingSlashAwareDataRequests,"data");return O&&T.size>0&&D.searchParams.set("_routes",t.filter(C=>T.has(C.route.id)).map(C=>C.route.id).join(",")),[D.pathname+D.search]},[f,s.unstable_trailingSlashAwareDataRequests,h,o,l,g,t,e,d]),_=w.useMemo(()=>TC(y,l),[y,l]),E=MC(y);return w.createElement(w.Fragment,null,b.map(T=>w.createElement("link",{key:T,rel:"prefetch",as:"fetch",href:T,...i})),_.map(T=>w.createElement("link",{key:T,rel:"modulepreload",href:T,...i})),E.map(({key:T,link:O})=>w.createElement("link",{key:T,nonce:i.nonce,...O,crossOrigin:O.crossOrigin??i.crossOrigin})))}function PC(...e){return t=>{e.forEach(i=>{typeof i=="function"?i(t):i!=null&&(i.current=t)})}}var LC=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u";try{LC&&(window.__reactRouterVersion="7.15.1")}catch{}function NC(e,t){return fO({basename:t?.basename,getContext:t?.getContext,future:t?.future,history:CT({window:t?.window}),hydrationData:t?.hydrationData||$C(),routes:e,mapRouteProperties:sC,hydrationRouteProperties:lC,dataStrategy:t?.dataStrategy,patchRoutesOnNavigation:t?.patchRoutesOnNavigation,window:t?.window,instrumentations:t?.instrumentations}).initialize()}function $C(){let e=window?.__staticRouterHydrationData;return e&&e.errors&&(e={...e,errors:BC(e.errors)}),e}function BC(e){if(!e)return null;let t=Object.entries(e),i={};for(let[o,s]of t)if(s&&s.__type==="RouteErrorResponse")i[o]=new pc(s.status,s.statusText,s.data,s.internal===!0);else if(s&&s.__type==="Error"){if(s.__subType){let l=window[s.__subType];if(typeof l=="function")try{let d=new l(s.message);d.stack="",i[o]=d}catch{}}if(i[o]==null){let l=new Error(s.message);l.stack="",i[o]=l}}else i[o]=s;return i}var y4=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,b4=w.forwardRef(function({onClick:t,discover:i="render",prefetch:o="none",relative:s,reloadDocument:l,replace:d,mask:f,state:h,target:m,to:g,preventScrollReset:y,viewTransition:b,defaultShouldRevalidate:_,...E},T){let{basename:O,navigator:D,useTransitions:C}=w.useContext(Mr),z=typeof g=="string"&&y4.test(g),B=G_(g,O);g=B.to;let H=VO(g,{relative:s}),ne=ki(),X=null;if(f){let xe=hc(f,[],ne.mask?ne.mask.pathname:"/",!0);O!=="/"&&(xe.pathname=xe.pathname==="/"?O:Qr([O,xe.pathname])),X=D.createHref(xe)}let[A,le,ee]=jC(o,E),J=VC(g,{replace:d,mask:f,state:h,target:m,preventScrollReset:y,relative:s,viewTransition:b,defaultShouldRevalidate:_,useTransitions:C});function ce(xe){t&&t(xe),xe.defaultPrevented||J(xe)}let _e=!(B.isExternal||l),ie=w.createElement("a",{...E,...ee,href:(_e?X:void 0)||B.absoluteURL||H,onClick:_e?ce:t,ref:PC(T,le),target:m,"data-discover":!z&&i==="render"?"true":void 0});return A&&!z?w.createElement(w.Fragment,null,ie,w.createElement(kC,{page:H})):ie});b4.displayName="Link";var x4=w.forwardRef(function({"aria-current":t="page",caseSensitive:i=!1,className:o="",end:s=!1,style:l,to:d,viewTransition:f,children:h,...m},g){let y=gc(d,{relative:m.relative}),b=ki(),_=w.useContext(vc),{navigator:E,basename:T}=w.useContext(Mr),O=_!=null&&GC(y)&&f===!0,D=E.encodeLocation?E.encodeLocation(y).pathname:y.pathname,C=b.pathname,z=_&&_.navigation&&_.navigation.location?_.navigation.location.pathname:null;i||(C=C.toLowerCase(),z=z?z.toLowerCase():null,D=D.toLowerCase()),z&&T&&(z=Zr(z,T)||z);const B=D!=="/"&&D.endsWith("/")?D.length-1:D.length;let H=C===D||!s&&C.startsWith(D)&&C.charAt(B)==="/",ne=z!=null&&(z===D||!s&&z.startsWith(D)&&z.charAt(D.length)==="/"),X={isActive:H,isPending:ne,isTransitioning:O},A=H?t:void 0,le;typeof o=="function"?le=o(X):le=[o,H?"active":null,ne?"pending":null,O?"transitioning":null].filter(Boolean).join(" ");let ee=typeof l=="function"?l(X):l;return w.createElement(b4,{...m,"aria-current":A,className:le,ref:g,style:ee,to:d,viewTransition:f},typeof h=="function"?h(X):h)});x4.displayName="NavLink";var UC=w.forwardRef(({discover:e="render",fetcherKey:t,navigate:i,reloadDocument:o,replace:s,state:l,method:d=cu,action:f,onSubmit:h,relative:m,preventScrollReset:g,viewTransition:y,defaultShouldRevalidate:b,..._},E)=>{let{useTransitions:T}=w.useContext(Mr),O=qC(),D=KC(f,{relative:m}),C=d.toLowerCase()==="get"?"get":"post",z=typeof f=="string"&&y4.test(f),B=H=>{if(h&&h(H),H.defaultPrevented)return;H.preventDefault();let ne=H.nativeEvent.submitter,X=ne?.getAttribute("formmethod")||d,A=()=>O(ne||H.currentTarget,{fetcherKey:t,method:X,navigate:i,replace:s,state:l,relative:m,preventScrollReset:g,viewTransition:y,defaultShouldRevalidate:b});T&&i!==!1?w.startTransition(()=>A()):A()};return w.createElement("form",{ref:E,method:C,action:D,onSubmit:o?h:B,..._,"data-discover":!z&&e==="render"?"true":void 0})});UC.displayName="Form";function IC(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}function w4(e){let t=w.useContext($o);return Ne(t,IC(e)),t}function VC(e,{target:t,replace:i,mask:o,state:s,preventScrollReset:l,relative:d,viewTransition:f,defaultShouldRevalidate:h,useTransitions:m}={}){let g=h4(),y=ki(),b=gc(e,{relative:d});return w.useCallback(_=>{if(yC(_,t)){_.preventDefault();let E=i!==void 0?i:Ai(y)===Ai(b),T=()=>g(e,{replace:E,mask:o,state:s,preventScrollReset:l,relative:d,viewTransition:f,defaultShouldRevalidate:h});m?w.startTransition(()=>T()):T()}},[y,g,b,i,o,s,t,e,l,d,f,h,m])}var FC=0,HC=()=>`__${String(++FC)}__`;function qC(){let{router:e}=w4("useSubmit"),{basename:t}=w.useContext(Mr),i=tC(),o=e.fetch,s=e.navigate;return w.useCallback(async(l,d={})=>{let{action:f,method:h,encType:m,formData:g,body:y}=wC(l,t);if(d.navigate===!1){let b=d.fetcherKey||HC();await o(b,i,d.action||f,{defaultShouldRevalidate:d.defaultShouldRevalidate,preventScrollReset:d.preventScrollReset,formData:g,body:y,formMethod:d.method||h,formEncType:d.encType||m,flushSync:d.flushSync})}else await s(d.action||f,{defaultShouldRevalidate:d.defaultShouldRevalidate,preventScrollReset:d.preventScrollReset,formData:g,body:y,formMethod:d.method||h,formEncType:d.encType||m,replace:d.replace,state:d.state,fromRouteId:i,flushSync:d.flushSync,viewTransition:d.viewTransition})},[o,s,t,i])}function KC(e,{relative:t}={}){let{basename:i}=w.useContext(Mr),o=w.useContext(mi);Ne(o,"useFormAction must be used inside a RouteContext");let[s]=o.matches.slice(-1),l={...gc(e||".",{relative:t})},d=ki();if(e==null){l.search=d.search;let f=new URLSearchParams(l.search),h=f.getAll("index");if(h.some(g=>g==="")){f.delete("index"),h.filter(y=>y).forEach(y=>f.append("index",y));let g=f.toString();l.search=g?`?${g}`:""}}return(!e||e===".")&&s.route.index&&(l.search=l.search?l.search.replace(/^\?/,"?index&"):"?index"),i!=="/"&&(l.pathname=l.pathname==="/"?i:Qr([i,l.pathname])),Ai(l)}function GC(e,{relative:t}={}){let i=w.useContext(og);Ne(i!=null,"`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?");let{basename:o}=w4("useViewTransitionState"),s=gc(e,{relative:t});if(!i.isTransitioning)return!1;let l=Zr(i.currentLocation.pathname,o)||i.currentLocation.pathname,d=Zr(i.nextLocation.pathname,o)||i.nextLocation.pathname;return _u(s.pathname,d)!=null||_u(s.pathname,l)!=null}var YC=C_();function QC(e){return w.createElement(dC,{flushSync:YC.flushSync,...e})}const _4=w.createContext({});function S4(e){const t=w.useRef(null);return t.current===null&&(t.current=e()),t.current}const XC=typeof window<"u",WC=XC?w.useLayoutEffect:w.useEffect,hg=w.createContext(null);function pg(e,t){e.indexOf(t)===-1&&e.push(t)}function Eu(e,t){const i=e.indexOf(t);i>-1&&e.splice(i,1)}const Ri=(e,t,i)=>i>t?t:i<e?e:i;let mg=()=>{};const Gn={},E4=e=>/^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e),T4=e=>typeof e=="object"&&e!==null,O4=e=>/^0[^.\s]+$/u.test(e);function C4(e){let t;return()=>(t===void 0&&(t=e()),t)}const Xr=e=>e,yc=(...e)=>e.reduce((t,i)=>o=>i(t(o))),zl=(e,t,i)=>{const o=t-e;return o?(i-e)/o:1};class vg{constructor(){this.subscriptions=[]}add(t){return pg(this.subscriptions,t),()=>Eu(this.subscriptions,t)}notify(t,i,o){const s=this.subscriptions.length;if(s)if(s===1)this.subscriptions[0](t,i,o);else for(let l=0;l<s;l++){const d=this.subscriptions[l];d&&d(t,i,o)}}getSize(){return this.subscriptions.length}clear(){this.subscriptions.length=0}}const kr=e=>e*1e3,Gr=e=>e/1e3,A4=(e,t)=>t?e*(1e3/t):0,R4=(e,t,i)=>(((1-3*i+3*t)*e+(3*i-6*t))*e+3*t)*e,ZC=1e-7,JC=12;function e8(e,t,i,o,s){let l,d,f=0;do d=t+(i-t)/2,l=R4(d,o,s)-e,l>0?i=d:t=d;while(Math.abs(l)>ZC&&++f<JC);return d}function bc(e,t,i,o){if(e===t&&i===o)return Xr;const s=l=>e8(l,0,1,e,i);return l=>l===0||l===1?l:R4(s(l),t,o)}const j4=e=>t=>t<=.5?e(2*t)/2:(2-e(2*(1-t)))/2,k4=e=>t=>1-e(1-t),M4=bc(.33,1.53,.69,.99),gg=k4(M4),D4=j4(gg),z4=e=>e>=1?1:(e*=2)<1?.5*gg(e):.5*(2-Math.pow(2,-10*(e-1))),yg=e=>1-Math.sin(Math.acos(e)),P4=k4(yg),L4=j4(yg),t8=bc(.42,0,1,1),r8=bc(0,0,.58,1),N4=bc(.42,0,.58,1),i8=e=>Array.isArray(e)&&typeof e[0]!="number",$4=e=>Array.isArray(e)&&typeof e[0]=="number",n8={linear:Xr,easeIn:t8,easeInOut:N4,easeOut:r8,circIn:yg,circInOut:L4,circOut:P4,backIn:gg,backInOut:D4,backOut:M4,anticipate:z4},o8=e=>typeof e=="string",Y1=e=>{if($4(e)){mg(e.length===4);const[t,i,o,s]=e;return bc(t,i,o,s)}else if(o8(e))return n8[e];return e},Kd=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function a8(e,t){let i=new Set,o=new Set,s=!1,l=!1;const d=new WeakSet;let f={delta:0,timestamp:0,isProcessing:!1};function h(g){d.has(g)&&(m.schedule(g),e()),g(f)}const m={schedule:(g,y=!1,b=!1)=>{const E=b&&s?i:o;return y&&d.add(g),E.add(g),g},cancel:g=>{o.delete(g),d.delete(g)},process:g=>{if(f=g,s){l=!0;return}s=!0;const y=i;i=o,o=y,i.forEach(h),i.clear(),s=!1,l&&(l=!1,m.process(g))}};return m}const s8=40;function B4(e,t){let i=!1,o=!0;const s={delta:0,timestamp:0,isProcessing:!1},l=()=>i=!0,d=Kd.reduce((z,B)=>(z[B]=a8(l),z),{}),{setup:f,read:h,resolveKeyframes:m,preUpdate:g,update:y,preRender:b,render:_,postRender:E}=d,T=()=>{const z=Gn.useManualTiming,B=z?s.timestamp:performance.now();i=!1,z||(s.delta=o?1e3/60:Math.max(Math.min(B-s.timestamp,s8),1)),s.timestamp=B,s.isProcessing=!0,f.process(s),h.process(s),m.process(s),g.process(s),y.process(s),b.process(s),_.process(s),E.process(s),s.isProcessing=!1,i&&t&&(o=!1,e(T))},O=()=>{i=!0,o=!0,s.isProcessing||e(T)};return{schedule:Kd.reduce((z,B)=>{const H=d[B];return z[B]=(ne,X=!1,A=!1)=>(i||O(),H.schedule(ne,X,A)),z},{}),cancel:z=>{for(let B=0;B<Kd.length;B++)d[Kd[B]].cancel(z)},state:s,steps:d}}const{schedule:ut,cancel:Yn,state:Kt,steps:Mp}=B4(typeof requestAnimationFrame<"u"?requestAnimationFrame:Xr,!0);let uu;function l8(){uu=void 0}const cr={now:()=>(uu===void 0&&cr.set(Kt.isProcessing||Gn.useManualTiming?Kt.timestamp:performance.now()),uu),set:e=>{uu=e,queueMicrotask(l8)}},U4=e=>t=>typeof t=="string"&&t.startsWith(e),I4=U4("--"),c8=U4("var(--"),bg=e=>c8(e)?d8.test(e.split("/*")[0].trim()):!1,d8=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;function Q1(e){return typeof e!="string"?!1:e.split("/*")[0].includes("var(--")}const rs={test:e=>typeof e=="number",parse:parseFloat,transform:e=>e},Pl={...rs,transform:e=>Ri(0,1,e)},Gd={...rs,default:1},wl=e=>Math.round(e*1e5)/1e5,xg=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;function u8(e){return e==null}const f8=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,wg=(e,t)=>i=>!!(typeof i=="string"&&f8.test(i)&&i.startsWith(e)||t&&!u8(i)&&Object.prototype.hasOwnProperty.call(i,t)),V4=(e,t,i)=>o=>{if(typeof o!="string")return o;const[s,l,d,f]=o.match(xg);return{[e]:parseFloat(s),[t]:parseFloat(l),[i]:parseFloat(d),alpha:f!==void 0?parseFloat(f):1}},h8=e=>Ri(0,255,e),Dp={...rs,transform:e=>Math.round(h8(e))},Oo={test:wg("rgb","red"),parse:V4("red","green","blue"),transform:({red:e,green:t,blue:i,alpha:o=1})=>"rgba("+Dp.transform(e)+", "+Dp.transform(t)+", "+Dp.transform(i)+", "+wl(Pl.transform(o))+")"};function p8(e){let t="",i="",o="",s="";return e.length>5?(t=e.substring(1,3),i=e.substring(3,5),o=e.substring(5,7),s=e.substring(7,9)):(t=e.substring(1,2),i=e.substring(2,3),o=e.substring(3,4),s=e.substring(4,5),t+=t,i+=i,o+=o,s+=s),{red:parseInt(t,16),green:parseInt(i,16),blue:parseInt(o,16),alpha:s?parseInt(s,16)/255:1}}const Um={test:wg("#"),parse:p8,transform:Oo.transform},xc=e=>({test:t=>typeof t=="string"&&t.endsWith(e)&&t.split(" ").length===1,parse:parseFloat,transform:t=>`${t}${e}`}),an=xc("deg"),Ci=xc("%"),be=xc("px"),m8=xc("vh"),v8=xc("vw"),X1={...Ci,parse:e=>Ci.parse(e)/100,transform:e=>Ci.transform(e*100)},Ia={test:wg("hsl","hue"),parse:V4("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:i,alpha:o=1})=>"hsla("+Math.round(e)+", "+Ci.transform(wl(t))+", "+Ci.transform(wl(i))+", "+wl(Pl.transform(o))+")"},Pt={test:e=>Oo.test(e)||Um.test(e)||Ia.test(e),parse:e=>Oo.test(e)?Oo.parse(e):Ia.test(e)?Ia.parse(e):Um.parse(e),transform:e=>typeof e=="string"?e:e.hasOwnProperty("red")?Oo.transform(e):Ia.transform(e),getAnimatableNone:e=>{const t=Pt.parse(e);return t.alpha=0,Pt.transform(t)}},g8=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;function y8(e){return isNaN(e)&&typeof e=="string"&&(e.match(xg)?.length||0)+(e.match(g8)?.length||0)>0}const F4="number",H4="color",b8="var",x8="var(",W1="${}",w8=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function Ga(e){const t=e.toString(),i=[],o={color:[],number:[],var:[]},s=[];let l=0;const f=t.replace(w8,h=>(Pt.test(h)?(o.color.push(l),s.push(H4),i.push(Pt.parse(h))):h.startsWith(x8)?(o.var.push(l),s.push(b8),i.push(h)):(o.number.push(l),s.push(F4),i.push(parseFloat(h))),++l,W1)).split(W1);return{values:i,split:f,indexes:o,types:s}}function _8(e){return Ga(e).values}function q4({split:e,types:t}){const i=e.length;return o=>{let s="";for(let l=0;l<i;l++)if(s+=e[l],o[l]!==void 0){const d=t[l];d===F4?s+=wl(o[l]):d===H4?s+=Pt.transform(o[l]):s+=o[l]}return s}}function S8(e){return q4(Ga(e))}const E8=e=>typeof e=="number"?0:Pt.test(e)?Pt.getAnimatableNone(e):e,T8=(e,t)=>typeof e=="number"?t?.trim().endsWith("/")?e:0:E8(e);function O8(e){const t=Ga(e);return q4(t)(t.values.map((o,s)=>T8(o,t.split[s])))}const fi={test:y8,parse:_8,createTransformer:S8,getAnimatableNone:O8};function zp(e,t,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?e+(t-e)*6*i:i<1/2?t:i<2/3?e+(t-e)*(2/3-i)*6:e}function C8({hue:e,saturation:t,lightness:i,alpha:o}){e/=360,t/=100,i/=100;let s=0,l=0,d=0;if(!t)s=l=d=i;else{const f=i<.5?i*(1+t):i+t-i*t,h=2*i-f;s=zp(h,f,e+1/3),l=zp(h,f,e),d=zp(h,f,e-1/3)}return{red:Math.round(s*255),green:Math.round(l*255),blue:Math.round(d*255),alpha:o}}function Tu(e,t){return i=>i>0?t:e}const dt=(e,t,i)=>e+(t-e)*i,Pp=(e,t,i)=>{const o=e*e,s=i*(t*t-o)+o;return s<0?0:Math.sqrt(s)},A8=[Um,Oo,Ia],R8=e=>A8.find(t=>t.test(e));function Z1(e){const t=R8(e);if(!t)return!1;let i=t.parse(e);return t===Ia&&(i=C8(i)),i}const J1=(e,t)=>{const i=Z1(e),o=Z1(t);if(!i||!o)return Tu(e,t);const s={...i};return l=>(s.red=Pp(i.red,o.red,l),s.green=Pp(i.green,o.green,l),s.blue=Pp(i.blue,o.blue,l),s.alpha=dt(i.alpha,o.alpha,l),Oo.transform(s))},Im=new Set(["none","hidden"]);function j8(e,t){return Im.has(e)?i=>i<=0?e:t:i=>i>=1?t:e}function k8(e,t){return i=>dt(e,t,i)}function _g(e){return typeof e=="number"?k8:typeof e=="string"?bg(e)?Tu:Pt.test(e)?J1:z8:Array.isArray(e)?K4:typeof e=="object"?Pt.test(e)?J1:M8:Tu}function K4(e,t){const i=[...e],o=i.length,s=e.map((l,d)=>_g(l)(l,t[d]));return l=>{for(let d=0;d<o;d++)i[d]=s[d](l);return i}}function M8(e,t){const i={...e,...t},o={};for(const s in i)e[s]!==void 0&&t[s]!==void 0&&(o[s]=_g(e[s])(e[s],t[s]));return s=>{for(const l in o)i[l]=o[l](s);return i}}function D8(e,t){const i=[],o={color:0,var:0,number:0};for(let s=0;s<t.values.length;s++){const l=t.types[s],d=e.indexes[l][o[l]],f=e.values[d]??0;i[s]=f,o[l]++}return i}const z8=(e,t)=>{const i=fi.createTransformer(t),o=Ga(e),s=Ga(t);return o.indexes.var.length===s.indexes.var.length&&o.indexes.color.length===s.indexes.color.length&&o.indexes.number.length>=s.indexes.number.length?Im.has(e)&&!s.values.length||Im.has(t)&&!o.values.length?j8(e,t):yc(K4(D8(o,s),s.values),i):Tu(e,t)};function G4(e,t,i){return typeof e=="number"&&typeof t=="number"&&typeof i=="number"?dt(e,t,i):_g(e)(e,t)}const P8=e=>{const t=({timestamp:i})=>e(i);return{start:(i=!0)=>ut.update(t,i),stop:()=>Yn(t),now:()=>Kt.isProcessing?Kt.timestamp:cr.now()}},Y4=(e,t,i=10)=>{let o="";const s=Math.max(Math.round(t/i),2);for(let l=0;l<s;l++)o+=Math.round(e(l/(s-1))*1e4)/1e4+", ";return`linear(${o.substring(0,o.length-2)})`},Ou=2e4;function Sg(e){let t=0;const i=50;let o=e.next(t);for(;!o.done&&t<Ou;)t+=i,o=e.next(t);return t>=Ou?1/0:t}function L8(e,t=100,i){const o=i({...e,keyframes:[0,t]}),s=Math.min(Sg(o),Ou);return{type:"keyframes",ease:l=>o.next(s*l).value/t,duration:Gr(s)}}const St={stiffness:100,damping:10,mass:1,velocity:0,duration:800,bounce:.3,visualDuration:.3,restSpeed:{granular:.01,default:2},restDelta:{granular:.005,default:.5},minDuration:.01,maxDuration:10,minDamping:.05,maxDamping:1};function Vm(e,t){return e*Math.sqrt(1-t*t)}const N8=12;function $8(e,t,i){let o=i;for(let s=1;s<N8;s++)o=o-e(o)/t(o);return o}const Lp=.001;function B8({duration:e=St.duration,bounce:t=St.bounce,velocity:i=St.velocity,mass:o=St.mass}){let s,l,d=1-t;d=Ri(St.minDamping,St.maxDamping,d),e=Ri(St.minDuration,St.maxDuration,Gr(e)),d<1?(s=m=>{const g=m*d,y=g*e,b=g-i,_=Vm(m,d),E=Math.exp(-y);return Lp-b/_*E},l=m=>{const y=m*d*e,b=y*i+i,_=Math.pow(d,2)*Math.pow(m,2)*e,E=Math.exp(-y),T=Vm(Math.pow(m,2),d);return(-s(m)+Lp>0?-1:1)*((b-_)*E)/T}):(s=m=>{const g=Math.exp(-m*e),y=(m-i)*e+1;return-Lp+g*y},l=m=>{const g=Math.exp(-m*e),y=(i-m)*(e*e);return g*y});const f=5/e,h=$8(s,l,f);if(e=kr(e),isNaN(h))return{stiffness:St.stiffness,damping:St.damping,duration:e};{const m=Math.pow(h,2)*o;return{stiffness:m,damping:d*2*Math.sqrt(o*m),duration:e}}}const U8=["duration","bounce"],I8=["stiffness","damping","mass"];function ew(e,t){return t.some(i=>e[i]!==void 0)}function V8(e){let t={velocity:St.velocity,stiffness:St.stiffness,damping:St.damping,mass:St.mass,isResolvedFromDuration:!1,...e};if(!ew(e,I8)&&ew(e,U8))if(t.velocity=0,e.visualDuration){const i=e.visualDuration,o=2*Math.PI/(i*1.2),s=o*o,l=2*Ri(.05,1,1-(e.bounce||0))*Math.sqrt(s);t={...t,mass:St.mass,stiffness:s,damping:l}}else{const i=B8({...e,velocity:0});t={...t,...i,mass:St.mass},t.isResolvedFromDuration=!0}return t}function Cu(e=St.visualDuration,t=St.bounce){const i=typeof e!="object"?{visualDuration:e,keyframes:[0,1],bounce:t}:e;let{restSpeed:o,restDelta:s}=i;const l=i.keyframes[0],d=i.keyframes[i.keyframes.length-1],f={done:!1,value:l},{stiffness:h,damping:m,mass:g,duration:y,velocity:b,isResolvedFromDuration:_}=V8({...i,velocity:-Gr(i.velocity||0)}),E=b||0,T=m/(2*Math.sqrt(h*g)),O=d-l,D=Gr(Math.sqrt(h/g)),C=Math.abs(O)<5;o||(o=C?St.restSpeed.granular:St.restSpeed.default),s||(s=C?St.restDelta.granular:St.restDelta.default);let z,B,H,ne,X,A;if(T<1)H=Vm(D,T),ne=(E+T*D*O)/H,z=ee=>{const J=Math.exp(-T*D*ee);return d-J*(ne*Math.sin(H*ee)+O*Math.cos(H*ee))},X=T*D*ne+O*H,A=T*D*O-ne*H,B=ee=>Math.exp(-T*D*ee)*(X*Math.sin(H*ee)+A*Math.cos(H*ee));else if(T===1){z=J=>d-Math.exp(-D*J)*(O+(E+D*O)*J);const ee=E+D*O;B=J=>Math.exp(-D*J)*(D*ee*J-E)}else{const ee=D*Math.sqrt(T*T-1);z=ie=>{const xe=Math.exp(-T*D*ie),N=Math.min(ee*ie,300);return d-xe*((E+T*D*O)*Math.sinh(N)+ee*O*Math.cosh(N))/ee};const J=(E+T*D*O)/ee,ce=T*D*J-O*ee,_e=T*D*O-J*ee;B=ie=>{const xe=Math.exp(-T*D*ie),N=Math.min(ee*ie,300);return xe*(ce*Math.sinh(N)+_e*Math.cosh(N))}}const le={calculatedDuration:_&&y||null,velocity:ee=>kr(B(ee)),next:ee=>{if(!_&&T<1){const ce=Math.exp(-T*D*ee),_e=Math.sin(H*ee),ie=Math.cos(H*ee),xe=d-ce*(ne*_e+O*ie),N=kr(ce*(X*_e+A*ie));return f.done=Math.abs(N)<=o&&Math.abs(d-xe)<=s,f.value=f.done?d:xe,f}const J=z(ee);if(_)f.done=ee>=y;else{const ce=kr(B(ee));f.done=Math.abs(ce)<=o&&Math.abs(d-J)<=s}return f.value=f.done?d:J,f},toString:()=>{const ee=Math.min(Sg(le),Ou),J=Y4(ce=>le.next(ee*ce).value,ee,30);return ee+"ms "+J},toTransition:()=>{}};return le}Cu.applyToOptions=e=>{const t=L8(e,100,Cu);return e.ease=t.ease,e.duration=kr(t.duration),e.type="keyframes",e};const F8=5;function Q4(e,t,i){const o=Math.max(t-F8,0);return A4(i-e(o),t-o)}function Fm({keyframes:e,velocity:t=0,power:i=.8,timeConstant:o=325,bounceDamping:s=10,bounceStiffness:l=500,modifyTarget:d,min:f,max:h,restDelta:m=.5,restSpeed:g}){const y=e[0],b={done:!1,value:y},_=A=>f!==void 0&&A<f||h!==void 0&&A>h,E=A=>f===void 0?h:h===void 0||Math.abs(f-A)<Math.abs(h-A)?f:h;let T=i*t;const O=y+T,D=d===void 0?O:d(O);D!==O&&(T=D-y);const C=A=>-T*Math.exp(-A/o),z=A=>D+C(A),B=A=>{const le=C(A),ee=z(A);b.done=Math.abs(le)<=m,b.value=b.done?D:ee};let H,ne;const X=A=>{_(b.value)&&(H=A,ne=Cu({keyframes:[b.value,E(b.value)],velocity:Q4(z,A,b.value),damping:s,stiffness:l,restDelta:m,restSpeed:g}))};return X(0),{calculatedDuration:null,next:A=>{let le=!1;return!ne&&H===void 0&&(le=!0,B(A),X(A)),H!==void 0&&A>=H?ne.next(A-H):(!le&&B(A),b)}}}function H8(e,t,i){const o=[],s=i||Gn.mix||G4,l=e.length-1;for(let d=0;d<l;d++){let f=s(e[d],e[d+1]);if(t){const h=Array.isArray(t)?t[d]||Xr:t;f=yc(h,f)}o.push(f)}return o}function q8(e,t,{clamp:i=!0,ease:o,mixer:s}={}){const l=e.length;if(mg(l===t.length),l===1)return()=>t[0];if(l===2&&t[0]===t[1])return()=>t[1];const d=e[0]===e[1];e[0]>e[l-1]&&(e=[...e].reverse(),t=[...t].reverse());const f=H8(t,o,s),h=f.length,m=g=>{if(d&&g<e[0])return t[0];let y=0;if(h>1)for(;y<e.length-2&&!(g<e[y+1]);y++);const b=zl(e[y],e[y+1],g);return f[y](b)};return i?g=>m(Ri(e[0],e[l-1],g)):m}function K8(e,t){const i=e[e.length-1];for(let o=1;o<=t;o++){const s=zl(0,t,o);e.push(dt(i,1,s))}}function G8(e){const t=[0];return K8(t,e.length-1),t}function Y8(e,t){return e.map(i=>i*t)}function Q8(e,t){return e.map(()=>t||N4).splice(0,e.length-1)}function _l({duration:e=300,keyframes:t,times:i,ease:o="easeInOut"}){const s=i8(o)?o.map(Y1):Y1(o),l={done:!1,value:t[0]},d=Y8(i&&i.length===t.length?i:G8(t),e),f=q8(d,t,{ease:Array.isArray(s)?s:Q8(t,s)});return{calculatedDuration:e,next:h=>(l.value=f(h),l.done=h>=e,l)}}const X8=e=>e!==null;function Xu(e,{repeat:t,repeatType:i="loop"},o,s=1){const l=e.filter(X8),f=s<0||t&&i!=="loop"&&t%2===1?0:l.length-1;return!f||o===void 0?l[f]:o}const W8={decay:Fm,inertia:Fm,tween:_l,keyframes:_l,spring:Cu};function X4(e){typeof e.type=="string"&&(e.type=W8[e.type])}class Eg{constructor(){this.updateFinished()}get finished(){return this._finished}updateFinished(){this._finished=new Promise(t=>{this.resolve=t})}notifyFinished(){this.resolve()}then(t,i){return this.finished.then(t,i)}}const Z8=e=>e/100;class Au extends Eg{constructor(t){super(),this.state="idle",this.startTime=null,this.isStopped=!1,this.currentTime=0,this.holdTime=null,this.playbackSpeed=1,this.delayState={done:!1,value:void 0},this.stop=()=>{const{motionValue:i}=this.options;i&&i.updatedAt!==cr.now()&&this.tick(cr.now()),this.isStopped=!0,this.state!=="idle"&&(this.teardown(),this.options.onStop?.())},this.options=t,this.initAnimation(),this.play(),t.autoplay===!1&&this.pause()}initAnimation(){const{options:t}=this;X4(t);const{type:i=_l,repeat:o=0,repeatDelay:s=0,repeatType:l,velocity:d=0}=t;let{keyframes:f}=t;const h=i||_l;h!==_l&&typeof f[0]!="number"&&(this.mixKeyframes=yc(Z8,G4(f[0],f[1])),f=[0,100]);const m=h({...t,keyframes:f});l==="mirror"&&(this.mirroredGenerator=h({...t,keyframes:[...f].reverse(),velocity:-d})),m.calculatedDuration===null&&(m.calculatedDuration=Sg(m));const{calculatedDuration:g}=m;this.calculatedDuration=g,this.resolvedDuration=g+s,this.totalDuration=this.resolvedDuration*(o+1)-s,this.generator=m}updateTime(t){const i=Math.round(t-this.startTime)*this.playbackSpeed;this.holdTime!==null?this.currentTime=this.holdTime:this.currentTime=i}tick(t,i=!1){const{generator:o,totalDuration:s,mixKeyframes:l,mirroredGenerator:d,resolvedDuration:f,calculatedDuration:h}=this;if(this.startTime===null)return o.next(0);const{delay:m=0,keyframes:g,repeat:y,repeatType:b,repeatDelay:_,type:E,onUpdate:T,finalKeyframe:O}=this.options;this.speed>0?this.startTime=Math.min(this.startTime,t):this.speed<0&&(this.startTime=Math.min(t-s/this.speed,this.startTime)),i?this.currentTime=t:this.updateTime(t);const D=this.currentTime-m*(this.playbackSpeed>=0?1:-1),C=this.playbackSpeed>=0?D<0:D>s;this.currentTime=Math.max(D,0),this.state==="finished"&&this.holdTime===null&&(this.currentTime=s);let z=this.currentTime,B=o;if(y){const A=Math.min(this.currentTime,s)/f;let le=Math.floor(A),ee=A%1;!ee&&A>=1&&(ee=1),ee===1&&le--,le=Math.min(le,y+1),le%2&&(b==="reverse"?(ee=1-ee,_&&(ee-=_/f)):b==="mirror"&&(B=d)),z=Ri(0,1,ee)*f}let H;C?(this.delayState.value=g[0],H=this.delayState):H=B.next(z),l&&!C&&(H.value=l(H.value));let{done:ne}=H;!C&&h!==null&&(ne=this.playbackSpeed>=0?this.currentTime>=s:this.currentTime<=0);const X=this.holdTime===null&&(this.state==="finished"||this.state==="running"&&ne);return X&&E!==Fm&&(H.value=Xu(g,this.options,O,this.speed)),T&&T(H.value),X&&this.finish(),H}then(t,i){return this.finished.then(t,i)}get duration(){return Gr(this.calculatedDuration)}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+Gr(t)}get time(){return Gr(this.currentTime)}set time(t){t=kr(t),this.currentTime=t,this.startTime===null||this.holdTime!==null||this.playbackSpeed===0?this.holdTime=t:this.driver&&(this.startTime=this.driver.now()-t/this.playbackSpeed),this.driver?this.driver.start(!1):(this.startTime=0,this.state="paused",this.holdTime=t,this.tick(t))}getGeneratorVelocity(){const t=this.currentTime;if(t<=0)return this.options.velocity||0;if(this.generator.velocity)return this.generator.velocity(t);const i=this.generator.next(t).value;return Q4(o=>this.generator.next(o).value,t,i)}get speed(){return this.playbackSpeed}set speed(t){const i=this.playbackSpeed!==t;i&&this.driver&&this.updateTime(cr.now()),this.playbackSpeed=t,i&&this.driver&&(this.time=Gr(this.currentTime))}play(){if(this.isStopped)return;const{driver:t=P8,startTime:i}=this.options;this.driver||(this.driver=t(s=>this.tick(s))),this.options.onPlay?.();const o=this.driver.now();this.state==="finished"?(this.updateFinished(),this.startTime=o):this.holdTime!==null?this.startTime=o-this.holdTime:this.startTime||(this.startTime=i??o),this.state==="finished"&&this.speed<0&&(this.startTime+=this.calculatedDuration),this.holdTime=null,this.state="running",this.driver.start()}pause(){this.state="paused",this.updateTime(cr.now()),this.holdTime=this.currentTime}complete(){this.state!=="running"&&this.play(),this.state="finished",this.holdTime=null}finish(){this.notifyFinished(),this.teardown(),this.state="finished",this.options.onComplete?.()}cancel(){this.holdTime=null,this.startTime=0,this.tick(0),this.teardown(),this.options.onCancel?.()}teardown(){this.state="idle",this.stopDriver(),this.startTime=this.holdTime=null}stopDriver(){this.driver&&(this.driver.stop(),this.driver=void 0)}sample(t){return this.startTime=0,this.tick(t,!0)}attachTimeline(t){return this.options.allowFlatten&&(this.options.type="keyframes",this.options.ease="linear",this.initAnimation()),this.driver?.stop(),t.observe(this)}}function J8(e){for(let t=1;t<e.length;t++)e[t]??(e[t]=e[t-1])}const Co=e=>e*180/Math.PI,Hm=e=>{const t=Co(Math.atan2(e[1],e[0]));return qm(t)},eA={x:4,y:5,translateX:4,translateY:5,scaleX:0,scaleY:3,scale:e=>(Math.abs(e[0])+Math.abs(e[3]))/2,rotate:Hm,rotateZ:Hm,skewX:e=>Co(Math.atan(e[1])),skewY:e=>Co(Math.atan(e[2])),skew:e=>(Math.abs(e[1])+Math.abs(e[2]))/2},qm=e=>(e=e%360,e<0&&(e+=360),e),tw=Hm,rw=e=>Math.sqrt(e[0]*e[0]+e[1]*e[1]),iw=e=>Math.sqrt(e[4]*e[4]+e[5]*e[5]),tA={x:12,y:13,z:14,translateX:12,translateY:13,translateZ:14,scaleX:rw,scaleY:iw,scale:e=>(rw(e)+iw(e))/2,rotateX:e=>qm(Co(Math.atan2(e[6],e[5]))),rotateY:e=>qm(Co(Math.atan2(-e[2],e[0]))),rotateZ:tw,rotate:tw,skewX:e=>Co(Math.atan(e[4])),skewY:e=>Co(Math.atan(e[1])),skew:e=>(Math.abs(e[1])+Math.abs(e[4]))/2};function Km(e){return e.includes("scale")?1:0}function Gm(e,t){if(!e||e==="none")return Km(t);const i=e.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);let o,s;if(i)o=tA,s=i;else{const f=e.match(/^matrix\(([-\d.e\s,]+)\)$/u);o=eA,s=f}if(!s)return Km(t);const l=o[t],d=s[1].split(",").map(iA);return typeof l=="function"?l(d):d[l]}const rA=(e,t)=>{const{transform:i="none"}=getComputedStyle(e);return Gm(i,t)};function iA(e){return parseFloat(e.trim())}const is=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],ns=new Set([...is,"pathRotation"]),nw=e=>e===rs||e===be,nA=new Set(["x","y","z"]),oA=is.filter(e=>!nA.has(e));function aA(e){const t=[];return oA.forEach(i=>{const o=e.getValue(i);o!==void 0&&(t.push([i,o.get()]),o.set(i.startsWith("scale")?1:0))}),t}const qn={width:({x:e},{paddingLeft:t="0",paddingRight:i="0",boxSizing:o})=>{const s=e.max-e.min;return o==="border-box"?s:s-parseFloat(t)-parseFloat(i)},height:({y:e},{paddingTop:t="0",paddingBottom:i="0",boxSizing:o})=>{const s=e.max-e.min;return o==="border-box"?s:s-parseFloat(t)-parseFloat(i)},top:(e,{top:t})=>parseFloat(t),left:(e,{left:t})=>parseFloat(t),bottom:({y:e},{top:t})=>parseFloat(t)+(e.max-e.min),right:({x:e},{left:t})=>parseFloat(t)+(e.max-e.min),x:(e,{transform:t})=>Gm(t,"x"),y:(e,{transform:t})=>Gm(t,"y")};qn.translateX=qn.x;qn.translateY=qn.y;const jo=new Set;let Ym=!1,Qm=!1,Xm=!1;function W4(){if(Qm){const e=Array.from(jo).filter(o=>o.needsMeasurement),t=new Set(e.map(o=>o.element)),i=new Map;t.forEach(o=>{const s=aA(o);s.length&&(i.set(o,s),o.render())}),e.forEach(o=>o.measureInitialState()),t.forEach(o=>{o.render();const s=i.get(o);s&&s.forEach(([l,d])=>{o.getValue(l)?.set(d)})}),e.forEach(o=>o.measureEndState()),e.forEach(o=>{o.suspendedScrollY!==void 0&&window.scrollTo(0,o.suspendedScrollY)})}Qm=!1,Ym=!1,jo.forEach(e=>e.complete(Xm)),jo.clear()}function Z4(){jo.forEach(e=>{e.readKeyframes(),e.needsMeasurement&&(Qm=!0)})}function sA(){Xm=!0,Z4(),W4(),Xm=!1}class Tg{constructor(t,i,o,s,l,d=!1){this.state="pending",this.isAsync=!1,this.needsMeasurement=!1,this.unresolvedKeyframes=[...t],this.onComplete=i,this.name=o,this.motionValue=s,this.element=l,this.isAsync=d}scheduleResolve(){this.state="scheduled",this.isAsync?(jo.add(this),Ym||(Ym=!0,ut.read(Z4),ut.resolveKeyframes(W4))):(this.readKeyframes(),this.complete())}readKeyframes(){const{unresolvedKeyframes:t,name:i,element:o,motionValue:s}=this;if(t[0]===null){const l=s?.get(),d=t[t.length-1];if(l!==void 0)t[0]=l;else if(o&&i){const f=o.readValue(i,d);f!=null&&(t[0]=f)}t[0]===void 0&&(t[0]=d),s&&l===void 0&&s.set(t[0])}J8(t)}setFinalKeyframe(){}measureInitialState(){}renderEndStyles(){}measureEndState(){}complete(t=!1){this.state="complete",this.onComplete(this.unresolvedKeyframes,this.finalKeyframe,t),jo.delete(this)}cancel(){this.state==="scheduled"&&(jo.delete(this),this.state="pending")}resume(){this.state==="pending"&&this.scheduleResolve()}}const lA=e=>e.startsWith("--");function J4(e,t,i){lA(t)?e.style.setProperty(t,i):e.style[t]=i}const cA={};function eS(e,t){const i=C4(e);return()=>cA[t]??i()}const dA=eS(()=>window.ScrollTimeline!==void 0,"scrollTimeline"),tS=eS(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch{return!1}return!0},"linearEasing"),gl=([e,t,i,o])=>`cubic-bezier(${e}, ${t}, ${i}, ${o})`,ow={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:gl([0,.65,.55,1]),circOut:gl([.55,0,1,.45]),backIn:gl([.31,.01,.66,-.59]),backOut:gl([.33,1.53,.69,.99])};function rS(e,t){if(e)return typeof e=="function"?tS()?Y4(e,t):"ease-out":$4(e)?gl(e):Array.isArray(e)?e.map(i=>rS(i,t)||ow.easeOut):ow[e]}function uA(e,t,i,{delay:o=0,duration:s=300,repeat:l=0,repeatType:d="loop",ease:f="easeOut",times:h}={},m=void 0){const g={[t]:i};h&&(g.offset=h);const y=rS(f,s);Array.isArray(y)&&(g.easing=y);const b={delay:o,duration:s,easing:Array.isArray(y)?"linear":y,fill:"both",iterations:l+1,direction:d==="reverse"?"alternate":"normal"};return m&&(b.pseudoElement=m),e.animate(g,b)}function iS(e){return typeof e=="function"&&"applyToOptions"in e}function fA({type:e,...t}){return iS(e)&&tS()?e.applyToOptions(t):(t.duration??(t.duration=300),t.ease??(t.ease="easeOut"),t)}class nS extends Eg{constructor(t){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!t)return;const{element:i,name:o,keyframes:s,pseudoElement:l,allowFlatten:d=!1,finalKeyframe:f,onComplete:h}=t;this.isPseudoElement=!!l,this.allowFlatten=d,this.options=t,mg(typeof t.type!="string");const m=fA(t);this.animation=uA(i,o,s,m,l),m.autoplay===!1&&this.animation.pause(),this.animation.onfinish=()=>{if(this.finishedTime=this.time,!l){const g=Xu(s,this.options,f,this.speed);this.updateMotionValue&&this.updateMotionValue(g),J4(i,o,g),this.animation.cancel()}h?.(),this.notifyFinished()}}play(){this.isStopped||(this.manualStartTime=null,this.animation.play(),this.state==="finished"&&this.updateFinished())}pause(){this.animation.pause()}complete(){this.animation.finish?.()}cancel(){try{this.animation.cancel()}catch{}}stop(){if(this.isStopped)return;this.isStopped=!0;const{state:t}=this;t==="idle"||t==="finished"||(this.updateMotionValue?this.updateMotionValue():this.commitStyles(),this.isPseudoElement||this.cancel())}commitStyles(){const t=this.options?.element;!this.isPseudoElement&&t?.isConnected&&this.animation.commitStyles?.()}get duration(){const t=this.animation.effect?.getComputedTiming?.().duration||0;return Gr(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+Gr(t)}get time(){return Gr(Number(this.animation.currentTime)||0)}set time(t){const i=this.finishedTime!==null;this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=kr(t),i&&this.animation.pause()}get speed(){return this.animation.playbackRate}set speed(t){t<0&&(this.finishedTime=null),this.animation.playbackRate=t}get state(){return this.finishedTime!==null?"finished":this.animation.playState}get startTime(){return this.manualStartTime??Number(this.animation.startTime)}set startTime(t){this.manualStartTime=this.animation.startTime=t}attachTimeline({timeline:t,rangeStart:i,rangeEnd:o,observe:s}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,t&&dA()?(this.animation.timeline=t,i&&(this.animation.rangeStart=i),o&&(this.animation.rangeEnd=o),Xr):s(this)}}const oS={anticipate:z4,backInOut:D4,circInOut:L4};function hA(e){return e in oS}function pA(e){typeof e.ease=="string"&&hA(e.ease)&&(e.ease=oS[e.ease])}const Np=10;class mA extends nS{constructor(t){pA(t),X4(t),super(t),t.startTime!==void 0&&t.autoplay!==!1&&(this.startTime=t.startTime),this.options=t}updateMotionValue(t){const{motionValue:i,onUpdate:o,onComplete:s,element:l,...d}=this.options;if(!i)return;if(t!==void 0){i.set(t);return}const f=new Au({...d,autoplay:!1}),h=Math.max(Np,cr.now()-this.startTime),m=Ri(0,Np,h-Np),g=f.sample(h).value,{name:y}=this.options;l&&y&&J4(l,y,g),i.setWithVelocity(f.sample(Math.max(0,h-m)).value,g,m),f.stop()}}const aw=(e,t)=>t==="zIndex"?!1:!!(typeof e=="number"||Array.isArray(e)||typeof e=="string"&&(fi.test(e)||e==="0")&&!e.startsWith("url("));function vA(e){const t=e[0];if(e.length===1)return!0;for(let i=0;i<e.length;i++)if(e[i]!==t)return!0}function gA(e,t,i,o){const s=e[0];if(s===null)return!1;if(t==="display"||t==="visibility")return!0;const l=e[e.length-1],d=aw(s,t),f=aw(l,t);return!d||!f?!1:vA(e)||(i==="spring"||iS(i))&&o}function Wm(e){e.duration=0,e.type="keyframes"}const aS=new Set(["opacity","clipPath","filter","transform"]),yA=/^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;function bA(e){for(let t=0;t<e.length;t++)if(typeof e[t]=="string"&&yA.test(e[t]))return!0;return!1}const xA=new Set(["color","backgroundColor","outlineColor","fill","stroke","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"]),wA=C4(()=>Object.hasOwnProperty.call(Element.prototype,"animate"));function _A(e){const{motionValue:t,name:i,repeatDelay:o,repeatType:s,damping:l,type:d,keyframes:f}=e;if(!(t?.owner?.current instanceof HTMLElement))return!1;const{onUpdate:m,transformTemplate:g}=t.owner.getProps();return wA()&&i&&(aS.has(i)||xA.has(i)&&bA(f))&&(i!=="transform"||!g)&&!m&&!o&&s!=="mirror"&&l!==0&&d!=="inertia"}const SA=40;class EA extends Eg{constructor({autoplay:t=!0,delay:i=0,type:o="keyframes",repeat:s=0,repeatDelay:l=0,repeatType:d="loop",keyframes:f,name:h,motionValue:m,element:g,...y}){super(),this.stop=()=>{this._animation&&(this._animation.stop(),this.stopTimeline?.()),this.keyframeResolver?.cancel()},this.createdAt=cr.now();const b={autoplay:t,delay:i,type:o,repeat:s,repeatDelay:l,repeatType:d,name:h,motionValue:m,element:g,...y},_=g?.KeyframeResolver||Tg;this.keyframeResolver=new _(f,(E,T,O)=>this.onKeyframesResolved(E,T,b,!O),h,m,g),this.keyframeResolver?.scheduleResolve()}onKeyframesResolved(t,i,o,s){this.keyframeResolver=void 0;const{name:l,type:d,velocity:f,delay:h,isHandoff:m,onUpdate:g}=o;this.resolvedAt=cr.now();let y=!0;gA(t,l,d,f)||(y=!1,(Gn.instantAnimations||!h)&&g?.(Xu(t,o,i)),t[0]=t[t.length-1],Wm(o),o.repeat=0);const _={startTime:s?this.resolvedAt?this.resolvedAt-this.createdAt>SA?this.resolvedAt:this.createdAt:this.createdAt:void 0,finalKeyframe:i,...o,keyframes:t},E=y&&!m&&_A(_),T=_.motionValue?.owner?.current;let O;if(E)try{O=new mA({..._,element:T})}catch{O=new Au(_)}else O=new Au(_);O.finished.then(()=>{this.notifyFinished()}).catch(Xr),this.pendingTimeline&&(this.stopTimeline=O.attachTimeline(this.pendingTimeline),this.pendingTimeline=void 0),this._animation=O}get finished(){return this._animation?this.animation.finished:this._finished}then(t,i){return this.finished.finally(t).then(()=>{})}get animation(){return this._animation||(this.keyframeResolver?.resume(),sA()),this._animation}get duration(){return this.animation.duration}get iterationDuration(){return this.animation.iterationDuration}get time(){return this.animation.time}set time(t){this.animation.time=t}get speed(){return this.animation.speed}get state(){return this.animation.state}set speed(t){this.animation.speed=t}get startTime(){return this.animation.startTime}attachTimeline(t){return this._animation?this.stopTimeline=this.animation.attachTimeline(t):this.pendingTimeline=t,()=>this.stop()}play(){this.animation.play()}pause(){this.animation.pause()}complete(){this.animation.complete()}cancel(){this._animation&&this.animation.cancel(),this.keyframeResolver?.cancel()}}function sS(e,t,i,o=0,s=1){const l=Array.from(e).sort((m,g)=>m.sortNodePosition(g)).indexOf(t),d=e.size,f=(d-1)*o;return typeof i=="function"?i(l,d):s===1?l*o:f-l*o}const sw=30,TA=e=>!isNaN(parseFloat(e));class OA{constructor(t,i={}){this.canTrackVelocity=null,this.events={},this.updateAndNotify=o=>{const s=cr.now();if(this.updatedAt!==s&&this.setPrevFrameValue(),this.prev=this.current,this.setCurrent(o),this.current!==this.prev&&(this.events.change?.notify(this.current),this.dependents))for(const l of this.dependents)l.dirty()},this.hasAnimated=!1,this.setCurrent(t),this.owner=i.owner}setCurrent(t){this.current=t,this.updatedAt=cr.now(),this.canTrackVelocity===null&&t!==void 0&&(this.canTrackVelocity=TA(this.current))}setPrevFrameValue(t=this.current){this.prevFrameValue=t,this.prevUpdatedAt=this.updatedAt}onChange(t){return this.on("change",t)}on(t,i){this.events[t]||(this.events[t]=new vg);const o=this.events[t].add(i);return t==="change"?()=>{o(),ut.read(()=>{this.events.change.getSize()||this.stop()})}:o}clearListeners(){for(const t in this.events)this.events[t].clear()}attach(t,i){this.passiveEffect=t,this.stopPassiveEffect=i}set(t){this.passiveEffect?this.passiveEffect(t,this.updateAndNotify):this.updateAndNotify(t)}setWithVelocity(t,i,o){this.set(i),this.prev=void 0,this.prevFrameValue=t,this.prevUpdatedAt=this.updatedAt-o}jump(t,i=!0){this.updateAndNotify(t),this.prev=t,this.prevUpdatedAt=this.prevFrameValue=void 0,i&&this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}dirty(){this.events.change?.notify(this.current)}addDependent(t){this.dependents||(this.dependents=new Set),this.dependents.add(t)}removeDependent(t){this.dependents&&this.dependents.delete(t)}get(){return this.current}getPrevious(){return this.prev}getVelocity(){const t=cr.now();if(!this.canTrackVelocity||this.prevFrameValue===void 0||t-this.updatedAt>sw)return 0;const i=Math.min(this.updatedAt-this.prevUpdatedAt,sw);return A4(parseFloat(this.current)-parseFloat(this.prevFrameValue),i)}start(t){return this.stop(),new Promise(i=>{this.hasAnimated=!0,this.animation=t(i),this.events.animationStart&&this.events.animationStart.notify()}).then(()=>{this.events.animationComplete&&this.events.animationComplete.notify(),this.clearAnimation()})}stop(){this.animation&&(this.animation.stop(),this.events.animationCancel&&this.events.animationCancel.notify()),this.clearAnimation()}isAnimating(){return!!this.animation}clearAnimation(){delete this.animation}destroy(){this.dependents?.clear(),this.events.destroy?.notify(),this.clearListeners(),this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}}function Ya(e,t){return new OA(e,t)}function Og(e,t){if(e?.inherit&&t){const{inherit:i,...o}=e;return{...t,...o}}return e}function Cg(e,t){const i=e?.[t]??e?.default??e;return i!==e?Og(i,e):i}const CA={type:"spring",stiffness:500,damping:25,restSpeed:10},AA=e=>({type:"spring",stiffness:550,damping:e===0?2*Math.sqrt(550):30,restSpeed:10}),RA={type:"keyframes",duration:.8},jA={type:"keyframes",ease:[.25,.1,.35,1],duration:.3},kA=(e,{keyframes:t})=>t.length>2?RA:ns.has(e)?e.startsWith("scale")?AA(t[1]):CA:jA,MA=new Set(["when","delay","delayChildren","staggerChildren","staggerDirection","repeat","repeatType","repeatDelay","from","elapsed"]);function DA(e){for(const t in e)if(!MA.has(t))return!0;return!1}const Ag=(e,t,i,o={},s,l)=>d=>{const f=Cg(o,e)||{},h=f.delay||o.delay||0;let{elapsed:m=0}=o;m=m-kr(h);const g={keyframes:Array.isArray(i)?i:[null,i],ease:"easeOut",velocity:t.getVelocity(),...f,delay:-m,onUpdate:b=>{t.set(b),f.onUpdate&&f.onUpdate(b)},onComplete:()=>{d(),f.onComplete&&f.onComplete()},name:e,motionValue:t,element:l?void 0:s};DA(f)||Object.assign(g,kA(e,g)),g.duration&&(g.duration=kr(g.duration)),g.repeatDelay&&(g.repeatDelay=kr(g.repeatDelay)),g.from!==void 0&&(g.keyframes[0]=g.from);let y=!1;if((g.type===!1||g.duration===0&&!g.repeatDelay)&&(Wm(g),g.delay===0&&(y=!0)),(Gn.instantAnimations||Gn.skipAnimations||s?.shouldSkipAnimations||f.skipAnimations)&&(y=!0,Wm(g),g.delay=0),g.allowFlatten=!f.type&&!f.ease,y&&!l&&t.get()!==void 0){const b=Xu(g.keyframes,f);if(b!==void 0){ut.update(()=>{g.onUpdate(b),g.onComplete()});return}}return f.isSync?new Au(g):new EA(g)},zA=/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;function PA(e){const t=zA.exec(e);if(!t)return[,];const[,i,o,s]=t;return[`--${i??o}`,s]}function lS(e,t,i=1){const[o,s]=PA(e);if(!o)return;const l=window.getComputedStyle(t).getPropertyValue(o);if(l){const d=l.trim();return E4(d)?parseFloat(d):d}return bg(s)?lS(s,t,i+1):s}function lw(e){const t=[{},{}];return e?.values.forEach((i,o)=>{t[0][o]=i.get(),t[1][o]=i.getVelocity()}),t}function Rg(e,t,i,o){if(typeof t=="function"){const[s,l]=lw(o);t=t(i!==void 0?i:e.custom,s,l)}if(typeof t=="string"&&(t=e.variants&&e.variants[t]),typeof t=="function"){const[s,l]=lw(o);t=t(i!==void 0?i:e.custom,s,l)}return t}function ko(e,t,i){const o=e.getProps();return Rg(o,t,i!==void 0?i:o.custom,e)}const cS=new Set(["width","height","top","left","right","bottom",...is]),Zm=e=>Array.isArray(e);function LA(e,t,i){e.hasValue(t)?e.getValue(t).set(i):e.addValue(t,Ya(i))}function NA(e){return Zm(e)?e[e.length-1]||0:e}function $A(e,t){const i=ko(e,t);let{transitionEnd:o={},transition:s={},...l}=i||{};l={...l,...o};for(const d in l){const f=NA(l[d]);LA(e,d,f)}}const Gt=e=>!!(e&&e.getVelocity);function BA(e){return!!(Gt(e)&&e.add)}function Jm(e,t){const i=e.getValue("willChange");if(BA(i))return i.add(t);if(!i&&Gn.WillChange){const o=new Gn.WillChange("auto");e.addValue("willChange",o),o.add(t)}}function jg(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}const UA="framerAppearId",dS="data-"+jg(UA);function uS(e){return e.props[dS]}function IA({protectedKeys:e,needsAnimating:t},i){const o=e.hasOwnProperty(i)&&t[i]!==!0;return t[i]=!1,o}function fS(e,t,{delay:i=0,transitionOverride:o,type:s}={}){let{transition:l,transitionEnd:d,...f}=t;const h=e.getDefaultTransition();l=l?Og(l,h):h;const m=l?.reduceMotion,g=l?.skipAnimations;o&&(l=o);const y=[],b=s&&e.animationState&&e.animationState.getState()[s],_=l?.path;_&&_.animateVisualElement(e,f,l,i,y);for(const E in f){const T=e.getValue(E,e.latestValues[E]??null),O=f[E];if(O===void 0||b&&IA(b,E))continue;const D={delay:i,...Cg(l||{},E)};g&&(D.skipAnimations=!0);const C=T.get();if(C!==void 0&&!T.isAnimating()&&!Array.isArray(O)&&O===C&&!D.velocity){ut.update(()=>T.set(O));continue}let z=!1;if(window.MotionHandoffAnimation){const ne=uS(e);if(ne){const X=window.MotionHandoffAnimation(ne,E,ut);X!==null&&(D.startTime=X,z=!0)}}Jm(e,E);const B=m??e.shouldReduceMotion;T.start(Ag(E,T,O,B&&cS.has(E)?{type:!1}:D,e,z));const H=T.animation;H&&y.push(H)}if(d){const E=()=>ut.update(()=>{d&&$A(e,d)});y.length?Promise.all(y).then(E):E()}return y}function ev(e,t,i={}){const o=ko(e,t,i.type==="exit"?e.presenceContext?.custom:void 0);let{transition:s=e.getDefaultTransition()||{}}=o||{};i.transitionOverride&&(s=i.transitionOverride);const l=o?()=>Promise.all(fS(e,o,i)):()=>Promise.resolve(),d=e.variantChildren&&e.variantChildren.size?(h=0)=>{const{delayChildren:m=0,staggerChildren:g,staggerDirection:y}=s;return VA(e,t,h,m,g,y,i)}:()=>Promise.resolve(),{when:f}=s;if(f){const[h,m]=f==="beforeChildren"?[l,d]:[d,l];return h().then(()=>m())}else return Promise.all([l(),d(i.delay)])}function VA(e,t,i=0,o=0,s=0,l=1,d){const f=[];for(const h of e.variantChildren)h.notify("AnimationStart",t),f.push(ev(h,t,{...d,delay:i+(typeof o=="function"?0:o)+sS(e.variantChildren,h,o,s,l)}).then(()=>h.notify("AnimationComplete",t)));return Promise.all(f)}function FA(e,t,i={}){e.notify("AnimationStart",t);let o;if(Array.isArray(t)){const s=t.map(l=>ev(e,l,i));o=Promise.all(s)}else if(typeof t=="string")o=ev(e,t,i);else{const s=typeof t=="function"?ko(e,t,i.custom):t;o=Promise.all(fS(e,s,i))}return o.then(()=>{e.notify("AnimationComplete",t)})}const HA={test:e=>e==="auto",parse:e=>e},hS=e=>t=>t.test(e),pS=[rs,be,Ci,an,v8,m8,HA],cw=e=>pS.find(hS(e));function qA(e){return typeof e=="number"?e===0:e!==null?e==="none"||e==="0"||O4(e):!0}const KA=new Set(["brightness","contrast","saturate","opacity"]);function GA(e){const[t,i]=e.slice(0,-1).split("(");if(t==="drop-shadow")return e;const[o]=i.match(xg)||[];if(!o)return e;const s=i.replace(o,"");let l=KA.has(t)?1:0;return o!==i&&(l*=100),t+"("+l+s+")"}const YA=/\b([a-z-]*)\(.*?\)/gu,tv={...fi,getAnimatableNone:e=>{const t=e.match(YA);return t?t.map(GA).join(" "):e}},rv={...fi,getAnimatableNone:e=>{const t=fi.parse(e);return fi.createTransformer(e)(t.map(o=>typeof o=="number"?0:typeof o=="object"?{...o,alpha:1}:o))}},dw={...rs,transform:Math.round},QA={rotate:an,pathRotation:an,rotateX:an,rotateY:an,rotateZ:an,scale:Gd,scaleX:Gd,scaleY:Gd,scaleZ:Gd,skew:an,skewX:an,skewY:an,distance:be,translateX:be,translateY:be,translateZ:be,x:be,y:be,z:be,perspective:be,transformPerspective:be,opacity:Pl,originX:X1,originY:X1,originZ:be},Ru={borderWidth:be,borderTopWidth:be,borderRightWidth:be,borderBottomWidth:be,borderLeftWidth:be,borderRadius:be,borderTopLeftRadius:be,borderTopRightRadius:be,borderBottomRightRadius:be,borderBottomLeftRadius:be,width:be,maxWidth:be,height:be,maxHeight:be,top:be,right:be,bottom:be,left:be,inset:be,insetBlock:be,insetBlockStart:be,insetBlockEnd:be,insetInline:be,insetInlineStart:be,insetInlineEnd:be,padding:be,paddingTop:be,paddingRight:be,paddingBottom:be,paddingLeft:be,paddingBlock:be,paddingBlockStart:be,paddingBlockEnd:be,paddingInline:be,paddingInlineStart:be,paddingInlineEnd:be,margin:be,marginTop:be,marginRight:be,marginBottom:be,marginLeft:be,marginBlock:be,marginBlockStart:be,marginBlockEnd:be,marginInline:be,marginInlineStart:be,marginInlineEnd:be,fontSize:be,backgroundPositionX:be,backgroundPositionY:be,...QA,zIndex:dw,fillOpacity:Pl,strokeOpacity:Pl,numOctaves:dw},XA={...Ru,color:Pt,backgroundColor:Pt,outlineColor:Pt,fill:Pt,stroke:Pt,borderColor:Pt,borderTopColor:Pt,borderRightColor:Pt,borderBottomColor:Pt,borderLeftColor:Pt,filter:tv,WebkitFilter:tv,mask:rv,WebkitMask:rv},mS=e=>XA[e],WA=new Set([tv,rv]);function vS(e,t){let i=mS(e);return WA.has(i)||(i=fi),i.getAnimatableNone?i.getAnimatableNone(t):void 0}const ZA=new Set(["auto","none","0"]);function JA(e,t,i){let o=0,s;for(;o<e.length&&!s;){const l=e[o];typeof l=="string"&&!ZA.has(l)&&Ga(l).values.length&&(s=e[o]),o++}if(s&&i)for(const l of t)e[l]=vS(i,s)}class e7 extends Tg{constructor(t,i,o,s,l){super(t,i,o,s,l,!0)}readKeyframes(){const{unresolvedKeyframes:t,element:i,name:o}=this;if(!i||!i.current)return;super.readKeyframes();for(let g=0;g<t.length;g++){let y=t[g];if(typeof y=="string"&&(y=y.trim(),bg(y))){const b=lS(y,i.current);b!==void 0&&(t[g]=b),g===t.length-1&&(this.finalKeyframe=y)}}if(this.resolveNoneKeyframes(),!cS.has(o)||t.length!==2)return;const[s,l]=t,d=cw(s),f=cw(l),h=Q1(s),m=Q1(l);if(h!==m&&qn[o]){this.needsMeasurement=!0;return}if(d!==f)if(nw(d)&&nw(f))for(let g=0;g<t.length;g++){const y=t[g];typeof y=="string"&&(t[g]=parseFloat(y))}else qn[o]&&(this.needsMeasurement=!0)}resolveNoneKeyframes(){const{unresolvedKeyframes:t,name:i}=this,o=[];for(let s=0;s<t.length;s++)(t[s]===null||qA(t[s]))&&o.push(s);o.length&&JA(t,o,i)}measureInitialState(){const{element:t,unresolvedKeyframes:i,name:o}=this;if(!t||!t.current)return;o==="height"&&(this.suspendedScrollY=window.pageYOffset),this.measuredOrigin=qn[o](t.measureViewportBox(),window.getComputedStyle(t.current)),i[0]=this.measuredOrigin;const s=i[i.length-1];s!==void 0&&t.getValue(o,s).jump(s,!1)}measureEndState(){const{element:t,name:i,unresolvedKeyframes:o}=this;if(!t||!t.current)return;const s=t.getValue(i);s&&s.jump(this.measuredOrigin,!1);const l=o.length-1,d=o[l];o[l]=qn[i](t.measureViewportBox(),window.getComputedStyle(t.current)),d!==null&&this.finalKeyframe===void 0&&(this.finalKeyframe=d),this.removedTransforms?.length&&this.removedTransforms.forEach(([f,h])=>{t.getValue(f).set(h)}),this.resolveNoneKeyframes()}}function gS(e,t,i){if(e==null)return[];if(e instanceof EventTarget)return[e];if(typeof e=="string"){let o=document;const s=i?.[e]??o.querySelectorAll(e);return s?Array.from(s):[]}return Array.from(e).filter(o=>o!=null)}const iv=(e,t)=>t&&typeof e=="number"?t.transform(e):e;function t7(e){return T4(e)&&"offsetHeight"in e&&!("ownerSVGElement"in e)}const{schedule:kg}=B4(queueMicrotask,!1),di={x:!1,y:!1};function yS(){return di.x||di.y}function r7(e){return e==="x"||e==="y"?di[e]?null:(di[e]=!0,()=>{di[e]=!1}):di.x||di.y?null:(di.x=di.y=!0,()=>{di.x=di.y=!1})}function bS(e,t){const i=gS(e),o=new AbortController,s={passive:!0,...t,signal:o.signal};return[i,s,()=>o.abort()]}function i7(e){return!(e.pointerType==="touch"||yS())}function n7(e,t,i={}){const[o,s,l]=bS(e,i);return o.forEach(d=>{let f=!1,h=!1,m;const g=()=>{d.removeEventListener("pointerleave",E)},y=O=>{m&&(m(O),m=void 0),g()},b=O=>{f=!1,window.removeEventListener("pointerup",b),window.removeEventListener("pointercancel",b),h&&(h=!1,y(O))},_=()=>{f=!0,window.addEventListener("pointerup",b,s),window.addEventListener("pointercancel",b,s)},E=O=>{if(O.pointerType!=="touch"){if(f){h=!0;return}y(O)}},T=O=>{if(!i7(O))return;h=!1;const D=t(d,O);typeof D=="function"&&(m=D,d.addEventListener("pointerleave",E,s))};d.addEventListener("pointerenter",T,s),d.addEventListener("pointerdown",_,s)}),l}const xS=(e,t)=>t?e===t?!0:xS(e,t.parentElement):!1,Mg=e=>e.pointerType==="mouse"?typeof e.button!="number"||e.button<=0:e.isPrimary!==!1,o7=new Set(["BUTTON","INPUT","SELECT","TEXTAREA","A"]);function a7(e){return o7.has(e.tagName)||e.isContentEditable===!0}const s7=new Set(["INPUT","SELECT","TEXTAREA"]);function l7(e){return s7.has(e.tagName)||e.isContentEditable===!0}const fu=new WeakSet;function uw(e){return t=>{t.key==="Enter"&&e(t)}}function $p(e,t){e.dispatchEvent(new PointerEvent("pointer"+t,{isPrimary:!0,bubbles:!0}))}const c7=(e,t)=>{const i=e.currentTarget;if(!i)return;const o=uw(()=>{if(fu.has(i))return;$p(i,"down");const s=uw(()=>{$p(i,"up")}),l=()=>$p(i,"cancel");i.addEventListener("keyup",s,t),i.addEventListener("blur",l,t)});i.addEventListener("keydown",o,t),i.addEventListener("blur",()=>i.removeEventListener("keydown",o),t)};function fw(e){return Mg(e)&&!yS()}const hw=new WeakSet;function d7(e,t,i={}){const[o,s,l]=bS(e,i),d=f=>{const h=f.currentTarget;if(!fw(f)||hw.has(f))return;fu.add(h),i.stopPropagation&&hw.add(f);const m=t(h,f),g=(_,E)=>{window.removeEventListener("pointerup",y),window.removeEventListener("pointercancel",b),fu.has(h)&&fu.delete(h),fw(_)&&typeof m=="function"&&m(_,{success:E})},y=_=>{g(_,h===window||h===document||i.useGlobalTarget||xS(h,_.target))},b=_=>{g(_,!1)};window.addEventListener("pointerup",y,s),window.addEventListener("pointercancel",b,s)};return o.forEach(f=>{(i.useGlobalTarget?window:f).addEventListener("pointerdown",d,s),t7(f)&&(f.addEventListener("focus",m=>c7(m,s)),!a7(f)&&!f.hasAttribute("tabindex")&&(f.tabIndex=0))}),l}function Dg(e){return T4(e)&&"ownerSVGElement"in e}const hu=new WeakMap;let pu;const wS=(e,t,i)=>(o,s)=>s&&s[0]?s[0][e+"Size"]:Dg(o)&&"getBBox"in o?o.getBBox()[t]:o[i],u7=wS("inline","width","offsetWidth"),f7=wS("block","height","offsetHeight");function h7({target:e,borderBoxSize:t}){hu.get(e)?.forEach(i=>{i(e,{get width(){return u7(e,t)},get height(){return f7(e,t)}})})}function p7(e){e.forEach(h7)}function m7(){typeof ResizeObserver>"u"||(pu=new ResizeObserver(p7))}function v7(e,t){pu||m7();const i=gS(e);return i.forEach(o=>{let s=hu.get(o);s||(s=new Set,hu.set(o,s)),s.add(t),pu?.observe(o)}),()=>{i.forEach(o=>{const s=hu.get(o);s?.delete(t),s?.size||pu?.unobserve(o)})}}const mu=new Set;let Va;function g7(){Va=()=>{const e={get width(){return window.innerWidth},get height(){return window.innerHeight}};mu.forEach(t=>t(e))},window.addEventListener("resize",Va)}function y7(e){return mu.add(e),Va||g7(),()=>{mu.delete(e),!mu.size&&typeof Va=="function"&&(window.removeEventListener("resize",Va),Va=void 0)}}function pw(e,t){return typeof e=="function"?y7(e):v7(e,t)}function b7(e){return Dg(e)&&e.tagName==="svg"}const x7=[...pS,Pt,fi],w7=e=>x7.find(hS(e)),mw=()=>({translate:0,scale:1,origin:0,originPoint:0}),Fa=()=>({x:mw(),y:mw()}),vw=()=>({min:0,max:0}),$t=()=>({x:vw(),y:vw()}),_7=new WeakMap;function Wu(e){return e!==null&&typeof e=="object"&&typeof e.start=="function"}function Ll(e){return typeof e=="string"||Array.isArray(e)}const zg=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],Pg=["initial",...zg];function Zu(e){return Wu(e.animate)||Pg.some(t=>Ll(e[t]))}function _S(e){return!!(Zu(e)||e.variants)}function S7(e,t,i){for(const o in t){const s=t[o],l=i[o];if(Gt(s))e.addValue(o,s);else if(Gt(l))e.addValue(o,Ya(s,{owner:e}));else if(l!==s)if(e.hasValue(o)){const d=e.getValue(o);d.liveStyle===!0?d.jump(s):d.hasAnimated||d.set(s)}else{const d=e.getStaticValue(o);e.addValue(o,Ya(d!==void 0?d:s,{owner:e}))}}for(const o in i)t[o]===void 0&&e.removeValue(o);return t}const nv={current:null},SS={current:!1},E7=typeof window<"u";function T7(){if(SS.current=!0,!!E7)if(window.matchMedia){const e=window.matchMedia("(prefers-reduced-motion)"),t=()=>nv.current=e.matches;e.addEventListener("change",t),t()}else nv.current=!1}const gw=["AnimationStart","AnimationComplete","Update","BeforeLayoutMeasure","LayoutMeasure","LayoutAnimationStart","LayoutAnimationComplete"];let ju={};function ES(e){ju=e}function O7(){return ju}class C7{scrapeMotionValuesFromProps(t,i,o){return{}}constructor({parent:t,props:i,presenceContext:o,reducedMotionConfig:s,skipAnimations:l,blockInitialAnimation:d,visualState:f},h={}){this.current=null,this.children=new Set,this.isVariantNode=!1,this.isControllingVariants=!1,this.shouldReduceMotion=null,this.shouldSkipAnimations=!1,this.values=new Map,this.KeyframeResolver=Tg,this.features={},this.valueSubscriptions=new Map,this.prevMotionValues={},this.hasBeenMounted=!1,this.events={},this.propEventSubscriptions={},this.notifyUpdate=()=>this.notify("Update",this.latestValues),this.render=()=>{this.current&&(this.triggerBuild(),this.renderInstance(this.current,this.renderState,this.props.style,this.projection))},this.renderScheduledAt=0,this.scheduleRender=()=>{const _=cr.now();this.renderScheduledAt<_&&(this.renderScheduledAt=_,ut.render(this.render,!1,!0))};const{latestValues:m,renderState:g}=f;this.latestValues=m,this.baseTarget={...m},this.initialValues=i.initial?{...m}:{},this.renderState=g,this.parent=t,this.props=i,this.presenceContext=o,this.depth=t?t.depth+1:0,this.reducedMotionConfig=s,this.skipAnimationsConfig=l,this.options=h,this.blockInitialAnimation=!!d,this.isControllingVariants=Zu(i),this.isVariantNode=_S(i),this.isVariantNode&&(this.variantChildren=new Set),this.manuallyAnimateOnMount=!!(t&&t.current);const{willChange:y,...b}=this.scrapeMotionValuesFromProps(i,{},this);for(const _ in b){const E=b[_];m[_]!==void 0&&Gt(E)&&E.set(m[_])}}mount(t){if(this.hasBeenMounted)for(const i in this.initialValues)this.values.get(i)?.jump(this.initialValues[i]),this.latestValues[i]=this.initialValues[i];this.current=t,_7.set(t,this),this.projection&&!this.projection.instance&&this.projection.mount(t),this.parent&&this.isVariantNode&&!this.isControllingVariants&&(this.removeFromVariantTree=this.parent.addVariantChild(this)),this.values.forEach((i,o)=>this.bindToMotionValue(o,i)),this.reducedMotionConfig==="never"?this.shouldReduceMotion=!1:this.reducedMotionConfig==="always"?this.shouldReduceMotion=!0:(SS.current||T7(),this.shouldReduceMotion=nv.current),this.shouldSkipAnimations=this.skipAnimationsConfig??!1,this.parent?.addChild(this),this.update(this.props,this.presenceContext),this.hasBeenMounted=!0}unmount(){this.projection&&this.projection.unmount(),Yn(this.notifyUpdate),Yn(this.render),this.valueSubscriptions.forEach(t=>t()),this.valueSubscriptions.clear(),this.removeFromVariantTree&&this.removeFromVariantTree(),this.parent?.removeChild(this);for(const t in this.events)this.events[t].clear();for(const t in this.features){const i=this.features[t];i&&(i.unmount(),i.isMounted=!1)}this.current=null}addChild(t){this.children.add(t),this.enteringChildren??(this.enteringChildren=new Set),this.enteringChildren.add(t)}removeChild(t){this.children.delete(t),this.enteringChildren&&this.enteringChildren.delete(t)}bindToMotionValue(t,i){if(this.valueSubscriptions.has(t)&&this.valueSubscriptions.get(t)(),i.accelerate&&aS.has(t)&&this.current instanceof HTMLElement){const{factory:d,keyframes:f,times:h,ease:m,duration:g}=i.accelerate,y=new nS({element:this.current,name:t,keyframes:f,times:h,ease:m,duration:kr(g)}),b=d(y);this.valueSubscriptions.set(t,()=>{b(),y.cancel()});return}const o=ns.has(t);o&&this.onBindTransform&&this.onBindTransform();const s=i.on("change",d=>{this.latestValues[t]=d,this.props.onUpdate&&ut.preRender(this.notifyUpdate),o&&this.projection&&(this.projection.isTransformDirty=!0),this.scheduleRender()});let l;typeof window<"u"&&window.MotionCheckAppearSync&&(l=window.MotionCheckAppearSync(this,t,i)),this.valueSubscriptions.set(t,()=>{s(),l&&l()})}sortNodePosition(t){return!this.current||!this.sortInstanceNodePosition||this.type!==t.type?0:this.sortInstanceNodePosition(this.current,t.current)}updateFeatures(){let t="animation";for(t in ju){const i=ju[t];if(!i)continue;const{isEnabled:o,Feature:s}=i;if(!this.features[t]&&s&&o(this.props)&&(this.features[t]=new s(this)),this.features[t]){const l=this.features[t];l.isMounted?l.update():(l.mount(),l.isMounted=!0)}}}triggerBuild(){this.build(this.renderState,this.latestValues,this.props)}measureViewportBox(){return this.current?this.measureInstanceViewportBox(this.current,this.props):$t()}getStaticValue(t){return this.latestValues[t]}setStaticValue(t,i){this.latestValues[t]=i}update(t,i){(t.transformTemplate||this.props.transformTemplate)&&this.scheduleRender(),this.prevProps=this.props,this.props=t,this.prevPresenceContext=this.presenceContext,this.presenceContext=i;for(let o=0;o<gw.length;o++){const s=gw[o];this.propEventSubscriptions[s]&&(this.propEventSubscriptions[s](),delete this.propEventSubscriptions[s]);const l="on"+s,d=t[l];d&&(this.propEventSubscriptions[s]=this.on(s,d))}this.prevMotionValues=S7(this,this.scrapeMotionValuesFromProps(t,this.prevProps||{},this),this.prevMotionValues),this.handleChildMotionValue&&this.handleChildMotionValue()}getProps(){return this.props}getVariant(t){return this.props.variants?this.props.variants[t]:void 0}getDefaultTransition(){return this.props.transition}getTransformPagePoint(){return this.props.transformPagePoint}getClosestVariantNode(){return this.isVariantNode?this:this.parent?this.parent.getClosestVariantNode():void 0}addVariantChild(t){const i=this.getClosestVariantNode();if(i)return i.variantChildren&&i.variantChildren.add(t),()=>i.variantChildren.delete(t)}addValue(t,i){const o=this.values.get(t);i!==o&&(o&&this.removeValue(t),this.bindToMotionValue(t,i),this.values.set(t,i),this.latestValues[t]=i.get())}removeValue(t){this.values.delete(t);const i=this.valueSubscriptions.get(t);i&&(i(),this.valueSubscriptions.delete(t)),delete this.latestValues[t],this.removeValueFromRenderState(t,this.renderState)}hasValue(t){return this.values.has(t)}getValue(t,i){if(this.props.values&&this.props.values[t])return this.props.values[t];let o=this.values.get(t);return o===void 0&&i!==void 0&&(o=Ya(i===null?void 0:i,{owner:this}),this.addValue(t,o)),o}readValue(t,i){let o=this.latestValues[t]!==void 0||!this.current?this.latestValues[t]:this.getBaseTargetFromProps(this.props,t)??this.readValueFromInstance(this.current,t,this.options);return o!=null&&(typeof o=="string"&&(E4(o)||O4(o))?o=parseFloat(o):!w7(o)&&fi.test(i)&&(o=vS(t,i)),this.setBaseTarget(t,Gt(o)?o.get():o)),Gt(o)?o.get():o}setBaseTarget(t,i){this.baseTarget[t]=i}getBaseTarget(t){const{initial:i}=this.props;let o;if(typeof i=="string"||typeof i=="object"){const l=Rg(this.props,i,this.presenceContext?.custom);l&&(o=l[t])}if(i&&o!==void 0)return o;const s=this.getBaseTargetFromProps(this.props,t);return s!==void 0&&!Gt(s)?s:this.initialValues[t]!==void 0&&o===void 0?void 0:this.baseTarget[t]}on(t,i){return this.events[t]||(this.events[t]=new vg),this.events[t].add(i)}notify(t,...i){this.events[t]&&this.events[t].notify(...i)}scheduleRenderMicrotask(){kg.render(this.render)}}class TS extends C7{constructor(){super(...arguments),this.KeyframeResolver=e7}sortInstanceNodePosition(t,i){return t.compareDocumentPosition(i)&2?1:-1}getBaseTargetFromProps(t,i){const o=t.style;return o?o[i]:void 0}removeValueFromRenderState(t,{vars:i,style:o}){delete i[t],delete o[t]}handleChildMotionValue(){this.childSubscription&&(this.childSubscription(),delete this.childSubscription);const{children:t}=this.props;Gt(t)&&(this.childSubscription=t.on("change",i=>{this.current&&(this.current.textContent=`${i}`)}))}}class Xn{constructor(t){this.isMounted=!1,this.node=t}update(){}}function OS({top:e,left:t,right:i,bottom:o}){return{x:{min:t,max:i},y:{min:e,max:o}}}function A7({x:e,y:t}){return{top:t.min,right:e.max,bottom:t.max,left:e.min}}function R7(e,t){if(!t)return e;const i=t({x:e.left,y:e.top}),o=t({x:e.right,y:e.bottom});return{top:i.y,left:i.x,bottom:o.y,right:o.x}}function Bp(e){return e===void 0||e===1}function ov({scale:e,scaleX:t,scaleY:i}){return!Bp(e)||!Bp(t)||!Bp(i)}function So(e){return ov(e)||CS(e)||e.z||e.rotate||e.rotateX||e.rotateY||e.skewX||e.skewY}function CS(e){return yw(e.x)||yw(e.y)}function yw(e){return e&&e!=="0%"}function ku(e,t,i){const o=e-i,s=t*o;return i+s}function bw(e,t,i,o,s){return s!==void 0&&(e=ku(e,s,o)),ku(e,i,o)+t}function av(e,t=0,i=1,o,s){e.min=bw(e.min,t,i,o,s),e.max=bw(e.max,t,i,o,s)}function AS(e,{x:t,y:i}){av(e.x,t.translate,t.scale,t.originPoint),av(e.y,i.translate,i.scale,i.originPoint)}const xw=.999999999999,ww=1.0000000000001;function j7(e,t,i,o=!1){const s=i.length;if(!s)return;t.x=t.y=1;let l,d;for(let f=0;f<s;f++){l=i[f],d=l.projectionDelta;const{visualElement:h}=l.options;h&&h.props.style&&h.props.style.display==="contents"||(o&&l.options.layoutScroll&&l.scroll&&l!==l.root&&(Ti(e.x,-l.scroll.offset.x),Ti(e.y,-l.scroll.offset.y)),d&&(t.x*=d.x.scale,t.y*=d.y.scale,AS(e,d)),o&&So(l.latestValues)&&vu(e,l.latestValues,l.layout?.layoutBox))}t.x<ww&&t.x>xw&&(t.x=1),t.y<ww&&t.y>xw&&(t.y=1)}function Ti(e,t){e.min+=t,e.max+=t}function _w(e,t,i,o,s=.5){const l=dt(e.min,e.max,s);av(e,t,i,l,o)}function Sw(e,t){return typeof e=="string"?parseFloat(e)/100*(t.max-t.min):e}function vu(e,t,i){const o=i??e;_w(e.x,Sw(t.x,o.x),t.scaleX,t.scale,t.originX),_w(e.y,Sw(t.y,o.y),t.scaleY,t.scale,t.originY)}function RS(e,t){return OS(R7(e.getBoundingClientRect(),t))}function k7(e,t,i){const o=RS(e,i),{scroll:s}=t;return s&&(Ti(o.x,s.offset.x),Ti(o.y,s.offset.y)),o}const M7={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},D7=is.length;function z7(e,t,i){let o="",s=!0;for(let d=0;d<D7;d++){const f=is[d],h=e[f];if(h===void 0)continue;let m=!0;if(typeof h=="number")m=h===(f.startsWith("scale")?1:0);else{const g=parseFloat(h);m=f.startsWith("scale")?g===1:g===0}if(!m||i){const g=iv(h,Ru[f]);if(!m){s=!1;const y=M7[f]||f;o+=`${y}(${g}) `}i&&(t[f]=g)}}const l=e.pathRotation;return l&&(s=!1,o+=`rotate(${iv(l,Ru.pathRotation)}) `),o=o.trim(),i?o=i(t,s?"":o):s&&(o="none"),o}function Lg(e,t,i){const{style:o,vars:s,transformOrigin:l}=e;let d=!1,f=!1;for(const h in t){const m=t[h];if(ns.has(h)){d=!0;continue}else if(I4(h)){s[h]=m;continue}else{const g=iv(m,Ru[h]);h.startsWith("origin")?(f=!0,l[h]=g):o[h]=g}}if(t.transform||(d||i?o.transform=z7(t,e.transform,i):o.transform&&(o.transform="none")),f){const{originX:h="50%",originY:m="50%",originZ:g=0}=l;o.transformOrigin=`${h} ${m} ${g}`}}function jS(e,{style:t,vars:i},o,s){const l=e.style;let d;for(d in t)l[d]=t[d];s?.applyProjectionStyles(l,o);for(d in i)l.setProperty(d,i[d])}function Ew(e,t){return t.max===t.min?0:e/(t.max-t.min)*100}const cl={correct:(e,t)=>{if(!t.target)return e;if(typeof e=="string")if(be.test(e))e=parseFloat(e);else return e;const i=Ew(e,t.target.x),o=Ew(e,t.target.y);return`${i}% ${o}%`}},P7={correct:(e,{treeScale:t,projectionDelta:i})=>{const o=e,s=fi.parse(e);if(s.length>5)return o;const l=fi.createTransformer(e),d=typeof s[0]!="number"?1:0,f=i.x.scale*t.x,h=i.y.scale*t.y;s[0+d]/=f,s[1+d]/=h;const m=dt(f,h,.5);return typeof s[2+d]=="number"&&(s[2+d]/=m),typeof s[3+d]=="number"&&(s[3+d]/=m),l(s)}},sv={borderRadius:{...cl,applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]},borderTopLeftRadius:cl,borderTopRightRadius:cl,borderBottomLeftRadius:cl,borderBottomRightRadius:cl,boxShadow:P7};function kS(e,{layout:t,layoutId:i}){return ns.has(e)||e.startsWith("origin")||(t||i!==void 0)&&(!!sv[e]||e==="opacity")}function Ng(e,t,i){const o=e.style,s=t?.style,l={};if(!o)return l;for(const d in o)(Gt(o[d])||s&&Gt(s[d])||kS(d,e)||i?.getValue(d)?.liveStyle!==void 0)&&(l[d]=o[d]);return l}function L7(e){return window.getComputedStyle(e)}class N7 extends TS{constructor(){super(...arguments),this.type="html",this.renderInstance=jS}readValueFromInstance(t,i){if(ns.has(i))return this.projection?.isProjecting?Km(i):rA(t,i);{const o=L7(t),s=(I4(i)?o.getPropertyValue(i):o[i])||0;return typeof s=="string"?s.trim():s}}measureInstanceViewportBox(t,{transformPagePoint:i}){return RS(t,i)}build(t,i,o){Lg(t,i,o.transformTemplate)}scrapeMotionValuesFromProps(t,i,o){return Ng(t,i,o)}}const $7={offset:"stroke-dashoffset",array:"stroke-dasharray"},B7={offset:"strokeDashoffset",array:"strokeDasharray"};function U7(e,t,i=1,o=0,s=!0){e.pathLength=1;const l=s?$7:B7;e[l.offset]=`${-o}`,e[l.array]=`${t} ${i}`}const I7=["offsetDistance","offsetPath","offsetRotate","offsetAnchor"];function MS(e,{attrX:t,attrY:i,attrScale:o,pathLength:s,pathSpacing:l=1,pathOffset:d=0,...f},h,m,g){if(Lg(e,f,m),h){e.style.viewBox&&(e.attrs.viewBox=e.style.viewBox);return}e.attrs=e.style,e.style={};const{attrs:y,style:b}=e;y.transform&&(b.transform=y.transform,delete y.transform),(b.transform||y.transformOrigin)&&(b.transformOrigin=y.transformOrigin??"50% 50%",delete y.transformOrigin),b.transform&&(b.transformBox=g?.transformBox??"fill-box",delete y.transformBox);for(const _ of I7)y[_]!==void 0&&(b[_]=y[_],delete y[_]);t!==void 0&&(y.x=t),i!==void 0&&(y.y=i),o!==void 0&&(y.scale=o),s!==void 0&&U7(y,s,l,d,!1)}const DS=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength","startOffset","textLength","lengthAdjust"]),zS=e=>typeof e=="string"&&e.toLowerCase()==="svg";function V7(e,t,i,o){jS(e,t,void 0,o);for(const s in t.attrs)e.setAttribute(DS.has(s)?s:jg(s),t.attrs[s])}function PS(e,t,i){const o=Ng(e,t,i);for(const s in e)if(Gt(e[s])||Gt(t[s])){const l=is.indexOf(s)!==-1?"attr"+s.charAt(0).toUpperCase()+s.substring(1):s;o[l]=e[s]}return o}class F7 extends TS{constructor(){super(...arguments),this.type="svg",this.isSVGTag=!1,this.measureInstanceViewportBox=$t}getBaseTargetFromProps(t,i){return t[i]}readValueFromInstance(t,i){if(ns.has(i)){const o=mS(i);return o&&o.default||0}return i=DS.has(i)?i:jg(i),t.getAttribute(i)}scrapeMotionValuesFromProps(t,i,o){return PS(t,i,o)}build(t,i,o){MS(t,i,this.isSVGTag,o.transformTemplate,o.style)}renderInstance(t,i,o,s){V7(t,i,o,s)}mount(t){this.isSVGTag=zS(t.tagName),super.mount(t)}}const H7=Pg.length;function LS(e){if(!e)return;if(!e.isControllingVariants){const i=e.parent?LS(e.parent)||{}:{};return e.props.initial!==void 0&&(i.initial=e.props.initial),i}const t={};for(let i=0;i<H7;i++){const o=Pg[i],s=e.props[o];(Ll(s)||s===!1)&&(t[o]=s)}return t}function NS(e,t){if(!Array.isArray(t))return!1;const i=t.length;if(i!==e.length)return!1;for(let o=0;o<i;o++)if(t[o]!==e[o])return!1;return!0}const q7=[...zg].reverse(),K7=zg.length;function G7(e){return t=>Promise.all(t.map(({animation:i,options:o})=>FA(e,i,o)))}function Y7(e){let t=G7(e),i=Tw(),o=!0,s=!1;const l=m=>(g,y)=>{const b=ko(e,y,m==="exit"?e.presenceContext?.custom:void 0);if(b){const{transition:_,transitionEnd:E,...T}=b;g={...g,...T,...E}}return g};function d(m){t=m(e)}function f(m){const{props:g}=e,y=LS(e.parent)||{},b=[],_=new Set;let E={},T=1/0;for(let D=0;D<K7;D++){const C=q7[D],z=i[C],B=g[C]!==void 0?g[C]:y[C],H=Ll(B),ne=C===m?z.isActive:null;ne===!1&&(T=D);let X=B===y[C]&&B!==g[C]&&H;if(X&&(o||s)&&e.manuallyAnimateOnMount&&(X=!1),z.protectedKeys={...E},!z.isActive&&ne===null||!B&&!z.prevProp||Wu(B)||typeof B=="boolean")continue;if(C==="exit"&&z.isActive&&ne!==!0){z.prevResolvedValues&&(E={...E,...z.prevResolvedValues});continue}const A=Q7(z.prevProp,B);let le=A||C===m&&z.isActive&&!X&&H||D>T&&H,ee=!1;const J=Array.isArray(B)?B:[B];let ce=J.reduce(l(C),{});ne===!1&&(ce={});const{prevResolvedValues:_e={}}=z,ie={..._e,...ce},xe=se=>{le=!0,_.has(se)&&(ee=!0,_.delete(se)),z.needsAnimating[se]=!0;const he=e.getValue(se);he&&(he.liveStyle=!1)};for(const se in ie){const he=ce[se],Te=_e[se];if(E.hasOwnProperty(se))continue;let M=!1;Zm(he)&&Zm(Te)?M=!NS(he,Te)||A:M=he!==Te,M?he!=null?xe(se):_.add(se):he!==void 0&&_.has(se)?xe(se):z.protectedKeys[se]=!0}z.prevProp=B,z.prevResolvedValues=ce,z.isActive&&(E={...E,...ce}),(o||s)&&e.blockInitialAnimation&&(le=!1);const N=X&&A;le&&(!N||ee)&&b.push(...J.map(se=>{const he={type:C};if(typeof se=="string"&&(o||s)&&!N&&e.manuallyAnimateOnMount&&e.parent){const{parent:Te}=e,M=ko(Te,se);if(Te.enteringChildren&&M){const{delayChildren:q}=M.transition||{};he.delay=sS(Te.enteringChildren,e,q)}}return{animation:se,options:he}}))}if(_.size){const D={};if(typeof g.initial!="boolean"){const C=ko(e,Array.isArray(g.initial)?g.initial[0]:g.initial);C&&C.transition&&(D.transition=C.transition)}_.forEach(C=>{const z=e.getBaseTarget(C),B=e.getValue(C);B&&(B.liveStyle=!0),D[C]=z??null}),b.push({animation:D})}let O=!!b.length;return o&&(g.initial===!1||g.initial===g.animate)&&!e.manuallyAnimateOnMount&&(O=!1),o=!1,s=!1,O?t(b):Promise.resolve()}function h(m,g){if(i[m].isActive===g)return Promise.resolve();e.variantChildren?.forEach(b=>b.animationState?.setActive(m,g)),i[m].isActive=g;const y=f(m);for(const b in i)i[b].protectedKeys={};return y}return{animateChanges:f,setActive:h,setAnimateFunction:d,getState:()=>i,reset:()=>{i=Tw(),s=!0}}}function Q7(e,t){return typeof t=="string"?t!==e:Array.isArray(t)?!NS(t,e):!1}function xo(e=!1){return{isActive:e,protectedKeys:{},needsAnimating:{},prevResolvedValues:{}}}function Tw(){return{animate:xo(!0),whileInView:xo(),whileHover:xo(),whileTap:xo(),whileDrag:xo(),whileFocus:xo(),exit:xo()}}function lv(e,t){e.min=t.min,e.max=t.max}function li(e,t){lv(e.x,t.x),lv(e.y,t.y)}function Ow(e,t){e.translate=t.translate,e.scale=t.scale,e.originPoint=t.originPoint,e.origin=t.origin}const $S=1e-4,X7=1-$S,W7=1+$S,BS=.01,Z7=0-BS,J7=0+BS;function dr(e){return e.max-e.min}function eR(e,t,i){return Math.abs(e-t)<=i}function Cw(e,t,i,o=.5){e.origin=o,e.originPoint=dt(t.min,t.max,e.origin),e.scale=dr(i)/dr(t),e.translate=dt(i.min,i.max,e.origin)-e.originPoint,(e.scale>=X7&&e.scale<=W7||isNaN(e.scale))&&(e.scale=1),(e.translate>=Z7&&e.translate<=J7||isNaN(e.translate))&&(e.translate=0)}function Sl(e,t,i,o){Cw(e.x,t.x,i.x,o?o.originX:void 0),Cw(e.y,t.y,i.y,o?o.originY:void 0)}function Aw(e,t,i,o=0){const s=o?dt(i.min,i.max,o):i.min;e.min=s+t.min,e.max=e.min+dr(t)}function tR(e,t,i,o){Aw(e.x,t.x,i.x,o?.x),Aw(e.y,t.y,i.y,o?.y)}function Rw(e,t,i,o=0){const s=o?dt(i.min,i.max,o):i.min;e.min=t.min-s,e.max=e.min+dr(t)}function Mu(e,t,i,o){Rw(e.x,t.x,i.x,o?.x),Rw(e.y,t.y,i.y,o?.y)}function jw(e,t,i,o,s){return e-=t,e=ku(e,1/i,o),s!==void 0&&(e=ku(e,1/s,o)),e}function rR(e,t=0,i=1,o=.5,s,l=e,d=e){if(Ci.test(t)&&(t=parseFloat(t),t=dt(d.min,d.max,t/100)-d.min),typeof t!="number")return;let f=dt(l.min,l.max,o);e===l&&(f-=t),e.min=jw(e.min,t,i,f,s),e.max=jw(e.max,t,i,f,s)}function kw(e,t,[i,o,s],l,d){rR(e,t[i],t[o],t[s],t.scale,l,d)}const iR=["x","scaleX","originX"],nR=["y","scaleY","originY"];function Mw(e,t,i,o){kw(e.x,t,iR,i?i.x:void 0,o?o.x:void 0),kw(e.y,t,nR,i?i.y:void 0,o?o.y:void 0)}function Dw(e){return e.translate===0&&e.scale===1}function US(e){return Dw(e.x)&&Dw(e.y)}function zw(e,t){return e.min===t.min&&e.max===t.max}function oR(e,t){return zw(e.x,t.x)&&zw(e.y,t.y)}function Pw(e,t){return Math.round(e.min)===Math.round(t.min)&&Math.round(e.max)===Math.round(t.max)}function IS(e,t){return Pw(e.x,t.x)&&Pw(e.y,t.y)}function Lw(e){return dr(e.x)/dr(e.y)}function Nw(e,t){return e.translate===t.translate&&e.scale===t.scale&&e.originPoint===t.originPoint}function Si(e){return[e("x"),e("y")]}function aR(e,t,i){let o="";const s=e.x.translate/t.x,l=e.y.translate/t.y,d=i?.z||0;if((s||l||d)&&(o=`translate3d(${s}px, ${l}px, ${d}px) `),(t.x!==1||t.y!==1)&&(o+=`scale(${1/t.x}, ${1/t.y}) `),i){const{transformPerspective:m,rotate:g,pathRotation:y,rotateX:b,rotateY:_,skewX:E,skewY:T}=i;m&&(o=`perspective(${m}px) ${o}`),g&&(o+=`rotate(${g}deg) `),y&&(o+=`rotate(${y}deg) `),b&&(o+=`rotateX(${b}deg) `),_&&(o+=`rotateY(${_}deg) `),E&&(o+=`skewX(${E}deg) `),T&&(o+=`skewY(${T}deg) `)}const f=e.x.scale*t.x,h=e.y.scale*t.y;return(f!==1||h!==1)&&(o+=`scale(${f}, ${h})`),o||"none"}const VS=["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],sR=VS.length,$w=e=>typeof e=="string"?parseFloat(e):e,Bw=e=>typeof e=="number"||be.test(e);function lR(e,t,i,o,s,l){s?(e.opacity=dt(0,i.opacity??1,cR(o)),e.opacityExit=dt(t.opacity??1,0,dR(o))):l&&(e.opacity=dt(t.opacity??1,i.opacity??1,o));for(let d=0;d<sR;d++){const f=VS[d];let h=Uw(t,f),m=Uw(i,f);if(h===void 0&&m===void 0)continue;h||(h=0),m||(m=0),h===0||m===0||Bw(h)===Bw(m)?(e[f]=Math.max(dt($w(h),$w(m),o),0),(Ci.test(m)||Ci.test(h))&&(e[f]+="%")):e[f]=m}(t.rotate||i.rotate)&&(e.rotate=dt(t.rotate||0,i.rotate||0,o))}function Uw(e,t){return e[t]!==void 0?e[t]:e.borderRadius}const cR=FS(0,.5,P4),dR=FS(.5,.95,Xr);function FS(e,t,i){return o=>o<e?0:o>t?1:i(zl(e,t,o))}function uR(e,t,i){const o=Gt(e)?e:Ya(e);return o.start(Ag("",o,t,i)),o.animation}function Nl(e,t,i,o={passive:!0}){return e.addEventListener(t,i,o),()=>e.removeEventListener(t,i)}const fR=(e,t)=>e.depth-t.depth;class hR{constructor(){this.children=[],this.isDirty=!1}add(t){pg(this.children,t),this.isDirty=!0}remove(t){Eu(this.children,t),this.isDirty=!0}forEach(t){this.isDirty&&this.children.sort(fR),this.isDirty=!1,this.children.forEach(t)}}function pR(e,t){const i=cr.now(),o=({timestamp:s})=>{const l=s-i;l>=t&&(Yn(o),e(l-t))};return ut.setup(o,!0),()=>Yn(o)}function gu(e){return Gt(e)?e.get():e}class mR{constructor(){this.members=[]}add(t){pg(this.members,t);for(let i=this.members.length-1;i>=0;i--){const o=this.members[i];if(o===t||o===this.lead||o===this.prevLead)continue;const s=o.instance;(!s||s.isConnected===!1)&&!o.snapshot&&(Eu(this.members,o),o.unmount())}t.scheduleRender()}remove(t){if(Eu(this.members,t),t===this.prevLead&&(this.prevLead=void 0),t===this.lead){const i=this.members[this.members.length-1];i&&this.promote(i)}}relegate(t){for(let i=this.members.indexOf(t)-1;i>=0;i--){const o=this.members[i];if(o.isPresent!==!1&&o.instance?.isConnected!==!1)return this.promote(o),!0}return!1}promote(t,i){const o=this.lead;if(t!==o&&(this.prevLead=o,this.lead=t,t.show(),o)){o.updateSnapshot(),t.scheduleRender();const{layoutDependency:s}=o.options,{layoutDependency:l}=t.options;(s===void 0||s!==l)&&(t.resumeFrom=o,i&&(o.preserveOpacity=!0),o.snapshot&&(t.snapshot=o.snapshot,t.snapshot.latestValues=o.animationValues||o.latestValues),t.root?.isUpdating&&(t.isLayoutDirty=!0)),t.options.crossfade===!1&&o.hide()}}exitAnimationComplete(){this.members.forEach(t=>{t.options.onExitComplete?.(),t.resumingFrom?.options.onExitComplete?.()})}scheduleRender(){this.members.forEach(t=>t.instance&&t.scheduleRender(!1))}removeLeadSnapshot(){this.lead?.snapshot&&(this.lead.snapshot=void 0)}}const yu={hasAnimatedSinceResize:!0,hasEverUpdated:!1},Up=["","X","Y","Z"],vR=1e3;let gR=0;function Ip(e,t,i,o){const{latestValues:s}=t;s[e]&&(i[e]=s[e],t.setStaticValue(e,0),o&&(o[e]=0))}function HS(e){if(e.hasCheckedOptimisedAppear=!0,e.root===e)return;const{visualElement:t}=e.options;if(!t)return;const i=uS(t);if(window.MotionHasOptimisedAnimation(i,"transform")){const{layout:s,layoutId:l}=e.options;window.MotionCancelOptimisedAnimation(i,"transform",ut,!(s||l))}const{parent:o}=e;o&&!o.hasCheckedOptimisedAppear&&HS(o)}function qS({attachResizeListener:e,defaultParent:t,measureScroll:i,checkIsScrollRoot:o,resetTransform:s}){return class{constructor(d={},f=t?.()){this.id=gR++,this.animationId=0,this.animationCommitId=0,this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.isProjectionDirty=!1,this.isSharedProjectionDirty=!1,this.isTransformDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.hasCheckedOptimisedAppear=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.hasTreeAnimated=!1,this.layoutVersion=0,this.updateScheduled=!1,this.scheduleUpdate=()=>this.update(),this.projectionUpdateScheduled=!1,this.checkUpdateFailed=()=>{this.isUpdating&&(this.isUpdating=!1,this.clearAllSnapshots())},this.updateProjection=()=>{this.projectionUpdateScheduled=!1,this.nodes.forEach(xR),this.nodes.forEach(OR),this.nodes.forEach(CR),this.nodes.forEach(wR)},this.resolvedRelativeTargetAt=0,this.linkedParentVersion=0,this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.latestValues=d,this.root=f?f.root||f:this,this.path=f?[...f.path,f]:[],this.parent=f,this.depth=f?f.depth+1:0;for(let h=0;h<this.path.length;h++)this.path[h].shouldResetTransform=!0;this.root===this&&(this.nodes=new hR)}addEventListener(d,f){return this.eventHandlers.has(d)||this.eventHandlers.set(d,new vg),this.eventHandlers.get(d).add(f)}notifyListeners(d,...f){const h=this.eventHandlers.get(d);h&&h.notify(...f)}hasListeners(d){return this.eventHandlers.has(d)}mount(d){if(this.instance)return;this.isSVG=Dg(d)&&!b7(d),this.instance=d;const{layoutId:f,layout:h,visualElement:m}=this.options;if(m&&!m.current&&m.mount(d),this.root.nodes.add(this),this.parent&&this.parent.children.add(this),this.root.hasTreeAnimated&&(h||f)&&(this.isLayoutDirty=!0),e){let g,y=0;const b=()=>this.root.updateBlockedByResize=!1;ut.read(()=>{y=window.innerWidth}),e(d,()=>{const _=window.innerWidth;_!==y&&(y=_,this.root.updateBlockedByResize=!0,g&&g(),g=pR(b,250),yu.hasAnimatedSinceResize&&(yu.hasAnimatedSinceResize=!1,this.nodes.forEach(Fw)))})}f&&this.root.registerSharedNode(f,this),this.options.animate!==!1&&m&&(f||h)&&this.addEventListener("didUpdate",({delta:g,hasLayoutChanged:y,hasRelativeLayoutChanged:b,layout:_})=>{if(this.isTreeAnimationBlocked()){this.target=void 0,this.relativeTarget=void 0;return}const E=this.options.transition||m.getDefaultTransition()||MR,{onLayoutAnimationStart:T,onLayoutAnimationComplete:O}=m.getProps(),D=!this.targetLayout||!IS(this.targetLayout,_),C=!y&&b;if(this.options.layoutRoot||this.resumeFrom||C||y&&(D||!this.currentAnimation)){this.resumeFrom&&(this.resumingFrom=this.resumeFrom,this.resumingFrom.resumingFrom=void 0);const z={...Cg(E,"layout"),onPlay:T,onComplete:O};(m.shouldReduceMotion||this.options.layoutRoot)&&(z.delay=0,z.type=!1),this.startAnimation(z),this.setAnimationOrigin(g,C,z.path)}else y||Fw(this),this.isLead()&&this.options.onExitComplete&&this.options.onExitComplete();this.targetLayout=_})}unmount(){this.options.layoutId&&this.willUpdate(),this.root.nodes.remove(this);const d=this.getStack();d&&d.remove(this),this.parent&&this.parent.children.delete(this),this.instance=void 0,this.eventHandlers.clear(),Yn(this.updateProjection)}blockUpdate(){this.updateManuallyBlocked=!0}unblockUpdate(){this.updateManuallyBlocked=!1}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||!1}startUpdate(){this.isUpdateBlocked()||(this.isUpdating=!0,this.nodes&&this.nodes.forEach(AR),this.animationId++)}getTransformTemplate(){const{visualElement:d}=this.options;return d&&d.getProps().transformTemplate}willUpdate(d=!0){if(this.root.hasTreeAnimated=!0,this.root.isUpdateBlocked()){this.options.onExitComplete&&this.options.onExitComplete();return}if(window.MotionCancelOptimisedAnimation&&!this.hasCheckedOptimisedAppear&&HS(this),!this.root.isUpdating&&this.root.startUpdate(),this.isLayoutDirty)return;this.isLayoutDirty=!0;for(let g=0;g<this.path.length;g++){const y=this.path[g];y.shouldResetTransform=!0,(typeof y.latestValues.x=="string"||typeof y.latestValues.y=="string")&&(y.isLayoutDirty=!0),y.updateScroll("snapshot"),y.options.layoutRoot&&y.willUpdate(!1)}const{layoutId:f,layout:h}=this.options;if(f===void 0&&!h)return;const m=this.getTransformTemplate();this.prevTransformTemplateValue=m?m(this.latestValues,""):void 0,this.updateSnapshot(),d&&this.notifyListeners("willUpdate")}update(){if(this.updateScheduled=!1,this.isUpdateBlocked()){const h=this.updateBlockedByResize;this.unblockUpdate(),this.updateBlockedByResize=!1,this.clearAllSnapshots(),h&&this.nodes.forEach(SR),this.nodes.forEach(Iw);return}if(this.animationId<=this.animationCommitId){this.nodes.forEach(Vw);return}this.animationCommitId=this.animationId,this.isUpdating?(this.isUpdating=!1,this.nodes.forEach(ER),this.nodes.forEach(TR),this.nodes.forEach(yR),this.nodes.forEach(bR)):this.nodes.forEach(Vw),this.clearAllSnapshots();const f=cr.now();Kt.delta=Ri(0,1e3/60,f-Kt.timestamp),Kt.timestamp=f,Kt.isProcessing=!0,Mp.update.process(Kt),Mp.preRender.process(Kt),Mp.render.process(Kt),Kt.isProcessing=!1}didUpdate(){this.updateScheduled||(this.updateScheduled=!0,kg.read(this.scheduleUpdate))}clearAllSnapshots(){this.nodes.forEach(_R),this.sharedNodes.forEach(RR)}scheduleUpdateProjection(){this.projectionUpdateScheduled||(this.projectionUpdateScheduled=!0,ut.preRender(this.updateProjection,!1,!0))}scheduleCheckAfterUnmount(){ut.postRender(()=>{this.isLayoutDirty?this.root.didUpdate():this.root.checkUpdateFailed()})}updateSnapshot(){this.snapshot||!this.instance||(this.snapshot=this.measure(),this.snapshot&&!dr(this.snapshot.measuredBox.x)&&!dr(this.snapshot.measuredBox.y)&&(this.snapshot=void 0))}updateLayout(){if(!this.instance||(this.updateScroll(),!(this.options.alwaysMeasureLayout&&this.isLead())&&!this.isLayoutDirty))return;if(this.resumeFrom&&!this.resumeFrom.instance)for(let h=0;h<this.path.length;h++)this.path[h].updateScroll();const d=this.layout;this.layout=this.measure(!1),this.layoutVersion++,this.layoutCorrected||(this.layoutCorrected=$t()),this.isLayoutDirty=!1,this.projectionDelta=void 0,this.notifyListeners("measure",this.layout.layoutBox);const{visualElement:f}=this.options;f&&f.notify("LayoutMeasure",this.layout.layoutBox,d?d.layoutBox:void 0)}updateScroll(d="measure"){let f=!!(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===d&&(f=!1),f&&this.instance){const h=o(this.instance);this.scroll={animationId:this.root.animationId,phase:d,isRoot:h,offset:i(this.instance),wasRoot:this.scroll?this.scroll.isRoot:h}}}resetTransform(){if(!s)return;const d=this.isLayoutDirty||this.shouldResetTransform||this.options.alwaysMeasureLayout,f=this.projectionDelta&&!US(this.projectionDelta),h=this.getTransformTemplate(),m=h?h(this.latestValues,""):void 0,g=m!==this.prevTransformTemplateValue;d&&this.instance&&(f||So(this.latestValues)||g)&&(s(this.instance,m),this.shouldResetTransform=!1,this.scheduleRender())}measure(d=!0){const f=this.measurePageBox();let h=this.removeElementScroll(f);return d&&(h=this.removeTransform(h)),DR(h),{animationId:this.root.animationId,measuredBox:f,layoutBox:h,latestValues:{},source:this.id}}measurePageBox(){const{visualElement:d}=this.options;if(!d)return $t();const f=d.measureViewportBox();if(!(this.scroll?.wasRoot||this.path.some(zR))){const{scroll:m}=this.root;m&&(Ti(f.x,m.offset.x),Ti(f.y,m.offset.y))}return f}removeElementScroll(d){const f=$t();if(li(f,d),this.scroll?.wasRoot)return f;for(let h=0;h<this.path.length;h++){const m=this.path[h],{scroll:g,options:y}=m;m!==this.root&&g&&y.layoutScroll&&(g.wasRoot&&li(f,d),Ti(f.x,g.offset.x),Ti(f.y,g.offset.y))}return f}applyTransform(d,f=!1,h){const m=h||$t();li(m,d);for(let g=0;g<this.path.length;g++){const y=this.path[g];!f&&y.options.layoutScroll&&y.scroll&&y!==y.root&&(Ti(m.x,-y.scroll.offset.x),Ti(m.y,-y.scroll.offset.y)),So(y.latestValues)&&vu(m,y.latestValues,y.layout?.layoutBox)}return So(this.latestValues)&&vu(m,this.latestValues,this.layout?.layoutBox),m}removeTransform(d){const f=$t();li(f,d);for(let h=0;h<this.path.length;h++){const m=this.path[h];if(!So(m.latestValues))continue;let g;m.instance&&(ov(m.latestValues)&&m.updateSnapshot(),g=$t(),li(g,m.measurePageBox())),Mw(f,m.latestValues,m.snapshot?.layoutBox,g)}return So(this.latestValues)&&Mw(f,this.latestValues),f}setTargetDelta(d){this.targetDelta=d,this.root.scheduleUpdateProjection(),this.isProjectionDirty=!0}setOptions(d){this.options={...this.options,...d,crossfade:d.crossfade!==void 0?d.crossfade:!0}}clearMeasurements(){this.scroll=void 0,this.layout=void 0,this.snapshot=void 0,this.prevTransformTemplateValue=void 0,this.targetDelta=void 0,this.target=void 0,this.isLayoutDirty=!1}forceRelativeParentToResolveTarget(){this.relativeParent&&this.relativeParent.resolvedRelativeTargetAt!==Kt.timestamp&&this.relativeParent.resolveTargetDelta(!0)}resolveTargetDelta(d=!1){const f=this.getLead();this.isProjectionDirty||(this.isProjectionDirty=f.isProjectionDirty),this.isTransformDirty||(this.isTransformDirty=f.isTransformDirty),this.isSharedProjectionDirty||(this.isSharedProjectionDirty=f.isSharedProjectionDirty);const h=!!this.resumingFrom||this!==f;if(!(d||h&&this.isSharedProjectionDirty||this.isProjectionDirty||this.parent?.isProjectionDirty||this.attemptToResolveRelativeTarget||this.root.updateBlockedByResize))return;const{layout:g,layoutId:y}=this.options;if(!this.layout||!(g||y))return;this.resolvedRelativeTargetAt=Kt.timestamp;const b=this.getClosestProjectingParent();b&&this.linkedParentVersion!==b.layoutVersion&&!b.options.layoutRoot&&this.removeRelativeTarget(),!this.targetDelta&&!this.relativeTarget&&(this.options.layoutAnchor!==!1&&b&&b.layout?this.createRelativeTarget(b,this.layout.layoutBox,b.layout.layoutBox):this.removeRelativeTarget()),!(!this.relativeTarget&&!this.targetDelta)&&(this.target||(this.target=$t(),this.targetWithTransforms=$t()),this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target?(this.forceRelativeParentToResolveTarget(),tR(this.target,this.relativeTarget,this.relativeParent.target,this.options.layoutAnchor||void 0)):this.targetDelta?(this.resumingFrom?this.applyTransform(this.layout.layoutBox,!1,this.target):li(this.target,this.layout.layoutBox),AS(this.target,this.targetDelta)):li(this.target,this.layout.layoutBox),this.attemptToResolveRelativeTarget&&(this.attemptToResolveRelativeTarget=!1,this.options.layoutAnchor!==!1&&b&&!!b.resumingFrom==!!this.resumingFrom&&!b.options.layoutScroll&&b.target&&this.animationProgress!==1?this.createRelativeTarget(b,this.target,b.target):this.relativeParent=this.relativeTarget=void 0))}getClosestProjectingParent(){if(!(!this.parent||ov(this.parent.latestValues)||CS(this.parent.latestValues)))return this.parent.isProjecting()?this.parent:this.parent.getClosestProjectingParent()}isProjecting(){return!!((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout)}createRelativeTarget(d,f,h){this.relativeParent=d,this.linkedParentVersion=d.layoutVersion,this.forceRelativeParentToResolveTarget(),this.relativeTarget=$t(),this.relativeTargetOrigin=$t(),Mu(this.relativeTargetOrigin,f,h,this.options.layoutAnchor||void 0),li(this.relativeTarget,this.relativeTargetOrigin)}removeRelativeTarget(){this.relativeParent=this.relativeTarget=void 0}calcProjection(){const d=this.getLead(),f=!!this.resumingFrom||this!==d;let h=!0;if((this.isProjectionDirty||this.parent?.isProjectionDirty)&&(h=!1),f&&(this.isSharedProjectionDirty||this.isTransformDirty)&&(h=!1),this.resolvedRelativeTargetAt===Kt.timestamp&&(h=!1),h)return;const{layout:m,layoutId:g}=this.options;if(this.isTreeAnimating=!!(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation),this.isTreeAnimating||(this.targetDelta=this.relativeTarget=void 0),!this.layout||!(m||g))return;li(this.layoutCorrected,this.layout.layoutBox);const y=this.treeScale.x,b=this.treeScale.y;j7(this.layoutCorrected,this.treeScale,this.path,f),d.layout&&!d.target&&(this.treeScale.x!==1||this.treeScale.y!==1)&&(d.target=d.layout.layoutBox,d.targetWithTransforms=$t());const{target:_}=d;if(!_){this.prevProjectionDelta&&(this.createProjectionDeltas(),this.scheduleRender());return}!this.projectionDelta||!this.prevProjectionDelta?this.createProjectionDeltas():(Ow(this.prevProjectionDelta.x,this.projectionDelta.x),Ow(this.prevProjectionDelta.y,this.projectionDelta.y)),Sl(this.projectionDelta,this.layoutCorrected,_,this.latestValues),(this.treeScale.x!==y||this.treeScale.y!==b||!Nw(this.projectionDelta.x,this.prevProjectionDelta.x)||!Nw(this.projectionDelta.y,this.prevProjectionDelta.y))&&(this.hasProjected=!0,this.scheduleRender(),this.notifyListeners("projectionUpdate",_))}hide(){this.isVisible=!1}show(){this.isVisible=!0}scheduleRender(d=!0){if(this.options.visualElement?.scheduleRender(),d){const f=this.getStack();f&&f.scheduleRender()}this.resumingFrom&&!this.resumingFrom.instance&&(this.resumingFrom=void 0)}createProjectionDeltas(){this.prevProjectionDelta=Fa(),this.projectionDelta=Fa(),this.projectionDeltaWithTransform=Fa()}setAnimationOrigin(d,f=!1,h){const m=this.snapshot,g=m?m.latestValues:{},y={...this.latestValues},b=Fa();(!this.relativeParent||!this.relativeParent.options.layoutRoot)&&(this.relativeTarget=this.relativeTargetOrigin=void 0),this.attemptToResolveRelativeTarget=!f;const _=$t(),E=m?m.source:void 0,T=this.layout?this.layout.source:void 0,O=E!==T,D=this.getStack(),C=!D||D.members.length<=1,z=!!(O&&!C&&this.options.crossfade===!0&&!this.path.some(kR));this.animationProgress=0;let B;const H=h?.interpolateProjection(d);this.mixTargetDelta=ne=>{const X=ne/1e3,A=H?.(X);A?(b.x.translate=A.x,b.x.scale=dt(d.x.scale,1,X),b.x.origin=d.x.origin,b.x.originPoint=d.x.originPoint,b.y.translate=A.y,b.y.scale=dt(d.y.scale,1,X),b.y.origin=d.y.origin,b.y.originPoint=d.y.originPoint):(Hw(b.x,d.x,X),Hw(b.y,d.y,X)),this.setTargetDelta(b),this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout&&(Mu(_,this.layout.layoutBox,this.relativeParent.layout.layoutBox,this.options.layoutAnchor||void 0),jR(this.relativeTarget,this.relativeTargetOrigin,_,X),B&&oR(this.relativeTarget,B)&&(this.isProjectionDirty=!1),B||(B=$t()),li(B,this.relativeTarget)),O&&(this.animationValues=y,lR(y,g,this.latestValues,X,z,C)),A&&A.rotate!==void 0&&(this.animationValues||(this.animationValues=y),this.animationValues.pathRotation=A.rotate),this.root.scheduleUpdateProjection(),this.scheduleRender(),this.animationProgress=X},this.mixTargetDelta(this.options.layoutRoot?1e3:0)}startAnimation(d){this.notifyListeners("animationStart"),this.currentAnimation?.stop(),this.resumingFrom?.currentAnimation?.stop(),this.pendingAnimation&&(Yn(this.pendingAnimation),this.pendingAnimation=void 0),this.pendingAnimation=ut.update(()=>{yu.hasAnimatedSinceResize=!0,this.motionValue||(this.motionValue=Ya(0)),this.motionValue.jump(0,!1),this.currentAnimation=uR(this.motionValue,[0,1e3],{...d,velocity:0,isSync:!0,onUpdate:f=>{this.mixTargetDelta(f),d.onUpdate&&d.onUpdate(f)},onStop:()=>{},onComplete:()=>{d.onComplete&&d.onComplete(),this.completeAnimation()}}),this.resumingFrom&&(this.resumingFrom.currentAnimation=this.currentAnimation),this.pendingAnimation=void 0})}completeAnimation(){this.resumingFrom&&(this.resumingFrom.currentAnimation=void 0,this.resumingFrom.preserveOpacity=void 0);const d=this.getStack();d&&d.exitAnimationComplete(),this.resumingFrom=this.currentAnimation=this.animationValues=void 0,this.notifyListeners("animationComplete")}finishAnimation(){this.currentAnimation&&(this.mixTargetDelta&&this.mixTargetDelta(vR),this.currentAnimation.stop()),this.completeAnimation()}applyTransformsToTarget(){const d=this.getLead();let{targetWithTransforms:f,target:h,layout:m,latestValues:g}=d;if(!(!f||!h||!m)){if(this!==d&&this.layout&&m&&KS(this.options.animationType,this.layout.layoutBox,m.layoutBox)){h=this.target||$t();const y=dr(this.layout.layoutBox.x);h.x.min=d.target.x.min,h.x.max=h.x.min+y;const b=dr(this.layout.layoutBox.y);h.y.min=d.target.y.min,h.y.max=h.y.min+b}li(f,h),vu(f,g),Sl(this.projectionDeltaWithTransform,this.layoutCorrected,f,g)}}registerSharedNode(d,f){this.sharedNodes.has(d)||this.sharedNodes.set(d,new mR),this.sharedNodes.get(d).add(f);const m=f.options.initialPromotionConfig;f.promote({transition:m?m.transition:void 0,preserveFollowOpacity:m&&m.shouldPreserveFollowOpacity?m.shouldPreserveFollowOpacity(f):void 0})}isLead(){const d=this.getStack();return d?d.lead===this:!0}getLead(){const{layoutId:d}=this.options;return d?this.getStack()?.lead||this:this}getPrevLead(){const{layoutId:d}=this.options;return d?this.getStack()?.prevLead:void 0}getStack(){const{layoutId:d}=this.options;if(d)return this.root.sharedNodes.get(d)}promote({needsReset:d,transition:f,preserveFollowOpacity:h}={}){const m=this.getStack();m&&m.promote(this,h),d&&(this.projectionDelta=void 0,this.needsReset=!0),f&&this.setOptions({transition:f})}relegate(){const d=this.getStack();return d?d.relegate(this):!1}resetSkewAndRotation(){const{visualElement:d}=this.options;if(!d)return;let f=!1;const{latestValues:h}=d;if((h.z||h.rotate||h.rotateX||h.rotateY||h.rotateZ||h.skewX||h.skewY)&&(f=!0),!f)return;const m={};h.z&&Ip("z",d,m,this.animationValues);for(let g=0;g<Up.length;g++)Ip(`rotate${Up[g]}`,d,m,this.animationValues),Ip(`skew${Up[g]}`,d,m,this.animationValues);d.render();for(const g in m)d.setStaticValue(g,m[g]),this.animationValues&&(this.animationValues[g]=m[g]);d.scheduleRender()}applyProjectionStyles(d,f){if(!this.instance||this.isSVG)return;if(!this.isVisible){d.visibility="hidden";return}const h=this.getTransformTemplate();if(this.needsReset){this.needsReset=!1,d.visibility="",d.opacity="",d.pointerEvents=gu(f?.pointerEvents)||"",d.transform=h?h(this.latestValues,""):"none";return}const m=this.getLead();if(!this.projectionDelta||!this.layout||!m.target){this.options.layoutId&&(d.opacity=this.latestValues.opacity!==void 0?this.latestValues.opacity:1,d.pointerEvents=gu(f?.pointerEvents)||""),this.hasProjected&&!So(this.latestValues)&&(d.transform=h?h({},""):"none",this.hasProjected=!1);return}d.visibility="";const g=m.animationValues||m.latestValues;this.applyTransformsToTarget();let y=aR(this.projectionDeltaWithTransform,this.treeScale,g);h&&(y=h(g,y)),d.transform=y;const{x:b,y:_}=this.projectionDelta;d.transformOrigin=`${b.origin*100}% ${_.origin*100}% 0`,m.animationValues?d.opacity=m===this?g.opacity??this.latestValues.opacity??1:this.preserveOpacity?this.latestValues.opacity:g.opacityExit:d.opacity=m===this?g.opacity!==void 0?g.opacity:"":g.opacityExit!==void 0?g.opacityExit:0;for(const E in sv){if(g[E]===void 0)continue;const{correct:T,applyTo:O,isCSSVariable:D}=sv[E],C=y==="none"?g[E]:T(g[E],m);if(O){const z=O.length;for(let B=0;B<z;B++)d[O[B]]=C}else D?this.options.visualElement.renderState.vars[E]=C:d[E]=C}this.options.layoutId&&(d.pointerEvents=m===this?gu(f?.pointerEvents)||"":"none")}clearSnapshot(){this.resumeFrom=this.snapshot=void 0}resetTree(){this.root.nodes.forEach(d=>d.currentAnimation?.stop()),this.root.nodes.forEach(Iw),this.root.sharedNodes.clear()}}}function yR(e){e.updateLayout()}function bR(e){const t=e.resumeFrom?.snapshot||e.snapshot;if(e.isLead()&&e.layout&&t&&e.hasListeners("didUpdate")){const{layoutBox:i,measuredBox:o}=e.layout,{animationType:s}=e.options,l=t.source!==e.layout.source;if(s==="size")Si(g=>{const y=l?t.measuredBox[g]:t.layoutBox[g],b=dr(y);y.min=i[g].min,y.max=y.min+b});else if(s==="x"||s==="y"){const g=s==="x"?"y":"x";lv(l?t.measuredBox[g]:t.layoutBox[g],i[g])}else KS(s,t.layoutBox,i)&&Si(g=>{const y=l?t.measuredBox[g]:t.layoutBox[g],b=dr(i[g]);y.max=y.min+b,e.relativeTarget&&!e.currentAnimation&&(e.isProjectionDirty=!0,e.relativeTarget[g].max=e.relativeTarget[g].min+b)});const d=Fa();Sl(d,i,t.layoutBox);const f=Fa();l?Sl(f,e.applyTransform(o,!0),t.measuredBox):Sl(f,i,t.layoutBox);const h=!US(d);let m=!1;if(!e.resumeFrom){const g=e.getClosestProjectingParent();if(g&&!g.resumeFrom){const{snapshot:y,layout:b}=g;if(y&&b){const _=e.options.layoutAnchor||void 0,E=$t();Mu(E,t.layoutBox,y.layoutBox,_);const T=$t();Mu(T,i,b.layoutBox,_),IS(E,T)||(m=!0),g.options.layoutRoot&&(e.relativeTarget=T,e.relativeTargetOrigin=E,e.relativeParent=g)}}}e.notifyListeners("didUpdate",{layout:i,snapshot:t,delta:f,layoutDelta:d,hasLayoutChanged:h,hasRelativeLayoutChanged:m})}else if(e.isLead()){const{onExitComplete:i}=e.options;i&&i()}e.options.transition=void 0}function xR(e){e.parent&&(e.isProjecting()||(e.isProjectionDirty=e.parent.isProjectionDirty),e.isSharedProjectionDirty||(e.isSharedProjectionDirty=!!(e.isProjectionDirty||e.parent.isProjectionDirty||e.parent.isSharedProjectionDirty)),e.isTransformDirty||(e.isTransformDirty=e.parent.isTransformDirty))}function wR(e){e.isProjectionDirty=e.isSharedProjectionDirty=e.isTransformDirty=!1}function _R(e){e.clearSnapshot()}function Iw(e){e.clearMeasurements()}function SR(e){e.isLayoutDirty=!0,e.updateLayout()}function Vw(e){e.isLayoutDirty=!1}function ER(e){e.isAnimationBlocked&&e.layout&&!e.isLayoutDirty&&(e.snapshot=e.layout,e.isLayoutDirty=!0)}function TR(e){const{visualElement:t}=e.options;t&&t.getProps().onBeforeLayoutMeasure&&t.notify("BeforeLayoutMeasure"),e.resetTransform()}function Fw(e){e.finishAnimation(),e.targetDelta=e.relativeTarget=e.target=void 0,e.isProjectionDirty=!0}function OR(e){e.resolveTargetDelta()}function CR(e){e.calcProjection()}function AR(e){e.resetSkewAndRotation()}function RR(e){e.removeLeadSnapshot()}function Hw(e,t,i){e.translate=dt(t.translate,0,i),e.scale=dt(t.scale,1,i),e.origin=t.origin,e.originPoint=t.originPoint}function qw(e,t,i,o){e.min=dt(t.min,i.min,o),e.max=dt(t.max,i.max,o)}function jR(e,t,i,o){qw(e.x,t.x,i.x,o),qw(e.y,t.y,i.y,o)}function kR(e){return e.animationValues&&e.animationValues.opacityExit!==void 0}const MR={duration:.45,ease:[.4,0,.1,1]},Kw=e=>typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().includes(e),Gw=Kw("applewebkit/")&&!Kw("chrome/")?Math.round:Xr;function Yw(e){e.min=Gw(e.min),e.max=Gw(e.max)}function DR(e){Yw(e.x),Yw(e.y)}function KS(e,t,i){return e==="position"||e==="preserve-aspect"&&!eR(Lw(t),Lw(i),.2)}function zR(e){return e!==e.root&&e.scroll?.wasRoot}const PR=qS({attachResizeListener:(e,t)=>Nl(e,"resize",t),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body?.scrollLeft||0,y:document.documentElement.scrollTop||document.body?.scrollTop||0}),checkIsScrollRoot:()=>!0}),Vp={current:void 0},GS=qS({measureScroll:e=>({x:e.scrollLeft,y:e.scrollTop}),defaultParent:()=>{if(!Vp.current){const e=new PR({});e.mount(window),e.setOptions({layoutScroll:!0}),Vp.current=e}return Vp.current},resetTransform:(e,t)=>{e.style.transform=t!==void 0?t:"none"},checkIsScrollRoot:e=>window.getComputedStyle(e).position==="fixed"}),Du=w.createContext({transformPagePoint:e=>e,isStatic:!1,reducedMotion:"never"});function LR(e=!0){const t=w.useContext(hg);if(t===null)return[!0,null];const{isPresent:i,onExitComplete:o,register:s}=t,l=w.useId();w.useEffect(()=>{if(e)return s(l)},[e]);const d=w.useCallback(()=>e&&o&&o(l),[l,o,e]);return!i&&o?[!1,d]:[!0]}const YS=w.createContext({strict:!1}),Qw={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};let Xw=!1;function NR(){if(Xw)return;const e={};for(const t in Qw)e[t]={isEnabled:i=>Qw[t].some(o=>!!i[o])};ES(e),Xw=!0}function QS(){return NR(),O7()}function $R(e){const t=QS();for(const i in e)t[i]={...t[i],...e[i]};ES(t)}const BR=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function zu(e){return e.startsWith("while")||e.startsWith("drag")&&e!=="draggable"||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("onLayout")||BR.has(e)}let XS=e=>!zu(e);function WS(e){typeof e=="function"&&(XS=t=>t.startsWith("on")?!zu(t):e(t))}try{WS(require("@emotion/is-prop-valid").default)}catch{}function UR(e,t,i){const o={};for(const s in e)s==="values"&&typeof e.values=="object"||Gt(e[s])||(XS(s)||i===!0&&zu(s)||!t&&!zu(s)||e.draggable&&s.startsWith("onDrag"))&&(o[s]=e[s]);return o}function IR({children:e,isValidProp:t,...i}){t&&WS(t);const o=w.useContext(Du);i={...o,...i},i.transition=Og(i.transition,o.transition),i.isStatic=S4(()=>i.isStatic);const s=w.useMemo(()=>i,[JSON.stringify(i.transition),i.transformPagePoint,i.reducedMotion,i.skipAnimations]);return v.jsx(Du.Provider,{value:s,children:e})}const Ju=w.createContext({});function VR(e,t){if(Zu(e)){const{initial:i,animate:o}=e;return{initial:i===!1||Ll(i)?i:void 0,animate:Ll(o)?o:void 0}}return e.inherit!==!1?t:{}}function FR(e){const{initial:t,animate:i}=VR(e,w.useContext(Ju));return w.useMemo(()=>({initial:t,animate:i}),[Ww(t),Ww(i)])}function Ww(e){return Array.isArray(e)?e.join(" "):e}const $g=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function ZS(e,t,i){for(const o in t)!Gt(t[o])&&!kS(o,i)&&(e[o]=t[o])}function HR({transformTemplate:e},t){return w.useMemo(()=>{const i=$g();return Lg(i,t,e),Object.assign({},i.vars,i.style)},[t])}function qR(e,t){const i=e.style||{},o={};return ZS(o,i,e),Object.assign(o,HR(e,t)),o}function KR(e,t){const i={},o=qR(e,t);return e.drag&&e.dragListener!==!1&&(i.draggable=!1,o.userSelect=o.WebkitUserSelect=o.WebkitTouchCallout="none",o.touchAction=e.drag===!0?"none":`pan-${e.drag==="x"?"y":"x"}`),e.tabIndex===void 0&&(e.onTap||e.onTapStart||e.whileTap)&&(i.tabIndex=0),i.style=o,i}const JS=()=>({...$g(),attrs:{}});function GR(e,t,i,o){const s=w.useMemo(()=>{const l=JS();return MS(l,t,zS(o),e.transformTemplate,e.style),{...l.attrs,style:{...l.style}}},[t]);if(e.style){const l={};ZS(l,e.style,e),s.style={...l,...s.style}}return s}const YR=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function Bg(e){return typeof e!="string"||e.includes("-")?!1:!!(YR.indexOf(e)>-1||/[A-Z]/u.test(e))}function QR(e,t,i,{latestValues:o},s,l=!1,d){const h=(d??Bg(e)?GR:KR)(t,o,s,e),m=UR(t,typeof e=="string",l),g=e!==w.Fragment?{...m,...h,ref:i}:{},{children:y}=t,b=w.useMemo(()=>Gt(y)?y.get():y,[y]);return w.createElement(e,{...g,children:b})}function XR({scrapeMotionValuesFromProps:e,createRenderState:t},i,o,s){return{latestValues:WR(i,o,s,e),renderState:t()}}function WR(e,t,i,o){const s={},l=o(e,{});for(const b in l)s[b]=gu(l[b]);let{initial:d,animate:f}=e;const h=Zu(e),m=_S(e);t&&m&&!h&&e.inherit!==!1&&(d===void 0&&(d=t.initial),f===void 0&&(f=t.animate));let g=i?i.initial===!1:!1;g=g||d===!1;const y=g?f:d;if(y&&typeof y!="boolean"&&!Wu(y)){const b=Array.isArray(y)?y:[y];for(let _=0;_<b.length;_++){const E=Rg(e,b[_]);if(E){const{transitionEnd:T,transition:O,...D}=E;for(const C in D){let z=D[C];if(Array.isArray(z)){const B=g?z.length-1:0;z=z[B]}z!==null&&(s[C]=z)}for(const C in T)s[C]=T[C]}}}return s}const e3=e=>(t,i)=>{const o=w.useContext(Ju),s=w.useContext(hg),l=()=>XR(e,t,o,s);return i?l():S4(l)},ZR=e3({scrapeMotionValuesFromProps:Ng,createRenderState:$g}),JR=e3({scrapeMotionValuesFromProps:PS,createRenderState:JS}),ej=Symbol.for("motionComponentSymbol");function tj(e,t,i){const o=w.useRef(i);w.useInsertionEffect(()=>{o.current=i});const s=w.useRef(null);return w.useCallback(l=>{l&&e.onMount?.(l),t&&(l?t.mount(l):t.unmount());const d=o.current;if(typeof d=="function")if(l){const f=d(l);typeof f=="function"&&(s.current=f)}else s.current?(s.current(),s.current=null):d(l);else d&&(d.current=l)},[t])}const t3=w.createContext({});function Na(e){return e&&typeof e=="object"&&Object.prototype.hasOwnProperty.call(e,"current")}function rj(e,t,i,o,s,l){const{visualElement:d}=w.useContext(Ju),f=w.useContext(YS),h=w.useContext(hg),m=w.useContext(Du),g=m.reducedMotion,y=m.skipAnimations,b=w.useRef(null),_=w.useRef(!1);o=o||f.renderer,!b.current&&o&&(b.current=o(e,{visualState:t,parent:d,props:i,presenceContext:h,blockInitialAnimation:h?h.initial===!1:!1,reducedMotionConfig:g,skipAnimations:y,isSVG:l}),_.current&&b.current&&(b.current.manuallyAnimateOnMount=!0));const E=b.current,T=w.useContext(t3);E&&!E.projection&&s&&(E.type==="html"||E.type==="svg")&&ij(b.current,i,s,T);const O=w.useRef(!1);w.useInsertionEffect(()=>{E&&O.current&&E.update(i,h)});const D=i[dS],C=w.useRef(!!D&&typeof window<"u"&&!window.MotionHandoffIsComplete?.(D)&&window.MotionHasOptimisedAnimation?.(D));return WC(()=>{_.current=!0,E&&(O.current=!0,window.MotionIsMounted=!0,E.updateFeatures(),E.scheduleRenderMicrotask(),C.current&&E.animationState&&E.animationState.animateChanges())}),w.useEffect(()=>{E&&(!C.current&&E.animationState&&E.animationState.animateChanges(),C.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(D)}),C.current=!1),E.enteringChildren=void 0)}),E}function ij(e,t,i,o){const{layoutId:s,layout:l,drag:d,dragConstraints:f,layoutScroll:h,layoutRoot:m,layoutAnchor:g,layoutCrossfade:y}=t;e.projection=new i(e.latestValues,t["data-framer-portal-id"]?void 0:r3(e.parent)),e.projection.setOptions({layoutId:s,layout:l,alwaysMeasureLayout:!!d||f&&Na(f),visualElement:e,animationType:typeof l=="string"?l:"both",initialPromotionConfig:o,crossfade:y,layoutScroll:h,layoutRoot:m,layoutAnchor:g})}function r3(e){if(e)return e.options.allowProjection!==!1?e.projection:r3(e.parent)}function Fp(e,{forwardMotionProps:t=!1,type:i}={},o,s){o&&$R(o);const l=i?i==="svg":Bg(e),d=l?JR:ZR;function f(m,g){let y;const b={...w.useContext(Du),...m,layoutId:nj(m)},{isStatic:_}=b,E=FR(m),T=d(m,_);if(!_&&typeof window<"u"){oj();const O=aj(b);y=O.MeasureLayout,E.visualElement=rj(e,T,b,s,O.ProjectionNode,l)}return v.jsxs(Ju.Provider,{value:E,children:[y&&E.visualElement?v.jsx(y,{visualElement:E.visualElement,...b}):null,QR(e,m,tj(T,E.visualElement,g),T,_,t,l)]})}f.displayName=`motion.${typeof e=="string"?e:`create(${e.displayName??e.name??""})`}`;const h=w.forwardRef(f);return h[ej]=e,h}function nj({layoutId:e}){const t=w.useContext(_4).id;return t&&e!==void 0?t+"-"+e:e}function oj(e,t){w.useContext(YS).strict}function aj(e){const t=QS(),{drag:i,layout:o}=t;if(!i&&!o)return{};const s={...i,...o};return{MeasureLayout:i?.isEnabled(e)||o?.isEnabled(e)?s.MeasureLayout:void 0,ProjectionNode:s.ProjectionNode}}function sj(e,t){if(typeof Proxy>"u")return Fp;const i=new Map,o=(l,d)=>Fp(l,d,e,t),s=(l,d)=>o(l,d);return new Proxy(s,{get:(l,d)=>d==="create"?o:(i.has(d)||i.set(d,Fp(d,void 0,e,t)),i.get(d))})}const lj=(e,t)=>t.isSVG??Bg(e)?new F7(t):new N7(t,{allowProjection:e!==w.Fragment});class cj extends Xn{constructor(t){super(t),t.animationState||(t.animationState=Y7(t))}updateAnimationControlsSubscription(){const{animate:t}=this.node.getProps();Wu(t)&&(this.unmountControls=t.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){const{animate:t}=this.node.getProps(),{animate:i}=this.node.prevProps||{};t!==i&&this.updateAnimationControlsSubscription()}unmount(){this.node.animationState.reset(),this.unmountControls?.()}}let dj=0;class uj extends Xn{constructor(){super(...arguments),this.id=dj++,this.isExitComplete=!1}update(){if(!this.node.presenceContext)return;const{isPresent:t,onExitComplete:i}=this.node.presenceContext,{isPresent:o}=this.node.prevPresenceContext||{};if(!this.node.animationState||t===o)return;if(t&&o===!1){if(this.isExitComplete){const{initial:l,custom:d}=this.node.getProps();if(typeof l=="string"||typeof l=="object"&&l!==null&&!Array.isArray(l)){const f=ko(this.node,l,d);if(f){const{transition:h,transitionEnd:m,...g}=f;for(const y in g)this.node.getValue(y)?.jump(g[y])}}this.node.animationState.reset(),this.node.animationState.animateChanges()}else this.node.animationState.setActive("exit",!1);this.isExitComplete=!1;return}const s=this.node.animationState.setActive("exit",!t);i&&!t&&s.then(()=>{this.isExitComplete=!0,i(this.id)})}mount(){const{register:t,onExitComplete:i}=this.node.presenceContext||{};i&&i(this.id),t&&(this.unmount=t(this.id))}unmount(){}}const fj={animation:{Feature:cj},exit:{Feature:uj}};function wc(e){return{point:{x:e.pageX,y:e.pageY}}}const hj=e=>t=>Mg(t)&&e(t,wc(t));function El(e,t,i,o){return Nl(e,t,hj(i),o)}const i3=({current:e})=>e?e.ownerDocument.defaultView:null,Zw=(e,t)=>Math.abs(e-t);function pj(e,t){const i=Zw(e.x,t.x),o=Zw(e.y,t.y);return Math.sqrt(i**2+o**2)}const Jw=new Set(["auto","scroll"]);class n3{constructor(t,i,{transformPagePoint:o,contextWindow:s=window,dragSnapToOrigin:l=!1,distanceThreshold:d=3,element:f}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.lastRawMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=_=>{this.handleScroll(_.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;this.lastRawMoveEventInfo&&(this.lastMoveEventInfo=Yd(this.lastRawMoveEventInfo,this.transformPagePoint));const _=Hp(this.lastMoveEventInfo,this.history),E=this.startEvent!==null,T=pj(_.offset,{x:0,y:0})>=this.distanceThreshold;if(!E&&!T)return;const{point:O}=_,{timestamp:D}=Kt;this.history.push({...O,timestamp:D});const{onStart:C,onMove:z}=this.handlers;E||(C&&C(this.lastMoveEvent,_),this.startEvent=this.lastMoveEvent),z&&z(this.lastMoveEvent,_)},this.handlePointerMove=(_,E)=>{this.lastMoveEvent=_,this.lastRawMoveEventInfo=E,this.lastMoveEventInfo=Yd(E,this.transformPagePoint),ut.update(this.updatePoint,!0)},this.handlePointerUp=(_,E)=>{this.end();const{onEnd:T,onSessionEnd:O,resumeAnimation:D}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&D&&D(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const C=Hp(_.type==="pointercancel"?this.lastMoveEventInfo:Yd(E,this.transformPagePoint),this.history);this.startEvent&&T&&T(_,C),O&&O(_,C)},!Mg(t))return;this.dragSnapToOrigin=l,this.handlers=i,this.transformPagePoint=o,this.distanceThreshold=d,this.contextWindow=s||window;const h=wc(t),m=Yd(h,this.transformPagePoint),{point:g}=m,{timestamp:y}=Kt;this.history=[{...g,timestamp:y}];const{onSessionStart:b}=i;b&&b(t,Hp(m,this.history)),this.removeListeners=yc(El(this.contextWindow,"pointermove",this.handlePointerMove),El(this.contextWindow,"pointerup",this.handlePointerUp),El(this.contextWindow,"pointercancel",this.handlePointerUp)),f&&this.startScrollTracking(f)}startScrollTracking(t){let i=t.parentElement;for(;i;){const o=getComputedStyle(i);(Jw.has(o.overflowX)||Jw.has(o.overflowY))&&this.scrollPositions.set(i,{x:i.scrollLeft,y:i.scrollTop}),i=i.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0}),window.addEventListener("scroll",this.onWindowScroll),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(t){const i=this.scrollPositions.get(t);if(!i)return;const o=t===window,s=o?{x:window.scrollX,y:window.scrollY}:{x:t.scrollLeft,y:t.scrollTop},l={x:s.x-i.x,y:s.y-i.y};l.x===0&&l.y===0||(o?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=l.x,this.lastMoveEventInfo.point.y+=l.y):this.history.length>0&&(this.history[0].x-=l.x,this.history[0].y-=l.y),this.scrollPositions.set(t,s),ut.update(this.updatePoint,!0))}updateHandlers(t){this.handlers=t}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),Yn(this.updatePoint)}}function Yd(e,t){return t?{point:t(e.point)}:e}function e2(e,t){return{x:e.x-t.x,y:e.y-t.y}}function Hp({point:e},t){return{point:e,delta:e2(e,o3(t)),offset:e2(e,mj(t)),velocity:vj(t,.1)}}function mj(e){return e[0]}function o3(e){return e[e.length-1]}function vj(e,t){if(e.length<2)return{x:0,y:0};let i=e.length-1,o=null;const s=o3(e);for(;i>=0&&(o=e[i],!(s.timestamp-o.timestamp>kr(t)));)i--;if(!o)return{x:0,y:0};o===e[0]&&e.length>2&&s.timestamp-o.timestamp>kr(t)*2&&(o=e[1]);const l=Gr(s.timestamp-o.timestamp);if(l===0)return{x:0,y:0};const d={x:(s.x-o.x)/l,y:(s.y-o.y)/l};return d.x===1/0&&(d.x=0),d.y===1/0&&(d.y=0),d}function gj(e,{min:t,max:i},o){return t!==void 0&&e<t?e=o?dt(t,e,o.min):Math.max(e,t):i!==void 0&&e>i&&(e=o?dt(i,e,o.max):Math.min(e,i)),e}function t2(e,t,i){return{min:t!==void 0?e.min+t:void 0,max:i!==void 0?e.max+i-(e.max-e.min):void 0}}function yj(e,{top:t,left:i,bottom:o,right:s}){return{x:t2(e.x,i,s),y:t2(e.y,t,o)}}function r2(e,t){let i=t.min-e.min,o=t.max-e.max;return t.max-t.min<e.max-e.min&&([i,o]=[o,i]),{min:i,max:o}}function bj(e,t){return{x:r2(e.x,t.x),y:r2(e.y,t.y)}}function xj(e,t){let i=.5;const o=dr(e),s=dr(t);return s>o?i=zl(t.min,t.max-o,e.min):o>s&&(i=zl(e.min,e.max-s,t.min)),Ri(0,1,i)}function wj(e,t){const i={};return t.min!==void 0&&(i.min=t.min-e.min),t.max!==void 0&&(i.max=t.max-e.min),i}const cv=.35;function _j(e=cv){return e===!1?e=0:e===!0&&(e=cv),{x:i2(e,"left","right"),y:i2(e,"top","bottom")}}function i2(e,t,i){return{min:n2(e,t),max:n2(e,i)}}function n2(e,t){return typeof e=="number"?e:e[t]||0}const Sj=new WeakMap;class Ej{constructor(t){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=$t(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=t}start(t,{snapToCursor:i=!1,distanceThreshold:o}={}){const{presenceContext:s}=this.visualElement;if(s&&s.isPresent===!1)return;const l=y=>{i&&this.snapToCursor(wc(y).point),this.stopAnimation()},d=(y,b)=>{const{drag:_,dragPropagation:E,onDragStart:T}=this.getProps();if(_&&!E&&(this.openDragLock&&this.openDragLock(),this.openDragLock=r7(_),!this.openDragLock))return;this.latestPointerEvent=y,this.latestPanInfo=b,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),Si(D=>{let C=this.getAxisMotionValue(D).get()||0;if(Ci.test(C)){const{projection:z}=this.visualElement;if(z&&z.layout){const B=z.layout.layoutBox[D];B&&(C=dr(B)*(parseFloat(C)/100))}}this.originPoint[D]=C}),T&&ut.update(()=>T(y,b),!1,!0),Jm(this.visualElement,"transform");const{animationState:O}=this.visualElement;O&&O.setActive("whileDrag",!0)},f=(y,b)=>{this.latestPointerEvent=y,this.latestPanInfo=b;const{dragPropagation:_,dragDirectionLock:E,onDirectionLock:T,onDrag:O}=this.getProps();if(!_&&!this.openDragLock)return;const{offset:D}=b;if(E&&this.currentDirection===null){this.currentDirection=Oj(D),this.currentDirection!==null&&T&&T(this.currentDirection);return}this.updateAxis("x",b.point,D),this.updateAxis("y",b.point,D),this.visualElement.render(),O&&ut.update(()=>O(y,b),!1,!0)},h=(y,b)=>{this.latestPointerEvent=y,this.latestPanInfo=b,this.stop(y,b),this.latestPointerEvent=null,this.latestPanInfo=null},m=()=>{const{dragSnapToOrigin:y}=this.getProps();(y||this.constraints)&&this.startAnimation({x:0,y:0})},{dragSnapToOrigin:g}=this.getProps();this.panSession=new n3(t,{onSessionStart:l,onStart:d,onMove:f,onSessionEnd:h,resumeAnimation:m},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:g,distanceThreshold:o,contextWindow:i3(this.visualElement),element:this.visualElement.current})}stop(t,i){const o=t||this.latestPointerEvent,s=i||this.latestPanInfo,l=this.isDragging;if(this.cancel(),!l||!s||!o)return;const{velocity:d}=s;this.startAnimation(d);const{onDragEnd:f}=this.getProps();f&&ut.postRender(()=>f(o,s))}cancel(){this.isDragging=!1;const{projection:t,animationState:i}=this.visualElement;t&&(t.isAnimationBlocked=!1),this.endPanSession();const{dragPropagation:o}=this.getProps();!o&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),i&&i.setActive("whileDrag",!1)}endPanSession(){this.panSession&&this.panSession.end(),this.panSession=void 0}updateAxis(t,i,o){const{drag:s}=this.getProps();if(!o||!Qd(t,s,this.currentDirection))return;const l=this.getAxisMotionValue(t);let d=this.originPoint[t]+o[t];this.constraints&&this.constraints[t]&&(d=gj(d,this.constraints[t],this.elastic[t])),l.set(d)}resolveConstraints(){const{dragConstraints:t,dragElastic:i}=this.getProps(),o=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):this.visualElement.projection?.layout,s=this.constraints;t&&Na(t)?this.constraints||(this.constraints=this.resolveRefConstraints()):t&&o?this.constraints=yj(o.layoutBox,t):this.constraints=!1,this.elastic=_j(i),s!==this.constraints&&!Na(t)&&o&&this.constraints&&!this.hasMutatedConstraints&&Si(l=>{this.constraints!==!1&&this.getAxisMotionValue(l)&&(this.constraints[l]=wj(o.layoutBox[l],this.constraints[l]))})}resolveRefConstraints(){const{dragConstraints:t,onMeasureDragConstraints:i}=this.getProps();if(!t||!Na(t))return!1;const o=t.current,{projection:s}=this.visualElement;if(!s||!s.layout)return!1;s.root&&(s.root.scroll=void 0,s.root.updateScroll());const l=k7(o,s.root,this.visualElement.getTransformPagePoint());let d=bj(s.layout.layoutBox,l);if(i){const f=i(A7(d));this.hasMutatedConstraints=!!f,f&&(d=OS(f))}return d}startAnimation(t){const{drag:i,dragMomentum:o,dragElastic:s,dragTransition:l,dragSnapToOrigin:d,onDragTransitionEnd:f}=this.getProps(),h=this.constraints||{},m=Si(g=>{if(!Qd(g,i,this.currentDirection))return;let y=h&&h[g]||{};(d===!0||d===g)&&(y={min:0,max:0});const b=s?200:1e6,_=s?40:1e7,E={type:"inertia",velocity:o?t[g]:0,bounceStiffness:b,bounceDamping:_,timeConstant:750,restDelta:1,restSpeed:10,...l,...y};return this.startAxisValueAnimation(g,E)});return Promise.all(m).then(f)}startAxisValueAnimation(t,i){const o=this.getAxisMotionValue(t);return Jm(this.visualElement,t),o.start(Ag(t,o,0,i,this.visualElement,!1))}stopAnimation(){Si(t=>this.getAxisMotionValue(t).stop())}getAxisMotionValue(t){const i=`_drag${t.toUpperCase()}`,s=this.visualElement.getProps()[i];return s||this.visualElement.getValue(t,this.visualElement.latestValues[t]??0)}snapToCursor(t){Si(i=>{const{drag:o}=this.getProps();if(!Qd(i,o,this.currentDirection))return;const{projection:s}=this.visualElement,l=this.getAxisMotionValue(i);if(s&&s.layout){const{min:d,max:f}=s.layout.layoutBox[i],h=l.get()||0;l.set(t[i]-dt(d,f,.5)+h)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag:t,dragConstraints:i}=this.getProps(),{projection:o}=this.visualElement;if(!Na(i)||!o||!this.constraints)return;this.stopAnimation();const s={x:0,y:0};Si(d=>{const f=this.getAxisMotionValue(d);if(f&&this.constraints!==!1){const h=f.get();s[d]=xj({min:h,max:h},this.constraints[d])}});const{transformTemplate:l}=this.visualElement.getProps();this.visualElement.current.style.transform=l?l({},""):"none",o.root&&o.root.updateScroll(),o.updateLayout(),this.constraints=!1,this.resolveConstraints(),Si(d=>{if(!Qd(d,t,null))return;const f=this.getAxisMotionValue(d),{min:h,max:m}=this.constraints[d];f.set(dt(h,m,s[d]))}),this.visualElement.render()}addListeners(){if(!this.visualElement.current)return;Sj.set(this.visualElement,this);const t=this.visualElement.current,i=El(t,"pointerdown",m=>{const{drag:g,dragListener:y=!0}=this.getProps(),b=m.target,_=b!==t&&l7(b);g&&y&&!_&&this.start(m)});let o;const s=()=>{const{dragConstraints:m}=this.getProps();Na(m)&&m.current&&(this.constraints=this.resolveRefConstraints(),o||(o=Tj(t,m.current,()=>this.scalePositionWithinConstraints())))},{projection:l}=this.visualElement,d=l.addEventListener("measure",s);l&&!l.layout&&(l.root&&l.root.updateScroll(),l.updateLayout()),ut.read(s);const f=Nl(window,"resize",()=>this.scalePositionWithinConstraints()),h=l.addEventListener("didUpdate",(({delta:m,hasLayoutChanged:g})=>{this.isDragging&&g&&(Si(y=>{const b=this.getAxisMotionValue(y);b&&(this.originPoint[y]+=m[y].translate,b.set(b.get()+m[y].translate))}),this.visualElement.render())}));return()=>{f(),i(),d(),h&&h(),o&&o()}}getProps(){const t=this.visualElement.getProps(),{drag:i=!1,dragDirectionLock:o=!1,dragPropagation:s=!1,dragConstraints:l=!1,dragElastic:d=cv,dragMomentum:f=!0}=t;return{...t,drag:i,dragDirectionLock:o,dragPropagation:s,dragConstraints:l,dragElastic:d,dragMomentum:f}}}function o2(e){let t=!0;return()=>{if(t){t=!1;return}e()}}function Tj(e,t,i){const o=pw(e,o2(i)),s=pw(t,o2(i));return()=>{o(),s()}}function Qd(e,t,i){return(t===!0||t===e)&&(i===null||i===e)}function Oj(e,t=10){let i=null;return Math.abs(e.y)>t?i="y":Math.abs(e.x)>t&&(i="x"),i}class Cj extends Xn{constructor(t){super(t),this.removeGroupControls=Xr,this.removeListeners=Xr,this.controls=new Ej(t)}mount(){const{dragControls:t}=this.node.getProps();t&&(this.removeGroupControls=t.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||Xr}update(){const{dragControls:t}=this.node.getProps(),{dragControls:i}=this.node.prevProps||{};t!==i&&(this.removeGroupControls(),t&&(this.removeGroupControls=t.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners(),this.controls.isDragging||this.controls.endPanSession()}}const qp=e=>(t,i)=>{e&&ut.update(()=>e(t,i),!1,!0)};class Aj extends Xn{constructor(){super(...arguments),this.removePointerDownListener=Xr}onPointerDown(t){this.session=new n3(t,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:i3(this.node)})}createPanHandlers(){const{onPanSessionStart:t,onPanStart:i,onPan:o,onPanEnd:s}=this.node.getProps();return{onSessionStart:qp(t),onStart:qp(i),onMove:qp(o),onEnd:(l,d)=>{delete this.session,s&&ut.postRender(()=>s(l,d))}}}mount(){this.removePointerDownListener=El(this.node.current,"pointerdown",t=>this.onPointerDown(t))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}let Kp=!1;class Rj extends w.Component{componentDidMount(){const{visualElement:t,layoutGroup:i,switchLayoutGroup:o,layoutId:s}=this.props,{projection:l}=t;l&&(i.group&&i.group.add(l),o&&o.register&&s&&o.register(l),Kp&&l.root.didUpdate(),l.addEventListener("animationComplete",()=>{this.safeToRemove()}),l.setOptions({...l.options,layoutDependency:this.props.layoutDependency,onExitComplete:()=>this.safeToRemove()})),yu.hasEverUpdated=!0}getSnapshotBeforeUpdate(t){const{layoutDependency:i,visualElement:o,drag:s,isPresent:l}=this.props,{projection:d}=o;return d&&(d.isPresent=l,t.layoutDependency!==i&&d.setOptions({...d.options,layoutDependency:i}),Kp=!0,s||t.layoutDependency!==i||i===void 0||t.isPresent!==l?d.willUpdate():this.safeToRemove(),t.isPresent!==l&&(l?d.promote():d.relegate()||ut.postRender(()=>{const f=d.getStack();(!f||!f.members.length)&&this.safeToRemove()}))),null}componentDidUpdate(){const{visualElement:t,layoutAnchor:i}=this.props,{projection:o}=t;o&&(o.options.layoutAnchor=i,o.root.didUpdate(),kg.postRender(()=>{!o.currentAnimation&&o.isLead()&&this.safeToRemove()}))}componentWillUnmount(){const{visualElement:t,layoutGroup:i,switchLayoutGroup:o}=this.props,{projection:s}=t;Kp=!0,s&&(s.scheduleCheckAfterUnmount(),i&&i.group&&i.group.remove(s),o&&o.deregister&&o.deregister(s))}safeToRemove(){const{safeToRemove:t}=this.props;t&&t()}render(){return null}}function a3(e){const[t,i]=LR(),o=w.useContext(_4);return v.jsx(Rj,{...e,layoutGroup:o,switchLayoutGroup:w.useContext(t3),isPresent:t,safeToRemove:i})}const jj={pan:{Feature:Aj},drag:{Feature:Cj,ProjectionNode:GS,MeasureLayout:a3}};function a2(e,t,i){const{props:o}=e;e.animationState&&o.whileHover&&e.animationState.setActive("whileHover",i==="Start");const s="onHover"+i,l=o[s];l&&ut.postRender(()=>l(t,wc(t)))}class kj extends Xn{mount(){const{current:t}=this.node;t&&(this.unmount=n7(t,(i,o)=>(a2(this.node,o,"Start"),s=>a2(this.node,s,"End"))))}unmount(){}}class Mj extends Xn{constructor(){super(...arguments),this.isActive=!1}onFocus(){let t=!1;try{t=this.node.current.matches(":focus-visible")}catch{t=!0}!t||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){!this.isActive||!this.node.animationState||(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=yc(Nl(this.node.current,"focus",()=>this.onFocus()),Nl(this.node.current,"blur",()=>this.onBlur()))}unmount(){}}function s2(e,t,i){const{props:o}=e;if(e.current instanceof HTMLButtonElement&&e.current.disabled)return;e.animationState&&o.whileTap&&e.animationState.setActive("whileTap",i==="Start");const s="onTap"+(i==="End"?"":i),l=o[s];l&&ut.postRender(()=>l(t,wc(t)))}class Dj extends Xn{mount(){const{current:t}=this.node;if(!t)return;const{globalTapTarget:i,propagate:o}=this.node.props;this.unmount=d7(t,(s,l)=>(s2(this.node,l,"Start"),(d,{success:f})=>s2(this.node,d,f?"End":"Cancel")),{useGlobalTarget:i,stopPropagation:o?.tap===!1})}unmount(){}}const dv=new WeakMap,Gp=new WeakMap,zj=e=>{const t=dv.get(e.target);t&&t(e)},Pj=e=>{e.forEach(zj)};function Lj({root:e,...t}){const i=e||document;Gp.has(i)||Gp.set(i,{});const o=Gp.get(i),s=JSON.stringify(t);return o[s]||(o[s]=new IntersectionObserver(Pj,{root:e,...t})),o[s]}function Nj(e,t,i){const o=Lj(t);return dv.set(e,i),o.observe(e),()=>{dv.delete(e),o.unobserve(e)}}const $j={some:0,all:1};class Bj extends Xn{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){this.stopObserver?.();const{viewport:t={}}=this.node.getProps(),{root:i,margin:o,amount:s="some",once:l}=t,d={root:i?i.current:void 0,rootMargin:o,threshold:typeof s=="number"?s:$j[s]},f=h=>{const{isIntersecting:m}=h;if(this.isInView===m||(this.isInView=m,l&&!m&&this.hasEnteredView))return;m&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",m);const{onViewportEnter:g,onViewportLeave:y}=this.node.getProps(),b=m?g:y;b&&b(h)};this.stopObserver=Nj(this.node.current,d,f)}mount(){this.startObserver()}update(){if(typeof IntersectionObserver>"u")return;const{props:t,prevProps:i}=this.node;["amount","margin","root"].some(Uj(t,i))&&this.startObserver()}unmount(){this.stopObserver?.(),this.hasEnteredView=!1,this.isInView=!1}}function Uj({viewport:e={}},{viewport:t={}}={}){return i=>e[i]!==t[i]}const Ij={inView:{Feature:Bj},tap:{Feature:Dj},focus:{Feature:Mj},hover:{Feature:kj}},Vj={layout:{ProjectionNode:GS,MeasureLayout:a3}},Fj={...fj,...Ij,...jj,...Vj},Wr=sj(Fj,lj);function j(e,t,i,o){var s=arguments.length,l=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,i):o,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(e,t,i,o);else for(var f=e.length-1;f>=0;f--)(d=e[f])&&(l=(s<3?d(l):s>3?d(t,i,l):d(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l}const bt=e=>(t,i)=>{i!==void 0?i.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)};const bu=globalThis,Ug=bu.ShadowRoot&&(bu.ShadyCSS===void 0||bu.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ig=Symbol(),l2=new WeakMap;let s3=class{constructor(t,i,o){if(this._$cssResult$=!0,o!==Ig)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=i}get styleSheet(){let t=this.o;const i=this.t;if(Ug&&t===void 0){const o=i!==void 0&&i.length===1;o&&(t=l2.get(i)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&l2.set(i,t))}return t}toString(){return this.cssText}};const Hj=e=>new s3(typeof e=="string"?e:e+"",void 0,Ig),Ye=(e,...t)=>{const i=e.length===1?e[0]:t.reduce((o,s,l)=>o+(d=>{if(d._$cssResult$===!0)return d.cssText;if(typeof d=="number")return d;throw Error("Value passed to 'css' function must be a 'css' function result: "+d+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+e[l+1],e[0]);return new s3(i,e,Ig)},qj=(e,t)=>{if(Ug)e.adoptedStyleSheets=t.map(i=>i instanceof CSSStyleSheet?i:i.styleSheet);else for(const i of t){const o=document.createElement("style"),s=bu.litNonce;s!==void 0&&o.setAttribute("nonce",s),o.textContent=i.cssText,e.appendChild(o)}},c2=Ug?e=>e:e=>e instanceof CSSStyleSheet?(t=>{let i="";for(const o of t.cssRules)i+=o.cssText;return Hj(i)})(e):e;const{is:Kj,defineProperty:Gj,getOwnPropertyDescriptor:Yj,getOwnPropertyNames:Qj,getOwnPropertySymbols:Xj,getPrototypeOf:Wj}=Object,ef=globalThis,d2=ef.trustedTypes,Zj=d2?d2.emptyScript:"",Jj=ef.reactiveElementPolyfillSupport,Tl=(e,t)=>e,Pu={toAttribute(e,t){switch(t){case Boolean:e=e?Zj:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=e!==null;break;case Number:i=e===null?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch{i=null}}return i}},Vg=(e,t)=>!Kj(e,t),u2={attribute:!0,type:String,converter:Pu,reflect:!1,useDefault:!1,hasChanged:Vg};Symbol.metadata??=Symbol("metadata"),ef.litPropertyMetadata??=new WeakMap;let $a=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,i=u2){if(i.state&&(i.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((i=Object.create(i)).wrapped=!0),this.elementProperties.set(t,i),!i.noAccessor){const o=Symbol(),s=this.getPropertyDescriptor(t,o,i);s!==void 0&&Gj(this.prototype,t,s)}}static getPropertyDescriptor(t,i,o){const{get:s,set:l}=Yj(this.prototype,t)??{get(){return this[i]},set(d){this[i]=d}};return{get:s,set(d){const f=s?.call(this);l?.call(this,d),this.requestUpdate(t,f,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??u2}static _$Ei(){if(this.hasOwnProperty(Tl("elementProperties")))return;const t=Wj(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(Tl("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(Tl("properties"))){const i=this.properties,o=[...Qj(i),...Xj(i)];for(const s of o)this.createProperty(s,i[s])}const t=this[Symbol.metadata];if(t!==null){const i=litPropertyMetadata.get(t);if(i!==void 0)for(const[o,s]of i)this.elementProperties.set(o,s)}this._$Eh=new Map;for(const[i,o]of this.elementProperties){const s=this._$Eu(i,o);s!==void 0&&this._$Eh.set(s,i)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const s of o)i.unshift(c2(s))}else t!==void 0&&i.push(c2(t));return i}static _$Eu(t,i){const o=i.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,i=this.constructor.elementProperties;for(const o of i.keys())this.hasOwnProperty(o)&&(t.set(o,this[o]),delete this[o]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return qj(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,i,o){this._$AK(t,o)}_$ET(t,i){const o=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,o);if(s!==void 0&&o.reflect===!0){const l=(o.converter?.toAttribute!==void 0?o.converter:Pu).toAttribute(i,o.type);this._$Em=t,l==null?this.removeAttribute(s):this.setAttribute(s,l),this._$Em=null}}_$AK(t,i){const o=this.constructor,s=o._$Eh.get(t);if(s!==void 0&&this._$Em!==s){const l=o.getPropertyOptions(s),d=typeof l.converter=="function"?{fromAttribute:l.converter}:l.converter?.fromAttribute!==void 0?l.converter:Pu;this._$Em=s;const f=d.fromAttribute(i,l.type);this[s]=f??this._$Ej?.get(s)??f,this._$Em=null}}requestUpdate(t,i,o,s=!1,l){if(t!==void 0){const d=this.constructor;if(s===!1&&(l=this[t]),o??=d.getPropertyOptions(t),!((o.hasChanged??Vg)(l,i)||o.useDefault&&o.reflect&&l===this._$Ej?.get(t)&&!this.hasAttribute(d._$Eu(t,o))))return;this.C(t,i,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,i,{useDefault:o,reflect:s,wrapped:l},d){o&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,d??i??this[t]),l!==!0||d!==void 0)||(this._$AL.has(t)||(this.hasUpdated||o||(i=void 0),this._$AL.set(t,i)),s===!0&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(i){Promise.reject(i)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[s,l]of this._$Ep)this[s]=l;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[s,l]of o){const{wrapped:d}=l,f=this[s];d!==!0||this._$AL.has(s)||f===void 0||this.C(s,void 0,l,f)}}let t=!1;const i=this._$AL;try{t=this.shouldUpdate(i),t?(this.willUpdate(i),this._$EO?.forEach(o=>o.hostUpdate?.()),this.update(i)):this._$EM()}catch(o){throw t=!1,this._$EM(),o}t&&this._$AE(i)}willUpdate(t){}_$AE(t){this._$EO?.forEach(i=>i.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(i=>this._$ET(i,this[i])),this._$EM()}updated(t){}firstUpdated(t){}};$a.elementStyles=[],$a.shadowRootOptions={mode:"open"},$a[Tl("elementProperties")]=new Map,$a[Tl("finalized")]=new Map,Jj?.({ReactiveElement:$a}),(ef.reactiveElementVersions??=[]).push("2.1.2");const e9={attribute:!0,type:String,converter:Pu,reflect:!1,hasChanged:Vg},t9=(e=e9,t,i)=>{const{kind:o,metadata:s}=i;let l=globalThis.litPropertyMetadata.get(s);if(l===void 0&&globalThis.litPropertyMetadata.set(s,l=new Map),o==="setter"&&((e=Object.create(e)).wrapped=!0),l.set(i.name,e),o==="accessor"){const{name:d}=i;return{set(f){const h=t.get.call(this);t.set.call(this,f),this.requestUpdate(d,h,e,!0,f)},init(f){return f!==void 0&&this.C(d,void 0,e,f),f}}}if(o==="setter"){const{name:d}=i;return function(f){const h=this[d];t.call(this,f),this.requestUpdate(d,h,e,!0,f)}}throw Error("Unsupported decorator location: "+o)};function K(e){return(t,i)=>typeof i=="object"?t9(e,t,i):((o,s,l)=>{const d=s.hasOwnProperty(l);return s.constructor.createProperty(l,o),d?Object.getOwnPropertyDescriptor(s,l):void 0})(e,t,i)}function yt(e){return K({...e,state:!0,attribute:!1})}const tf=(e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(e,t,i),i);function at(e,t){return(i,o,s)=>{const l=d=>d.renderRoot?.querySelector(e)??null;return tf(i,o,{get(){return l(this)}})}}let r9;function i9(e){return(t,i)=>tf(t,i,{get(){return(this.renderRoot??(r9??=document.createDocumentFragment())).querySelectorAll(e)}})}function sn(e){return(t,i)=>{const{slot:o,selector:s}=e??{},l="slot"+(o?`[name=${o}]`:":not([name])");return tf(t,i,{get(){const d=this.renderRoot?.querySelector(l),f=d?.assignedElements(e)??[];return s===void 0?f:f.filter(h=>h.matches(s))}})}}function n9(e){return(t,i)=>{const{slot:o}=e??{},s="slot"+(o?`[name=${o}]`:":not([name])");return tf(t,i,{get(){return this.renderRoot?.querySelector(s)?.assignedNodes(e)??[]}})}}const Fg=globalThis,f2=e=>e,Lu=Fg.trustedTypes,h2=Lu?Lu.createPolicy("lit-html",{createHTML:e=>e}):void 0,l3="$lit$",Fn=`lit$${Math.random().toFixed(9).slice(2)}$`,c3="?"+Fn,o9=`<${c3}>`,Po=document,$l=()=>Po.createComment(""),Bl=e=>e===null||typeof e!="object"&&typeof e!="function",Hg=Array.isArray,a9=e=>Hg(e)||typeof e?.[Symbol.iterator]=="function",Yp=`[ 	
+\f\r]`,dl=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,p2=/-->/g,m2=/>/g,wo=RegExp(`>|${Yp}(?:([^\\s"'>=/]+)(${Yp}*=${Yp}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),v2=/'/g,g2=/"/g,d3=/^(?:script|style|textarea|title)$/i,s9=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),ue=s9(1),Yr=Symbol.for("lit-noChange"),ae=Symbol.for("lit-nothing"),y2=new WeakMap,Ao=Po.createTreeWalker(Po,129);function u3(e,t){if(!Hg(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return h2!==void 0?h2.createHTML(t):t}const l9=(e,t)=>{const i=e.length-1,o=[];let s,l=t===2?"<svg>":t===3?"<math>":"",d=dl;for(let f=0;f<i;f++){const h=e[f];let m,g,y=-1,b=0;for(;b<h.length&&(d.lastIndex=b,g=d.exec(h),g!==null);)b=d.lastIndex,d===dl?g[1]==="!--"?d=p2:g[1]!==void 0?d=m2:g[2]!==void 0?(d3.test(g[2])&&(s=RegExp("</"+g[2],"g")),d=wo):g[3]!==void 0&&(d=wo):d===wo?g[0]===">"?(d=s??dl,y=-1):g[1]===void 0?y=-2:(y=d.lastIndex-g[2].length,m=g[1],d=g[3]===void 0?wo:g[3]==='"'?g2:v2):d===g2||d===v2?d=wo:d===p2||d===m2?d=dl:(d=wo,s=void 0);const _=d===wo&&e[f+1].startsWith("/>")?" ":"";l+=d===dl?h+o9:y>=0?(o.push(m),h.slice(0,y)+l3+h.slice(y)+Fn+_):h+Fn+(y===-2?f:_)}return[u3(e,l+(e[i]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),o]};class Ul{constructor({strings:t,_$litType$:i},o){let s;this.parts=[];let l=0,d=0;const f=t.length-1,h=this.parts,[m,g]=l9(t,i);if(this.el=Ul.createElement(m,o),Ao.currentNode=this.el.content,i===2||i===3){const y=this.el.content.firstChild;y.replaceWith(...y.childNodes)}for(;(s=Ao.nextNode())!==null&&h.length<f;){if(s.nodeType===1){if(s.hasAttributes())for(const y of s.getAttributeNames())if(y.endsWith(l3)){const b=g[d++],_=s.getAttribute(y).split(Fn),E=/([.?@])?(.*)/.exec(b);h.push({type:1,index:l,name:E[2],strings:_,ctor:E[1]==="."?d9:E[1]==="?"?u9:E[1]==="@"?f9:rf}),s.removeAttribute(y)}else y.startsWith(Fn)&&(h.push({type:6,index:l}),s.removeAttribute(y));if(d3.test(s.tagName)){const y=s.textContent.split(Fn),b=y.length-1;if(b>0){s.textContent=Lu?Lu.emptyScript:"";for(let _=0;_<b;_++)s.append(y[_],$l()),Ao.nextNode(),h.push({type:2,index:++l});s.append(y[b],$l())}}}else if(s.nodeType===8)if(s.data===c3)h.push({type:2,index:l});else{let y=-1;for(;(y=s.data.indexOf(Fn,y+1))!==-1;)h.push({type:7,index:l}),y+=Fn.length-1}l++}}static createElement(t,i){const o=Po.createElement("template");return o.innerHTML=t,o}}function Qa(e,t,i=e,o){if(t===Yr)return t;let s=o!==void 0?i._$Co?.[o]:i._$Cl;const l=Bl(t)?void 0:t._$litDirective$;return s?.constructor!==l&&(s?._$AO?.(!1),l===void 0?s=void 0:(s=new l(e),s._$AT(e,i,o)),o!==void 0?(i._$Co??=[])[o]=s:i._$Cl=s),s!==void 0&&(t=Qa(e,s._$AS(e,t.values),s,o)),t}class c9{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:o}=this._$AD,s=(t?.creationScope??Po).importNode(i,!0);Ao.currentNode=s;let l=Ao.nextNode(),d=0,f=0,h=o[0];for(;h!==void 0;){if(d===h.index){let m;h.type===2?m=new _c(l,l.nextSibling,this,t):h.type===1?m=new h.ctor(l,h.name,h.strings,this,t):h.type===6&&(m=new h9(l,this,t)),this._$AV.push(m),h=o[++f]}d!==h?.index&&(l=Ao.nextNode(),d++)}return Ao.currentNode=Po,s}p(t){let i=0;for(const o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,i),i+=o.strings.length-2):o._$AI(t[i])),i++}}class _c{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,o,s){this.type=2,this._$AH=ae,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=o,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return i!==void 0&&t?.nodeType===11&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=Qa(this,t,i),Bl(t)?t===ae||t==null||t===""?(this._$AH!==ae&&this._$AR(),this._$AH=ae):t!==this._$AH&&t!==Yr&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):a9(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==ae&&Bl(this._$AH)?this._$AA.nextSibling.data=t:this.T(Po.createTextNode(t)),this._$AH=t}$(t){const{values:i,_$litType$:o}=t,s=typeof o=="number"?this._$AC(t):(o.el===void 0&&(o.el=Ul.createElement(u3(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===s)this._$AH.p(i);else{const l=new c9(s,this),d=l.u(this.options);l.p(i),this.T(d),this._$AH=l}}_$AC(t){let i=y2.get(t.strings);return i===void 0&&y2.set(t.strings,i=new Ul(t)),i}k(t){Hg(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let o,s=0;for(const l of t)s===i.length?i.push(o=new _c(this.O($l()),this.O($l()),this,this.options)):o=i[s],o._$AI(l),s++;s<i.length&&(this._$AR(o&&o._$AB.nextSibling,s),i.length=s)}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t!==this._$AB;){const o=f2(t).nextSibling;f2(t).remove(),t=o}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}}class rf{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,o,s,l){this.type=1,this._$AH=ae,this._$AN=void 0,this.element=t,this.name=i,this._$AM=s,this.options=l,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=ae}_$AI(t,i=this,o,s){const l=this.strings;let d=!1;if(l===void 0)t=Qa(this,t,i,0),d=!Bl(t)||t!==this._$AH&&t!==Yr,d&&(this._$AH=t);else{const f=t;let h,m;for(t=l[0],h=0;h<l.length-1;h++)m=Qa(this,f[o+h],i,h),m===Yr&&(m=this._$AH[h]),d||=!Bl(m)||m!==this._$AH[h],m===ae?t=ae:t!==ae&&(t+=(m??"")+l[h+1]),this._$AH[h]=m}d&&!s&&this.j(t)}j(t){t===ae?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class d9 extends rf{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===ae?void 0:t}}class u9 extends rf{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==ae)}}class f9 extends rf{constructor(t,i,o,s,l){super(t,i,o,s,l),this.type=5}_$AI(t,i=this){if((t=Qa(this,t,i,0)??ae)===Yr)return;const o=this._$AH,s=t===ae&&o!==ae||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,l=t!==ae&&(o===ae||s);s&&this.element.removeEventListener(this.name,this,o),l&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class h9{constructor(t,i,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){Qa(this,t)}}const p9=Fg.litHtmlPolyfillSupport;p9?.(Ul,_c),(Fg.litHtmlVersions??=[]).push("3.3.3");const qg=(e,t,i)=>{const o=i?.renderBefore??t;let s=o._$litPart$;if(s===void 0){const l=i?.renderBefore??null;o._$litPart$=s=new _c(t.insertBefore($l(),l),l,void 0,i??{})}return s._$AI(e),s};const Kg=globalThis;let ft=class extends $a{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=qg(i,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Yr}};ft._$litElement$=!0,ft.finalized=!0,Kg.litElementHydrateSupport?.({LitElement:ft});const m9=Kg.litElementPolyfillSupport;m9?.({LitElement:ft});(Kg.litElementVersions??=[]).push("4.2.2");let v9=class extends ft{render(){return ue`<slot></slot>`}connectedCallback(){if(super.connectedCallback(),this.getAttribute("aria-hidden")==="false"){this.removeAttribute("aria-hidden");return}this.setAttribute("aria-hidden","true")}};const g9=Ye`:host{font-size:var(--md-icon-size, 24px);width:var(--md-icon-size, 24px);height:var(--md-icon-size, 24px);color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;place-items:center;place-content:center;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;flex-shrink:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}
+`;let uv=class extends v9{};uv.styles=[g9];uv=j([bt("md-icon")],uv);const In={ATTRIBUTE:1,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},Gg=e=>(...t)=>({_$litDirective$:e,values:t});let Yg=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,o){this._$Ct=t,this._$AM=i,this._$Ci=o}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}};const xr=Gg(class extends Yg{constructor(e){if(super(e),e.type!==In.ATTRIBUTE||e.name!=="class"||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(this.st===void 0){this.st=new Set,e.strings!==void 0&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter(o=>o!=="")));for(const o in t)t[o]&&!this.nt?.has(o)&&this.st.add(o);return this.render(t)}const i=e.element.classList;for(const o of this.st)o in t||(i.remove(o),this.st.delete(o));for(const o in t){const s=!!t[o];s===this.st.has(o)||this.nt?.has(o)||(s?(i.add(o),this.st.add(o)):(i.remove(o),this.st.delete(o)))}return Yr}});const f3=Symbol("attachableController");let h3;h3=new MutationObserver(e=>{for(const t of e)t.target[f3]?.hostConnected()});class p3{get htmlFor(){return this.host.getAttribute("for")}set htmlFor(t){t===null?this.host.removeAttribute("for"):this.host.setAttribute("for",t)}get control(){return this.host.hasAttribute("for")?!this.htmlFor||!this.host.isConnected?null:this.host.getRootNode().querySelector(`#${this.htmlFor}`):this.currentControl||this.host.parentElement}set control(t){t?this.attach(t):this.detach()}constructor(t,i){this.host=t,this.onControlChange=i,this.currentControl=null,t.addController(this),t[f3]=this,h3?.observe(t,{attributeFilter:["for"]})}attach(t){t!==this.currentControl&&(this.setCurrentControl(t),this.host.removeAttribute("for"))}detach(){this.setCurrentControl(null),this.host.setAttribute("for","")}hostConnected(){this.setCurrentControl(this.control)}hostDisconnected(){this.setCurrentControl(null)}setCurrentControl(t){this.onControlChange(this.currentControl,t),this.currentControl=t}}const Oi={STANDARD:"cubic-bezier(0.2, 0, 0, 1)",EMPHASIZED:"cubic-bezier(.3,0,0,1)",EMPHASIZED_ACCELERATE:"cubic-bezier(.3,0,.8,.15)"};function y9(){let e=null;return{start(){return e?.abort(),e=new AbortController,e.signal},finish(){e=null}}}const b9=450,b2=225,x9=.2,w9=10,_9=75,S9=.35,E9="::after",T9="forwards";var ar;(function(e){e[e.INACTIVE=0]="INACTIVE",e[e.TOUCH_DELAY=1]="TOUCH_DELAY",e[e.HOLDING=2]="HOLDING",e[e.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"})(ar||(ar={}));const O9=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],C9=150,A9=window.matchMedia("(forced-colors: active)");class Sc extends ft{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=ar.INACTIVE,this.attachableController=new p3(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return ue`<div class="surface ${xr(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==ar.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state===ar.HOLDING){this.state=ar.WAITING_FOR_CLICK;return}if(this.state===ar.TOUCH_DELAY){this.state=ar.WAITING_FOR_CLICK,this.startPressAnimation(this.rippleStartEvent);return}}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t)){this.state=ar.WAITING_FOR_CLICK,this.startPressAnimation(t);return}this.state=ar.TOUCH_DELAY,await new Promise(i=>{setTimeout(i,C9)}),this.state===ar.TOUCH_DELAY&&(this.state=ar.HOLDING,this.startPressAnimation(t))}}handleClick(){if(!this.disabled){if(this.state===ar.WAITING_FOR_CLICK){this.endPressAnimation();return}this.state===ar.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation())}}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||this.endPressAnimation()}determineRippleSize(){const{height:t,width:i}=this.getBoundingClientRect(),o=Math.max(t,i),s=Math.max(S9*o,_9),l=this.currentCSSZoom??1,d=Math.floor(o*x9/l),h=Math.sqrt(i**2+t**2)+w9;this.initialSize=d;const m=(h+s)/d;this.rippleScale=`${m/l}`,this.rippleSize=`${d}px`}getNormalizedPointerEventCoords(t){const{scrollX:i,scrollY:o}=window,{left:s,top:l}=this.getBoundingClientRect(),d=i+s,f=o+l,{pageX:h,pageY:m}=t,g=this.currentCSSZoom??1;return{x:(h-d)/g,y:(m-f)/g}}getTranslationCoordinates(t){const{height:i,width:o}=this.getBoundingClientRect(),s=this.currentCSSZoom??1,l={x:(o/s-this.initialSize)/2,y:(i/s-this.initialSize)/2};let d;return t instanceof PointerEvent?d=this.getNormalizedPointerEventCoords(t):d={x:o/s/2,y:i/s/2},d={x:d.x-this.initialSize/2,y:d.y-this.initialSize/2},{startPoint:d,endPoint:l}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:i,endPoint:o}=this.getTranslationCoordinates(t),s=`${i.x}px, ${i.y}px`,l=`${o.x}px, ${o.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${s}) scale(1)`,`translate(${l}) scale(${this.rippleScale})`]},{pseudoElement:E9,duration:b9,easing:Oi.STANDARD,fill:T9})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=ar.INACTIVE;const t=this.growAnimation;let i=1/0;if(typeof t?.currentTime=="number"?i=t.currentTime:t?.currentTime&&(i=t.currentTime.to("ms").value),i>=b2){this.pressed=!1;return}await new Promise(o=>{setTimeout(o,b2-i)}),this.growAnimation===t&&(this.pressed=!1)}shouldReactToEvent(t){if(this.disabled||!t.isPrimary||this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if(t.type==="pointerenter"||t.type==="pointerleave")return!this.isTouch(t);const i=t.buttons===1;return this.isTouch(t)||i}isTouch({pointerType:t}){return t==="touch"}async handleEvent(t){if(!A9?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t);break}}onControlChange(t,i){for(const o of O9)t?.removeEventListener(o,this),i?.addEventListener(o,this)}}j([K({type:Boolean,reflect:!0})],Sc.prototype,"disabled",void 0);j([yt()],Sc.prototype,"hovered",void 0);j([yt()],Sc.prototype,"pressed",void 0);j([at(".surface")],Sc.prototype,"mdRoot",void 0);const R9=Ye`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
+`;let fv=class extends Sc{};fv.styles=[R9];fv=j([bt("md-ripple")],fv);class j9 extends ft{connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){return ue`<span class="shadow"></span>`}}const k9=Ye`:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}:host{display:flex;pointer-events:none;transition-property:box-shadow,opacity}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity;--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000))}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}
+`;let hv=class extends j9{};hv.styles=[k9];hv=j([bt("md-elevation")],hv);const M9=["focusin","focusout","pointerdown"];class Qg extends ft{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new p3(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[x2]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1;break}t[x2]=!0}}onControlChange(t,i){for(const o of M9)t?.removeEventListener(o,this),i?.addEventListener(o,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}j([K({type:Boolean,reflect:!0})],Qg.prototype,"visible",void 0);j([K({type:Boolean,reflect:!0})],Qg.prototype,"inward",void 0);const x2=Symbol("handledByFocusRing");const D9=Ye`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+`;let pv=class extends Qg{};pv.styles=[D9];pv=j([bt("md-focus-ring")],pv);const m3=["role","ariaAtomic","ariaAutoComplete","ariaBusy","ariaChecked","ariaColCount","ariaColIndex","ariaColSpan","ariaCurrent","ariaDisabled","ariaExpanded","ariaHasPopup","ariaHidden","ariaInvalid","ariaKeyShortcuts","ariaLabel","ariaLevel","ariaLive","ariaModal","ariaMultiLine","ariaMultiSelectable","ariaOrientation","ariaPlaceholder","ariaPosInSet","ariaPressed","ariaReadOnly","ariaRequired","ariaRoleDescription","ariaRowCount","ariaRowIndex","ariaRowSpan","ariaSelected","ariaSetSize","ariaSort","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText"],z9=m3.map(v3);function Qp(e){return z9.includes(e)}function v3(e){return e.replace("aria","aria-").replace(/Elements?/g,"").toLowerCase()}const Xd=Symbol("privateIgnoreAttributeChangesFor");function ln(e){var t;class i extends e{constructor(){super(...arguments),this[t]=new Set}attributeChangedCallback(s,l,d){if(!Qp(s)){super.attributeChangedCallback(s,l,d);return}if(this[Xd].has(s))return;this[Xd].add(s),this.removeAttribute(s),this[Xd].delete(s);const f=vv(s);d===null?delete this.dataset[f]:this.dataset[f]=d,this.requestUpdate(vv(s),l)}getAttribute(s){return Qp(s)?super.getAttribute(mv(s)):super.getAttribute(s)}removeAttribute(s){super.removeAttribute(s),Qp(s)&&(super.removeAttribute(mv(s)),this.requestUpdate())}}return t=Xd,P9(i),i}function P9(e){for(const t of m3){const i=v3(t),o=mv(i),s=vv(i);e.createProperty(t,{attribute:i,noAccessor:!0}),e.createProperty(Symbol(o),{attribute:o,noAccessor:!0}),Object.defineProperty(e.prototype,t,{configurable:!0,enumerable:!0,get(){return this.dataset[s]??null},set(l){const d=this.dataset[s]??null;l!==d&&(l===null?delete this.dataset[s]:this.dataset[s]=l,this.requestUpdate(t,d))}})}}function mv(e){return`data-${e}`}function vv(e){return e.replace(/-\w/,t=>t[1].toUpperCase())}const lr=Symbol("internals"),Xp=Symbol("privateInternals");function os(e){class t extends e{get[lr](){return this[Xp]||(this[Xp]=this.attachInternals()),this[Xp]}}return t}function g3(e){e.addInitializer(t=>{const i=t;i.addEventListener("click",async o=>{const{type:s,[lr]:l}=i,{form:d}=l;if(!(!d||s==="button")&&(await new Promise(f=>{setTimeout(f)}),!o.defaultPrevented)){if(s==="reset"){d.reset();return}d.addEventListener("submit",f=>{Object.defineProperty(f,"submitter",{configurable:!0,enumerable:!0,get:()=>i})},{capture:!0,once:!0}),l.setFormValue(i.value),d.requestSubmit()}})})}function Xg(e){const t=new MouseEvent("click",{bubbles:!0});return e.dispatchEvent(t),t}function Wg(e){return e.currentTarget!==e.target||e.composedPath()[0]!==e.target||e.target.disabled?!1:!L9(e)}function L9(e){const t=gv;return t&&(e.preventDefault(),e.stopImmediatePropagation()),N9(),t}let gv=!1;async function N9(){gv=!0,await null,gv=!1}const $9=ln(os(ft));class Jt extends $9{get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get form(){return this[lr].form}constructor(){super(),this.disabled=!1,this.softDisabled=!1,this.href="",this.download="",this.target="",this.trailingIcon=!1,this.hasIcon=!1,this.type="submit",this.value="",this.addEventListener("click",this.handleClick.bind(this))}focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}render(){const t=this.disabled||this.softDisabled,i=this.href?this.renderLink():this.renderButton(),o=this.href?"link":"button";return ue`
+      ${this.renderElevationOrOutline?.()}
+      <div class="background"></div>
+      <md-focus-ring part="focus-ring" for=${o}></md-focus-ring>
+      <md-ripple
+        part="ripple"
+        for=${o}
+        ?disabled="${t}"></md-ripple>
+      ${i}
+    `}renderButton(){const{ariaLabel:t,ariaHasPopup:i,ariaExpanded:o}=this;return ue`<button
+      id="button"
+      class="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled||ae}
+      aria-label="${t||ae}"
+      aria-haspopup="${i||ae}"
+      aria-expanded="${o||ae}">
+      ${this.renderContent()}
+    </button>`}renderLink(){const{ariaLabel:t,ariaHasPopup:i,ariaExpanded:o}=this;return ue`<a
+      id="link"
+      class="button"
+      aria-label="${t||ae}"
+      aria-haspopup="${i||ae}"
+      aria-expanded="${o||ae}"
+      aria-disabled=${this.disabled||this.softDisabled||ae}
+      tabindex="${this.disabled&&!this.softDisabled?-1:ae}"
+      href=${this.href}
+      download=${this.download||ae}
+      target=${this.target||ae}
+      >${this.renderContent()}
+    </a>`}renderContent(){const t=ue`<slot
+      name="icon"
+      @slotchange="${this.handleSlotChange}"></slot>`;return ue`
+      <span class="touch"></span>
+      ${this.trailingIcon?ae:t}
+      <span class="label"><slot></slot></span>
+      ${this.trailingIcon?t:ae}
+    `}handleClick(t){if(this.softDisabled||this.disabled&&this.href){t.stopImmediatePropagation(),t.preventDefault();return}!Wg(t)||!this.buttonElement||(this.focus(),Xg(this.buttonElement))}handleSlotChange(){this.hasIcon=this.assignedIcons.length>0}}g3(Jt);Jt.formAssociated=!0;Jt.shadowRootOptions={mode:"open",delegatesFocus:!0};j([K({type:Boolean,reflect:!0})],Jt.prototype,"disabled",void 0);j([K({type:Boolean,attribute:"soft-disabled",reflect:!0})],Jt.prototype,"softDisabled",void 0);j([K()],Jt.prototype,"href",void 0);j([K()],Jt.prototype,"download",void 0);j([K()],Jt.prototype,"target",void 0);j([K({type:Boolean,attribute:"trailing-icon",reflect:!0})],Jt.prototype,"trailingIcon",void 0);j([K({type:Boolean,attribute:"has-icon",reflect:!0})],Jt.prototype,"hasIcon",void 0);j([K()],Jt.prototype,"type",void 0);j([K({reflect:!0})],Jt.prototype,"value",void 0);j([at(".button")],Jt.prototype,"buttonElement",void 0);j([sn({slot:"icon",flatten:!0})],Jt.prototype,"assignedIcons",void 0);class B9 extends Jt{renderElevationOrOutline(){return ue`<md-elevation part="elevation"></md-elevation>`}}const U9=Ye`:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-filled-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-color: var(--md-filled-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-button-leading-space, 24px);--_trailing-space: var(--md-filled-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-button-with-trailing-icon-trailing-space, 16px)}
+`;const I9=Ye`md-elevation{transition-duration:280ms}:host(:is([disabled],[soft-disabled])) md-elevation{transition:none}md-elevation{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}:host(:focus-within) md-elevation{--md-elevation-level: var(--_focus-container-elevation)}:host(:hover) md-elevation{--md-elevation-level: var(--_hover-container-elevation)}:host(:active) md-elevation{--md-elevation-level: var(--_pressed-container-elevation)}:host(:is([disabled],[soft-disabled])) md-elevation{--md-elevation-level: var(--_disabled-container-elevation)}
+`;const y3=Ye`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:8px;min-height:var(--_container-height);outline:none;padding-block:calc((var(--_container-height) - max(var(--_label-text-line-height),var(--_icon-size)))/2);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);place-content:center;place-items:center;position:relative;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-overflow:ellipsis;text-wrap:nowrap;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){cursor:default;pointer-events:none}.button{border-radius:inherit;cursor:inherit;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;min-width:calc(64px - var(--_leading-space) - var(--_trailing-space));width:100%;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding:0;gap:inherit;text-transform:inherit}.button::-moz-focus-inner{padding:0;border:0}:host(:hover) .button{color:var(--_hover-label-text-color)}:host(:focus-within) .button{color:var(--_focus-label-text-color)}:host(:active) .button{color:var(--_pressed-label-text-color)}.background{background:var(--_container-color);border-radius:inherit;inset:0;position:absolute}.label{overflow:hidden}:is(.button,.label,.label slot),.label ::slotted(*){text-overflow:inherit}:host(:is([disabled],[soft-disabled])) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}:host(:is([disabled],[soft-disabled])) .background{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.background{border:1px solid CanvasText}:host(:is([disabled],[soft-disabled])){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-color: GrayText;--_disabled-label-text-opacity: 1}}:host([has-icon]:not([trailing-icon])){padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}:host([has-icon][trailing-icon]){padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;flex-shrink:0;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus-within) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host(:is([disabled],[soft-disabled])) ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}:host([touch-target=none]) .touch{display:none}
+`;let yv=class extends B9{};yv.styles=[y3,I9,U9];yv=j([bt("md-filled-button")],yv);class V9 extends Jt{renderElevationOrOutline(){return ue`<div class="outline"></div>`}}const F9=Ye`:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}.outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}:host(:active) .outline{border-color:var(--_pressed-outline-color)}:host(:is([disabled],[soft-disabled])) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])) .background{border-color:GrayText}:host(:is([disabled],[soft-disabled])) .outline{opacity:1}}.outline,md-ripple{border-width:var(--_outline-width)}md-ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}
+`;let bv=class extends V9{};bv.styles=[y3,F9];bv=j([bt("md-outlined-button")],bv);const b3=Symbol.for(""),H9=e=>{if(e?.r===b3)return e?._$litStatic$},Lo=(e,...t)=>({_$litStatic$:t.reduce((i,o,s)=>i+(l=>{if(l._$litStatic$!==void 0)return l._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${l}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`)})(o)+e[s+1],e[0]),r:b3}),w2=new Map,q9=e=>(t,...i)=>{const o=i.length;let s,l;const d=[],f=[];let h,m=0,g=!1;for(;m<o;){for(h=t[m];m<o&&(l=i[m],(s=H9(l))!==void 0);)h+=s+t[++m],g=!0;m!==o&&f.push(l),d.push(h),m++}if(m===o&&d.push(t[o]),g){const y=d.join("$$lit$$");(t=w2.get(y))===void 0&&(d.raw=d,w2.set(y,t=d)),i=f}return e(t,...i)},Zg=q9(ue);function _2(e,t=!0){return t&&getComputedStyle(e).getPropertyValue("direction").trim()==="rtl"}const K9=ln(os(ft));class er extends K9{get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get form(){return this[lr].form}get labels(){return this[lr].labels}constructor(){super(),this.disabled=!1,this.softDisabled=!1,this.flipIconInRtl=!1,this.href="",this.download="",this.target="",this.ariaLabelSelected="",this.toggle=!1,this.selected=!1,this.type="submit",this.value="",this.flipIcon=_2(this,this.flipIconInRtl),this.addEventListener("click",this.handleClick.bind(this))}willUpdate(){this.href&&(this.disabled=!1,this.softDisabled=!1)}render(){const t=this.href?Lo`div`:Lo`button`,{ariaLabel:i,ariaHasPopup:o,ariaExpanded:s}=this,l=i&&this.ariaLabelSelected,d=this.toggle?this.selected:ae;let f=ae;return this.href||(f=l&&this.selected?this.ariaLabelSelected:i),Zg`<${t}
+        class="icon-button ${xr(this.getRenderClasses())}"
+        id="button"
+        aria-label="${f||ae}"
+        aria-haspopup="${!this.href&&o||ae}"
+        aria-expanded="${!this.href&&s||ae}"
+        aria-pressed="${d}"
+        aria-disabled=${!this.href&&this.softDisabled||ae}
+        ?disabled="${!this.href&&this.disabled}"
+        @click="${this.handleClickOnChild}">
+        ${this.renderFocusRing()}
+        ${this.renderRipple()}
+        ${this.selected?ae:this.renderIcon()}
+        ${this.selected?this.renderSelectedIcon():ae}
+        ${this.href?this.renderLink():this.renderTouchTarget()}
+  </${t}>`}renderLink(){const{ariaLabel:t}=this;return ue`
+      <a
+        class="link"
+        id="link"
+        href="${this.href}"
+        download="${this.download||ae}"
+        target="${this.target||ae}"
+        aria-label="${t||ae}">
+        ${this.renderTouchTarget()}
+      </a>
+    `}getRenderClasses(){return{"flip-icon":this.flipIcon,selected:this.toggle&&this.selected}}renderIcon(){return ue`<span class="icon"><slot></slot></span>`}renderSelectedIcon(){return ue`<span class="icon icon--selected"
+      ><slot name="selected"><slot></slot></slot
+    ></span>`}renderTouchTarget(){return ue`<span class="touch"></span>`}renderFocusRing(){return ue`<md-focus-ring
+      part="focus-ring"
+      for=${this.href?"link":"button"}></md-focus-ring>`}renderRipple(){const t=!this.href&&(this.disabled||this.softDisabled);return ue`<md-ripple
+      for=${this.href?"link":ae}
+      ?disabled="${t}"></md-ripple>`}connectedCallback(){this.flipIcon=_2(this,this.flipIconInRtl),super.connectedCallback()}handleClick(t){if(!this.href&&this.softDisabled){t.stopImmediatePropagation(),t.preventDefault();return}}async handleClickOnChild(t){await 0,!(!this.toggle||this.disabled||this.softDisabled||t.defaultPrevented)&&(this.selected=!this.selected,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))}}g3(er);er.formAssociated=!0;er.shadowRootOptions={mode:"open",delegatesFocus:!0};j([K({type:Boolean,reflect:!0})],er.prototype,"disabled",void 0);j([K({type:Boolean,attribute:"soft-disabled",reflect:!0})],er.prototype,"softDisabled",void 0);j([K({type:Boolean,attribute:"flip-icon-in-rtl"})],er.prototype,"flipIconInRtl",void 0);j([K()],er.prototype,"href",void 0);j([K()],er.prototype,"download",void 0);j([K()],er.prototype,"target",void 0);j([K({attribute:"aria-label-selected"})],er.prototype,"ariaLabelSelected",void 0);j([K({type:Boolean})],er.prototype,"toggle",void 0);j([K({type:Boolean,reflect:!0})],er.prototype,"selected",void 0);j([K()],er.prototype,"type",void 0);j([K({reflect:!0})],er.prototype,"value",void 0);j([yt()],er.prototype,"flipIcon",void 0);const G9=Ye`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{display:grid;height:100%;outline:none;place-items:center;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1}}
+`;const Y9=Ye`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:is(:disabled,[aria-disabled=true]){opacity:var(--_disabled-icon-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}
+`;let xv=class extends er{getRenderClasses(){return{...super.getRenderClasses(),standard:!0}}};xv.styles=[G9,Y9];xv=j([bt("md-icon-button")],xv);const Xa=w.forwardRef(function({ariaExpanded:t,ariaLabel:i,ariaPressed:o,children:s,className:l,controls:d,disabled:f=!1,id:h,icon:m,onClick:g,type:y="button"},b){return v.jsxs("md-outlined-button",{"aria-controls":d,"aria-expanded":Nu(t),"aria-label":i,"aria-pressed":Nu(o),className:l,disabled:f,id:h,onClick:g,ref:b,type:y,...m?{"has-icon":!0}:{},children:[m?w.createElement("md-icon",{slot:"icon"},m):null,s]})});function Qn({ariaLabel:e,ariaPressed:t,children:i,className:o,disabled:s=!1,icon:l,onClick:d,type:f="button"}){return v.jsxs("md-filled-button",{"aria-label":e,"aria-pressed":Nu(t),className:o,disabled:s,onClick:d,type:f,...l?{"has-icon":!0}:{},children:[l?w.createElement("md-icon",{slot:"icon"},l):null,i]})}const pi=w.forwardRef(function({ariaExpanded:t,className:i,controls:o,describedBy:s,disabled:l=!1,icon:d,label:f,onBlur:h,onClick:m,onFocus:g,onKeyDown:y,onMouseDown:b,onMouseEnter:_,onMouseLeave:E,slot:T},O){return v.jsx("md-icon-button",{"aria-controls":o,"aria-describedby":s,"aria-expanded":Nu(t),"aria-label":f,className:i,disabled:l,onBlur:h,onClick:m,onFocus:g,onKeyDown:y,onMouseDown:b,onMouseEnter:_,onMouseLeave:E,ref:O,slot:T,type:"button",children:w.createElement("md-icon",null,d)})});function Nu(e){if(e!==void 0)return e?"true":"false"}const Q9={"action.saveToken":"Save token","action.send":"Send","app.console":"Console","app.consoleSections":"Console sections","app.language":"Language","app.language.en":"English","app.language.zh":"中文","app.routeContent":"Console route content","app.signOut":"Sign out","app.switchTheme":"Switch to {theme} theme","theme.dark":"dark","theme.light":"light","nav.overview":"Overview","nav.modelsProviders":"Models & Providers","nav.routes":"Routes","nav.defaults":"Defaults","nav.searchTools":"Search & Tools","nav.storage":"Storage","nav.security":"Security","nav.logs":"Logs","nav.rpcTest":"RPC Test","auth.eyebrow":"Authentication required","auth.title":"Enter Moon Bridge Token","auth.token":"Token","auth.remember":"Remember on this device","auth.signedOut":"Signed out — re-enter your token.","auth.verifying":"Verifying…","auth.revealToken":"Show token","auth.hideToken":"Hide token","common.error":"Error","common.loading":"Loading","common.unknown":"unknown","config.description":"Adjust how Moon Bridge runs. Changes apply instantly.","configDoc.default":"Default","configDoc.default.empty":"empty","configDoc.optional":"Optional","configDoc.required":"Required","configDoc.sensitive":"Sensitive","configDoc.savedRealtime":"Saved in realtime","configDoc.restartMayBeRequired":"May require restart","configDoc.type":"Type","configDoc.type.array":"array","configDoc.type.boolean":"boolean","configDoc.type.hostPort":"host:port","configDoc.type.number":"number","configDoc.type.object":"object","configDoc.type.string":"string","configDoc.type.url":"URL","editor.liveSaving":"Saving…","editor.liveUnsaved":"Unsaved changes","editor.liveError":"Save failed","create.cancel":"Cancel","create.close":"Close create panel","create.extension.add":"Add Extension","create.extension.enabled":"Enabled","create.extension.id":"Extension ID","create.extension.submit":"Create Extension","create.extension.title":"Create Extension","create.contextWindowPresets":"{label} presets","create.contextWindowPreset.128k":"128k","create.contextWindowPreset.400k":"400k","create.contextWindowPreset.1m":"1m","create.help.extensionEnabled":"Enables the extension.","create.help.extensionId":"Stable id, e.g. metrics.","create.help.modelContextWindow":"Maximum context tokens.","create.help.modelDisplayName":"Name shown in the console.","create.help.modelId":"Stable model id.","create.help.offerBilling":"Optional pricing for cost tracking.","create.help.offerCacheReadPrice":"Cache-read price for cost tracking.","create.help.offerCacheWritePrice":"Cache-write price for cost tracking.","create.help.offerInputPrice":"Input token price for cost tracking.","create.help.offerModel":"Model this binding supplies.","create.help.offerOutputPrice":"Output token price for cost tracking.","create.help.offerPriority":"Order weight; lower is tried first.","create.help.offerProvider":"Provider for this binding.","create.help.offerUpstreamName":"Real upstream model name.","create.help.providerApiKey":"API key sent to the provider.","create.help.providerBaseUrl":"Upstream API base URL.","create.help.providerId":"Stable provider id.","create.help.providerProtocol":"Upstream API format.","create.help.routeId":"The alias clients use.","create.help.routeModel":"Model this route points to.","create.help.routeProvider":"Provider that serves this route.","create.invalidNumber":"{field} must be a valid number.","create.positiveNumber":"{field} must be greater than zero.","create.model.add":"Add Model","create.model.contextWindow":"Context window","create.model.displayName":"Display name","create.model.id":"Model ID","create.model.submit":"Create Model","create.model.title":"Create Model","create.offer.add":"Add Provider","create.offer.billing":"Billing","create.offer.cacheReadPrice":"Cache read price","create.offer.cacheWritePrice":"Cache write price","create.offer.inputPrice":"Input price","create.offer.model":"Model","create.offer.outputPrice":"Output price","create.offer.priority":"Priority","create.offer.provider":"Provider","create.offer.submit":"Create Provider","create.offer.title":"Create Provider","create.offer.upstreamName":"Upstream name","create.provider.add":"Add Provider","create.provider.apiKey":"API key","create.provider.baseUrl":"Base URL","create.provider.id":"Provider ID","create.provider.protocol":"Protocol","create.provider.submit":"Create Provider","create.provider.title":"Create Provider","create.route.add":"Add Route","create.route.id":"Route alias","create.route.model":"Model","create.route.provider":"Provider","create.route.submit":"Create Route","create.route.title":"Create Route","empty.resources":"No resources","error.requestFailed":"Request failed","error.requestFailedWithStatus":"Request failed with status {status}","field.configUpdateFailed":"Config update {result} failed.","error.storeTitle":"Management API unavailable","error.storeMessage":"Saved settings aren't available right now. Enable persistence to edit here.","error.unknownRequest":"Unknown request error","feedback.latency":"Latency: {latency}ms","field.input":"Input","field.helpFor":"Help for {label}","field.editableList.add":"Add","field.editableList.addAction":"Add {label} item","field.editableList.addInput":"Add {label}","field.editableList.remove":"Remove {item} from {label}","field.extensions.addAction":"Add {label} extension","field.extensions.addInput":"Add extension to {label}","field.extensions.enable":"Enable {name} extension","field.extensions.remove":"Remove {name} extension","field.invalidNumber":"Invalid number","field.maxOutputTokens":"Max Output Tokens","field.model":"Model","field.providerOverrides.baseInstructions":"Override base instructions","field.providerOverrides.contextWindow":"Override context window","field.providerOverrides.defaultReasoningLevel":"Override default reasoning level","field.providerOverrides.defaultReasoningSummary":"Override default reasoning summary","field.providerOverrides.description":"Override description","field.providerOverrides.disabled":"Disabled","field.providerOverrides.displayName":"Override display name","field.providerOverrides.enabled":"Enabled","field.providerOverrides.inherit":"Inherit","field.providerOverrides.inputModalities":"Override input modalities","field.providerOverrides.maxOutputTokens":"Override max output tokens","field.providerOverrides.supportedReasoningLevels":"Override supported reasoning levels","field.providerOverrides.supportsImageDetailOriginal":"Override supports original image detail","field.providerOverrides.supportsReasoning":"Override supports reasoning","field.providerOverrides.supportsReasoningSummaries":"Override supports reasoning summaries","field.providerOverrides.title":"Provider overrides","field.secretReplacementHint":"Enter a new value to replace the saved secret.","field.structuredEditable":"Structured editor","field.structuredEmpty":"No configured entries.","field.structuredEmptyValue":"Empty","field.structuredEditorLabel":"{label}, structured editor","field.structuredNestedValues":"Nested values","field.structuredReadonly":"Structured summary","field.structuredSummary":"Structured summary","field.structuredSummaryLabel":"{label}, structured summary","field.summary.items.many":"{count} items","field.summary.items.one":"1 item","field.summary.keys.many":"{count} keys","field.summary.keys.one":"1 key","field.temperature":"Temperature","field.webSearch.firecrawlAPIKey":"{label} Firecrawl API key","field.webSearch.maxUses":"{label} max uses","field.webSearch.searchMaxRounds":"{label} search max rounds","field.webSearch.support":"{label} mode","field.webSearch.tavilyAPIKey":"{label} Tavily API key","loading.overview":"Loading console overview","loading.providers":"Loading providers","loading.routes":"Loading routes","logs.copy":"Copy","logs.description":"Recent logs from the server.","logs.download":"Download","logs.empty":"No log entries yet.","logs.emptyFiltered":"No logs match the current filters.","logs.follow":"Follow","logs.followMode":"Live follow mode","logs.levelAll":"All","logs.levelFilter":"Log level filter","logs.output":"Log output","logs.pause":"Pause","logs.panelLabel":"Backend logs","logs.panelTitle":"Backend logs","logs.search":"Search logs","logs.clearSearch":"Clear log search","logs.rowLabel":"Log {index}","logs.streamDisconnected":"Live stream disconnected","logs.streamBodyEmpty":"Log stream response body is empty","logs.streamFailedWithStatus":"Log stream failed with status {status}","logs.visibleCount":"{visible} of {total} logs","modelsProviders.description":"Manage providers and models. Changes apply in real time.","modelsProviders.models":"Models ({count})","modelsProviders.modelProvidersToggle":"Providers","modelsProviders.modelRegion":"Model {id}","modelsProviders.offers":"Providers ({count})","modelsProviders.modelProviders":"Providers ({count})","modelsProviders.providerRegion":"Provider {id}","modelsProviders.providers":"Providers ({count})","modelsProviders.unmatchedSupplies":"Unmatched Providers ({count})","modelsProviders.upstreamSupply":"Providers ({count})","overview.description":"Usage, tokens, cache, cost, and recent logs.","overview.actualModel":"Actual model","overview.avgCost":"Avg cost","overview.cacheHit":"Cache hit","overview.cacheHitValue":"{rate}","overview.cacheRead":"Cache read","overview.cacheReadWrite":"Read/write","overview.cacheRatioValue":"{ratio}","overview.cacheSplit":"Cache split","overview.cacheSplitChart":"Cache split chart","overview.cacheWrite":"Cache write","overview.chartAriaItem":"{label}: {value}","overview.chartAriaLabel":"{title}. {summary}","overview.chartAriaSeparator":", ","overview.cost":"Cost","overview.costByModel":"Cost by model","overview.costByModelChart":"Cost by model chart","overview.costPerMillionSuffix":"/M","overview.duration.hoursShort":"{count}h","overview.duration.minutesShort":"{count}m","overview.duration.secondsShort":"{count}s","overview.graph":"Graph","overview.graphUnavailableDescription":"Settings are temporarily unavailable. Usage and logs still work.","overview.graphUnavailableTitle":"Configuration graph unavailable","overview.inputTokens":"Input tokens","overview.inputValue":"{count}","overview.invalid":"Invalid","overview.mode":"Mode","overview.model":"Model","overview.modelUsageRow":"{model} usage","overview.modelUsageTable":"Model usage table","overview.models":"Models","overview.noData":"no data","overview.outputTokens":"Output tokens","overview.outputValue":"{count}","overview.providers":"Providers","overview.requests":"Requests","overview.requestsValue":"{count}","overview.restart":"Restart","overview.restartCount.many":"{count} restart","overview.restartCount.one":"1 restart","overview.revision":"Revision","overview.routes":"Routes","overview.runtime":"Runtime","overview.tokenSplit":"Token split","overview.tokenSplitChart":"Token split chart","overview.totalCost":"Total cost","overview.totalCostValue":"{cost}","overview.usageDescription":"Model volume, cache, and cost for the selected range.","overview.usageEmpty":"No usage has been recorded yet.","overview.usageTitle":"Usage Analytics","overview.rangeLabel":"Time range","overview.demoData":"Demo data","overview.range.session":"This session","overview.range.24h":"24h","overview.range.7d":"7d","overview.range.30d":"30d","overview.range.all":"All time","overview.valid":"Valid","overview.validation":"Validation","pageEyebrow.aliases":"Aliases","pageEyebrow.analytics":"Analytics","pageEyebrow.config":"Configuration","pageEyebrow.runtime":"Runtime","pageEyebrow.smokeTest":"Smoke Test","pageEyebrow.upstream":"Upstream","placeholder.description":"This section is a work in progress.","placeholder.eyebrow":"Console workspace","routes.description":"Map each client alias to a model and provider.","routes.listTitle":"Routes ({count})","routes.resourceTitle":"Route","rpc.description":"Send a test request to check that everything works.","rpc.request":"Request","rpc.response":"Response","rpc.selectModel":"Select model","resource.fieldCount.many":"{count} fields","resource.fieldCount.one":"1 field","resource.cancelDelete":"Cancel","resource.confirmDelete":"Confirm delete {id}","resource.confirmDeleteShort":"Delete","resource.delete":"Delete {title} {id}","resource.cardLabel":"{title} {id}","resource.deletePrompt":"Delete {id}? This takes effect after saving.","resource.deleteShort":"Delete","resource.openEditor":"Edit {title} {id}","resource.editShort":"Edit","resource.editorHeading":"Edit {title}","resource.editorAriaLabel":"{title} {id} editor","resource.closeEditor":"Close","resource.fact.keySet":"Key set","route.warning.modelMissing":"Select a model","route.warning.modelUnknown":'Model "{value}" is not configured',"route.warning.providerMissing":"Select a provider","route.warning.providerUnknown":'Provider "{value}" is not configured',"resource.group.advancedFeatures":"Advanced Features","resource.group.basic":"Basic","resource.group.billing":"Billing","resource.group.identity":"Identity","resource.group.multimodal":"Multimodal","resource.group.reasoning":"Reasoning","resource.group.settings":"Settings","resource.group.toggle":"Toggle {label}","resource.impact.critical":"Critical","resource.impact.normal":"Runtime safe","resource.kind.model":"Model","resource.kind.offer":"Provider","resource.kind.provider":"Provider","resource.kind.defaults":"Defaults","resource.kind.log":"Log","resource.kind.trace":"Trace","provider.protocol.anthropic":"Anthropic","provider.protocol.googleGenai":"Gemini","provider.protocol.openaiChat":"OpenAI Chat","provider.protocol.openaiResponses":"OpenAI Responses","resource.reload.hot":"Hot reload","resource.reload.restart":"Restart on change","resource.statusGroupLabel":"{label} status","resource.status.needsAttention":"Needs attention","resource.status.restartRequired":"Restart required","resource.status.saved":"Saved","searchTools.description":"Web search, extensions, and proxy settings.","searchTools.extension":"Extension","searchTools.extensions":"Extensions","searchTools.proxy":"Proxy","searchTools.webSearch":"Web Search","security.description":"Access, sign-in, and active sessions.","security.server":"Server","saveStatus.dirty":"Unsaved","saveStatus.error":"Error","saveStatus.saved":"Saved","saveStatus.saving":"Saving","saveStatus.idle":"Saved","storage.cache":"Cache","storage.description":"Cache and where your settings are saved.","storage.errors":"Storage errors","storage.persistence":"Persistence","storage.status":"Storage Status"},X9={"action.saveToken":"保存 Token","action.send":"发送","app.console":"控制台","app.consoleSections":"控制台分区","app.language":"语言","app.language.en":"English","app.language.zh":"中文","app.routeContent":"控制台路由内容","app.signOut":"登出","app.switchTheme":"切换到{theme}主题","theme.dark":"暗色","theme.light":"亮色","nav.overview":"概览","nav.modelsProviders":"模型与提供商","nav.routes":"路由","nav.defaults":"默认值","nav.searchTools":"搜索与工具","nav.storage":"存储","nav.security":"安全","nav.logs":"日志","nav.rpcTest":"RPC 测试","auth.eyebrow":"需要认证","auth.title":"输入 Moon Bridge Token","auth.token":"Token","auth.remember":"在此设备记住","auth.signedOut":"已登出，请重新输入令牌。","auth.verifying":"验证中…","auth.revealToken":"显示令牌","auth.hideToken":"隐藏令牌","common.error":"错误","common.loading":"加载中","common.unknown":"未知","config.description":"调整 Moon Bridge 的运行方式，改动即时生效。","configDoc.default":"默认值","configDoc.default.empty":"空","configDoc.optional":"可选","configDoc.required":"必填","configDoc.sensitive":"敏感项","configDoc.savedRealtime":"实时保存","configDoc.restartMayBeRequired":"可能需要重启","configDoc.type":"类型","configDoc.type.array":"数组","configDoc.type.boolean":"布尔值","configDoc.type.hostPort":"主机:端口","configDoc.type.number":"数字","configDoc.type.object":"对象","configDoc.type.string":"字符串","configDoc.type.url":"URL","editor.liveSaving":"保存中…","editor.liveUnsaved":"未保存的更改","editor.liveError":"保存失败","create.cancel":"取消","create.close":"关闭创建面板","create.extension.add":"添加扩展","create.extension.enabled":"启用","create.extension.id":"扩展 ID","create.extension.submit":"创建扩展","create.extension.title":"创建扩展","create.contextWindowPresets":"{label} 预设","create.contextWindowPreset.128k":"128K","create.contextWindowPreset.400k":"400K","create.contextWindowPreset.1m":"100 万","create.help.extensionEnabled":"启用该扩展。","create.help.extensionId":"稳定的标识，例如 metrics。","create.help.modelContextWindow":"最大上下文 Token 数。","create.help.modelDisplayName":"控制台中显示的名称。","create.help.modelId":"稳定的模型标识。","create.help.offerBilling":"可选的计费信息，用于费用统计。","create.help.offerCacheReadPrice":"缓存读取单价，用于费用统计。","create.help.offerCacheWritePrice":"缓存写入单价，用于费用统计。","create.help.offerInputPrice":"输入 Token 单价，用于费用统计。","create.help.offerModel":"此绑定提供的模型。","create.help.offerOutputPrice":"输出 Token 单价，用于费用统计。","create.help.offerPriority":"排序权重，数值越小越优先。","create.help.offerProvider":"此绑定使用的提供商。","create.help.offerUpstreamName":"实际的上游模型名。","create.help.providerApiKey":"发送给提供商的 API 密钥。","create.help.providerBaseUrl":"上游 API 基础 URL。","create.help.providerId":"稳定的提供商标识。","create.help.providerProtocol":"上游 API 格式。","create.help.routeId":"客户端使用的别名。","create.help.routeModel":"此路由指向的模型。","create.help.routeProvider":"为此路由提供服务的提供商。","create.invalidNumber":"{field} 必须是有效数字。","create.positiveNumber":"{field} 必须大于 0。","create.model.add":"添加模型","create.model.contextWindow":"上下文窗口","create.model.displayName":"显示名称","create.model.id":"模型 ID","create.model.submit":"创建模型","create.model.title":"创建模型","create.offer.add":"添加提供商","create.offer.billing":"计费","create.offer.cacheReadPrice":"缓存读取价格","create.offer.cacheWritePrice":"缓存写入价格","create.offer.inputPrice":"输入价格","create.offer.model":"模型","create.offer.outputPrice":"输出价格","create.offer.priority":"优先级","create.offer.provider":"提供商","create.offer.submit":"创建提供商","create.offer.title":"创建提供商","create.offer.upstreamName":"上游名称","create.provider.add":"添加提供商","create.provider.apiKey":"API key","create.provider.baseUrl":"Base URL","create.provider.id":"提供商 ID","create.provider.protocol":"协议","create.provider.submit":"创建提供商","create.provider.title":"创建提供商","create.route.add":"添加路由","create.route.id":"路由别名","create.route.model":"模型","create.route.provider":"提供商","create.route.submit":"创建路由","create.route.title":"创建路由","empty.resources":"没有资源","error.requestFailed":"请求失败","error.requestFailedWithStatus":"请求失败，状态码 {status}","field.configUpdateFailed":"配置更新 {result} 失败。","error.storeTitle":"管理 API 不可用","error.storeMessage":"暂无法读取已保存的设置。启用持久化后即可在此编辑。","error.unknownRequest":"未知请求错误","feedback.latency":"延迟：{latency}ms","field.input":"输入","field.helpFor":"{label} 帮助","field.editableList.add":"添加","field.editableList.addAction":"添加{label}条目","field.editableList.addInput":"添加{label}","field.editableList.remove":"从{label}移除 {item}","field.extensions.addAction":"向{label}添加扩展","field.extensions.addInput":"向{label}添加扩展","field.extensions.enable":"启用 {name} 扩展","field.extensions.remove":"移除 {name} 扩展","field.invalidNumber":"无效数字","field.maxOutputTokens":"最大输出 Token","field.model":"模型","field.providerOverrides.baseInstructions":"覆盖基础指令","field.providerOverrides.contextWindow":"覆盖上下文窗口","field.providerOverrides.defaultReasoningLevel":"覆盖默认思考深度","field.providerOverrides.defaultReasoningSummary":"覆盖默认思考摘要","field.providerOverrides.description":"覆盖描述","field.providerOverrides.disabled":"禁用","field.providerOverrides.displayName":"覆盖显示名称","field.providerOverrides.enabled":"启用","field.providerOverrides.inherit":"继承","field.providerOverrides.inputModalities":"覆盖输入模态","field.providerOverrides.maxOutputTokens":"覆盖最大输出 Token","field.providerOverrides.supportedReasoningLevels":"覆盖支持的思考深度","field.providerOverrides.supportsImageDetailOriginal":"覆盖原始图像细节支持","field.providerOverrides.supportsReasoning":"覆盖思考支持","field.providerOverrides.supportsReasoningSummaries":"覆盖思考摘要支持","field.providerOverrides.title":"提供商覆盖配置","field.secretReplacementHint":"输入新值以替换已保存的密钥。","field.structuredEditable":"结构化编辑器","field.structuredEmpty":"暂无配置条目。","field.structuredEmptyValue":"空","field.structuredEditorLabel":"{label}，结构化编辑器","field.structuredNestedValues":"嵌套值","field.structuredReadonly":"只读结构化摘要","field.structuredSummary":"结构化摘要","field.structuredSummaryLabel":"{label}，只读结构化摘要","field.summary.items.many":"{count} 个条目","field.summary.items.one":"1 个条目","field.summary.keys.many":"{count} 个键","field.summary.keys.one":"1 个键","field.temperature":"Temperature","field.webSearch.firecrawlAPIKey":"{label} Firecrawl API Key","field.webSearch.maxUses":"{label}最大使用次数","field.webSearch.searchMaxRounds":"{label}最大搜索轮数","field.webSearch.support":"{label}模式","field.webSearch.tavilyAPIKey":"{label} Tavily API Key","loading.overview":"正在加载控制台概览","loading.providers":"正在加载提供商","loading.routes":"正在加载路由","logs.copy":"复制","logs.description":"服务器的近期日志。","logs.download":"下载","logs.empty":"暂无日志条目。","logs.emptyFiltered":"没有符合当前过滤条件的日志。","logs.follow":"跟随","logs.followMode":"实时跟随模式","logs.levelAll":"全部","logs.levelFilter":"日志级别过滤","logs.output":"日志输出","logs.pause":"暂停","logs.panelLabel":"后台日志","logs.panelTitle":"后台日志","logs.search":"搜索日志","logs.clearSearch":"清除日志搜索","logs.rowLabel":"日志 {index}","logs.streamDisconnected":"实时日志流已断开","logs.streamBodyEmpty":"日志流响应体为空","logs.streamFailedWithStatus":"日志流请求失败，状态码 {status}","logs.visibleCount":"{visible} / {total} 条日志","modelsProviders.description":"管理提供商和模型，改动实时生效。","modelsProviders.models":"模型 ({count})","modelsProviders.modelProvidersToggle":"提供商","modelsProviders.modelRegion":"模型 {id}","modelsProviders.offers":"提供商 ({count})","modelsProviders.modelProviders":"提供商 ({count})","modelsProviders.providerRegion":"提供商 {id}","modelsProviders.providers":"提供商 ({count})","modelsProviders.unmatchedSupplies":"未匹配提供商 ({count})","modelsProviders.upstreamSupply":"提供商 ({count})","overview.description":"用量、Token、缓存、费用和近期日志。","overview.actualModel":"实际模型","overview.avgCost":"平均费用","overview.cacheHit":"缓存命中","overview.cacheHitValue":"{rate}","overview.cacheRead":"缓存读取","overview.cacheReadWrite":"读写比","overview.cacheRatioValue":"{ratio}","overview.cacheSplit":"缓存拆分","overview.cacheSplitChart":"缓存拆分图表","overview.cacheWrite":"缓存写入","overview.chartAriaItem":"{label}：{value}","overview.chartAriaLabel":"{title}。{summary}","overview.chartAriaSeparator":"；","overview.cost":"费用","overview.costByModel":"模型费用","overview.costByModelChart":"模型费用图表","overview.costPerMillionSuffix":"/百万","overview.duration.hoursShort":"{count} 小时","overview.duration.minutesShort":"{count} 分","overview.duration.secondsShort":"{count} 秒","overview.graph":"配置图","overview.graphUnavailableDescription":"设置暂不可用，但用量和日志仍可查看。","overview.graphUnavailableTitle":"配置图暂不可用","overview.inputTokens":"输入 Token","overview.inputValue":"{count}","overview.invalid":"无效","overview.mode":"模式","overview.model":"模型","overview.modelUsageRow":"{model} 用量","overview.modelUsageTable":"模型用量表","overview.models":"模型","overview.noData":"暂无数据","overview.outputTokens":"输出 Token","overview.outputValue":"{count}","overview.providers":"提供商","overview.requests":"请求","overview.requestsValue":"{count}","overview.restart":"重启","overview.restartCount.many":"{count} 个需要重启","overview.restartCount.one":"1 个需要重启","overview.revision":"修订版本","overview.routes":"路由","overview.runtime":"运行时","overview.tokenSplit":"Token 拆分","overview.tokenSplitChart":"Token 拆分图表","overview.totalCost":"总费用","overview.totalCostValue":"{cost}","overview.usageDescription":"所选时间范围内的模型用量、缓存和费用。","overview.usageEmpty":"还没有记录到用量。","overview.usageTitle":"用量分析","overview.rangeLabel":"时间范围","overview.demoData":"演示数据","overview.range.session":"本次会话","overview.range.24h":"24 小时","overview.range.7d":"7 天","overview.range.30d":"30 天","overview.range.all":"全部","overview.valid":"有效","overview.validation":"校验","pageEyebrow.aliases":"别名","pageEyebrow.analytics":"用量分析","pageEyebrow.config":"配置","pageEyebrow.runtime":"运行时","pageEyebrow.smokeTest":"冒烟测试","pageEyebrow.upstream":"上游","placeholder.description":"此页面尚在建设中。","placeholder.eyebrow":"控制台工作区","routes.description":"把每个客户端别名映射到一个模型和提供商。","routes.listTitle":"路由 ({count})","routes.resourceTitle":"路由","rpc.description":"发送一个测试请求，确认一切正常。","rpc.request":"请求","rpc.response":"响应","rpc.selectModel":"选择模型","resource.fieldCount.many":"{count} 个字段","resource.fieldCount.one":"1 个字段","resource.cancelDelete":"取消","resource.confirmDelete":"确认删除 {id}","resource.confirmDeleteShort":"删除","resource.delete":"删除{title} {id}","resource.cardLabel":"{title} {id}","resource.deletePrompt":"删除 {id}？保存后生效。","resource.deleteShort":"删除","resource.openEditor":"编辑{title} {id}","resource.editShort":"编辑","resource.editorHeading":"编辑{title}","resource.editorAriaLabel":"{title} {id} 编辑器","resource.closeEditor":"关闭","resource.fact.keySet":"已设置密钥","route.warning.modelMissing":"请选择模型","route.warning.modelUnknown":"模型「{value}」尚未配置","route.warning.providerMissing":"请选择提供商","route.warning.providerUnknown":"提供商「{value}」尚未配置","resource.group.advancedFeatures":"高级功能","resource.group.basic":"基础","resource.group.billing":"计费","resource.group.identity":"标识","resource.group.multimodal":"多模态","resource.group.reasoning":"思考","resource.group.settings":"设置","resource.group.toggle":"切换 {label}","resource.impact.critical":"关键运行时","resource.impact.normal":"运行时安全","resource.kind.model":"模型","resource.kind.offer":"提供商","resource.kind.provider":"提供商","resource.kind.defaults":"默认值","resource.kind.log":"日志","resource.kind.trace":"追踪","provider.protocol.anthropic":"Anthropic","provider.protocol.googleGenai":"Gemini","provider.protocol.openaiChat":"OpenAI Chat","provider.protocol.openaiResponses":"OpenAI Responses","resource.reload.hot":"热重载","resource.reload.restart":"变更后重启","resource.statusGroupLabel":"{label} 状态","resource.status.needsAttention":"需要处理","resource.status.restartRequired":"需要重启","resource.status.saved":"已保存","searchTools.description":"联网搜索、扩展和代理设置。","searchTools.extension":"扩展","searchTools.extensions":"扩展","searchTools.proxy":"代理","searchTools.webSearch":"联网搜索","security.description":"访问、登录和会话管理。","security.server":"服务访问","saveStatus.dirty":"未保存","saveStatus.error":"错误","saveStatus.saved":"已保存","saveStatus.saving":"保存中","saveStatus.idle":"已保存","storage.cache":"缓存","storage.description":"缓存以及设置保存的位置。","storage.errors":"存储错误","storage.persistence":"持久化","storage.status":"存储状态"},S2={"en-US":Q9,"zh-CN":X9};function W9(e){return e?.toLowerCase().startsWith("en")?"en-US":"zh-CN"}const x3="moonbridge.console.locale",w3=w.createContext(void 0);function Z9({children:e}){const[t,i]=w.useState(S3),o=w.useCallback(d=>{i(d),tk(x3,d)},[]),s=w.useCallback((d,f)=>_3(t,d,f),[t]),l=w.useMemo(()=>({locale:t,setLocale:o,t:s}),[t,o,s]);return v.jsx(w3.Provider,{value:l,children:e})}function Oe(){const e=w.useContext(w3);if(!e)throw new Error("useI18n must be used within I18nProvider");return e}function $u(e,t){return _3(S3(),e,t)}function _3(e,t,i){return J9(S2[e][t]??S2["zh-CN"][t],i)}function S3(){const e=ek(x3);return e==="en-US"||e==="zh-CN"?e:typeof window>"u"?"zh-CN":W9(window.navigator.language)}function J9(e,t){return t?Object.entries(t).reduce((i,[o,s])=>i.replaceAll(`{${o}}`,String(s)),e):e}function ek(e){try{return window.localStorage?.getItem(e)??null}catch{return null}}function tk(e,t){try{window.localStorage?.setItem(e,t)}catch{}}const rk="#7AA7A2",ik={dark:{"--mb-color-primary":rk,"--mb-color-on-primary":"#08201d","--mb-color-primary-container":"#274e4a","--mb-color-on-primary-container":"#d4f3ee","--mb-color-primary-fixed":"#c3eae4","--mb-color-primary-fixed-dim":"#a7cec8","--mb-color-secondary":"#bbc8c5","--mb-color-on-secondary":"#253331","--mb-color-secondary-container":"#3b4947","--mb-color-on-secondary-container":"#dbe5e2","--mb-color-tertiary":"#a7c8e8","--mb-color-on-tertiary":"#0c2438","--mb-color-tertiary-container":"#3b4858","--mb-color-on-tertiary-container":"#d8e4f8","--mb-color-warning":"#f3c06b","--mb-color-on-warning":"#412d00","--mb-color-warning-container":"#5b4300","--mb-color-on-warning-container":"#ffdfa3","--mb-color-success":"#86d7a8","--mb-color-on-success":"#003920","--mb-color-success-container":"#1d5236","--mb-color-on-success-container":"#a2f4c3","--mb-color-error":"#ffb4ab","--mb-color-on-error":"#690005","--mb-color-error-container":"#93000a","--mb-color-on-error-container":"#ffdad6","--mb-color-surface":"#0e1413","--mb-color-surface-dim":"#0e1413","--mb-color-surface-bright":"#343b39","--mb-color-surface-container-lowest":"#090f0e","--mb-color-surface-container-low":"#161d1b","--mb-color-surface-container":"#1a2120","--mb-color-surface-container-high":"#252b2a","--mb-color-surface-container-highest":"#2f3635","--mb-color-on-surface":"#e0e3e1","--mb-color-on-surface-variant":"#bec9c6","--mb-color-outline":"#899390","--mb-color-outline-variant":"#3f4946","--mb-color-shadow":"#000000","--mb-color-scrim":"#000000","--mb-color-inverse-surface":"#e0e3e1","--mb-color-inverse-on-surface":"#2b3231","--mb-color-inverse-primary":"#3a615c","--mb-motion-standard":"180ms cubic-bezier(0.2, 0, 0, 1)"},light:{"--mb-color-primary":"#406863","--mb-color-on-primary":"#ffffff","--mb-color-primary-container":"#c2ebe5","--mb-color-on-primary-container":"#00201d","--mb-color-primary-fixed":"#c2ebe5","--mb-color-primary-fixed-dim":"#a6cfc9","--mb-color-secondary":"#4b6360","--mb-color-on-secondary":"#ffffff","--mb-color-secondary-container":"#cde8e3","--mb-color-on-secondary-container":"#05201d","--mb-color-tertiary":"#41617d","--mb-color-on-tertiary":"#ffffff","--mb-color-tertiary-container":"#d4e4f7","--mb-color-on-tertiary-container":"#101d2b","--mb-color-warning":"#7c5800","--mb-color-on-warning":"#ffffff","--mb-color-warning-container":"#ffdfa3","--mb-color-on-warning-container":"#271900","--mb-color-success":"#236c47","--mb-color-on-success":"#ffffff","--mb-color-success-container":"#a8f4c5","--mb-color-on-success-container":"#002111","--mb-color-error":"#ba1a1a","--mb-color-on-error":"#ffffff","--mb-color-error-container":"#ffdad6","--mb-color-on-error-container":"#410002","--mb-color-surface":"#f4fbf8","--mb-color-surface-dim":"#d5dbd8","--mb-color-surface-bright":"#f4fbf8","--mb-color-surface-container-lowest":"#ffffff","--mb-color-surface-container-low":"#eef5f1","--mb-color-surface-container":"#e8efeb","--mb-color-surface-container-high":"#e2e9e6","--mb-color-surface-container-highest":"#dde4e0","--mb-color-on-surface":"#171d1b","--mb-color-on-surface-variant":"#3f4946","--mb-color-outline":"#6f7976","--mb-color-outline-variant":"#bec9c5","--mb-color-shadow":"#000000","--mb-color-scrim":"#000000","--mb-color-inverse-surface":"#2b3231","--mb-color-inverse-on-surface":"#eff1ee","--mb-color-inverse-primary":"#a6cfc9","--mb-motion-standard":"180ms cubic-bezier(0.2, 0, 0, 1)"}};function nk(e,t){Object.entries(ik[e]).forEach(([i,o])=>{if(t.style.setProperty(i,o),i.startsWith("--mb-color-")){const s=i.replace("--mb-color-","--md-sys-color-");t.style.setProperty(s,o)}})}const E3="moonbridge.console.theme",T3=w.createContext(void 0);function ok(){if(typeof window>"u")return"dark";try{if(!window.localStorage)return"dark";const e=window.localStorage.getItem(E3);return e==="light"||e==="dark"?e:"dark"}catch{return"dark"}}function ak({children:e}){const[t,i]=w.useState(ok),o=w.useCallback(d=>{i(d)},[]),s=w.useCallback(()=>{i(d=>d==="dark"?"light":"dark")},[]);w.useEffect(()=>{const d=document.documentElement;d.dataset.theme=t,nk(t,d);try{window.localStorage?.setItem(E3,t)}catch{}},[t]);const l=w.useMemo(()=>({theme:t,setTheme:o,toggleTheme:s}),[t,o,s]);return v.jsx(T3.Provider,{value:l,children:e})}function sk(){const e=w.useContext(T3);if(!e)throw new Error("useConsoleTheme must be used within ThemeProvider");return e}const ur={spatialFast:{type:"spring",stiffness:1400,damping:50,mass:1},spatial:{type:"spring",stiffness:700,damping:36,mass:1},effects:{type:"spring",stiffness:1600,damping:80,mass:1}},Wp={initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{...ur.spatial,opacity:ur.effects}},Zp={initial:{opacity:0,y:12},animate:{opacity:1,y:0},transition:{...ur.spatial,opacity:ur.effects}},lk={hidden:{},show:{transition:{staggerChildren:.05,delayChildren:.02}}},ck={hidden:{opacity:0,y:12},show:{opacity:1,y:0,transition:{...ur.spatial,opacity:ur.effects}}};({...ur.spatial});const dk=`
+  :root {
+    color-scheme: dark;
+    /* Reserve the scrollbar gutter so the layout (and centered dialogs) does not shift
+       when a scrollbar appears or disappears — keeps left/right spacing symmetric. */
+    scrollbar-gutter: stable;
+    font-family:
+      "Roboto Flex", Inter, ui-sans-serif, system-ui, -apple-system,
+      BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-optical-sizing: auto;
+    background: var(--mb-color-surface);
+    color: var(--mb-color-on-surface);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+
+    /* ---- M3 Expressive shape scale ---- */
+    --mb-shape-xs: 8px;
+    --mb-shape-sm: 12px;
+    --mb-shape-md: 16px;
+    --mb-shape-lg: 20px;
+    --mb-shape-xl: 28px;
+    --mb-shape-2xl: 36px;
+    --mb-shape-full: 999px;
+
+    /* Buttons use a uniform small-radius (square-ish) shape rather than pills. */
+    --mb-button-shape: 8px;
+
+    /* All panel/card/dialog backgrounds share one radius for a consistent surface language. */
+    --mb-shape-panel: 20px;
+
+    /* ---- Code/mono font ---- */
+    --mb-font-mono: "Roboto Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+
+    /* ---- M3 Expressive type scale ---- */
+    --mb-type-display: 700 clamp(2rem, 1.4rem + 2.4vw, 2.9rem)/1.06 "Roboto Flex", Inter, system-ui, sans-serif;
+    --mb-tracking-display: -0.015em;
+
+    /* ---- Content measure: caps the reading/editing width on wide and ultrawide screens so
+       content does not stretch into unreadable line lengths, while still filling common
+       1440–1920px laptops. Section grids inside keep using auto-fit to fill the column. ---- */
+    --mb-content-max: 1560px;
+    --mb-content-gutter: clamp(16px, 3.2vw, 44px);
+
+    /* ---- M3 motion easings + durations ---- */
+    --mb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --mb-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --mb-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    --mb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --mb-duration-short: 140ms;
+    --mb-duration-medium: 240ms;
+    --mb-duration-long: 420ms;
+    --mb-motion-standard: var(--mb-duration-medium) var(--mb-ease-standard);
+    --mb-motion-emphasized: var(--mb-duration-long) var(--mb-ease-decelerate);
+
+    /* ---- State-layer opacities (M3) ---- */
+    --mb-state-hover: 0.08;
+    --mb-state-focus: 0.10;
+    --mb-state-press: 0.12;
+
+    /* ---- Tonal elevation shadows for transient floating surfaces. App panels use tonal color instead. ---- */
+    --mb-elevation-1:
+      0 1px 2px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent),
+      0 1px 3px 1px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent);
+    --mb-elevation-2:
+      0 1px 2px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent),
+      0 2px 6px 2px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent);
+    --mb-elevation-3:
+      0 4px 8px 3px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 1px 3px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+    --mb-elevation-4:
+      0 6px 10px 4px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 2px 3px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+    --mb-elevation-5:
+      0 8px 12px 6px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 4px 4px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+
+    /* Material Symbols default to an outlined, unfilled glyph. */
+    --md-icon-font: "Material Symbols Rounded";
+    --md-icon-size: 24px;
+  }
+
+  :root[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: var(--mb-color-surface);
+  }
+
+  md-icon,
+  .material-symbol {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+    transition: font-variation-settings var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  /* Filled icon variant for active/selected expressive states. */
+  .nav-item--active md-icon,
+  .icon--filled {
+    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--mb-color-primary) 32%, transparent);
+    color: var(--mb-color-on-surface);
+  }
+
+  :focus-visible {
+    outline: none;
+  }
+
+  /* Themed, slim scrollbars to avoid heavy native chrome. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--mb-color-outline) 55%, transparent) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: var(--mb-shape-full);
+    background: color-mix(in srgb, var(--mb-color-outline) 50%, transparent);
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--mb-color-outline) 80%, transparent);
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  @keyframes mb-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes mb-shimmer {
+    0% { background-position: -480px 0; }
+    100% { background-position: 480px 0; }
+  }
+  @keyframes mb-pulse-ring {
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb-color-primary) 45%, transparent); }
+    70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mb-color-primary) 0%, transparent); }
+    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb-color-primary) 0%, transparent); }
+  }
+  @keyframes mb-pop-in {
+    0% { opacity: 0; transform: scale(0.8); }
+    60% { opacity: 1; transform: scale(1.06); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+
+  .app-shell {
+    min-height: 100vh;
+    background:
+      radial-gradient(1200px 420px at 12% -8%, color-mix(in srgb, var(--mb-color-primary) 14%, transparent), transparent 70%),
+      radial-gradient(900px 360px at 100% -4%, color-mix(in srgb, var(--mb-color-tertiary) 10%, transparent), transparent 72%),
+      var(--mb-color-surface);
+  }
+
+  .auth-gate {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background:
+      radial-gradient(900px 500px at 50% -12%, color-mix(in srgb, var(--mb-color-primary) 20%, transparent), transparent 70%),
+      var(--mb-color-surface);
+  }
+
+  .auth-card {
+    width: min(420px, 100%);
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 32px;
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .auth-card__badge {
+    width: 56px;
+    height: 56px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-lg);
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+    --md-icon-size: 30px;
+  }
+
+  .auth-card h1 {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.15;
+  }
+
+  .auth-card__message {
+    margin: 0;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .auth-token-field {
+    width: 100%;
+  }
+
+  /* Smaller (~ -25%) visibility-toggle icon button used inside secret/token
+     text fields, so it doesn't dominate the field's trailing area. */
+  .field-visibility-toggle {
+    --md-icon-button-state-layer-size: 30px;
+    --md-icon-size: 18px;
+  }
+
+  .auth-remember {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    color: var(--mb-color-on-surface);
+    font-size: 0.9rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .auth-remember md-checkbox {
+    --md-checkbox-selected-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-icon-color: var(--mb-color-on-primary);
+    --md-checkbox-selected-hover-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-focus-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-pressed-container-color: var(--mb-color-primary);
+    --md-checkbox-unselected-outline-color: var(--mb-color-outline);
+    --md-checkbox-unselected-hover-outline-color: var(--mb-color-on-surface-variant);
+    --md-checkbox-unselected-focus-outline-color: var(--mb-color-primary);
+  }
+
+  .auth-submit {
+    margin-top: 4px;
+    width: 100%;
+    min-height: 48px;
+  }
+
+  .top-app-bar {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    min-height: 68px;
+    padding: 10px 24px;
+    border-bottom: 1px solid color-mix(in srgb, var(--mb-color-outline) 36%, transparent);
+    background: color-mix(in srgb, var(--mb-color-surface) 92%, transparent);
+    backdrop-filter: blur(16px);
+  }
+
+  .top-app-bar p,
+  .top-app-bar strong {
+    margin: 0;
+  }
+
+  .top-app-bar p {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.75rem;
+    line-height: 1.2;
+  }
+
+  .top-app-bar strong {
+    display: block;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    font-weight: 650;
+  }
+
+  .top-app-bar__meta {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+
+  .top-app-bar__meta > span {
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-outline-variant) 60%, transparent);
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container);
+    font-size: 0.78rem;
+    font-weight: 600;
+  }
+
+  .locale-switch {
+    min-height: 38px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-outline-variant) 60%, transparent);
+    border-radius: var(--mb-button-shape);
+    padding: 3px;
+    background: var(--mb-color-surface-container);
+  }
+
+  .locale-switch > span {
+    min-height: 30px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 7px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .locale-switch__button {
+    min-width: 36px;
+    min-height: 30px;
+    --md-filled-button-container-height: 30px;
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-label-text-size: 0.75rem;
+    --md-filled-button-label-text-weight: 700;
+    --md-filled-button-leading-space: 10px;
+    --md-filled-button-trailing-space: 10px;
+    --md-outlined-button-container-height: 30px;
+    --md-outlined-button-container-shape: var(--mb-button-shape);
+    --md-outlined-button-label-text-size: 0.75rem;
+    --md-outlined-button-label-text-weight: 700;
+    --md-outlined-button-leading-space: 10px;
+    --md-outlined-button-trailing-space: 10px;
+  }
+
+  md-filled-button {
+    --md-filled-button-container-color: var(--mb-color-primary);
+    --md-filled-button-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-container-shape: var(--mb-button-shape);
+  }
+
+  md-outlined-button {
+    --md-outlined-button-container-shape: var(--mb-button-shape);
+    --md-outlined-button-label-text-color: var(--mb-color-on-surface);
+    --md-outlined-button-outline-color: var(--mb-color-outline-variant);
+    --md-outlined-button-hover-label-text-color: var(--mb-color-primary);
+    --md-outlined-button-hover-outline-color: var(--mb-color-primary);
+  }
+
+  .secondary-button {
+    --md-outlined-button-label-text-color: var(--mb-color-on-surface);
+    --md-outlined-button-outline-color: var(--mb-color-outline-variant);
+  }
+
+  md-icon-button {
+    --md-icon-button-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+  }
+
+  md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-hover-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-focus-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-pressed-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-track-outline-color: var(--mb-color-outline);
+    --md-switch-hover-track-outline-color: var(--mb-color-outline);
+    --md-switch-focus-track-outline-color: var(--mb-color-outline);
+    --md-switch-pressed-track-outline-color: var(--mb-color-outline);
+    --md-switch-handle-color: var(--mb-color-outline);
+    --md-switch-hover-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-focus-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-pressed-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-selected-hover-state-layer-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-state-layer-color: var(--mb-color-primary);
+    --md-switch-hover-state-layer-color: var(--mb-color-on-surface);
+    --md-switch-pressed-state-layer-color: var(--mb-color-on-surface);
+  }
+
+`,uk=`  .workspace {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr);
+    min-height: calc(100vh - 69px);
+  }
+
+  .navigation-rail {
+    position: sticky;
+    top: 69px;
+    align-self: start;
+    height: calc(100vh - 69px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 14px 8px;
+    outline: 0;
+    background: var(--mb-color-surface-container-low);
+  }
+
+  .nav-item {
+    position: relative;
+    width: 100%;
+    min-height: 58px;
+    display: grid;
+    justify-items: center;
+    align-content: center;
+    gap: 5px;
+    padding: 6px 2px;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-surface-variant);
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .nav-item__icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 32px;
+    border-radius: var(--mb-shape-full);
+    overflow: hidden;
+    isolation: isolate;
+    --md-ripple-hover-color: var(--mb-color-on-surface);
+    --md-ripple-pressed-color: var(--mb-color-primary);
+    --md-icon-size: 24px;
+  }
+
+  .nav-item__icon md-icon {
+    position: relative;
+    z-index: 1;
+    transition: transform var(--mb-duration-medium) var(--mb-ease-spring);
+  }
+
+  .nav-item__indicator {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--mb-shape-full);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .nav-item__icon::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    background: transparent;
+    transition: background var(--mb-duration-short) var(--mb-ease-standard);
+  }
+
+  .nav-item:hover .nav-item__icon::after {
+    background: color-mix(in srgb, var(--mb-color-on-surface) 8%, transparent);
+  }
+
+  .nav-item__label {
+    max-width: 90px;
+    font-size: 0.6875rem;
+    line-height: 1.15;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-align: center;
+    white-space: normal;
+    transition: color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .nav-item:hover {
+    color: var(--mb-color-on-surface);
+  }
+
+  .nav-item:hover .nav-item__icon md-icon {
+    transform: translateY(-1px) scale(1.08);
+  }
+
+  .nav-item--active {
+    color: var(--mb-color-on-surface);
+  }
+
+  .nav-item--active .nav-item__icon {
+    color: var(--mb-color-on-secondary-container);
+  }
+
+  .nav-item--active .nav-item__label {
+    color: var(--mb-color-on-surface);
+    font-weight: 700;
+  }
+
+  .nav-item:focus-visible {
+    outline: none;
+  }
+
+  .nav-item:focus-visible .nav-item__icon {
+    outline: 2px solid var(--mb-color-primary);
+    outline-offset: 3px;
+  }
+
+  .content-surface {
+    min-width: 0;
+    padding: 24px var(--mb-content-gutter);
+  }
+
+  .placeholder-panel {
+    min-height: calc(100vh - 120px);
+    display: flex;
+    align-items: center;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 32px;
+    background: var(--mb-color-surface-container);
+  }
+
+  .placeholder-panel > div {
+    max-width: 760px;
+  }
+
+  .eyebrow {
+    margin: 0 0 10px;
+    color: var(--mb-color-primary);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: clamp(2rem, 4vw, 3.5rem);
+    line-height: 1.05;
+    font-weight: 650;
+  }
+
+  .placeholder-panel p:last-child {
+    margin: 18px 0 0;
+    max-width: 620px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  .page-stack {
+    display: grid;
+    gap: 20px;
+    /* Center the page content within the available rail+content area and cap it at the
+       content measure so wide/ultrawide screens stay readable instead of stretching. */
+    width: min(100%, var(--mb-content-max));
+    margin-inline: auto;
+  }
+
+  .page-header {
+    max-width: none;
+  }
+
+  .page-header h1 {
+    font: var(--mb-type-display);
+    letter-spacing: var(--mb-tracking-display);
+  }
+
+  .page-header p:last-child {
+    margin: 12px 0 0;
+    max-width: 68ch;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+
+`,fk=`  .metric-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-dashboard {
+    display: grid;
+    gap: 16px;
+  }
+
+  .panel-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .panel-heading h2,
+  .panel-heading p {
+    margin: 0;
+  }
+
+  .panel-heading h2 {
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  .panel-heading p {
+    margin-top: 5px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.86rem;
+    line-height: 1.45;
+  }
+
+  .usage-heading-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .usage-range {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+  }
+
+  .usage-demo-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 32px;
+    padding: 0 12px;
+    border-radius: var(--mb-button-shape);
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container);
+    font-size: 0.78rem;
+    font-weight: 650;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .usage-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-metric {
+    position: relative;
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 14px 16px;
+    background: var(--mb-color-surface-container-high);
+    transition:
+      background-color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .usage-metric:hover {
+    background: var(--mb-color-surface-container-highest);
+  }
+
+  .usage-metric__icon {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .usage-metric__icon.material-symbol {
+    font-size: 20px;
+  }
+
+  .usage-metric--tertiary .usage-metric__icon {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .usage-metric--secondary .usage-metric__icon {
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .usage-metric__label {
+    padding-right: 44px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .usage-metric strong {
+    min-width: 0;
+    padding-right: 44px;
+    overflow-wrap: anywhere;
+    font-size: 1.32rem;
+    line-height: 1.12;
+    font-weight: 650;
+  }
+
+  .usage-chart-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-chart {
+    min-width: 0;
+    display: grid;
+    gap: 12px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 16px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 76%, var(--mb-color-surface));
+  }
+
+  .usage-chart:focus-visible {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .usage-chart__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .usage-chart__header h3 {
+    margin: 0;
+    font-size: 0.88rem;
+    line-height: 1.25;
+  }
+
+  .usage-chart__header span {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+
+  .usage-chart__bar {
+    overflow: hidden;
+    display: flex;
+    gap: 0;
+    /* Fixed height (not min-height) so the bar never stretches when the panel
+       around it grows; only the outer ends are rounded via the container. */
+    block-size: 10px;
+    border-radius: var(--mb-shape-full);
+    background: var(--mb-color-surface-container);
+  }
+
+  .usage-chart__segment {
+    min-inline-size: 4px;
+    border-radius: 0;
+    transition: inline-size var(--mb-duration-long) var(--mb-ease-decelerate);
+  }
+
+  .usage-segment--input {
+    background: var(--mb-color-primary);
+  }
+
+  .usage-segment--output {
+    background: var(--mb-color-tertiary);
+  }
+
+  .usage-segment--cache-write {
+    background: var(--mb-color-secondary);
+  }
+
+  .usage-segment--cache-read {
+    background: var(--mb-color-primary-container);
+  }
+
+  .usage-segment--cost-1 {
+    background: #7c6fdd;
+  }
+
+  .usage-segment--cost-2 {
+    background: #2f8f68;
+  }
+
+  .usage-segment--cost-3 {
+    background: #c26a30;
+  }
+
+  .usage-segment--cost-4 {
+    background: #b84f76;
+  }
+
+  .usage-segment--cost-5 {
+    background: #4f82c8;
+  }
+
+  .usage-segment--cost-6 {
+    background: #8a7a24;
+  }
+
+  .usage-chart__legend {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .usage-chart__legend li {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: center;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+  }
+
+  .usage-chart__legend li > span:not(.usage-chart__dot) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .usage-chart__legend strong {
+    color: var(--mb-color-on-surface);
+    font-weight: 700;
+  }
+
+  .usage-chart__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--mb-shape-full);
+  }
+
+  .usage-table td {
+    white-space: nowrap;
+  }
+
+  .usage-table td:first-child,
+  .usage-table td:nth-child(2) {
+    max-width: 260px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .usage-empty-state {
+    min-height: 180px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container) 48%, transparent);
+    font-weight: 650;
+  }
+
+  .usage-empty-state p {
+    margin: 0;
+  }
+
+  .overview-logs {
+    display: grid;
+    gap: 16px;
+  }
+
+`,hk=`  .metric-card,
+  .content-panel,
+  .state-panel {
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    background: var(--mb-color-surface-container);
+  }
+
+  .metric-card {
+    min-height: 112px;
+    display: grid;
+    align-content: space-between;
+    gap: 18px;
+    padding: 20px;
+  }
+
+  .metric-card span {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 650;
+    text-transform: uppercase;
+  }
+
+  .metric-card strong {
+    overflow-wrap: anywhere;
+    font-size: 1.65rem;
+    line-height: 1.1;
+    font-weight: 680;
+  }
+
+  .section-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
+    gap: 16px;
+  }
+
+  .content-panel,
+  .state-panel {
+    min-width: 0;
+    padding: 24px;
+  }
+
+  .state-panel {
+    min-height: 280px;
+    display: grid;
+    align-content: center;
+  }
+
+  .content-panel h2,
+  .state-panel h2 {
+    margin: 0 0 14px;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .content-panel--subtle {
+    background: color-mix(in srgb, var(--mb-color-surface-container) 74%, var(--mb-color-surface));
+  }
+
+  .state-panel p:last-child {
+    margin: 0;
+    color: var(--mb-color-on-surface-variant);
+    line-height: 1.55;
+  }
+
+  .compact-list {
+    display: grid;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .compact-list li {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 0;
+    border-top: 1px solid color-mix(in srgb, var(--mb-color-outline) 24%, transparent);
+  }
+
+  .compact-list li:first-child {
+    border-top: 0;
+  }
+
+  .compact-list strong,
+  .compact-list span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .compact-list span,
+  .empty-state {
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  .empty-state {
+    margin: 0;
+    line-height: 1.55;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+  }
+
+  .resource-table {
+    width: 100%;
+    min-width: 720px;
+    border-collapse: collapse;
+    font-size: 0.92rem;
+  }
+
+  .resource-table th,
+  .resource-table td {
+    padding: 13px 12px;
+    border-bottom: 1px solid color-mix(in srgb, var(--mb-color-outline) 28%, transparent);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .resource-table th {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.74rem;
+    font-weight: 720;
+    text-transform: uppercase;
+  }
+
+  .resource-table td {
+    overflow-wrap: anywhere;
+  }
+
+  .resource-table tbody tr:hover {
+    background: color-mix(in srgb, var(--mb-color-primary) 7%, transparent);
+  }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-height: 30px;
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .status-pill--muted {
+    color: var(--mb-color-on-surface);
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .status-pill--restartRequired,
+  .status-pill--critical {
+    --mb-status-danger-container: color-mix(in srgb, var(--mb-color-error) 16%, var(--mb-color-surface-container-highest));
+    --mb-status-danger-label: color-mix(in srgb, var(--mb-color-error) 72%, var(--mb-color-on-surface));
+    color: var(--mb-status-danger-label);
+    background: var(--mb-status-danger-container);
+  }
+
+  .status-pill--needsAttention {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .resource-card-list {
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-section {
+    min-width: 0;
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-section h2 {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .resource-card-list--compact {
+    gap: 10px;
+  }
+
+  /* Summary rows: compact, evenly spaced scannable list (dialog-based editing). */
+  .resource-card-list--summary {
+    gap: 10px;
+  }
+
+  .model-resource-group,
+  .provider-resource-group {
+    display: grid;
+    gap: 10px;
+  }
+
+  .model-provider-bindings .resource-card-list--compact {
+    gap: 12px;
+  }
+
+  .section-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .section-heading h2 {
+    margin: 0;
+  }
+
+  .section-heading--compact {
+    margin-bottom: 0;
+  }
+
+  .section-heading--compact h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.25;
+  }
+
+  .create-resource {
+    display: grid;
+    justify-items: end;
+    gap: 12px;
+  }
+
+  .create-resource__add {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 40px;
+    padding: 0 20px;
+    --md-filled-button-container-color: var(--mb-color-secondary-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-secondary);
+  }
+
+  .create-resource__panel {
+    width: min(760px, 100%);
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 18px 20px;
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .create-resource__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .create-resource__header h3 {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.25;
+  }
+
+  .form-grid.create-resource__fields {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .form-grid.create-resource__fields .form-field--create-track {
+    grid-column: span 1;
+  }
+
+  .form-grid.create-resource__fields .create-resource__context-window-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) auto;
+    align-items: start;
+    gap: 12px 18px;
+  }
+
+  .create-resource__context-window-presets {
+    align-self: start;
+    min-height: 40px;
+    align-content: start;
+  }
+
+  .icon-button {
+    --md-icon-button-state-layer-width: 36px;
+    --md-icon-button-state-layer-height: 36px;
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.12;
+    --md-icon-button-focus-state-layer-opacity: 0.12;
+  }
+
+`,pk=`  .resource-editor-card {
+    position: relative;
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 16px 18px;
+    background: var(--mb-color-surface-container);
+    transition:
+      background-color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .resource-editor-card:hover {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .resource-editor-card:focus-within {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .resource-editor-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .resource-editor-card__identity {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+  }
+
+  .resource-editor-card__identity-line {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__identity h3 {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--mb-color-on-surface);
+    font-size: 1rem;
+    line-height: 1.2;
+    font-weight: 720;
+  }
+
+  .resource-editor-card__facts {
+    display: flex;
+    align-items: center;
+    gap: 8px var(--mb-resource-meta-gap, 12px);
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__facts .resource-meta-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    font-size: 0.76rem;
+    font-weight: 650;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .resource-editor-card__facts .resource-meta-pill .material-symbol {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .resource-fact {
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 68%, transparent);
+  }
+
+  .resource-fact .material-symbol {
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  .resource-fact--hot .material-symbol {
+    color: var(--mb-color-primary);
+  }
+
+  .resource-fact--restart .material-symbol {
+    color: var(--mb-color-tertiary);
+  }
+
+  .resource-kind-icon {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+    font-size: 18px;
+  }
+
+  .resource-editor-card__status-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mb-resource-meta-gap, 12px);
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__meta {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+  }
+
+  .editor-live-status {
+    font-weight: 700;
+  }
+
+  .editor-live-status--saving {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .editor-live-status--saving .material-symbol {
+    animation: mb-spin 0.9s linear infinite;
+  }
+
+  .editor-live-status--dirty {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .editor-live-status--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  @keyframes mb-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .fab-button {
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px 0 16px;
+    font-size: 0.82rem;
+    font-weight: 680;
+    white-space: nowrap;
+    --md-filled-button-container-color: var(--mb-color-primary-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-container-elevation: 1;
+    --md-filled-button-hover-container-elevation: 2;
+    --md-filled-button-pressed-container-elevation: 1;
+    --md-filled-button-icon-size: 20px;
+    transition:
+      transform var(--mb-duration-short) var(--mb-ease-spring);
+  }
+
+  .fab-button:hover {
+    transform: translateY(-1px);
+  }
+
+  .fab-button:active {
+    transform: translateY(0);
+  }
+
+  .fab-button--danger {
+    --md-filled-button-container-color: var(--mb-color-error-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-error);
+  }
+
+  .switch-bank {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+    gap: 8px 14px;
+    align-items: start;
+  }
+
+  .resource-delete-confirmation {
+    display: grid;
+    gap: 10px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-error) 34%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 14px 16px;
+    color: var(--mb-color-on-error-container);
+    background: color-mix(in srgb, var(--mb-color-error-container) 70%, var(--mb-color-surface));
+  }
+
+  .resource-delete-confirmation p {
+    margin: 0;
+    font-size: 0.82rem;
+    line-height: 1.45;
+    font-weight: 650;
+  }
+
+  .resource-delete-confirmation__actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .resource-delete-confirmation__confirm {
+    --md-filled-button-container-color: var(--mb-color-error);
+    --md-filled-button-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-icon-color: var(--mb-color-on-error);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-error);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-error);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-error);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-on-error);
+    --md-filled-button-container-elevation: 1;
+  }
+
+  .resource-editor-card__summary {
+    display: none;
+  }
+
+  .resource-field-groups {
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-field-group {
+    display: grid;
+    gap: 12px;
+    border-radius: var(--mb-shape-md);
+    outline: 0;
+    padding: 16px;
+    background: color-mix(in srgb, var(--mb-color-surface) 68%, var(--mb-color-surface-container-high));
+  }
+
+  .resource-field-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .resource-field-group__header-actions {
+    min-width: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .resource-field-group__body {
+    display: grid;
+    gap: 12px;
+  }
+
+  .resource-field-group__header h4 {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--mb-color-on-surface);
+    font-size: 0.84rem;
+    line-height: 1.25;
+    font-weight: 760;
+  }
+
+  .resource-field-group__header h4 .material-symbol {
+    font-size: 1.1rem;
+    color: var(--mb-color-primary);
+  }
+
+  .resource-field-group--advanced {
+    background: color-mix(in srgb, var(--mb-color-surface) 68%, var(--mb-color-surface-container-high));
+  }
+
+  .resource-field-group__toggle {
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-focus-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    flex: 0 0 auto;
+    transition: transform var(--mb-duration-medium) var(--mb-ease-spring);
+  }
+
+  .resource-field-group__toggle[aria-expanded="true"] {
+    --md-icon-button-icon-color: var(--mb-color-primary);
+    transform: rotate(90deg);
+  }
+
+  .resource-field-group__switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 64px;
+  }
+
+  .resource-field-group__switch md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+  }
+
+  /* ---- Summary row variant: compact, scannable list item ---- */
+  .resource-editor-card--summary {
+    padding: 12px 16px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__header {
+    align-items: center;
+    gap: 16px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__identity {
+    gap: 6px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__meta {
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* Brand badge between the kind icon and the id in summary rows */
+  .resource-editor-card__identity-line .lobe-brand-icon {
+    display: inline-flex;
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  /* ---- Embedded variant: card sits directly on the dialog surface (no nested card) ---- */
+  .resource-editor-card--embedded {
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+  }
+
+  .resource-editor-card--embedded:hover,
+  .resource-editor-card--embedded:focus-within {
+    background: transparent;
+  }
+
+  /* ---- Material dialog (resource editor) ----
+     md-dialog hard-codes a 560px host max-width. Override on the host element
+     (layout only) so the editor's multi-column form grid has room to breathe. */
+  md-dialog.resource-editor-dialog {
+    --md-dialog-container-shape: var(--mb-shape-panel);
+    --md-dialog-container-color: var(--mb-color-surface-container);
+    --md-dialog-container-elevation: var(--mb-elevation-3);
+    max-width: min(900px, calc(100% - 48px));
+    max-height: min(86vh, calc(100% - 48px));
+  }
+
+  md-dialog.resource-editor-dialog .material-dialog__content {
+    width: min(860px, 100%);
+  }
+
+  /* Generic Material dialog headline + content helpers (emitted by MaterialDialog) */
+  .material-dialog__headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .material-dialog__headline-text {
+    overflow-wrap: anywhere;
+    font-size: 1.02rem;
+    font-weight: 680;
+    color: var(--mb-color-on-surface);
+  }
+
+  .material-dialog__close {
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-focus-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+  }
+
+  @media (max-width: 600px) {
+    .resource-editor-card--summary .resource-editor-card__header {
+      flex-wrap: wrap;
+    }
+    .resource-editor-card--summary .resource-editor-card__meta {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+    md-dialog.resource-editor-dialog .material-dialog__content {
+      width: 100%;
+    }
+  }
+`,mk=`  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .form-grid label,
+  .form-field,
+  .schema-field {
+    display: grid;
+    gap: 6px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+    min-width: 0;
+  }
+
+  .form-field label {
+    display: grid;
+    gap: 6px;
+    color: inherit;
+    font: inherit;
+  }
+
+  .schema-field__topline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    min-height: 26px;
+  }
+
+  .schema-field--inline {
+    gap: 6px;
+  }
+
+  .schema-field__label-row {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .schema-field__label {
+    color: inherit;
+    font: inherit;
+  }
+
+  .schema-field__label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .schema-field__required {
+    margin-left: 3px;
+    color: var(--mb-color-error);
+  }
+
+  .schema-field__help-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .schema-field__help {
+    min-height: 0;
+    flex: 0 0 auto;
+    --md-icon-button-state-layer-width: 20px;
+    --md-icon-button-state-layer-height: 20px;
+    --md-icon-button-state-layer-shape: 999px;
+    --md-icon-button-icon-size: 16px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.14;
+    --md-icon-button-focus-state-layer-opacity: 0.14;
+  }
+
+  .rich-tooltip {
+    position: fixed;
+    z-index: 40;
+    width: min(320px, calc(100vw - 24px));
+    max-width: min(320px, 78vw);
+    display: grid;
+    gap: 6px;
+    border-radius: var(--mb-shape-md);
+    padding: 16px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    box-shadow: var(--mb-elevation-3);
+    text-align: left;
+    pointer-events: none;
+  }
+
+  .rich-tooltip__subhead {
+    color: var(--mb-color-on-surface);
+    font-size: 0.82rem;
+    font-weight: 720;
+    line-height: 1.3;
+  }
+
+  .rich-tooltip__body {
+    font-size: 0.8rem;
+    font-weight: 460;
+    line-height: 1.5;
+  }
+
+  .rich-tooltip__metas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 0;
+  }
+
+  .rich-tooltip__chip {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 9px;
+    background: color-mix(in srgb, var(--mb-color-primary) 14%, transparent);
+    color: var(--mb-color-on-surface);
+    font-size: 0.7rem;
+    font-weight: 640;
+    white-space: nowrap;
+  }
+
+  .schema-field__switch-line {
+    width: 100%;
+    min-width: 0;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 4px 6px 4px 14px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 60%, transparent);
+  }
+
+  .material-chip-group {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+    min-height: 38px;
+  }
+
+  .schema-structured-summary {
+    width: 100%;
+    display: grid;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    padding: 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .schema-structured-summary__header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    text-align: left;
+  }
+
+  .schema-structured-summary__header span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--mb-color-on-surface);
+  }
+
+  .schema-structured-summary__header strong {
+    min-height: 24px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 11px;
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+    font-size: 0.76rem;
+    white-space: nowrap;
+  }
+
+  .schema-structured-summary__rows {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 8px;
+  }
+
+  .schema-structured-summary__row {
+    min-width: 0;
+    display: grid;
+    gap: 3px;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 10px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 54%, transparent);
+  }
+
+  .schema-structured-summary__row dt,
+  .schema-structured-summary__row dd {
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-structured-summary__row dt {
+    color: var(--mb-color-on-surface);
+    font-size: 0.76rem;
+    font-weight: 700;
+  }
+
+  .schema-structured-summary__row dd,
+  .schema-structured-summary__empty {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 520;
+  }
+
+  .schema-structured-summary__empty {
+    margin: 0;
+  }
+
+  .schema-structured-object {
+    width: 100%;
+    display: grid;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    padding: 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .schema-structured-object__header {
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+  }
+
+  .schema-structured-object__header span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-structured-object__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .schema-structured-object__boolean {
+    min-height: 44px;
+    align-self: center;
+  }
+
+  .schema-structured-summary--nested {
+    padding: 10px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 42%, transparent);
+  }
+
+  .schema-field--wide {
+    grid-column: 1 / -1;
+  }
+
+  .editable-list-field {
+    display: grid;
+    gap: 10px;
+    min-width: 0;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .editable-list-field__header {
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .editable-list-field__title {
+    min-width: 0;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+    overflow-wrap: anywhere;
+  }
+
+  .editable-list-field__items {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    min-height: 32px;
+  }
+
+  .editable-list-field__chip {
+    --md-input-chip-container-height: 32px;
+    --md-input-chip-container-shape: var(--mb-shape-sm);
+    --md-input-chip-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-hover-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-focus-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-pressed-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-outline-color: var(--mb-color-outline-variant);
+    --md-input-chip-hover-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-focus-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-pressed-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-hover-state-layer-opacity: 0.08;
+    --md-input-chip-focus-state-layer-opacity: 0.08;
+    --md-input-chip-icon-size: 18px;
+    --md-input-chip-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-input-chip-hover-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-pressed-trailing-icon-color: var(--mb-color-primary);
+  }
+
+  .editable-list-field__composer {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .structured-feature-field {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .structured-feature-field__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .structured-feature-field__grid--wide {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .structured-feature-field__number {
+    width: 100%;
+  }
+
+  .structured-feature-field__secret {
+    width: 100%;
+  }
+
+  .extension-feature-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    min-height: 32px;
+  }
+
+  .extension-feature-row {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 48%, transparent);
+  }
+
+  .extension-config-grid {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .extension-feature-row__chip {
+    min-width: 0;
+    --md-input-chip-container-height: 32px;
+    --md-input-chip-container-shape: var(--mb-shape-sm);
+    --md-input-chip-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-hover-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-focus-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-pressed-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-outline-color: var(--mb-color-outline-variant);
+    --md-input-chip-hover-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-focus-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-pressed-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-hover-state-layer-opacity: 0.08;
+    --md-input-chip-focus-state-layer-opacity: 0.08;
+    --md-input-chip-icon-size: 18px;
+    --md-input-chip-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-input-chip-hover-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-pressed-trailing-icon-color: var(--mb-color-primary);
+  }
+
+  .extension-feature-row__switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .extension-feature-row__switch md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+  }
+
+  .editable-list-field__input {
+    width: 100%;
+  }
+
+  .editable-list-field__add {
+    align-self: stretch;
+    --md-filled-button-container-height: 44px;
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-leading-space: 12px;
+    --md-filled-button-trailing-space: 14px;
+  }
+
+  .field-status {
+    display: inline-flex;
+    align-items: center;
+    justify-self: end;
+    gap: 6px;
+    min-height: 24px;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 11px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 78%, transparent);
+    font-size: 0.72rem;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  @keyframes mb-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+
+  .field-status--saving .field-status__dot {
+    animation: mb-blink 1s var(--mb-ease-standard) infinite;
+  }
+
+  .field-status__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: currentColor;
+  }
+
+  .field-status--dirty {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .field-status--saving {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .field-status--saved,
+  .field-status--idle {
+    color: var(--mb-color-on-surface-variant);
+    background: transparent;
+    font-weight: 600;
+  }
+
+  .field-status--saved .field-status__dot,
+  .field-status--idle .field-status__dot {
+    color: var(--mb-color-success);
+  }
+
+  .field-status--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  .mb-field {
+    position: relative;
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .mb-field__control {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+  }
+
+  .mb-field md-outlined-text-field {
+    width: 100%;
+    min-width: 0;
+    --md-outlined-text-field-input-text-color: var(--mb-color-on-surface);
+    --md-outlined-text-field-input-text-size: 0.88rem;
+    --md-outlined-text-field-input-text-weight: 640;
+    --md-outlined-text-field-label-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-label-text-color: var(--mb-color-primary);
+    --md-outlined-text-field-outline-color: var(--mb-color-outline);
+    --md-outlined-text-field-hover-outline-color: var(--mb-color-on-surface);
+    --md-outlined-text-field-focus-outline-color: var(--mb-color-primary);
+    --md-outlined-text-field-error-outline-color: var(--mb-color-error);
+    --md-outlined-text-field-error-focus-outline-color: var(--mb-color-error);
+    --md-outlined-text-field-error-label-text-color: var(--mb-color-error);
+    --md-outlined-text-field-error-focus-label-text-color: var(--mb-color-error);
+    --md-outlined-text-field-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-outlined-text-field-supporting-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-error-supporting-text-color: var(--mb-color-error);
+  }
+
+  .material-field-leading-node,
+  .material-select-leading-node,
+  .material-select-option-icon {
+    display: inline-grid;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    color: currentColor;
+    line-height: 1;
+  }
+
+  .material-field-leading-node svg,
+  .material-select-leading-node svg,
+  .material-select-option-icon svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+  }
+
+  md-outlined-text-field.material-text-field--single-line {
+    --md-outlined-text-field-top-space: 12px;
+    --md-outlined-text-field-bottom-space: 12px;
+    --md-outlined-text-field-input-text-line-height: 1.25rem;
+  }
+
+  md-filled-text-field.material-text-field--single-line {
+    --md-filled-text-field-top-space: 12px;
+    --md-filled-text-field-bottom-space: 12px;
+    --md-filled-text-field-with-label-top-space: 4px;
+    --md-filled-text-field-with-label-bottom-space: 4px;
+    --md-filled-text-field-input-text-line-height: 1.25rem;
+  }
+
+  .mb-field[data-variant="textarea"] md-outlined-text-field {
+    --md-outlined-text-field-input-text-font: var(--mb-font-mono);
+    --md-outlined-text-field-input-text-line-height: 1.45;
+  }
+
+  .mb-field[data-variant="textarea"] md-outlined-text-field {
+    min-height: 132px;
+  }
+
+  .mb-field__required {
+    margin-left: 2px;
+    color: var(--mb-color-error);
+  }
+
+  md-outlined-select.material-select--single-line {
+    --md-outlined-select-text-field-input-text-line-height: 1.25rem;
+    --md-outlined-field-top-space: 12px;
+    --md-outlined-field-bottom-space: 12px;
+  }
+
+  .mb-field md-outlined-select {
+    width: 100%;
+    min-width: 0;
+    --md-outlined-select-text-field-input-text-color: var(--mb-color-on-surface);
+    --md-outlined-select-text-field-input-text-size: 0.88rem;
+    --md-outlined-select-text-field-input-text-weight: 640;
+    --md-outlined-select-text-field-label-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-label-text-color: var(--mb-color-primary);
+    --md-outlined-select-text-field-outline-color: var(--mb-color-outline);
+    --md-outlined-select-text-field-hover-outline-color: var(--mb-color-on-surface);
+    --md-outlined-select-text-field-focus-outline-color: var(--mb-color-primary);
+    --md-outlined-select-text-field-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-menu-container-color: var(--mb-color-surface-container-high);
+    --md-menu-container-shape: var(--mb-shape-md);
+    --md-menu-container-elevation: 2;
+  }
+
+  .mb-field__select-actions {
+    min-height: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: -2px;
+    pointer-events: none;
+  }
+
+  .mb-field__select-help {
+    min-height: 0;
+    flex: 0 0 auto;
+    pointer-events: auto;
+    --md-icon-button-state-layer-width: 20px;
+    --md-icon-button-state-layer-height: 20px;
+    --md-icon-button-state-layer-shape: 999px;
+    --md-icon-button-icon-size: 16px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.14;
+    --md-icon-button-focus-state-layer-opacity: 0.14;
+  }
+
+  .form-field--create-track.mb-field {
+    display: grid;
+  }
+
+  .form-grid .mb-field--wide,
+  .mb-field--wide {
+    min-width: 0;
+  }
+
+  .form-grid__wide,
+  .form-actions {
+    grid-column: 1 / -1;
+  }
+
+  .form-grid__compact {
+    grid-column: span 1;
+  }
+
+  .form-grid__medium {
+    grid-column: span 1;
+  }
+
+  .form-grid--route-identity {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .form-grid__reasoning-defaults {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px 18px;
+  }
+
+  @media (max-width: 1080px) {
+    .form-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 680px) {
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .structured-feature-field__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .schema-structured-object__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .editable-list-field__composer {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .form-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .feedback-inline,
+  .feedback-banner {
+    color: var(--mb-color-primary);
+    font-weight: 650;
+  }
+
+  .edit-state-banner {
+    margin: 0;
+    border: 1px solid color-mix(in srgb, var(--mb-color-primary) 40%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 14px 16px;
+    background: color-mix(in srgb, var(--mb-color-primary-container) 42%, var(--mb-color-surface));
+  }
+
+  .field-hint {
+    display: block;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.76rem;
+    line-height: 1.45;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+  }
+
+  .field-hint span {
+    display: inline-block;
+  }
+
+  .field-error {
+    margin: 0;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 12px;
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+    font-size: 0.76rem;
+    line-height: 1.4;
+    font-weight: 650;
+    overflow-wrap: anywhere;
+  }
+
+  .field-warning {
+    margin: 0;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 12px;
+    color: var(--mb-color-on-warning-container);
+    background: var(--mb-color-warning-container);
+    font-size: 0.76rem;
+    line-height: 1.4;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+
+  .field-error--sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  .json-block {
+    max-height: 420px;
+    overflow: auto;
+    margin: 0;
+    border-radius: var(--mb-shape-md);
+    padding: 16px;
+    color: var(--mb-color-on-surface);
+    background: var(--mb-color-surface-container-lowest);
+    font-family: var(--mb-font-mono);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }
+
+`,vk=`  .logs-panel__header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .logs-panel__header h2 {
+    margin: 0;
+  }
+
+  .logs-panel__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .logs-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+  }
+
+  .logs-toolbar__actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .logs-count {
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    border-radius: var(--mb-shape-full);
+    padding: 0 14px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    font-size: 0.82rem;
+    font-weight: 650;
+  }
+
+  .logs-chip-set {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+  }
+
+  .log-level-filter {
+    margin-bottom: 14px;
+  }
+
+  .logs-stream-status {
+    margin: 0 0 14px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-error) 45%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 12px 14px;
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+    font-size: 0.85rem;
+    font-weight: 650;
+  }
+
+  .logs-search {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+
+  .logs-search__field {
+    width: 100%;
+  }
+
+  .material-symbol {
+    font-family: "Material Symbols Rounded", "Material Symbols Outlined", sans-serif;
+    font-size: 1.15rem;
+    line-height: 1;
+  }
+
+  .log-output {
+    max-height: min(46vh, 600px);
+    overflow: auto;
+    display: grid;
+    gap: 4px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 10px;
+    background: var(--mb-color-surface-container-lowest);
+  }
+
+  .log-empty-state {
+    min-height: 180px;
+    display: grid;
+    place-items: center;
+    margin: 0;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 18px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container) 48%, transparent);
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: 650;
+  }
+
+  .log-row {
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr);
+    align-items: baseline;
+    gap: 10px;
+    border-radius: var(--mb-shape-xs);
+    padding: 7px 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container) 58%, transparent);
+    transition: background-color var(--mb-duration-short) var(--mb-ease-standard);
+  }
+
+  .log-row:hover {
+    background: color-mix(in srgb, var(--mb-color-surface-container) 84%, transparent);
+  }
+
+  .log-row__level {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    justify-self: start;
+    min-width: 56px;
+    border-radius: var(--mb-shape-xs);
+    padding: 2px 8px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    font-size: 0.66rem;
+    font-weight: 760;
+    letter-spacing: 0.05em;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .log-row__level--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  .log-row__level--warn {
+    color: var(--mb-color-on-warning-container);
+    background: var(--mb-color-warning-container);
+  }
+
+  .log-row__level--info {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .log-row__level--debug {
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .log-row__time {
+    font-family: var(--mb-font-mono);
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--mb-color-on-surface-variant);
+    white-space: nowrap;
+  }
+
+  .log-row__message {
+    margin: 0;
+    min-width: 0;
+    color: var(--mb-color-on-surface);
+    font-family: var(--mb-font-mono);
+    font-size: 0.8rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @media (max-width: 600px) {
+    .log-row {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+    .log-row__time {
+      display: none;
+    }
+  }
+
+`,gk=`  @media (max-width: 760px) {
+    .top-app-bar {
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 14px 16px;
+    }
+
+    .top-app-bar__meta {
+      width: 100%;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      white-space: normal;
+    }
+
+    .workspace {
+      grid-template-columns: 1fr;
+      align-content: start;
+      min-height: 0;
+    }
+
+    .navigation-rail {
+      position: static;
+      top: auto;
+      z-index: 1;
+      height: auto;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: flex-start;
+      overflow-x: auto;
+      padding: 10px 12px;
+      scroll-snap-type: x proximity;
+    }
+
+    .nav-item {
+      flex: 0 0 108px;
+      scroll-snap-align: start;
+    }
+
+    .content-surface {
+      padding: 16px;
+    }
+
+    .log-output {
+      max-height: 360px;
+    }
+
+    .placeholder-panel {
+      min-height: 440px;
+      padding: 24px;
+    }
+
+    .metric-grid,
+    .section-grid,
+    .usage-summary-grid,
+    .usage-chart-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .compact-list li {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+
+    .resource-table {
+      min-width: 640px;
+    }
+
+    .resource-editor-card__header {
+      display: grid;
+    }
+
+    .resource-editor-card__meta {
+      min-width: 0;
+      justify-content: flex-start;
+    }
+
+    .resource-editor-card__status {
+      justify-content: flex-start;
+    }
+
+    .section-heading {
+      display: grid;
+    }
+
+    .create-resource {
+      justify-items: stretch;
+    }
+
+    .create-resource__add {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .form-grid,
+    .section-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid__compact,
+    .form-grid__medium,
+    .form-grid__wide,
+    .form-grid.create-resource__fields .form-field--create-track {
+      grid-column: 1 / -1;
+      max-width: none;
+    }
+
+    .form-grid__reasoning-defaults {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid.create-resource__fields .create-resource__context-window-row {
+      grid-template-columns: 1fr;
+    }
+
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+
+    .resource-editor-card:hover,
+    .usage-metric:hover,
+    md-filled-button:active,
+    md-outlined-button:active,
+    .nav-item:hover .nav-item__icon md-icon {
+      transform: none !important;
+    }
+  }
+`,yk=[dk,uk,fk,hk,pk,mk,vk,gk].join("");function as(e,t){t.bubbles&&(!e.shadowRoot||t.composed)&&t.stopPropagation();const i=Reflect.construct(t.constructor,[t.type,t]),o=e.dispatchEvent(i);return o||t.preventDefault(),o}const Wa=Symbol("createValidator"),Za=Symbol("getValidityAnchor"),Jp=Symbol("privateValidator"),on=Symbol("privateSyncValidity"),Wd=Symbol("privateCustomValidationMessage");function nf(e){var t;class i extends e{constructor(){super(...arguments),this[t]=""}get validity(){return this[on](),this[lr].validity}get validationMessage(){return this[on](),this[lr].validationMessage}get willValidate(){return this[on](),this[lr].willValidate}checkValidity(){return this[on](),this[lr].checkValidity()}reportValidity(){return this[on](),this[lr].reportValidity()}setCustomValidity(s){this[Wd]=s,this[on]()}requestUpdate(s,l,d){super.requestUpdate(s,l,d),this[on]()}firstUpdated(s){super.firstUpdated(s),this[on]()}[(t=Wd,on)](){this[Jp]||(this[Jp]=this[Wa]());const{validity:s,validationMessage:l}=this[Jp].getValidity(),d=!!this[Wd],f=this[Wd]||l;this[lr].setValidity({...s,customError:d},f,this[Za]()??void 0)}[Wa](){throw new Error("Implement [createValidator]")}[Za](){throw new Error("Implement [getValidityAnchor]")}}return i}const Mo=Symbol("getFormValue"),Bu=Symbol("getFormState");function of(e){class t extends e{get form(){return this[lr].form}get labels(){return this[lr].labels}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get disabled(){return this.hasAttribute("disabled")}set disabled(o){this.toggleAttribute("disabled",o)}attributeChangedCallback(o,s,l){if(o==="name"||o==="disabled"){const d=o==="disabled"?s!==null:s;this.requestUpdate(o,d);return}super.attributeChangedCallback(o,s,l)}requestUpdate(o,s,l){super.requestUpdate(o,s,l),this[lr].setFormValue(this[Mo](),this[Bu]())}[Mo](){throw new Error("Implement [getFormValue]")}[Bu](){return this[Mo]()}formDisabledCallback(o){this.disabled=o}}return t.formAssociated=!0,j([K({noAccessor:!0})],t.prototype,"name",null),j([K({type:Boolean,noAccessor:!0})],t.prototype,"disabled",null),t}class Jg{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:o,validationMessage:s}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:s,validity:{badInput:o.badInput,customError:o.customError,patternMismatch:o.patternMismatch,rangeOverflow:o.rangeOverflow,rangeUnderflow:o.rangeUnderflow,stepMismatch:o.stepMismatch,tooLong:o.tooLong,tooShort:o.tooShort,typeMismatch:o.typeMismatch,valueMissing:o.valueMissing}},this.currentValidity}}class O3 extends Jg{computeValidity(t){return this.checkboxControl||(this.checkboxControl=document.createElement("input"),this.checkboxControl.type="checkbox"),this.checkboxControl.checked=t.checked,this.checkboxControl.required=t.required,{validity:this.checkboxControl.validity,validationMessage:this.checkboxControl.validationMessage}}equals(t,i){return t.checked===i.checked&&t.required===i.required}copy({checked:t,required:i}){return{checked:t,required:i}}}const bk=ln(nf(of(os(ft))));class Mi extends bk{constructor(){super(),this.checked=!1,this.indeterminate=!1,this.required=!1,this.value="on",this.prevChecked=!1,this.prevDisabled=!1,this.prevIndeterminate=!1,this.addEventListener("click",t=>{!Wg(t)||!this.input||(this.focus(),Xg(this.input))})}update(t){(t.has("checked")||t.has("disabled")||t.has("indeterminate"))&&(this.prevChecked=t.get("checked")??this.checked,this.prevDisabled=t.get("disabled")??this.disabled,this.prevIndeterminate=t.get("indeterminate")??this.indeterminate),super.update(t)}render(){const t=!this.prevChecked&&!this.prevIndeterminate,i=this.prevChecked&&!this.prevIndeterminate,o=this.prevIndeterminate,s=this.checked&&!this.indeterminate,l=this.indeterminate,d=xr({disabled:this.disabled,selected:s||l,unselected:!s&&!l,checked:s,indeterminate:l,"prev-unselected":t,"prev-checked":i,"prev-indeterminate":o,"prev-disabled":this.prevDisabled}),{ariaLabel:f,ariaInvalid:h}=this;return ue`
+      <div class="container ${d}">
+        <input
+          type="checkbox"
+          id="input"
+          aria-checked=${l?"mixed":ae}
+          aria-label=${f||ae}
+          aria-invalid=${h||ae}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          .indeterminate=${this.indeterminate}
+          .checked=${this.checked}
+          @input=${this.handleInput}
+          @change=${this.handleChange} />
+
+        <div class="outline"></div>
+        <div class="background"></div>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
+        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
+        <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
+          <rect class="mark short" />
+          <rect class="mark long" />
+        </svg>
+      </div>
+    `}handleInput(t){const i=t.target;this.checked=i.checked,this.indeterminate=i.indeterminate}handleChange(t){as(this,t)}[Mo](){return!this.checked||this.indeterminate?null:this.value}[Bu](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked=t==="true"}[Wa](){return new O3(()=>this)}[Za](){return this.input}}Mi.shadowRootOptions={...ft.shadowRootOptions,delegatesFocus:!0};j([K({type:Boolean})],Mi.prototype,"checked",void 0);j([K({type:Boolean})],Mi.prototype,"indeterminate",void 0);j([K({type:Boolean})],Mi.prototype,"required",void 0);j([K()],Mi.prototype,"value",void 0);j([yt()],Mi.prototype,"prevChecked",void 0);j([yt()],Mi.prototype,"prevDisabled",void 0);j([yt()],Mi.prototype,"prevIndeterminate",void 0);j([at("input")],Mi.prototype,"input",void 0);const xk=Ye`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}
+`;let wv=class extends Mi{};wv.styles=[xk];wv=j([bt("md-checkbox")],wv);function wk({checked:e,className:t,label:i,onChange:o}){const s=w.useRef(null);return w.useEffect(()=>{const l=s.current;if(!l)throw new Error("MaterialCheckbox rendered before md-checkbox was registered.");const d=()=>o(l.checked);return l.addEventListener("change",d),()=>l.removeEventListener("change",d)},[o]),w.useEffect(()=>{if(!s.current)throw new Error("MaterialCheckbox rendered before md-checkbox was registered.");s.current.checked=e},[e]),v.jsx("md-checkbox",{ref:s,"aria-label":i,className:t})}class xt extends ft{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.focused=!1,this.label="",this.noAsterisk=!1,this.populated=!1,this.required=!1,this.resizable=!1,this.supportingText="",this.errorText="",this.count=-1,this.max=-1,this.hasStart=!1,this.hasEnd=!1,this.isAnimating=!1,this.refreshErrorAlert=!1,this.disableTransitions=!1}get counterText(){const t=this.count??-1,i=this.max??-1;return t<0||i<=0?"":`${t} / ${i}`}get supportingOrErrorText(){return this.error&&this.errorText?this.errorText:this.supportingText}reannounceError(){this.refreshErrorAlert=!0}update(t){t.has("disabled")&&t.get("disabled")!==void 0&&(this.disableTransitions=!0),this.disabled&&this.focused&&(t.set("focused",!0),this.focused=!1),this.animateLabelIfNeeded({wasFocused:t.get("focused"),wasPopulated:t.get("populated")}),super.update(t)}render(){const t=this.renderLabel(!0),i=this.renderLabel(!1),o=this.renderOutline?.(t),s={disabled:this.disabled,"disable-transitions":this.disableTransitions,error:this.error&&!this.disabled,focused:this.focused,"with-start":this.hasStart,"with-end":this.hasEnd,populated:this.populated,resizable:this.resizable,required:this.required,"no-label":!this.label};return ue`
+      <div class="field ${xr(s)}">
+        <div class="container-overflow">
+          ${this.renderBackground?.()}
+          <slot name="container"></slot>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${o}
+          <div class="container">
+            <div class="start">
+              <slot name="start"></slot>
+            </div>
+            <div class="middle">
+              <div class="label-wrapper">
+                ${i} ${o?ae:t}
+              </div>
+              <div class="content">
+                <slot></slot>
+              </div>
+            </div>
+            <div class="end">
+              <slot name="end"></slot>
+            </div>
+          </div>
+        </div>
+        ${this.renderSupportingText()}
+      </div>
+    `}updated(t){(t.has("supportingText")||t.has("errorText")||t.has("count")||t.has("max"))&&this.updateSlottedAriaDescribedBy(),this.refreshErrorAlert&&requestAnimationFrame(()=>{this.refreshErrorAlert=!1}),this.disableTransitions&&requestAnimationFrame(()=>{this.disableTransitions=!1})}renderSupportingText(){const{supportingOrErrorText:t,counterText:i}=this;if(!t&&!i)return ae;const o=ue`<span>${t}</span>`,s=i?ue`<span class="counter">${i}</span>`:ae,d=this.error&&this.errorText&&!this.refreshErrorAlert?"alert":ae;return ue`
+      <div class="supporting-text" role=${d}>${o}${s}</div>
+      <slot
+        name="aria-describedby"
+        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>
+    `}updateSlottedAriaDescribedBy(){for(const t of this.slottedAriaDescribedBy)qg(ue`${this.supportingOrErrorText} ${this.counterText}`,t),t.setAttribute("hidden","")}renderLabel(t){if(!this.label)return ae;let i;t?i=this.focused||this.populated||this.isAnimating:i=!this.focused&&!this.populated&&!this.isAnimating;const o={hidden:!i,floating:t,resting:!t},s=`${this.label}${this.required&&!this.noAsterisk?"*":""}`;return ue`
+      <span class="label ${xr(o)}" aria-hidden=${!i}
+        >${s}</span
+      >
+    `}animateLabelIfNeeded({wasFocused:t,wasPopulated:i}){if(!this.label)return;t??=this.focused,i??=this.populated;const o=t||i,s=this.focused||this.populated;o!==s&&(this.isAnimating=!0,this.labelAnimation?.cancel(),this.labelAnimation=this.floatingLabelEl?.animate(this.getLabelKeyframes(),{duration:150,easing:Oi.STANDARD}),this.labelAnimation?.addEventListener("finish",()=>{this.isAnimating=!1}))}getLabelKeyframes(){const{floatingLabelEl:t,restingLabelEl:i}=this;if(!t||!i)return[];const{x:o,y:s,height:l}=t.getBoundingClientRect(),{x:d,y:f,height:h}=i.getBoundingClientRect(),m=t.scrollWidth,g=i.scrollWidth,y=g/m,b=d-o,_=f-s+Math.round((h-l*y)/2),E=`translateX(${b}px) translateY(${_}px) scale(${y})`,T="translateX(0) translateY(0) scale(1)",O=i.clientWidth,C=g>O?`${O/y}px`:"";return this.focused||this.populated?[{transform:E,width:C},{transform:T,width:C}]:[{transform:T,width:C},{transform:E,width:C}]}getSurfacePositionClientRect(){return this.containerEl.getBoundingClientRect()}}j([K({type:Boolean})],xt.prototype,"disabled",void 0);j([K({type:Boolean})],xt.prototype,"error",void 0);j([K({type:Boolean})],xt.prototype,"focused",void 0);j([K()],xt.prototype,"label",void 0);j([K({type:Boolean,attribute:"no-asterisk"})],xt.prototype,"noAsterisk",void 0);j([K({type:Boolean})],xt.prototype,"populated",void 0);j([K({type:Boolean})],xt.prototype,"required",void 0);j([K({type:Boolean})],xt.prototype,"resizable",void 0);j([K({attribute:"supporting-text"})],xt.prototype,"supportingText",void 0);j([K({attribute:"error-text"})],xt.prototype,"errorText",void 0);j([K({type:Number})],xt.prototype,"count",void 0);j([K({type:Number})],xt.prototype,"max",void 0);j([K({type:Boolean,attribute:"has-start"})],xt.prototype,"hasStart",void 0);j([K({type:Boolean,attribute:"has-end"})],xt.prototype,"hasEnd",void 0);j([sn({slot:"aria-describedby"})],xt.prototype,"slottedAriaDescribedBy",void 0);j([yt()],xt.prototype,"isAnimating",void 0);j([yt()],xt.prototype,"refreshErrorAlert",void 0);j([yt()],xt.prototype,"disableTransitions",void 0);j([at(".label.floating")],xt.prototype,"floatingLabelEl",void 0);j([at(".label.resting")],xt.prototype,"restingLabelEl",void 0);j([at(".container")],xt.prototype,"containerEl",void 0);class _k extends xt{renderBackground(){return ue` <div class="background"></div> `}renderStateLayer(){return ue` <div class="state-layer"></div> `}renderIndicator(){return ue`<div class="active-indicator"></div>`}}const Sk=Ye`@layer styles{:host{--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_bottom-space: var(--md-filled-field-bottom-space, 16px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-filled-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-filled-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-filled-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-space: var(--md-filled-field-content-space, 16px);--_content-weight: var(--md-filled-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-filled-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-filled-field-disabled-leading-content-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-filled-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-filled-field-disabled-trailing-content-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-filled-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-filled-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-filled-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-filled-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-filled-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-filled-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 3px);--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-filled-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-filled-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-content-color: var(--md-filled-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-filled-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-filled-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-filled-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-filled-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-filled-field-leading-space, 16px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-filled-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-filled-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-filled-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-filled-field-top-space, 16px);--_trailing-content-color: var(--md-filled-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-filled-field-trailing-space, 16px);--_with-label-bottom-space: var(--md-filled-field-with-label-bottom-space, 8px);--_with-label-top-space: var(--md-filled-field-with-label-top-space, 8px);--_with-leading-content-leading-space: var(--md-filled-field-with-leading-content-leading-space, 12px);--_with-trailing-content-trailing-space: var(--md-filled-field-with-trailing-content-trailing-space, 12px);--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)))}.background,.state-layer{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color)}.state-layer{visibility:hidden}.field:not(.disabled):hover .state-layer{visibility:visible}.label.floating{position:absolute;top:var(--_with-label-top-space)}.field:not(.with-start) .label-wrapper{margin-inline-start:var(--_leading-space)}.field:not(.with-end) .label-wrapper{margin-inline-end:var(--_trailing-space)}.active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%;z-index:1}.active-indicator::before,.active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.active-indicator::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .active-indicator::after{opacity:1}.field:not(.with-start) .content ::slotted(*){padding-inline-start:var(--_leading-space)}.field:not(.with-end) .content ::slotted(*){padding-inline-end:var(--_trailing-space)}.field:not(.no-label) .content ::slotted(:not(textarea)){padding-bottom:var(--_with-label-bottom-space);padding-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}.field:not(.no-label) .content ::slotted(textarea){margin-bottom:var(--_with-label-bottom-space);margin-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}:hover .active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}.active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}:hover .state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.disabled .active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.disabled .background{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.error .active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.error:hover .active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.error:hover .state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.error .active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}.resizable .container{bottom:var(--_focus-active-indicator-height);clip-path:inset(var(--_focus-active-indicator-height) 0 0 0)}.resizable .container>*{top:var(--_focus-active-indicator-height)}}@layer hcm{@media(forced-colors: active){.disabled .active-indicator::before{border-color:GrayText;opacity:1}}}
+`;const C3=Ye`:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}
+`;let _v=class extends _k{};_v.styles=[C3,Sk];_v=j([bt("md-filled-field")],_v);const Ek=Ye`:host{--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 3px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-filled-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-filled-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-filled-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-filled-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_icon-input-space: var(--md-filled-text-field-icon-input-space, 16px);--_leading-space: var(--md-filled-text-field-leading-space, 16px);--_trailing-space: var(--md-filled-text-field-trailing-space, 16px);--_top-space: var(--md-filled-text-field-top-space, 16px);--_bottom-space: var(--md-filled-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-filled-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-filled-text-field-input-text-suffix-leading-space, 2px);--_with-label-top-space: var(--md-filled-text-field-with-label-top-space, 8px);--_with-label-bottom-space: var(--md-filled-text-field-with-label-bottom-space, 8px);--_focus-caret-color: var(--md-filled-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-filled-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-filled-text-field-with-trailing-icon-trailing-space, 12px);--md-filled-field-active-indicator-color: var(--_active-indicator-color);--md-filled-field-active-indicator-height: var(--_active-indicator-height);--md-filled-field-bottom-space: var(--_bottom-space);--md-filled-field-container-color: var(--_container-color);--md-filled-field-container-shape-end-end: var(--_container-shape-end-end);--md-filled-field-container-shape-end-start: var(--_container-shape-end-start);--md-filled-field-container-shape-start-end: var(--_container-shape-start-end);--md-filled-field-container-shape-start-start: var(--_container-shape-start-start);--md-filled-field-content-color: var(--_input-text-color);--md-filled-field-content-font: var(--_input-text-font);--md-filled-field-content-line-height: var(--_input-text-line-height);--md-filled-field-content-size: var(--_input-text-size);--md-filled-field-content-space: var(--_icon-input-space);--md-filled-field-content-weight: var(--_input-text-weight);--md-filled-field-disabled-active-indicator-color: var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height: var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity: var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color: var(--_disabled-container-color);--md-filled-field-disabled-container-opacity: var(--_disabled-container-opacity);--md-filled-field-disabled-content-color: var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color: var(--_error-active-indicator-color);--md-filled-field-error-content-color: var(--_error-input-text-color);--md-filled-field-error-focus-active-indicator-color: var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color: var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color: var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity: var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-filled-field-error-label-text-color: var(--_error-label-text-color);--md-filled-field-error-leading-content-color: var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-filled-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color: var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height: var(--_focus-active-indicator-height);--md-filled-field-focus-content-color: var(--_focus-input-text-color);--md-filled-field-focus-label-text-color: var(--_focus-label-text-color);--md-filled-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color: var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height: var(--_hover-active-indicator-height);--md-filled-field-hover-content-color: var(--_hover-input-text-color);--md-filled-field-hover-label-text-color: var(--_hover-label-text-color);--md-filled-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color: var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity: var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-filled-field-label-text-color: var(--_label-text-color);--md-filled-field-label-text-font: var(--_label-text-font);--md-filled-field-label-text-line-height: var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size: var(--_label-text-populated-size);--md-filled-field-label-text-size: var(--_label-text-size);--md-filled-field-label-text-weight: var(--_label-text-weight);--md-filled-field-leading-content-color: var(--_leading-icon-color);--md-filled-field-leading-space: var(--_leading-space);--md-filled-field-supporting-text-color: var(--_supporting-text-color);--md-filled-field-supporting-text-font: var(--_supporting-text-font);--md-filled-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-filled-field-supporting-text-size: var(--_supporting-text-size);--md-filled-field-supporting-text-weight: var(--_supporting-text-weight);--md-filled-field-top-space: var(--_top-space);--md-filled-field-trailing-content-color: var(--_trailing-icon-color);--md-filled-field-trailing-space: var(--_trailing-space);--md-filled-field-with-label-bottom-space: var(--_with-label-bottom-space);--md-filled-field-with-label-top-space: var(--_with-label-top-space);--md-filled-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-filled-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
+`;const Tk=e=>e.strings===void 0,Ok={},Ck=(e,t=Ok)=>e._$AH=t;const E2=Gg(class extends Yg{constructor(e){if(super(e),e.type!==In.PROPERTY&&e.type!==In.ATTRIBUTE&&e.type!==In.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!Tk(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===Yr||t===ae)return t;const i=e.element,o=e.name;if(e.type===In.PROPERTY){if(t===i[o])return Yr}else if(e.type===In.BOOLEAN_ATTRIBUTE){if(!!t===i.hasAttribute(o))return Yr}else if(e.type===In.ATTRIBUTE&&i.getAttribute(o)===t+"")return Yr;return Ck(e),t}});const A3="important",Ak=" !"+A3,Uu=Gg(class extends Yg{constructor(e){if(super(e),e.type!==In.ATTRIBUTE||e.name!=="style"||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,i)=>{const o=e[i];return o==null?t:t+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`},"")}update(e,[t]){const{style:i}=e.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const o of this.ft)t[o]==null&&(this.ft.delete(o),o.includes("-")?i.removeProperty(o):i[o]=null);for(const o in t){const s=t[o];if(s!=null){this.ft.add(o);const l=typeof s=="string"&&s.endsWith(Ak);o.includes("-")||l?i.setProperty(o,l?s.slice(0,-11):s,l?A3:""):i[o]=s}}return Yr}});const Rk={fromAttribute(e){return e??""},toAttribute(e){return e||null}};const Iu=Symbol("onReportValidity"),Zd=Symbol("privateCleanupFormListeners"),Jd=Symbol("privateDoNotReportInvalid"),eu=Symbol("privateIsSelfReportingValidity"),tu=Symbol("privateCallOnReportValidity");function R3(e){var t,i,o;class s extends e{constructor(...d){super(...d),this[t]=new AbortController,this[i]=!1,this[o]=!1,this.addEventListener("invalid",f=>{this[Jd]||!f.isTrusted||this.addEventListener("invalid",()=>{this[tu](f)},{once:!0})},{capture:!0})}checkValidity(){this[Jd]=!0;const d=super.checkValidity();return this[Jd]=!1,d}reportValidity(){this[eu]=!0;const d=super.reportValidity();return d&&this[tu](null),this[eu]=!1,d}[(t=Zd,i=Jd,o=eu,tu)](d){const f=d?.defaultPrevented;f||(this[Iu](d),!(!f&&d?.defaultPrevented))||(this[eu]||Mk(this[lr].form,this))&&this.focus()}[Iu](d){throw new Error("Implement [onReportValidity]")}formAssociatedCallback(d){super.formAssociatedCallback&&super.formAssociatedCallback(d),this[Zd].abort(),d&&(this[Zd]=new AbortController,jk(this,d,()=>{this[tu](null)},this[Zd].signal))}}return s}function jk(e,t,i,o){const s=kk(t);let l=!1,d,f=!1;s.addEventListener("before",()=>{f=!0,d=new AbortController,l=!1,e.addEventListener("invalid",()=>{l=!0},{signal:d.signal})},{signal:o}),s.addEventListener("after",()=>{f=!1,d?.abort(),!l&&i()},{signal:o}),t.addEventListener("submit",()=>{f||i()},{signal:o})}const em=new WeakMap;function kk(e){if(!em.has(e)){const t=new EventTarget;em.set(e,t);for(const i of["reportValidity","requestSubmit"]){const o=e[i];e[i]=function(){t.dispatchEvent(new Event("before"));const s=Reflect.apply(o,this,arguments);return t.dispatchEvent(new Event("after")),s}}}return em.get(e)}function Mk(e,t){if(!e)return!0;let i;for(const o of e.elements)if(o.matches(":invalid")){i=o;break}return i===t}class Dk extends Jg{computeValidity({state:t,renderedControl:i}){let o=i;ul(t)&&!o?(o=this.inputControl||document.createElement("input"),this.inputControl=o):o||(o=this.textAreaControl||document.createElement("textarea"),this.textAreaControl=o);const s=ul(t)?o:null;if(s&&(s.type=t.type),o.value!==t.value&&(o.value=t.value),o.required=t.required,s){const l=t;l.pattern?s.pattern=l.pattern:s.removeAttribute("pattern"),l.min?s.min=l.min:s.removeAttribute("min"),l.max?s.max=l.max:s.removeAttribute("max"),l.step?s.step=l.step:s.removeAttribute("step")}return(t.minLength??-1)>-1?o.setAttribute("minlength",String(t.minLength)):o.removeAttribute("minlength"),(t.maxLength??-1)>-1?o.setAttribute("maxlength",String(t.maxLength)):o.removeAttribute("maxlength"),{validity:o.validity,validationMessage:o.validationMessage}}equals({state:t},{state:i}){const o=t.type===i.type&&t.value===i.value&&t.required===i.required&&t.minLength===i.minLength&&t.maxLength===i.maxLength;return!ul(t)||!ul(i)?o:o&&t.pattern===i.pattern&&t.min===i.min&&t.max===i.max&&t.step===i.step}copy({state:t}){return{state:ul(t)?this.copyInput(t):this.copyTextArea(t),renderedControl:null}}copyInput(t){const{type:i,pattern:o,min:s,max:l,step:d}=t;return{...this.copySharedState(t),type:i,pattern:o,min:s,max:l,step:d}}copyTextArea(t){return{...this.copySharedState(t),type:t.type}}copySharedState({value:t,required:i,minLength:o,maxLength:s}){return{value:t,required:i,minLength:o,maxLength:s}}}function ul(e){return e.type!=="textarea"}const zk=ln(R3(nf(of(os(ft)))));class Ue extends zk{constructor(){super(...arguments),this.error=!1,this.errorText="",this.label="",this.noAsterisk=!1,this.required=!1,this.value="",this.prefixText="",this.suffixText="",this.hasLeadingIcon=!1,this.hasTrailingIcon=!1,this.supportingText="",this.textDirection="",this.rows=2,this.cols=20,this.inputMode="",this.max="",this.maxLength=-1,this.min="",this.minLength=-1,this.noSpinner=!1,this.pattern="",this.placeholder="",this.readOnly=!1,this.multiple=!1,this.step="",this.type="text",this.autocomplete="",this.dirty=!1,this.focused=!1,this.nativeError=!1,this.nativeErrorText=""}get selectionDirection(){return this.getInputOrTextarea().selectionDirection}set selectionDirection(t){this.getInputOrTextarea().selectionDirection=t}get selectionEnd(){return this.getInputOrTextarea().selectionEnd}set selectionEnd(t){this.getInputOrTextarea().selectionEnd=t}get selectionStart(){return this.getInputOrTextarea().selectionStart}set selectionStart(t){this.getInputOrTextarea().selectionStart=t}get valueAsNumber(){const t=this.getInput();return t?t.valueAsNumber:NaN}set valueAsNumber(t){const i=this.getInput();i&&(i.valueAsNumber=t,this.value=i.value)}get valueAsDate(){const t=this.getInput();return t?t.valueAsDate:null}set valueAsDate(t){const i=this.getInput();i&&(i.valueAsDate=t,this.value=i.value)}get hasError(){return this.error||this.nativeError}select(){this.getInputOrTextarea().select()}setRangeText(...t){this.getInputOrTextarea().setRangeText(...t),this.value=this.getInputOrTextarea().value}setSelectionRange(t,i,o){this.getInputOrTextarea().setSelectionRange(t,i,o)}showPicker(){const t=this.getInput();t&&t.showPicker()}stepDown(t){const i=this.getInput();i&&(i.stepDown(t),this.value=i.value)}stepUp(t){const i=this.getInput();i&&(i.stepUp(t),this.value=i.value)}reset(){this.dirty=!1,this.value=this.getAttribute("value")??"",this.nativeError=!1,this.nativeErrorText=""}attributeChangedCallback(t,i,o){t==="value"&&this.dirty||super.attributeChangedCallback(t,i,o)}render(){const t={disabled:this.disabled,error:!this.disabled&&this.hasError,textarea:this.type==="textarea","no-spinner":this.noSpinner};return ue`
+      <span class="text-field ${xr(t)}">
+        ${this.renderField()}
+      </span>
+    `}updated(t){const i=this.getInputOrTextarea().value;this.value!==i&&(this.value=i)}renderField(){return Zg`<${this.fieldTag}
+      class="field"
+      count=${this.value.length}
+      ?disabled=${this.disabled}
+      ?error=${this.hasError}
+      error-text=${this.getErrorText()}
+      ?focused=${this.focused}
+      ?has-end=${this.hasTrailingIcon}
+      ?has-start=${this.hasLeadingIcon}
+      label=${this.label}
+      ?no-asterisk=${this.noAsterisk}
+      max=${this.maxLength}
+      ?populated=${!!this.value}
+      ?required=${this.required}
+      ?resizable=${this.type==="textarea"}
+      supporting-text=${this.supportingText}
+    >
+      ${this.renderLeadingIcon()}
+      ${this.renderInputOrTextarea()}
+      ${this.renderTrailingIcon()}
+      <div id="description" slot="aria-describedby"></div>
+      <slot name="container" slot="container"></slot>
+    </${this.fieldTag}>`}renderLeadingIcon(){return ue`
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `}renderTrailingIcon(){return ue`
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `}renderInputOrTextarea(){const t={direction:this.textDirection},i=this.ariaLabel||this.label||ae,o=this.autocomplete,s=(this.maxLength??-1)>-1,l=(this.minLength??-1)>-1;if(this.type==="textarea")return ue`
+        <textarea
+          class="input"
+          style=${Uu(t)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${i}
+          autocomplete=${o||ae}
+          name=${this.name||ae}
+          ?disabled=${this.disabled}
+          maxlength=${s?this.maxLength:ae}
+          minlength=${l?this.minLength:ae}
+          placeholder=${this.placeholder||ae}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          rows=${this.rows}
+          cols=${this.cols}
+          .value=${E2(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent}></textarea>
+      `;const d=this.renderPrefix(),f=this.renderSuffix(),h=this.inputMode;return ue`
+      <div class="input-wrapper">
+        ${d}
+        <input
+          class="input"
+          style=${Uu(t)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${i}
+          autocomplete=${o||ae}
+          name=${this.name||ae}
+          ?disabled=${this.disabled}
+          inputmode=${h||ae}
+          max=${this.max||ae}
+          maxlength=${s?this.maxLength:ae}
+          min=${this.min||ae}
+          minlength=${l?this.minLength:ae}
+          pattern=${this.pattern||ae}
+          placeholder=${this.placeholder||ae}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          ?multiple=${this.multiple}
+          step=${this.step||ae}
+          type=${this.type}
+          .value=${E2(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent} />
+        ${f}
+      </div>
+    `}renderPrefix(){return this.renderAffix(this.prefixText,!1)}renderSuffix(){return this.renderAffix(this.suffixText,!0)}renderAffix(t,i){return t?ue`<span class="${xr({suffix:i,prefix:!i})}">${t}</span>`:ae}getErrorText(){return this.error?this.errorText:this.nativeErrorText}handleFocusChange(){this.focused=this.inputOrTextarea?.matches(":focus")??!1}handleInput(t){this.dirty=!0,this.value=t.target.value}redispatchEvent(t){as(this,t)}getInputOrTextarea(){return this.inputOrTextarea||(this.connectedCallback(),this.scheduleUpdate()),this.isUpdatePending&&this.scheduleUpdate(),this.inputOrTextarea}getInput(){return this.type==="textarea"?null:this.getInputOrTextarea()}handleIconChange(){this.hasLeadingIcon=this.leadingIcons.length>0,this.hasTrailingIcon=this.trailingIcons.length>0}[Mo](){return this.value}formResetCallback(){this.reset()}formStateRestoreCallback(t){this.value=t}focus(){this.getInputOrTextarea().focus()}[Wa](){return new Dk(()=>({state:this,renderedControl:this.inputOrTextarea}))}[Za](){return this.inputOrTextarea}[Iu](t){t?.preventDefault();const i=this.getErrorText();this.nativeError=!!t,this.nativeErrorText=this.validationMessage,i===this.getErrorText()&&this.field?.reannounceError()}}Ue.shadowRootOptions={...ft.shadowRootOptions,delegatesFocus:!0};j([K({type:Boolean,reflect:!0})],Ue.prototype,"error",void 0);j([K({attribute:"error-text"})],Ue.prototype,"errorText",void 0);j([K()],Ue.prototype,"label",void 0);j([K({type:Boolean,attribute:"no-asterisk"})],Ue.prototype,"noAsterisk",void 0);j([K({type:Boolean,reflect:!0})],Ue.prototype,"required",void 0);j([K()],Ue.prototype,"value",void 0);j([K({attribute:"prefix-text"})],Ue.prototype,"prefixText",void 0);j([K({attribute:"suffix-text"})],Ue.prototype,"suffixText",void 0);j([K({type:Boolean,attribute:"has-leading-icon"})],Ue.prototype,"hasLeadingIcon",void 0);j([K({type:Boolean,attribute:"has-trailing-icon"})],Ue.prototype,"hasTrailingIcon",void 0);j([K({attribute:"supporting-text"})],Ue.prototype,"supportingText",void 0);j([K({attribute:"text-direction"})],Ue.prototype,"textDirection",void 0);j([K({type:Number})],Ue.prototype,"rows",void 0);j([K({type:Number})],Ue.prototype,"cols",void 0);j([K({reflect:!0})],Ue.prototype,"inputMode",void 0);j([K()],Ue.prototype,"max",void 0);j([K({type:Number})],Ue.prototype,"maxLength",void 0);j([K()],Ue.prototype,"min",void 0);j([K({type:Number})],Ue.prototype,"minLength",void 0);j([K({type:Boolean,attribute:"no-spinner"})],Ue.prototype,"noSpinner",void 0);j([K()],Ue.prototype,"pattern",void 0);j([K({reflect:!0,converter:Rk})],Ue.prototype,"placeholder",void 0);j([K({type:Boolean,reflect:!0})],Ue.prototype,"readOnly",void 0);j([K({type:Boolean,reflect:!0})],Ue.prototype,"multiple",void 0);j([K()],Ue.prototype,"step",void 0);j([K({reflect:!0})],Ue.prototype,"type",void 0);j([K({reflect:!0})],Ue.prototype,"autocomplete",void 0);j([yt()],Ue.prototype,"dirty",void 0);j([yt()],Ue.prototype,"focused",void 0);j([yt()],Ue.prototype,"nativeError",void 0);j([yt()],Ue.prototype,"nativeErrorText",void 0);j([at(".input")],Ue.prototype,"inputOrTextarea",void 0);j([at(".field")],Ue.prototype,"field",void 0);j([sn({slot:"leading-icon"})],Ue.prototype,"leadingIcons",void 0);j([sn({slot:"trailing-icon"})],Ue.prototype,"trailingIcons",void 0);class Pk extends Ue{constructor(){super(...arguments),this.fieldTag=Lo`md-filled-field`}}const j3=Ye`:host{display:inline-flex;outline:none;resize:both;text-align:start;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field,.field{width:100%}.text-field{display:inline-flex}.field{cursor:text}.disabled .field{cursor:default}.text-field,.textarea .field{resize:inherit}slot[name=container]{border-radius:inherit}.icon{color:currentColor;display:flex;align-items:center;justify-content:center;fill:currentColor;position:relative}.icon ::slotted(*){display:flex;position:absolute}[has-start] .icon.leading{font-size:var(--_leading-icon-size);height:var(--_leading-icon-size);width:var(--_leading-icon-size)}[has-end] .icon.trailing{font-size:var(--_trailing-icon-size);height:var(--_trailing-icon-size);width:var(--_trailing-icon-size)}.input-wrapper{display:flex}.input-wrapper>*{all:inherit;padding:0}.input{caret-color:var(--_caret-color);overflow-x:hidden;text-align:inherit}.input::placeholder{color:currentColor;opacity:1}.input::-webkit-calendar-picker-indicator{display:none}.input::-webkit-search-decoration,.input::-webkit-search-cancel-button{display:none}@media(forced-colors: active){.input{background:none}}.no-spinner .input::-webkit-inner-spin-button,.no-spinner .input::-webkit-outer-spin-button{display:none}.no-spinner .input[type=number]{-moz-appearance:textfield}:focus-within .input{caret-color:var(--_focus-caret-color)}.error:focus-within .input{caret-color:var(--_error-focus-caret-color)}.text-field:not(.disabled) .prefix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) .suffix{color:var(--_input-text-suffix-color)}.text-field:not(.disabled) .input::placeholder{color:var(--_input-text-placeholder-color)}.prefix,.suffix{text-wrap:nowrap;width:min-content}.prefix{padding-inline-end:var(--_input-text-prefix-trailing-space)}.suffix{padding-inline-start:var(--_input-text-suffix-leading-space)}
+`;let Sv=class extends Pk{constructor(){super(...arguments),this.fieldTag=Lo`md-filled-field`}};Sv.styles=[j3,Ek];Sv=j([bt("md-filled-text-field")],Sv);class Lk extends xt{renderOutline(t){return ue`
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-panel-inactive"></div>
+          <div class="outline-panel-active"></div>
+          <div class="outline-label">${t}</div>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `}}const Nk=Ye`@layer styles{:host{--_bottom-space: var(--md-outlined-field-bottom-space, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-outlined-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-outlined-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-outlined-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-space: var(--md-outlined-field-content-space, 16px);--_content-weight: var(--md-outlined-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-outlined-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-outlined-field-disabled-leading-content-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-outlined-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-outlined-field-disabled-trailing-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-outlined-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-outlined-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-outlined-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-outlined-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-outlined-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-outlined-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-outlined-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-outlined-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-content-color: var(--md-outlined-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-outlined-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-outlined-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-outlined-field-leading-space, 16px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-outlined-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-outlined-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-outlined-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-outlined-field-top-space, 16px);--_trailing-content-color: var(--md-outlined-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-outlined-field-trailing-space, 16px);--_with-leading-content-leading-space: var(--md-outlined-field-with-leading-content-leading-space, 12px);--_with-trailing-content-trailing-space: var(--md-outlined-field-with-trailing-content-trailing-space, 12px);--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)))}.outline{border-color:var(--_outline-color);border-radius:inherit;display:flex;pointer-events:none;height:100%;position:absolute;width:100%;z-index:1}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - var(--_leading-space) - var(--_trailing-space));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.2, 0, 0, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-panel-active{opacity:1}.outline-label{display:flex;max-width:100%;transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .content ::slotted(*){padding-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-start) .label-wrapper{margin-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .content ::slotted(*){padding-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.field:not(.with-end) .label-wrapper{margin-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}.resizable .container{bottom:var(--_focus-outline-width);inset-inline-end:var(--_focus-outline-width);clip-path:inset(var(--_focus-outline-width) 0 0 var(--_focus-outline-width))}.resizable .container>*{top:var(--_focus-outline-width);inset-inline-start:var(--_focus-outline-width)}.resizable .container:dir(rtl){clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}}@layer hcm{@media(forced-colors: active){.disabled .outline{border-color:GrayText;color:GrayText}.disabled :is(.outline-start,.outline-end,.outline-panel-inactive){opacity:1}}}
+`;let Ev=class extends Lk{};Ev.styles=[C3,Nk];Ev=j([bt("md-outlined-field")],Ev);const $k=Ye`:host{--_caret-color: var(--md-outlined-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_disabled-input-text-color: var(--md-outlined-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-outlined-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-outlined-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-text-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-text-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-outlined-text-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-caret-color: var(--md-outlined-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-outlined-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-input-text-color: var(--md-outlined-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-outlined-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-outlined-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-input-text-color: var(--md-outlined-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-text-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-input-text-color: var(--md-outlined-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-color: var(--md-outlined-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-text-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-outlined-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-outlined-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-outlined-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-outlined-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-outlined-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-outlined-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-outlined-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-outlined-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-outlined-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-outlined-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-outlined-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-text-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-outlined-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-outlined-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-outlined-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-outlined-text-field-container-shape-start-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-text-field-container-shape-start-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-text-field-container-shape-end-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-text-field-container-shape-end-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_icon-input-space: var(--md-outlined-text-field-icon-input-space, 16px);--_leading-space: var(--md-outlined-text-field-leading-space, 16px);--_trailing-space: var(--md-outlined-text-field-trailing-space, 16px);--_top-space: var(--md-outlined-text-field-top-space, 16px);--_bottom-space: var(--md-outlined-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-outlined-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-outlined-text-field-input-text-suffix-leading-space, 2px);--_focus-caret-color: var(--md-outlined-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-outlined-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-outlined-text-field-with-trailing-icon-trailing-space, 12px);--md-outlined-field-bottom-space: var(--_bottom-space);--md-outlined-field-container-shape-end-end: var(--_container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_container-shape-start-start);--md-outlined-field-content-color: var(--_input-text-color);--md-outlined-field-content-font: var(--_input-text-font);--md-outlined-field-content-line-height: var(--_input-text-line-height);--md-outlined-field-content-size: var(--_input-text-size);--md-outlined-field-content-space: var(--_icon-input-space);--md-outlined-field-content-weight: var(--_input-text-weight);--md-outlined-field-disabled-content-color: var(--_disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_focus-outline-color);--md-outlined-field-focus-outline-width: var(--_focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_hover-outline-color);--md-outlined-field-hover-outline-width: var(--_hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_label-text-color);--md-outlined-field-label-text-font: var(--_label-text-font);--md-outlined-field-label-text-line-height: var(--_label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_label-text-populated-size);--md-outlined-field-label-text-size: var(--_label-text-size);--md-outlined-field-label-text-weight: var(--_label-text-weight);--md-outlined-field-leading-content-color: var(--_leading-icon-color);--md-outlined-field-leading-space: var(--_leading-space);--md-outlined-field-outline-color: var(--_outline-color);--md-outlined-field-outline-width: var(--_outline-width);--md-outlined-field-supporting-text-color: var(--_supporting-text-color);--md-outlined-field-supporting-text-font: var(--_supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_supporting-text-weight);--md-outlined-field-top-space: var(--_top-space);--md-outlined-field-trailing-content-color: var(--_trailing-icon-color);--md-outlined-field-trailing-space: var(--_trailing-space);--md-outlined-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-outlined-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
+`;class Bk extends Ue{constructor(){super(...arguments),this.fieldTag=Lo`md-outlined-field`}}let Tv=class extends Bk{constructor(){super(...arguments),this.fieldTag=Lo`md-outlined-field`}};Tv.styles=[j3,$k];Tv=j([bt("md-outlined-text-field")],Tv);w.forwardRef(function(t,i){return v.jsx(k3,{ref:i,tagName:"md-filled-text-field",...t})});const Yt=w.forwardRef(function({ariaDescribedBy:t,ariaLabel:i,ariaInvalid:o,autoFocus:s,autoComplete:l,className:d,disabled:f,error:h,errorText:m,id:g,label:y,leadingIcon:b,leadingIconNode:_,onBlur:E,onInput:T,inputMode:O,rows:D,spellCheck:C,step:z,supportingText:B,required:H,trailingIcon:ne,type:X="text",value:A},le){return v.jsx(k3,{ref:le,ariaDescribedBy:t,ariaLabel:i,ariaInvalid:o,autoFocus:s,autoComplete:l,className:d,disabled:f,error:h,errorText:m,id:g,label:y,leadingIcon:b,leadingIconNode:_,onBlur:E,onInput:T,inputMode:O,rows:D,spellCheck:C,step:z,supportingText:B,required:H,trailingIcon:ne,type:X,value:A,tagName:"md-outlined-text-field"})}),k3=w.forwardRef(function({ariaDescribedBy:t,ariaLabel:i,ariaInvalid:o=!1,autoFocus:s=!1,autoComplete:l,className:d,disabled:f=!1,error:h=!1,errorText:m,id:g,label:y,leadingIcon:b,leadingIconNode:_,onBlur:E,onInput:T,inputMode:O,rows:D,spellCheck:C,step:z,supportingText:B,required:H=!1,trailingIcon:ne,type:X="text",value:A,tagName:le},ee){const J=w.useRef(null),ce=w.useCallback(ie=>{J.current=ie,Vk(ee,ie)},[ee]);w.useEffect(()=>{const ie=J.current;if(!ie)throw new Error("MaterialTextField rendered before the Material Web text field was registered.");const xe=()=>T(ie.value);return ie.addEventListener("input",xe),()=>ie.removeEventListener("input",xe)},[T]),w.useEffect(()=>{const ie=J.current;if(!ie)throw new Error("MaterialTextField rendered before the Material Web text field was registered.");ie.label=y,ie.type=X,ie.value=A,ie.autocomplete=l??"",ie.disabled=f,ie.error=h,ie.errorText=m??"",ie.supportingText=B??"",ie.required=H,ie.spellcheck=C??!1,ie.setAttribute("spellcheck",C??!1?"true":"false"),y?ie.setAttribute("label",y):ie.removeAttribute("label"),ie.inputMode=O??"",i?ie.setAttribute("aria-label",i):ie.removeAttribute("aria-label"),o?ie.setAttribute("aria-invalid","true"):ie.removeAttribute("aria-invalid"),t?ie.setAttribute("aria-describedby",t):ie.removeAttribute("aria-describedby"),D!==void 0&&(ie.rows=D),z!==void 0&&(ie.step=z)},[t,o,i,l,f,h,m,O,y,D,C,z,B,H,X,A]);const _e=Ik(d,X!=="textarea"&&D===void 0?"material-text-field--single-line":void 0);return w.createElement(le,{ref:ce,autoFocus:s,className:_e,id:g,onBlur:E},Uk(b,_),ne)});function Uk(e,t){return t?w.createElement("span",{"aria-hidden":"true",className:"material-field-leading-node",slot:"leading-icon"},t):e?w.createElement("md-icon",{slot:"leading-icon"},e):null}function Ik(...e){return e.filter(Boolean).join(" ")}function Vk(e,t){if(typeof e=="function"){e(t);return}e&&(e.current=t)}const T2="/api/v1",ey="moonbridge.console.token",Vu="moonbridge.console.rememberedToken";let ty="";class No extends Error{status;code;raw;constructor(t,i,o,s){super(o),this.name="ApiError",this.status=t,this.code=i,this.raw=s}}function Ov(e){return e instanceof No&&e.status===401}function M3(){const e=O2(Do("sessionStorage"),ey);return e||(O2(Do("localStorage"),Vu)??ty)}function Fk(e,t){ty=e,C2(Do("sessionStorage"),ey,e),t?C2(Do("localStorage"),Vu,e):Cv(Do("localStorage"),Vu)}function Hk(){ty="",Cv(Do("sessionStorage"),ey),Cv(Do("localStorage"),Vu)}async function Wn(e,t={}){const i=D3(e),o=Gk(t.headers),s=M3();s&&(o.Authorization=`Bearer ${s}`);let l=t.rawBody;t.body!==void 0&&(o["Content-Type"]="application/json",l=JSON.stringify(t.body));const d=await fetch(i,{...t,headers:o,body:l}),f=await qk(d);if(!d.ok)throw Kk(d.status,f);return f}function D3(e){return/^https?:\/\//.test(e)||e.startsWith("/api/v1/")||e==="/api/v1"||e.startsWith("/v1/")||e==="/v1"?e:e.startsWith("/")?`${T2}${e}`:`${T2}/${e}`}async function qk(e){const t=e.headers.get("Content-Type")??"",i=await e.text();if(i){if(t.includes("application/json"))try{return JSON.parse(i)}catch{return i}return i}}function Kk(e,t){if(A2(t)&&A2(t.error)){const i=tm(t.error.code)??tm(t.error.type)??"request_error",o=tm(t.error.message)??$u("error.requestFailedWithStatus",{status:e});return new No(e,i,o,t)}return new No(e,"request_error",$u("error.requestFailedWithStatus",{status:e}),t)}function O2(e,t){try{return e?.getItem(t)??null}catch{return null}}function Do(e){if(!(typeof window>"u"))try{return window[e]}catch{return}}function Gk(e){return e?e instanceof Headers?Object.fromEntries(e.entries()):Array.isArray(e)?Object.fromEntries(e):{...e}:{}}function C2(e,t,i){try{e?.setItem(t,i)}catch{}}function Cv(e,t){try{e?.removeItem(t)}catch{}}function A2(e){return typeof e=="object"&&e!==null}function tm(e){return typeof e=="string"&&e?e:void 0}function Yk({children:e,error:t,pending:i=!1,onSubmit:o}){const{t:s}=Oe(),[l,d]=w.useState(""),[f,h]=w.useState(!1),[m,g]=w.useState(!1);if(!Ov(t))return v.jsx(v.Fragment,{children:e});async function y(_){_.preventDefault();const E=l.trim();!E||i||await o?.(E,f)}const b=t;return v.jsx("main",{className:"auth-gate","aria-labelledby":"auth-title",children:v.jsxs(Wr.form,{className:"auth-card",onSubmit:y,initial:Zp.initial,animate:Zp.animate,transition:Zp.transition,children:[v.jsx(Wr.span,{className:"auth-card__badge","aria-hidden":"true",initial:{scale:.6,opacity:0},animate:{scale:1,opacity:1},transition:ur.spatial,children:w.createElement("md-icon",null,"shield_lock")}),v.jsx("p",{className:"eyebrow",children:s("auth.eyebrow")}),v.jsx("h1",{id:"auth-title",children:s("auth.title")}),v.jsx("p",{className:"auth-card__message",children:b.message}),v.jsx(Yt,{autoFocus:!0,className:"auth-token-field",label:s("auth.token"),spellCheck:!1,type:m?"text":"password",value:l,onInput:d,trailingIcon:v.jsx(pi,{className:"field-visibility-toggle",icon:m?"visibility_off":"visibility",label:s(m?"auth.hideToken":"auth.revealToken"),onClick:()=>g(_=>!_),onMouseDown:_=>_.preventDefault(),slot:"trailing-icon"})}),v.jsxs("label",{className:"auth-remember",children:[v.jsx(wk,{checked:f,label:s("auth.remember"),onChange:h}),v.jsx("span",{children:s("auth.remember")})]}),v.jsx(Qn,{className:"auth-submit",type:"submit",disabled:i,children:s(i?"auth.verifying":"action.saveToken")})]})})}const z3=w.createContext(null);function Qk({children:e}){const t=es(),{t:i}=Oe(),[o,s]=w.useState({required:!1,error:void 0,pending:!1});w.useEffect(()=>t.getQueryCache().subscribe(g=>{if(g.type!=="updated")return;const y=g.query;if(y.state.fetchStatus==="fetching")return;const b=y.state.error;Ov(b)&&s(_=>({..._,required:!0,error:b,pending:!1}))}),[t]);const l=w.useCallback(async(h,m)=>{Fk(h,m),s(g=>({...g,pending:!0}));try{await Wn("/status"),s(g=>({...g,pending:!1,required:!1,error:void 0})),t.invalidateQueries()}catch(g){s(y=>({...y,pending:!1})),Ov(g)&&s(y=>({...y,required:!0,error:g}))}},[t]),d=w.useCallback(()=>{Hk(),s({required:!0,pending:!1,error:new No(401,"signed_out",i("auth.signedOut"))})},[i]),f=w.useMemo(()=>({...o,authenticate:l,signOut:d}),[o,l,d]);return v.jsx(z3.Provider,{value:f,children:e})}function P3(){const e=w.useContext(z3);if(!e)throw new Error("useConsoleAuth must be used within a ConsoleAuthProvider.");return e}function Xk({children:e}){const{required:t,error:i,pending:o,authenticate:s}=P3();return t?v.jsx(Yk,{error:i,pending:o,onSubmit:s,children:e}):v.jsx(v.Fragment,{children:e})}const Wk=[{to:"/overview",icon:"dashboard",labelKey:"nav.overview"},{to:"/models-providers",icon:"hub",labelKey:"nav.modelsProviders"},{to:"/routes",icon:"alt_route",labelKey:"nav.routes"},{to:"/defaults",icon:"rule_settings",labelKey:"nav.defaults"},{to:"/search-tools",icon:"travel_explore",labelKey:"nav.searchTools"},{to:"/storage",icon:"database",labelKey:"nav.storage"},{to:"/security",icon:"shield",labelKey:"nav.security"}];function Zk(){return v.jsxs(v.Fragment,{children:[v.jsx("style",{children:yk}),v.jsx(Xk,{children:v.jsx(Jk,{content:v.jsx(v4,{})})})]})}function Jk({content:e}){return v.jsx(eM,{content:e})}function eM({content:e}){const{theme:t,toggleTheme:i}=sk(),{locale:o,setLocale:s,t:l}=Oe(),{signOut:d}=P3(),f=t==="dark"?"light":"dark",h=t==="dark"?"light_mode":"dark_mode",m=l(f==="dark"?"theme.dark":"theme.light");return v.jsxs("div",{className:"app-shell",children:[v.jsxs("header",{className:"top-app-bar",children:[v.jsxs("div",{children:[v.jsx("p",{children:"Moon Bridge"}),v.jsx("strong",{children:l("app.console")})]}),v.jsxs("div",{className:"top-app-bar__meta",children:[v.jsxs("div",{className:"locale-switch",role:"group","aria-label":l("app.language"),children:[v.jsx("span",{children:l("app.language")}),["en-US","zh-CN"].map(g=>v.jsx(tM,{label:l(g==="en-US"?"app.language.en":"app.language.zh"),onClick:()=>s(g),selected:o===g},g))]}),v.jsx(Wr.div,{className:"theme-toggle",whileHover:{scale:1.06},whileTap:{scale:.9},transition:ur.spatialFast,children:v.jsx(Wr.span,{style:{display:"inline-flex"},initial:{rotate:-90,opacity:0,scale:.6},animate:{rotate:0,opacity:1,scale:1},transition:ur.spatial,children:v.jsx(pi,{icon:h,label:l("app.switchTheme",{theme:m}),onClick:i})},h)}),v.jsx(pi,{className:"app-bar__sign-out",icon:"lock",label:l("app.signOut"),onClick:d})]})]}),v.jsxs("div",{className:"workspace",children:[v.jsx("nav",{className:"navigation-rail","aria-label":l("app.consoleSections"),children:Wk.map(g=>v.jsx(rM,{item:g,label:l(g.labelKey)},g.to))}),v.jsx(Wr.main,{"aria-label":l("app.routeContent"),className:"content-surface",initial:Wp.initial,animate:Wp.animate,transition:Wp.transition,children:e??v.jsx(v4,{})})]})]})}function tM({label:e,onClick:t,selected:i}){return i?v.jsx(Qn,{ariaPressed:i,className:"locale-switch__button",onClick:t,children:e}):v.jsx(Xa,{ariaPressed:i,className:"locale-switch__button",onClick:t,children:e})}function rM({item:e,label:t}){return v.jsx(x4,{to:e.to,className:({isActive:i})=>i?"nav-item nav-item--active":"nav-item",children:({isActive:i})=>v.jsxs(v.Fragment,{children:[v.jsxs("span",{className:"nav-item__icon",children:[i?v.jsx(Wr.span,{"aria-hidden":"true",className:"nav-item__indicator",layoutId:"nav-active-indicator",transition:ur.spatial}):null,w.createElement("md-icon",null,e.icon),w.createElement("md-ripple")]}),v.jsx("span",{className:"nav-item__label",children:t})]})})}function Bo({label:e}){const{t}=Oe();return v.jsxs("section",{className:"state-panel","aria-busy":"true",children:[v.jsx("p",{className:"eyebrow",children:t("common.loading")}),v.jsx("h2",{children:e??t("common.loading")})]})}var iM="Anthropic";function Il(e){"@babel/helpers - typeof";return Il=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Il(e)}var nM=["size","style"];function R2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function rm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?R2(Object(i),!0).forEach(function(o){oM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):R2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function oM(e,t,i){return t=aM(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function aM(e){var t=sM(e,"string");return Il(t)=="symbol"?t:String(t)}function sM(e,t){if(Il(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Il(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function lM(e,t){if(e==null)return{};var i=cM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function cM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var dM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=lM(e,nM);return v.jsxs("svg",rm(rm({fill:"currentColor",fillRule:"evenodd",height:i,style:rm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:iM}),v.jsx("path",{d:"M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z"})]}))}),uM="Baichuan";function Vl(e){"@babel/helpers - typeof";return Vl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Vl(e)}var fM=["size","style"];function j2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function im(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?j2(Object(i),!0).forEach(function(o){hM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):j2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function hM(e,t,i){return t=pM(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function pM(e){var t=mM(e,"string");return Vl(t)=="symbol"?t:String(t)}function mM(e,t){if(Vl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Vl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function vM(e,t){if(e==null)return{};var i=gM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function gM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var yM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=vM(e,fM);return v.jsxs("svg",im(im({fill:"currentColor",fillRule:"evenodd",height:i,style:im({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:uM}),v.jsx("path",{d:"M7.333 2h-3.2l-2 4.333V17.8L0 22h5.2l2.028-4.2L7.333 2zm7.334 0h-5.2v20h5.2V2zM16.8 7.733H22V22h-5.2V7.733zM22 2h-5.2v4.133H22V2z"})]}))}),bM="Claude";function Fl(e){"@babel/helpers - typeof";return Fl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Fl(e)}var xM=["size","style"];function k2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function nm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?k2(Object(i),!0).forEach(function(o){wM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):k2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function wM(e,t,i){return t=_M(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _M(e){var t=SM(e,"string");return Fl(t)=="symbol"?t:String(t)}function SM(e,t){if(Fl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Fl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function EM(e,t){if(e==null)return{};var i=TM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function TM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var OM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=EM(e,xM);return v.jsxs("svg",nm(nm({fill:"currentColor",fillRule:"evenodd",height:i,style:nm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:bM}),v.jsx("path",{d:"M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"})]}))}),CM="Cohere";function Hl(e){"@babel/helpers - typeof";return Hl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Hl(e)}var AM=["size","style"];function M2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function om(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?M2(Object(i),!0).forEach(function(o){RM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):M2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function RM(e,t,i){return t=jM(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function jM(e){var t=kM(e,"string");return Hl(t)=="symbol"?t:String(t)}function kM(e,t){if(Hl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Hl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function MM(e,t){if(e==null)return{};var i=DM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function DM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var zM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=MM(e,AM);return v.jsxs("svg",om(om({fill:"currentColor",fillRule:"evenodd",height:i,style:om({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:CM}),v.jsx("path",{clipRule:"evenodd",d:"M8.128 14.099c.592 0 1.77-.033 3.398-.703 1.897-.781 5.672-2.2 8.395-3.656 1.905-1.018 2.74-2.366 2.74-4.18A4.56 4.56 0 0018.1 1H7.549A6.55 6.55 0 001 7.55c0 3.617 2.745 6.549 7.128 6.549z"}),v.jsx("path",{clipRule:"evenodd",d:"M9.912 18.61a4.387 4.387 0 012.705-4.052l3.323-1.38c3.361-1.394 7.06 1.076 7.06 4.715a5.104 5.104 0 01-5.105 5.104l-3.597-.001a4.386 4.386 0 01-4.386-4.387z"}),v.jsx("path",{d:"M4.776 14.962A3.775 3.775 0 001 18.738v.489a3.776 3.776 0 007.551 0v-.49a3.775 3.775 0 00-3.775-3.775z"})]}))}),PM="DeepSeek";function ql(e){"@babel/helpers - typeof";return ql=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},ql(e)}var LM=["size","style"];function D2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function am(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?D2(Object(i),!0).forEach(function(o){NM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):D2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function NM(e,t,i){return t=$M(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function $M(e){var t=BM(e,"string");return ql(t)=="symbol"?t:String(t)}function BM(e,t){if(ql(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(ql(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function UM(e,t){if(e==null)return{};var i=IM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function IM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var VM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=UM(e,LM);return v.jsxs("svg",am(am({fill:"currentColor",fillRule:"evenodd",height:i,style:am({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:PM}),v.jsx("path",{d:"M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"})]}))}),FM="Doubao";function Kl(e){"@babel/helpers - typeof";return Kl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Kl(e)}var HM=["size","style"];function z2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function sm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?z2(Object(i),!0).forEach(function(o){qM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):z2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function qM(e,t,i){return t=KM(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function KM(e){var t=GM(e,"string");return Kl(t)=="symbol"?t:String(t)}function GM(e,t){if(Kl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Kl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function YM(e,t){if(e==null)return{};var i=QM(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function QM(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var XM=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=YM(e,HM);return v.jsxs("svg",sm(sm({fill:"currentColor",fillRule:"evenodd",height:i,style:sm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:FM}),v.jsx("path",{d:"M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z",fillOpacity:".5"}),v.jsx("path",{d:"M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002zM14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z"}),v.jsx("path",{d:"M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z",fillOpacity:".5"})]}))}),WM="Gemini";function Gl(e){"@babel/helpers - typeof";return Gl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Gl(e)}var ZM=["size","style"];function P2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function lm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?P2(Object(i),!0).forEach(function(o){JM(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):P2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function JM(e,t,i){return t=eD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function eD(e){var t=tD(e,"string");return Gl(t)=="symbol"?t:String(t)}function tD(e,t){if(Gl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Gl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function rD(e,t){if(e==null)return{};var i=iD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function iD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var L3=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=rD(e,ZM);return v.jsxs("svg",lm(lm({fill:"currentColor",fillRule:"evenodd",height:i,style:lm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:WM}),v.jsx("path",{d:"M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"})]}))}),nD="Gemma";function Yl(e){"@babel/helpers - typeof";return Yl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Yl(e)}var oD=["size","style"];function L2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function cm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?L2(Object(i),!0).forEach(function(o){aD(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):L2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function aD(e,t,i){return t=sD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function sD(e){var t=lD(e,"string");return Yl(t)=="symbol"?t:String(t)}function lD(e,t){if(Yl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Yl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function cD(e,t){if(e==null)return{};var i=dD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function dD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var uD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=cD(e,oD);return v.jsxs("svg",cm(cm({fill:"currentColor",fillRule:"evenodd",height:i,style:cm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:nD}),v.jsx("path",{d:"M12.34 5.953a8.233 8.233 0 01-.247-1.125V3.72a8.25 8.25 0 015.562 2.232H12.34zm-.69 0c.113-.373.199-.755.257-1.145V3.72a8.25 8.25 0 00-5.562 2.232h5.304zm-5.433.187h5.373a7.98 7.98 0 01-.267.696 8.41 8.41 0 01-1.76 2.65L6.216 6.14zm-.264-.187H2.977v.187h2.915a8.436 8.436 0 00-2.357 5.767H0v.186h3.535a8.436 8.436 0 002.357 5.767H2.977v.186h2.976v2.977h.187v-2.915a8.436 8.436 0 005.767 2.357V24h.186v-3.535a8.436 8.436 0 005.767-2.357v2.915h.186v-2.977h2.977v-.186h-2.915a8.436 8.436 0 002.357-5.767H24v-.186h-3.535a8.436 8.436 0 00-2.357-5.767h2.915v-.187h-2.977V2.977h-.186v2.915a8.436 8.436 0 00-5.767-2.357V0h-.186v3.535A8.436 8.436 0 006.14 5.892V2.977h-.187v2.976zm6.14 14.326a8.25 8.25 0 005.562-2.233H12.34c-.108.367-.19.743-.247 1.126v1.107zm-.186-1.087a8.015 8.015 0 00-.258-1.146H6.345a8.25 8.25 0 005.562 2.233v-1.087zm-8.186-7.285h1.107a8.23 8.23 0 001.125-.247V6.345a8.25 8.25 0 00-2.232 5.562zm1.087.186H3.72a8.25 8.25 0 002.232 5.562v-5.304a8.012 8.012 0 00-1.145-.258zm15.47-.186a8.25 8.25 0 00-2.232-5.562v5.315c.367.108.743.19 1.126.247h1.107zm-1.086.186c-.39.058-.772.144-1.146.258v5.304a8.25 8.25 0 002.233-5.562h-1.087zm-1.332 5.69V12.41a7.97 7.97 0 00-.696.267 8.409 8.409 0 00-2.65 1.76l3.346 3.346zm0-6.18v-5.45l-.012-.013h-5.451c.076.235.162.468.26.696a8.698 8.698 0 001.819 2.688 8.698 8.698 0 002.688 1.82c.228.097.46.183.696.259zM6.14 17.848V12.41c.235.078.468.167.696.267a8.403 8.403 0 012.688 1.799 8.404 8.404 0 011.799 2.688c.1.228.19.46.267.696H6.152l-.012-.012zm0-6.245V6.326l3.29 3.29a8.716 8.716 0 01-2.594 1.728 8.14 8.14 0 01-.696.259zm6.257 6.257h5.277l-3.29-3.29a8.716 8.716 0 00-1.728 2.594 8.135 8.135 0 00-.259.696zm-2.347-7.81a9.435 9.435 0 01-2.88 1.96 9.14 9.14 0 012.88 1.94 9.14 9.14 0 011.94 2.88 9.435 9.435 0 011.96-2.88 9.14 9.14 0 012.88-1.94 9.435 9.435 0 01-2.88-1.96 9.434 9.434 0 01-1.96-2.88 9.14 9.14 0 01-1.94 2.88z"})]}))}),fD="Grok";function Ql(e){"@babel/helpers - typeof";return Ql=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Ql(e)}var hD=["size","style"];function N2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function dm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?N2(Object(i),!0).forEach(function(o){pD(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):N2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function pD(e,t,i){return t=mD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function mD(e){var t=vD(e,"string");return Ql(t)=="symbol"?t:String(t)}function vD(e,t){if(Ql(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Ql(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function gD(e,t){if(e==null)return{};var i=yD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function yD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var bD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=gD(e,hD);return v.jsxs("svg",dm(dm({fill:"currentColor",fillRule:"evenodd",height:i,style:dm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:fD}),v.jsx("path",{d:"M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"})]}))}),xD="Kimi";function Xl(e){"@babel/helpers - typeof";return Xl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Xl(e)}var wD=["size","style"];function $2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function um(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?$2(Object(i),!0).forEach(function(o){_D(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):$2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function _D(e,t,i){return t=SD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function SD(e){var t=ED(e,"string");return Xl(t)=="symbol"?t:String(t)}function ED(e,t){if(Xl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Xl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function TD(e,t){if(e==null)return{};var i=OD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function OD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var CD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=TD(e,wD);return v.jsxs("svg",um(um({fill:"currentColor",fillRule:"evenodd",height:i,style:um({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:xD}),v.jsx("path",{d:"M21.846 0a1.923 1.923 0 110 3.846H20.15a.226.226 0 01-.227-.226V1.923C19.923.861 20.784 0 21.846 0z"}),v.jsx("path",{d:"M11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z"})]}))}),AD="Meta";function Wl(e){"@babel/helpers - typeof";return Wl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Wl(e)}var RD=["size","style"];function B2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function fm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?B2(Object(i),!0).forEach(function(o){jD(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):B2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function jD(e,t,i){return t=kD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function kD(e){var t=MD(e,"string");return Wl(t)=="symbol"?t:String(t)}function MD(e,t){if(Wl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Wl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function DD(e,t){if(e==null)return{};var i=zD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function zD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var PD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=DD(e,RD);return v.jsxs("svg",fm(fm({fill:"currentColor",fillRule:"evenodd",height:i,style:fm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:AD}),v.jsx("path",{d:"M6.897 4c1.915 0 3.516.932 5.43 3.376l.282-.373c.19-.246.383-.484.58-.71l.313-.35C14.588 4.788 15.792 4 17.225 4c1.273 0 2.469.557 3.491 1.516l.218.213c1.73 1.765 2.917 4.71 3.053 8.026l.011.392.002.25c0 1.501-.28 2.759-.818 3.7l-.14.23-.108.153c-.301.42-.664.758-1.086 1.009l-.265.142-.087.04a3.493 3.493 0 01-.302.118 4.117 4.117 0 01-1.33.208c-.524 0-.996-.067-1.438-.215-.614-.204-1.163-.56-1.726-1.116l-.227-.235c-.753-.812-1.534-1.976-2.493-3.586l-1.43-2.41-.544-.895-1.766 3.13-.343.592C7.597 19.156 6.227 20 4.356 20c-1.21 0-2.205-.42-2.936-1.182l-.168-.184c-.484-.573-.837-1.311-1.043-2.189l-.067-.32a8.69 8.69 0 01-.136-1.288L0 14.468c.002-.745.06-1.49.174-2.23l.1-.573c.298-1.53.828-2.958 1.536-4.157l.209-.34c1.177-1.83 2.789-3.053 4.615-3.16L6.897 4zm-.033 2.615l-.201.01c-.83.083-1.606.673-2.252 1.577l-.138.199-.01.018c-.67 1.017-1.185 2.378-1.456 3.845l-.004.022a12.591 12.591 0 00-.207 2.254l.002.188c.004.18.017.36.04.54l.043.291c.092.503.257.908.486 1.208l.117.137c.303.323.698.492 1.17.492 1.1 0 1.796-.676 3.696-3.641l2.175-3.4.454-.701-.139-.198C9.11 7.3 8.084 6.616 6.864 6.616zm10.196-.552l-.176.007c-.635.048-1.223.359-1.82.933l-.196.198c-.439.462-.887 1.064-1.367 1.807l.266.398c.18.274.362.56.55.858l.293.475 1.396 2.335.695 1.114c.583.926 1.03 1.6 1.408 2.082l.213.262c.282.326.529.54.777.673l.102.05c.227.1.457.138.718.138.176.002.35-.023.518-.073.338-.104.61-.32.813-.637l.095-.163.077-.162c.194-.459.29-1.06.29-1.785l-.006-.449c-.08-2.871-.938-5.372-2.2-6.798l-.176-.189c-.67-.683-1.444-1.074-2.27-1.074z"})]}))}),LD="Minimax";function Zl(e){"@babel/helpers - typeof";return Zl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Zl(e)}var ND=["size","style"];function U2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function hm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?U2(Object(i),!0).forEach(function(o){$D(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):U2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function $D(e,t,i){return t=BD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function BD(e){var t=UD(e,"string");return Zl(t)=="symbol"?t:String(t)}function UD(e,t){if(Zl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Zl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function ID(e,t){if(e==null)return{};var i=VD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function VD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var FD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=ID(e,ND);return v.jsxs("svg",hm(hm({fill:"currentColor",fillRule:"evenodd",height:i,style:hm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:LD}),v.jsx("path",{d:"M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"})]}))}),HD="Mistral";function Jl(e){"@babel/helpers - typeof";return Jl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Jl(e)}var qD=["size","style"];function I2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function pm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?I2(Object(i),!0).forEach(function(o){KD(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):I2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function KD(e,t,i){return t=GD(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function GD(e){var t=YD(e,"string");return Jl(t)=="symbol"?t:String(t)}function YD(e,t){if(Jl(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(Jl(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function QD(e,t){if(e==null)return{};var i=XD(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function XD(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var WD=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=QD(e,qD);return v.jsxs("svg",pm(pm({fill:"currentColor",fillRule:"evenodd",height:i,style:pm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:HD}),v.jsx("path",{clipRule:"evenodd",d:"M3.428 3.4h3.429v3.428h3.429v3.429h-.002 3.431V6.828h3.427V3.4h3.43v13.714H24v3.429H13.714v-3.428h-3.428v-3.429h-3.43v3.428h3.43v3.429H0v-3.429h3.428V3.4zm10.286 13.715h3.428v-3.429h-3.427v3.429z"})]}))}),ZD="MoonshotAI";function ec(e){"@babel/helpers - typeof";return ec=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},ec(e)}var JD=["size","style"];function V2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function mm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?V2(Object(i),!0).forEach(function(o){ez(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):V2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function ez(e,t,i){return t=tz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function tz(e){var t=rz(e,"string");return ec(t)=="symbol"?t:String(t)}function rz(e,t){if(ec(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(ec(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function iz(e,t){if(e==null)return{};var i=nz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function nz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var oz=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=iz(e,JD);return v.jsxs("svg",mm(mm({fill:"currentColor",fillRule:"evenodd",height:i,style:mm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:ZD}),v.jsx("path",{d:"M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"})]}))}),az="OpenAI";function tc(e){"@babel/helpers - typeof";return tc=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},tc(e)}var sz=["size","style"];function F2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function vm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?F2(Object(i),!0).forEach(function(o){lz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):F2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function lz(e,t,i){return t=cz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function cz(e){var t=dz(e,"string");return tc(t)=="symbol"?t:String(t)}function dz(e,t){if(tc(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(tc(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function uz(e,t){if(e==null)return{};var i=fz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function fz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var Av=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=uz(e,sz);return v.jsxs("svg",vm(vm({fill:"currentColor",fillRule:"evenodd",height:i,style:vm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:az}),v.jsx("path",{d:"M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"})]}))}),hz="Perplexity";function rc(e){"@babel/helpers - typeof";return rc=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},rc(e)}var pz=["size","style"];function H2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function gm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?H2(Object(i),!0).forEach(function(o){mz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):H2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function mz(e,t,i){return t=vz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function vz(e){var t=gz(e,"string");return rc(t)=="symbol"?t:String(t)}function gz(e,t){if(rc(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(rc(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function yz(e,t){if(e==null)return{};var i=bz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function bz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var xz=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=yz(e,pz);return v.jsxs("svg",gm(gm({fill:"currentColor",fillRule:"evenodd",height:i,style:gm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:hz}),v.jsx("path",{d:"M19.785 0v7.272H22.5V17.62h-2.935V24l-7.037-6.194v6.145h-1.091v-6.152L4.392 24v-6.465H1.5V7.188h2.884V0l7.053 6.494V.19h1.09v6.49L19.786 0zm-7.257 9.044v7.319l5.946 5.234V14.44l-5.946-5.397zm-1.099-.08l-5.946 5.398v7.235l5.946-5.234V8.965zm8.136 7.58h1.844V8.349H13.46l6.105 5.54v2.655zm-8.982-8.28H2.59v8.195h1.8v-2.576l6.192-5.62zM5.475 2.476v4.71h5.115l-5.115-4.71zm13.219 0l-5.115 4.71h5.115v-4.71z"})]}))}),wz="Qwen";function ic(e){"@babel/helpers - typeof";return ic=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},ic(e)}var _z=["size","style"];function q2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function ym(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?q2(Object(i),!0).forEach(function(o){Sz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):q2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function Sz(e,t,i){return t=Ez(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function Ez(e){var t=Tz(e,"string");return ic(t)=="symbol"?t:String(t)}function Tz(e,t){if(ic(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(ic(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function Oz(e,t){if(e==null)return{};var i=Cz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function Cz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var Az=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=Oz(e,_z);return v.jsxs("svg",ym(ym({fill:"currentColor",fillRule:"evenodd",height:i,style:ym({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:wz}),v.jsx("path",{d:"M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z"})]}))}),Rz="Grok";function nc(e){"@babel/helpers - typeof";return nc=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},nc(e)}var jz=["size","style"];function K2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function bm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?K2(Object(i),!0).forEach(function(o){kz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):K2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function kz(e,t,i){return t=Mz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function Mz(e){var t=Dz(e,"string");return nc(t)=="symbol"?t:String(t)}function Dz(e,t){if(nc(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(nc(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function zz(e,t){if(e==null)return{};var i=Pz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function Pz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var Lz=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=zz(e,jz);return v.jsxs("svg",bm(bm({fill:"currentColor",fillRule:"evenodd",height:i,style:bm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:Rz}),v.jsx("path",{d:"M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"})]}))}),Nz="Yi";function oc(e){"@babel/helpers - typeof";return oc=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},oc(e)}var $z=["size","style"];function G2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function xm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?G2(Object(i),!0).forEach(function(o){Bz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):G2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function Bz(e,t,i){return t=Uz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function Uz(e){var t=Iz(e,"string");return oc(t)=="symbol"?t:String(t)}function Iz(e,t){if(oc(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(oc(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function Vz(e,t){if(e==null)return{};var i=Fz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function Fz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var Hz=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=Vz(e,$z);return v.jsxs("svg",xm(xm({fill:"currentColor",fillRule:"evenodd",height:i,style:xm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:Nz}),v.jsx("path",{d:"M18.62 13.927c.611 0 1.107.505 1.107 1.128v5.817c0 .623-.496 1.128-1.108 1.128a1.118 1.118 0 01-1.108-1.128v-5.817c0-.623.496-1.128 1.108-1.128zM16.59 3.052a1.094 1.094 0 011.562-.129c.466.404.522 1.116.126 1.59l-5.938 7.111v9.147c0 .624-.496 1.129-1.108 1.129a1.118 1.118 0 01-1.108-1.129v-9.477l.003-.088.01-.087c.015-.232.102-.462.261-.654l6.192-7.413zM2.906 2.256a1.094 1.094 0 011.559.157l4.387 5.45a1.142 1.142 0 01-.155 1.587 1.094 1.094 0 01-1.559-.157l-4.387-5.45a1.144 1.144 0 01.06-1.498l.095-.09z"}),v.jsx("ellipse",{cx:"20.146",cy:"10.692",rx:"1.354",ry:"1.379"})]}))}),qz="Zhipu";function ac(e){"@babel/helpers - typeof";return ac=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},ac(e)}var Kz=["size","style"];function Y2(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),i.push.apply(i,o)}return i}function wm(e){for(var t=1;t<arguments.length;t++){var i=arguments[t]!=null?arguments[t]:{};t%2?Y2(Object(i),!0).forEach(function(o){Gz(e,o,i[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):Y2(Object(i)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(i,o))})}return e}function Gz(e,t,i){return t=Yz(t),t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function Yz(e){var t=Qz(e,"string");return ac(t)=="symbol"?t:String(t)}function Qz(e,t){if(ac(e)!="object"||!e)return e;var i=e[Symbol.toPrimitive];if(i!==void 0){var o=i.call(e,t);if(ac(o)!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function Xz(e,t){if(e==null)return{};var i=Wz(e,t),o,s;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(s=0;s<l.length;s++)o=l[s],!(t.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function Wz(e,t){if(e==null)return{};var i={},o=Object.keys(e),s,l;for(l=0;l<o.length;l++)s=o[l],!(t.indexOf(s)>=0)&&(i[s]=e[s]);return i}var Zz=w.memo(function(e){var t=e.size,i=t===void 0?"1em":t,o=e.style,s=Xz(e,Kz);return v.jsxs("svg",wm(wm({fill:"currentColor",fillRule:"evenodd",height:i,style:wm({flex:"none",lineHeight:1},o),viewBox:"0 0 24 24",width:i,xmlns:"http://www.w3.org/2000/svg"},s),{},{children:[v.jsx("title",{children:qz}),v.jsx("path",{d:"M11.991 23.503a.24.24 0 00-.244.248.24.24 0 00.244.249.24.24 0 00.245-.249.24.24 0 00-.22-.247l-.025-.001zM9.671 5.365a1.697 1.697 0 011.099 2.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47 1.279 1.186 1.314h.366c1.309.053 2.338 1.173 2.286 2.523-.052 1.332-1.152 2.38-2.478 2.327h-.174c-.715.018-1.274.64-1.239 1.368 0 .124.018.23.053.337.209.373.54.658.96.8.75.23 1.517-.125 1.9-.782l.018-.035c.402-.64 1.17-.96 1.92-.711.854.284 1.378 1.226 1.099 2.167a1.661 1.661 0 01-2.077 1.102 1.711 1.711 0 01-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646 1.646 0 00-1.954.746 1.66 1.66 0 01-1.065.764 1.677 1.677 0 01-1.989-1.279c-.209-.906.332-1.83 1.257-2.043a1.51 1.51 0 01.296-.035h.018c.68-.071 1.151-.622 1.116-1.333a1.307 1.307 0 00-.227-.693 2.515 2.515 0 01-.366-1.403 2.39 2.39 0 01.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43 1.43 0 01-.299-.07l-.05-.019a1.7 1.7 0 01-1.047-2.114 1.68 1.68 0 012.094-1.101zm-5.575 10.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267 1.013-.402.41-1.053.41-1.455 0a1.062 1.062 0 010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237 1.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05 1.05 0 01.757-1.26zm-.064-4.39c.314.32.49.753.49 1.206 0 .452-.176.886-.49 1.206-.315.32-.74.5-1.185.5-.444 0-.87-.18-1.184-.5a1.727 1.727 0 010-2.412 1.654 1.654 0 012.369 0zm-11.243.163c.364.484.447 1.128.218 1.691a1.665 1.665 0 01-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68 1.68 0 011.33-1.038c.593-.08 1.183.169 1.547.652zm11.545-4.221c.368 0 .708.2.892.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.892.524c-.568 0-1.03-.47-1.03-1.048 0-.579.462-1.048 1.03-1.048zm-14.358 0c.368 0 .707.2.891.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.891.524c-.569 0-1.03-.47-1.03-1.048 0-.579.461-1.048 1.03-1.048zm10.031-1.475c.925 0 1.675.764 1.675 1.706s-.75 1.705-1.675 1.705-1.674-.763-1.674-1.705c0-.942.75-1.706 1.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062 1.062 0 00-.238-1.028 1.017 1.017 0 00-.996-.294c-.547.14-.881.7-.752 1.257.13.558.675.907 1.225.783zm0 16.876c.359-.087.644-.36.75-.72a1.062 1.062 0 00-.237-1.019 1.018 1.018 0 00-.985-.301 1.037 1.037 0 00-.762.717c-.108.361-.017.754.239 1.028.245.263.606.377.953.305l.043-.01zM17.19 3.5a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64a.631.631 0 00-.628.64c0 .355.28.64.628.64zm-10.38 0a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64a.631.631 0 00-.628.64c0 .355.279.64.628.64zm-5.182 7.852a.631.631 0 00-.628.64c0 .354.28.639.628.639a.63.63 0 00.627-.606l.001-.034a.62.62 0 00-.628-.64zm5.182 9.13a.631.631 0 00-.628.64c0 .355.279.64.628.64a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631 0 00-.628.64c0 .355.28.64.628.64a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631 0 00-.628.64c0 .354.279.639.628.639a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24 0 00.244-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249c0 .142.122.249.244.249zM11.991.497a.24.24 0 00.245-.248A.24.24 0 0011.99 0a.24.24 0 00-.244.249c0 .133.108.236.223.247l.021.001zM2.011 6.36a.24.24 0 00.245-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249.24.24 0 00.244.249zm0 11.263a.24.24 0 00-.243.248.24.24 0 00.244.249.24.24 0 00.244-.249.252.252 0 00-.244-.248zm19.995-.018a.24.24 0 00-.245.248.24.24 0 00.245.25.24.24 0 00.244-.25.252.252 0 00-.244-.248z"})]}))});const N3=18,Jz=[{icon:OM,patterns:[/\bclaude\b/i,/\banthropic\b/i]},{icon:Av,patterns:[/\b(gpt|openai|o[1345]|chatgpt)\b/i]},{icon:L3,patterns:[/\b(gemini|google-genai)\b/i]},{icon:uD,patterns:[/\bgemma\b/i]},{icon:VM,patterns:[/\bdeepseek\b/i]},{icon:Az,patterns:[/\b(qwen|qwq|qvq|tongyi)\b/i]},{icon:WD,patterns:[/\b(mistral|mixtral|codestral)\b/i]},{icon:PD,patterns:[/\b(llama|meta)\b/i]},{icon:bD,patterns:[/\b(grok|xai)\b/i]},{icon:Lz,patterns:[/\bx-ai\b/i]},{icon:CD,patterns:[/\b(kimi|moonshot)\b/i]},{icon:oz,patterns:[/\bmoonshot\b/i]},{icon:XM,patterns:[/\b(doubao|volcengine|bytedance)\b/i]},{icon:yM,patterns:[/\bbaichuan\b/i]},{icon:Hz,patterns:[/\byi\b/i,/\b01-ai\b/i]},{icon:Zz,patterns:[/\b(zhipu|glm|chatglm)\b/i]},{icon:FD,patterns:[/\bminimax\b/i]},{icon:xz,patterns:[/\b(perplexity|sonar)\b/i]},{icon:zM,patterns:[/\b(cohere|command-r)\b/i]}],eP={anthropic:dM,"google-genai":L3,"openai-chat":Av,"openai-response":Av};function Fu(e){const t=eP[e];return t?v.jsx(t,{className:"lobe-brand-icon",size:N3}):void 0}function Ec(e){if(!e)return;const t=e.trim();if(!t)return;const o=Jz.find(s=>s.patterns.some(l=>l.test(t)))?.icon;return o?v.jsx(o,{className:"lobe-brand-icon",size:N3}):void 0}function _m(...e){for(const t of e){const i=Ec(t);if(i)return i}}function tP(e,t,i={}){const o=e.value[t.path];if(e.kind==="model"&&t.path==="display_name")return Ec(Ro(o)||e.id||e.label);if(e.kind==="route"&&iP.has(t.path)){const s=Ro(e.value.model),l=Ro(o);return t.path==="model"?_m(i[l],i[s],l,s):_m(l,i[s],s,e.id,e.label)}if(e.kind==="defaults"&&t.path==="model"){const s=Ro(o);return _m(i[s],s)}}function $3(e){return e.filter(t=>t.kind==="model").map(t=>({label:t.id,leadingIcon:Ec(Rv(t)),value:t.id}))}function rP(e){return e.filter(t=>t.kind==="provider").map(t=>({label:t.id,leadingIcon:Fu(Ro(t.value.protocol)),value:t.id}))}function ry(e){const t=Object.fromEntries(e.filter(o=>o.kind==="model").map(o=>[o.id,Rv(o)])),i=e.filter(o=>o.kind==="route").map(o=>{const s=Ro(o.value.model);return[o.id,t[s]||s||Rv(o)]});return Object.fromEntries([...Object.entries(t),...i])}const iP=new Set(["model","to","display_name"]);function Ro(e){return typeof e=="string"?e:""}function Rv(e){return Ro(e.value.display_name)||e.label||e.id}const Di={mode:ve("mode","运行模式","Run mode","决定 Moon Bridge 如何处理请求：在协议之间转换，或直接转发给单一上游。","How Moon Bridge handles requests: convert between formats, or pass straight through to one provider.","Transform | CaptureResponse | CaptureAnthropic","Transform"),"trace.enabled":ve("trace.enabled","启用追踪","Enable tracing","记录每个请求的处理过程，方便排查问题。","Records how each request is handled, for troubleshooting.","boolean"),"log.level":ve("log.level","日志级别","Log level","控制运行时输出的最低日志级别。","Controls the minimum runtime log level.","debug | info | warn | error","info"),"log.format":ve("log.format","日志格式","Log format","控制运行时日志输出为文本或 JSON。","Controls whether runtime logs are emitted as text or JSON.","text | json","text"),"server.addr":ve("server.addr","监听地址","Listen address","服务监听的地址。控制台和 API 都从这里访问。","Address the server listens on. The console and API are served here.","host:port","127.0.0.1:38440"),"server.auth_token":ve("server.auth_token","认证 Token","Auth token","控制台与 API 的访问密码。留空则不需要登录。","Password for the console and API. Leave empty to disable sign-in.","string","empty",!0),"server.max_sessions":ve("server.max_sessions","最大会话数","Max sessions","允许保留的最大会话数量；0 表示不限制。","Maximum retained session count; 0 means unlimited.","number","0"),"server.session_ttl":ve("server.session_ttl","会话 TTL","Session TTL","会话状态保留时长，例如 24h。","How long session state is retained, for example 24h.","string","24h"),"persistence.active_provider":ve("persistence.active_provider","持久化提供商","Persistence provider","设置保存的位置。启用后才能在控制台保存修改。","Where settings are stored. Needed to save changes from the console.","db_sqlite | db_d1","db_sqlite"),"cache.mode":ve("cache.mode","缓存模式","Cache mode","提示词缓存的工作方式：关闭、显式断点、自动选择，或两者混合。","How prompt caching works: off, explicit breakpoints, automatic, or a mix of both.","off | explicit | automatic | hybrid","explicit"),"cache.ttl":ve("cache.ttl","缓存 TTL","Cache TTL","缓存条目的保留时长，例如 1h。","Retention duration for cache entries, for example 1h.","string"),"cache.prompt_caching":ve("cache.prompt_caching","启用 Prompt Cache","Enable prompt caching","允许 Moon Bridge 为支持的上游协议启用 prompt cache。","Allows Moon Bridge to enable prompt caching for supported upstream protocols.","boolean"),"cache.automatic_prompt_cache":ve("cache.automatic_prompt_cache","自动 Prompt Cache","Automatic prompt cache","根据请求内容自动选择合适的缓存断点。","Automatically chooses suitable cache breakpoints from request content.","boolean"),"cache.explicit_cache_breakpoints":ve("cache.explicit_cache_breakpoints","显式缓存断点","Explicit cache breakpoints","允许请求显式指定 prompt cache 断点。","Allows requests to explicitly specify prompt cache breakpoints.","boolean"),"cache.allow_retention_downgrade":ve("cache.allow_retention_downgrade","允许降级保留策略","Allow retention downgrade","当上游不支持所选缓存时长时，自动改用较短的可用时长。","Use a shorter cache lifetime if the provider doesn't support the chosen one.","boolean"),"cache.max_breakpoints":ve("cache.max_breakpoints","最大断点数","Max breakpoints","单次请求可插入的最大缓存断点数量。","Maximum number of cache breakpoints inserted for one request.","number"),"cache.min_cache_tokens":ve("cache.min_cache_tokens","最小缓存 Token","Min cache tokens","低于该 token 数的片段不会作为缓存候选。","Segments below this token count are not considered cache candidates.","number"),"cache.expected_reuse":ve("cache.expected_reuse","预期复用次数","Expected reuse","缓存内容预期被复用的次数（用于自动缓存决策）。","How many times a cached block is expected to be reused (for automatic caching).","number"),"cache.minimum_value_score":ve("cache.minimum_value_score","最小价值分","Minimum value score","自动缓存生效的最低价值阈值。","Threshold below which automatic caching is skipped.","number"),"cache.min_breakpoint_tokens":ve("cache.min_breakpoint_tokens","最小断点 Token","Min breakpoint tokens","两个缓存点之间至少要相隔的 token 数。","Minimum number of tokens between two cache points.","number"),"defaults.model":ve("defaults.model","默认模型","Default model","请求未指定模型时使用的模型。","Model used when a request doesn't specify one.","string","moonbridge"),"defaults.max_tokens":ve("defaults.max_tokens","默认最大 Token","Default max tokens","请求未提供 max_output_tokens 时的默认输出上限。","Default output limit when a request does not provide max_output_tokens.","number","65536"),"defaults.system_prompt":ve("defaults.system_prompt","全局系统提示词","Global system prompt","追加到请求中的全局 system prompt，适合放置所有模型共享的行为约束。","Global system prompt appended to requests, useful for behavior rules shared by all models.","string","empty"),"models.<slug>.context_window":ve("models.<slug>.context_window","上下文窗口","Context window","模型一次最多能处理的 token 数。","Maximum tokens the model can handle at once.","number"),"models.<slug>.max_output_tokens":ve("models.<slug>.max_output_tokens","最大输出 Token","Max output tokens","模型单次响应允许的最大输出 token 数。","Maximum output tokens the model can emit in one response.","number"),"models.<slug>.slug":ve("models.<slug>.slug","模型 Slug","Model slug","模型的稳定标识，其他设置通过它引用此模型。","Stable id other settings use to refer to this model.","string"),"models.<slug>.display_name":ve("models.<slug>.display_name","模型显示名称","Model display name","控制台中展示的人类可读模型名称。","Human-readable model name shown in the console.","string"),"models.<slug>.description":ve("models.<slug>.description","模型描述","Model description","描述模型用途、能力或限制，便于控制台识别。","Describes model purpose, capabilities, or limits for console readers.","string"),"models.<slug>.base_instructions":ve("models.<slug>.base_instructions","基础指令","Base instructions","追加到该模型请求中的默认行为指令。","Default behavior instructions appended to requests for this model.","string"),"models.<slug>.supports_reasoning":ve("models.<slug>.supports_reasoning","支持思考","Supports reasoning","标记该模型是否支持思考深度配置。","Marks whether this model supports reasoning configuration.","boolean"),"models.<slug>.default_reasoning_level":ve("models.<slug>.default_reasoning_level","默认思考深度","Default reasoning level","请求未指定思考深度时使用的默认 level。","Default reasoning level used when a request does not specify one.","string"),"models.<slug>.supported_reasoning_levels":ve("models.<slug>.supported_reasoning_levels","支持的思考深度","Supported reasoning levels","该模型允许选择的思考深度列表。","List of reasoning levels allowed for this model.","array"),"models.<slug>.supports_reasoning_summaries":ve("models.<slug>.supports_reasoning_summaries","支持思考摘要","Supports reasoning summaries","标记该模型是否支持返回思考摘要。","Marks whether this model supports returning reasoning summaries.","boolean"),"models.<slug>.default_reasoning_summary":ve("models.<slug>.default_reasoning_summary","默认思考摘要","Default reasoning summary","请求未指定摘要模式时使用的默认思考摘要设置。","Default reasoning summary setting used when a request does not specify one.","string"),"models.<slug>.input_modalities":ve("models.<slug>.input_modalities","输入模态","Input modalities","该模型支持的输入类型，例如 text 或 image。","Input types supported by this model, such as text or image.","array"),"models.<slug>.supports_image_detail_original":ve("models.<slug>.supports_image_detail_original","支持原始图像细节","Supports original image detail","标记视觉请求是否可向该模型发送 original 图像细节。","Marks whether visual requests can send original image detail to this model.","boolean"),"models.<slug>.web_search":ve("models.<slug>.web_search","模型联网搜索","Model web search","覆盖该模型的联网搜索行为。","Overrides web search behavior for this model.","object"),"models.<slug>.extensions":ve("models.<slug>.extensions","模型扩展","Model extensions","覆盖该模型启用的扩展工具和配置。","Overrides extension tools and config enabled for this model.","object"),"providers.<key>.key":ve("providers.<key>.key","Provider Key","Provider key","提供商的稳定标识，路由通过它选择此提供商。","Stable id routes use to pick this provider.","string"),"providers.<key>.base_url":ve("providers.<key>.base_url","上游 Base URL","Upstream base URL","上游 Provider API 地址。","Upstream provider API URL.","url"),"providers.<key>.api_key":ve("providers.<key>.api_key","上游 API Key","Upstream API key","此提供商的 API 密钥。显示为掩码；输入新值即可更新。","API key for this provider. Shown masked; enter a new value to update it.","string",void 0,!0),"providers.<key>.protocol":ve("providers.<key>.protocol","上游协议","Upstream protocol","选择上游接口格式：Anthropic Messages、OpenAI Responses、Google GenAI 或 OpenAI Chat。","Selects the upstream API format: Anthropic Messages, OpenAI Responses, Google GenAI, or OpenAI Chat.","anthropic | openai-response | google-genai | openai-chat","anthropic"),"providers.<key>.version":ve("providers.<key>.version","协议版本","Protocol version","API 版本头（主要 Anthropic 使用），部分提供商可留空。","API version header (mainly for Anthropic). Optional for some providers.","string"),"providers.<key>.user_agent":ve("providers.<key>.user_agent","User Agent","User agent","发送给提供商的 User-Agent 字符串。","User-Agent string sent to the provider.","string"),"providers.<key>.web_search":ve("providers.<key>.web_search","提供商联网搜索","Provider web search","覆盖该 Provider 的联网搜索行为。","Overrides web search behavior for this provider.","object"),"providers.<key>.extensions":ve("providers.<key>.extensions","提供商扩展","Provider extensions","覆盖该 Provider 启用的扩展工具和配置。","Overrides extension tools and config enabled for this provider.","object"),"providers.<key>.offers[].model":ve("providers.<key>.offers[].model","提供商模型","Provider model","此绑定提供的模型。","Which model this binding serves.","string"),"providers.<key>.offers[].upstream_name":ve("providers.<key>.offers[].upstream_name","上游模型名","Upstream model name","发送给提供商的真实模型名。留空则使用模型标识。","Real model name sent to the provider. Leave empty to use the model id.","string"),"providers.<key>.offers[].priority":ve("providers.<key>.offers[].priority","提供商优先级","Provider priority","同一模型有多个提供商时的取舍权重，数值越小越优先。","Tie-breaker when several providers serve the same model; lower wins.","number"),"providers.<key>.offers[].pricing":ve("providers.<key>.offers[].pricing","计费","Billing","可选的单价信息，用于费用统计。","Optional prices for cost tracking.","number"),"providers.<key>.offers[].overrides":ve("providers.<key>.offers[].overrides","提供商覆盖配置","Provider overrides","该提供商绑定专用的模型能力覆盖项。","Model capability overrides specific to this provider binding.","object"),"routes.<alias>.to":ve("routes.<alias>.to","路由目标","Route target","此路由指向的内部目标。","Internal target this route points to.","string"),"routes.<alias>.model":ve("routes.<alias>.model","路由模型","Route model","此别名实际指向的模型。","Model this alias points to.","string"),"routes.<alias>.alias":ve("routes.<alias>.alias","路由别名","Route alias","客户端在请求中使用的模型名。","The model name clients send in requests.","string"),"routes.<alias>.provider":ve("routes.<alias>.provider","路由提供商","Route provider","处理该路由的 Provider key。","Provider key that handles this route.","string"),"routes.<alias>.display_name":ve("routes.<alias>.display_name","路由显示名称","Route display name","控制台中展示的人类可读路由名称。","Human-readable route name shown in the console.","string"),"routes.<alias>.description":ve("routes.<alias>.description","路由描述","Route description","描述该路由的用途或模型选择策略。","Describes this route's purpose or model selection policy.","string"),"routes.<alias>.context_window":ve("routes.<alias>.context_window","路由上下文窗口","Route context window","该路由暴露给客户端的上下文窗口上限。","Context window limit exposed to clients for this route.","number"),"routes.<alias>.web_search":ve("routes.<alias>.web_search","路由联网搜索","Route web search","覆盖该路由的联网搜索行为。","Overrides web search behavior for this route.","object"),"routes.<alias>.extensions":ve("routes.<alias>.extensions","路由扩展","Route extensions","覆盖该路由启用的扩展工具和配置。","Overrides extension tools and config enabled for this route.","object"),"web_search.support":ve("web_search.support","网页搜索模式","Web search mode","auto 优先使用 Provider 原生搜索并回退注入；enabled 强制原生；disabled 禁用；injected 使用 Tavily/Firecrawl 工具注入。","auto prefers provider-native search and falls back to injection; enabled forces native; disabled turns it off; injected uses Tavily/Firecrawl tools.","auto | enabled | disabled | injected","auto"),"web_search.max_uses":ve("web_search.max_uses","最大使用次数","Max uses","限制单次请求可使用的网页搜索次数。","Limits how many web search calls one request may use.","number"),"web_search.tavily_api_key":ve("web_search.tavily_api_key","Tavily API Key","Tavily API key","注入式网页搜索使用的 Tavily 密钥。","Tavily secret used by injected web search.","string",void 0,!0),"web_search.firecrawl_api_key":ve("web_search.firecrawl_api_key","Firecrawl API Key","Firecrawl API key","注入式网页搜索用于抓取页面内容的 Firecrawl 密钥。","Firecrawl secret used by injected web search to fetch page content.","string",void 0,!0),"web_search.search_max_rounds":ve("web_search.search_max_rounds","最大搜索轮次","Search max rounds","单次请求最多执行的搜索轮数。","Maximum number of search rounds per request.","number","3"),"extensions.<name>.enabled":ve("extensions.<name>.enabled","启用扩展","Enable extension","开启或关闭此扩展。","Turn this extension on or off.","boolean"),"extensions.<name>.config":ve("extensions.<name>.config","扩展配置","Extension config","此扩展的设置。","Settings for this extension.","object"),"proxy.response":ve("proxy.response","OpenAI Capture 代理","OpenAI capture proxy","直通（Capture）模式下转发到 OpenAI 所需的地址、密钥和默认模型。","Address, key, and default model used when passing requests straight through to OpenAI.","object"),"proxy.anthropic":ve("proxy.anthropic","Anthropic Capture 代理","Anthropic capture proxy","直通（Capture）模式下转发到 Anthropic 所需的地址、密钥、版本和模型。","Address, key, version, and model used when passing requests straight through to Anthropic.","object")};function ve(e,t,i,o,s,l,d,f=!1){return{path:e,title:{"zh-CN":t,"en-US":i},description:{"zh-CN":o,"en-US":s},type:l,defaultValue:d,sensitive:f,apply:{"zh-CN":"即时保存；部分字段需重启后生效。","en-US":"Saved instantly; some fields need a restart to take effect."}}}const nP=ln(ft);class cn extends nP{get rippleDisabled(){return this.disabled||this.softDisabled}constructor(){super(),this.disabled=!1,this.softDisabled=!1,this.alwaysFocusable=!1,this.label="",this.hasIcon=!1,this.addEventListener("click",this.handleClick.bind(this))}focus(t){this.disabled&&!this.alwaysFocusable||super.focus(t)}render(){return ue`
+      <div class="container ${xr(this.getContainerClasses())}">
+        ${this.renderContainerContent()}
+      </div>
+    `}updated(t){t.has("disabled")&&t.get("disabled")!==void 0&&this.dispatchEvent(new Event("update-focus",{bubbles:!0}))}getContainerClasses(){return{disabled:this.disabled||this.softDisabled,"has-icon":this.hasIcon}}renderContainerContent(){return ue`
+      ${this.renderOutline()}
+      <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
+      <md-ripple
+        for=${this.primaryId}
+        ?disabled=${this.rippleDisabled}></md-ripple>
+      ${this.renderPrimaryAction(this.renderPrimaryContent())}
+    `}renderOutline(){return ue`<span class="outline"></span>`}renderLeadingIcon(){return ue`<slot name="icon" @slotchange=${this.handleIconChange}></slot>`}renderPrimaryContent(){return ue`
+      <span class="leading icon" aria-hidden="true">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">
+        <span class="label-text" id="label">
+          ${this.label?this.label:ue`<slot></slot>`}
+        </span>
+      </span>
+      <span class="touch"></span>
+    `}handleIconChange(t){const i=t.target;this.hasIcon=i.assignedElements({flatten:!0}).length>0}handleClick(t){if(this.softDisabled||this.disabled&&this.alwaysFocusable){t.stopImmediatePropagation(),t.preventDefault();return}}}cn.shadowRootOptions={...ft.shadowRootOptions,delegatesFocus:!0};j([K({type:Boolean,reflect:!0})],cn.prototype,"disabled",void 0);j([K({type:Boolean,attribute:"soft-disabled",reflect:!0})],cn.prototype,"softDisabled",void 0);j([K({type:Boolean,attribute:"always-focusable"})],cn.prototype,"alwaysFocusable",void 0);j([K()],cn.prototype,"label",void 0);j([K({type:Boolean,reflect:!0,attribute:"has-icon"})],cn.prototype,"hasIcon",void 0);const ru="aria-label-remove";class B3 extends cn{get ariaLabelRemove(){if(this.hasAttribute(ru))return this.getAttribute(ru);const{ariaLabel:t}=this;return t||this.label?`Remove ${t||this.label}`:null}set ariaLabelRemove(t){const i=this.ariaLabelRemove;t!==i&&(t===null?this.removeAttribute(ru):this.setAttribute(ru,t),this.requestUpdate())}constructor(){super(),this.handleTrailingActionFocus=this.handleTrailingActionFocus.bind(this),this.addEventListener("keydown",this.handleKeyDown.bind(this))}focus(t){if((this.alwaysFocusable||!this.disabled)&&t?.trailing&&this.trailingAction){this.trailingAction.focus(t);return}super.focus(t)}renderContainerContent(){return ue`
+      ${super.renderContainerContent()}
+      ${this.renderTrailingAction(this.handleTrailingActionFocus)}
+    `}handleKeyDown(t){const i=t.key==="ArrowLeft",o=t.key==="ArrowRight";if(!i&&!o||!this.primaryAction||!this.trailingAction)return;const l=getComputedStyle(this).direction==="rtl"?i:o,d=this.primaryAction?.matches(":focus-within"),f=this.trailingAction?.matches(":focus-within");if(l&&f||!l&&d)return;t.preventDefault(),t.stopPropagation(),(l?this.trailingAction:this.primaryAction).focus()}handleTrailingActionFocus(){const{primaryAction:t,trailingAction:i}=this;!t||!i||(t.tabIndex=-1,i.addEventListener("focusout",()=>{t.tabIndex=0},{once:!0}))}}function U3({ariaLabel:e,disabled:t,focusListener:i,tabbable:o=!1}){return ue`
+    <span id="remove-label" hidden aria-hidden="true">Remove</span>
+    <button
+      class="trailing action"
+      aria-label=${e||ae}
+      aria-labelledby=${e?ae:"remove-label label"}
+      tabindex=${o?ae:-1}
+      @click=${oP}
+      @focus=${i}>
+      <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
+      <md-ripple ?disabled=${t}></md-ripple>
+      <span class="trailing icon" aria-hidden="true">
+        <slot name="remove-trailing-icon">
+          <svg viewBox="0 96 960 960">
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+          </svg>
+        </slot>
+      </span>
+      <span class="touch"></span>
+    </button>
+  `}function oP(e){this.disabled||this.softDisabled||(e.stopPropagation(),!this.dispatchEvent(new Event("remove",{cancelable:!0})))||this.remove()}class Uo extends B3{constructor(){super(...arguments),this.avatar=!1,this.href="",this.target="",this.removeOnly=!1,this.selected=!1}get primaryId(){return this.href?"link":this.removeOnly?"":"button"}get rippleDisabled(){return!this.href&&(this.disabled||this.softDisabled)}get primaryAction(){return this.removeOnly?null:this.renderRoot.querySelector(".primary.action")}getContainerClasses(){return{...super.getContainerClasses(),avatar:this.avatar,disabled:!this.href&&(this.disabled||this.softDisabled),link:!!this.href,selected:this.selected,"has-trailing":!0}}renderPrimaryAction(t){const{ariaLabel:i}=this;return this.href?ue`
+        <a
+          class="primary action"
+          id="link"
+          aria-label=${i||ae}
+          href=${this.href}
+          target=${this.target||ae}
+          >${t}</a
+        >
+      `:this.removeOnly?ue`
+        <span class="primary action" aria-label=${i||ae}>
+          ${t}
+        </span>
+      `:ue`
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${i||ae}
+        aria-disabled=${this.softDisabled||ae}
+        ?disabled=${this.disabled&&!this.alwaysFocusable}
+        type="button"
+        >${t}</button
+      >
+    `}renderTrailingAction(t){return U3({focusListener:t,ariaLabel:this.ariaLabelRemove,disabled:!this.href&&(this.disabled||this.softDisabled),tabbable:this.removeOnly})}}j([K({type:Boolean})],Uo.prototype,"avatar",void 0);j([K()],Uo.prototype,"href",void 0);j([K()],Uo.prototype,"target",void 0);j([K({type:Boolean,attribute:"remove-only"})],Uo.prototype,"removeOnly",void 0);j([K({type:Boolean,reflect:!0})],Uo.prototype,"selected",void 0);j([at(".trailing.action")],Uo.prototype,"trailingAction",void 0);const aP=Ye`:host{--_container-height: var(--md-input-chip-container-height, 32px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 9999px));--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-input-chip-leading-space, 16px);--_trailing-space: var(--md-input-chip-trailing-space, 16px);--_icon-label-space: var(--md-input-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-input-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-input-chip-with-trailing-icon-trailing-space, 8px)}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}
+`;const I3=Ye`.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}:where(.selected)::before{background:var(--_selected-container-color)}:where(.selected) .outline{border-width:var(--_selected-outline-width)}:where(.selected.disabled)::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}:where(.selected) .label{color:var(--_selected-label-text-color)}:where(.selected:hover) .label{color:var(--_selected-hover-label-text-color)}:where(.selected:focus) .label{color:var(--_selected-focus-label-text-color)}:where(.selected:active) .label{color:var(--_selected-pressed-label-text-color)}:where(.selected) .leading.icon{color:var(--_selected-leading-icon-color)}:where(.selected:hover) .leading.icon{color:var(--_selected-hover-leading-icon-color)}:where(.selected:focus) .leading.icon{color:var(--_selected-focus-leading-icon-color)}:where(.selected:active) .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){:where(.selected:not(.elevated))::before{border:1px solid CanvasText}:where(.selected) .outline{border-width:1px}}
+`;const iy=Ye`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host(:is([disabled],[soft-disabled])){pointer-events:none}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{min-width:0;padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space)}.has-icon .primary.action{padding-inline-start:var(--_with-leading-icon-leading-space)}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);font-weight:var(--_label-text-weight);height:100%;line-height:var(--_label-text-line-height);overflow:hidden;user-select:none}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}.leading.icon ::slotted(*),.leading.icon svg{margin-inline-end:var(--_icon-label-space)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button{text-transform:inherit}a,button:not(:disabled,[aria-disabled=true]){cursor:inherit}
+`;const V3=Ye`.trailing.action{align-items:center;justify-content:center;padding-inline-start:var(--_icon-label-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.trailing.action :is(md-ripple,md-focus-ring){border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.trailing.action md-focus-ring{inset:unset}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:where(:hover) .trailing.icon{color:var(--_hover-trailing-icon-color)}:where(:focus) .trailing.icon{color:var(--_focus-trailing-icon-color)}:where(:active) .trailing.icon{color:var(--_pressed-trailing-icon-color)}:where(.disabled) .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}:where(.selected) .trailing.icon{color:var(--_selected-trailing-icon-color)}:where(.selected:hover) .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}:where(.selected:focus) .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}:where(.selected:active) .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}@media(forced-colors: active){.trailing.icon{color:ButtonText}:where(.disabled) .trailing.icon{color:GrayText;opacity:1}}
+`;let jv=class extends Uo{};jv.styles=[iy,V3,I3,aP];jv=j([bt("md-input-chip")],jv);function F3({children:e,className:t,disabled:i=!1,label:o,onRemove:s}){const l=w.useRef(null);return w.useEffect(()=>{const d=l.current;if(!d)throw new Error("MaterialInputChip rendered before md-input-chip was registered.");const f=()=>s();return d.addEventListener("remove",f),()=>d.removeEventListener("remove",f)},[s]),w.useEffect(()=>{const d=l.current;if(!d)throw new Error("MaterialInputChip rendered before md-input-chip was registered.");d.disabled=i,d.removeOnly=!0,d.setAttribute("aria-label",o)},[i,o]),v.jsx("md-input-chip",{"aria-label":o,className:t,disabled:i,ref:l,"remove-only":!0,children:e})}function H3(e,t=dn){const i=ny(e,t);return i&&(i.tabIndex=0,i.focus()),i}function q3(e,t=dn){const i=K3(e,t);return i&&(i.tabIndex=0,i.focus()),i}function Ol(e,t=dn){for(let i=0;i<e.length;i++){const o=e[i];if(o.tabIndex===0&&t(o))return{item:o,index:i}}return null}function ny(e,t=dn){for(const i of e)if(t(i))return i;return null}function K3(e,t=dn){for(let i=e.length-1;i>=0;i--){const o=e[i];if(t(o))return o}return null}function sP(e,t,i=dn,o=!0){for(let s=1;s<e.length;s++){const l=(s+t)%e.length;if(l<t&&!o)return null;const d=e[l];if(i(d))return d}return e[t]?e[t]:null}function lP(e,t,i=dn,o=!0){for(let s=1;s<e.length;s++){const l=(t-s+e.length)%e.length;if(l>t&&!o)return null;const d=e[l];if(i(d))return d}return e[t]?e[t]:null}function Q2(e,t,i=dn,o=!0){if(t){const s=sP(e,t.index,i,o);return s&&(s.tabIndex=0,s.focus()),s}else return H3(e,i)}function X2(e,t,i=dn,o=!0){if(t){const s=lP(e,t.index,i,o);return s&&(s.tabIndex=0,s.focus()),s}else return q3(e,i)}function dn(e){return!e.disabled}const Zt={ArrowDown:"ArrowDown",ArrowLeft:"ArrowLeft",ArrowUp:"ArrowUp",ArrowRight:"ArrowRight",Home:"Home",End:"End"};class cP{constructor(t){this.handleKeydown=g=>{const y=g.key;if(g.defaultPrevented||!this.isNavigableKey(y))return;const b=this.items;if(!b.length)return;const _=Ol(b,this.isActivatable);g.preventDefault();const E=this.isRtl(),T=E?Zt.ArrowRight:Zt.ArrowLeft,O=E?Zt.ArrowLeft:Zt.ArrowRight;let D=null;switch(y){case Zt.ArrowDown:case O:D=Q2(b,_,this.isActivatable,this.wrapNavigation());break;case Zt.ArrowUp:case T:D=X2(b,_,this.isActivatable,this.wrapNavigation());break;case Zt.Home:D=H3(b,this.isActivatable);break;case Zt.End:D=q3(b,this.isActivatable);break}D&&_&&_.item!==D&&(_.item.tabIndex=-1)},this.onDeactivateItems=()=>{const g=this.items;for(const y of g)this.deactivateItem(y)},this.onRequestActivation=g=>{this.onDeactivateItems();const y=g.target;this.activateItem(y),y.focus()},this.onSlotchange=()=>{const g=this.items;let y=!1;for(const _ of g){if(!_.disabled&&_.tabIndex>-1&&!y){y=!0,_.tabIndex=0;continue}_.tabIndex=-1}if(y)return;const b=ny(g,this.isActivatable);b&&(b.tabIndex=0)};const{isItem:i,getPossibleItems:o,isRtl:s,deactivateItem:l,activateItem:d,isNavigableKey:f,isActivatable:h,wrapNavigation:m}=t;this.isItem=i,this.getPossibleItems=o,this.isRtl=s,this.deactivateItem=l,this.activateItem=d,this.isNavigableKey=f,this.isActivatable=h,this.wrapNavigation=m??(()=>!0)}get items(){const t=this.getPossibleItems(),i=[];for(const o of t){if(this.isItem(o)){i.push(o);continue}const l=o.item;l&&this.isItem(l)&&i.push(l)}return i}activateNextItem(){const t=this.items,i=Ol(t,this.isActivatable);return i&&(i.item.tabIndex=-1),Q2(t,i,this.isActivatable,this.wrapNavigation())}activatePreviousItem(){const t=this.items,i=Ol(t,this.isActivatable);return i&&(i.item.tabIndex=-1),X2(t,i,this.isActivatable,this.wrapNavigation())}}function dP(e,t){return new CustomEvent("close-menu",{bubbles:!0,composed:!0,detail:{initiator:e,reason:t,itemPath:[e]}})}const W2=dP,kv={SPACE:"Space",ENTER:"Enter"},Z2={CLICK_SELECTION:"click-selection",KEYDOWN:"keydown"},uP={ESCAPE:"Escape",SPACE:kv.SPACE,ENTER:kv.ENTER};function G3(e){return Object.values(uP).some(t=>t===e)}function fP(e){return Object.values(kv).some(t=>t===e)}function Mv(e,t){const i=new Event("md-contains",{bubbles:!0,composed:!0});let o=[];const s=d=>{o=d.composedPath()};return t.addEventListener("md-contains",s),e.dispatchEvent(i),t.removeEventListener("md-contains",s),o.length>0}const ui={NONE:"none",LIST_ROOT:"list-root",FIRST_ITEM:"first-item",LAST_ITEM:"last-item"};const J2={END_START:"end-start",START_START:"start-start"};class hP{constructor(t,i){this.host=t,this.getProperties=i,this.surfaceStylesInternal={display:"none"},this.lastValues={isOpen:!1},this.host.addController(this)}get surfaceStyles(){return this.surfaceStylesInternal}async position(){const{surfaceEl:t,anchorEl:i,anchorCorner:o,surfaceCorner:s,positioning:l,xOffset:d,yOffset:f,disableBlockFlip:h,disableInlineFlip:m,repositionStrategy:g}=this.getProperties(),y=o.toLowerCase().trim(),b=s.toLowerCase().trim();if(!t||!i)return;const _=window.innerWidth,E=window.innerHeight,T=document.createElement("div");T.style.opacity="0",T.style.position="fixed",T.style.display="block",T.style.inset="0",document.body.appendChild(T);const O=T.getBoundingClientRect();T.remove();const D=window.innerHeight-O.bottom,C=window.innerWidth-O.right;this.surfaceStylesInternal={display:"block",opacity:"0"},this.host.requestUpdate(),await this.host.updateComplete,t.popover&&t.isConnected&&t.showPopover();const z=t.getSurfacePositionClientRect?t.getSurfacePositionClientRect():t.getBoundingClientRect(),B=i.getSurfacePositionClientRect?i.getSurfacePositionClientRect():i.getBoundingClientRect(),[H,ne]=b.split("-"),[X,A]=y.split("-"),le=getComputedStyle(t).direction==="ltr";let{blockInset:ee,blockOutOfBoundsCorrection:J,surfaceBlockProperty:ce}=this.calculateBlock({surfaceRect:z,anchorRect:B,anchorBlock:X,surfaceBlock:H,yOffset:f,positioning:l,windowInnerHeight:E,blockScrollbarHeight:D});if(J&&!h){const N=H==="start"?"end":"start",Q=X==="start"?"end":"start",se=this.calculateBlock({surfaceRect:z,anchorRect:B,anchorBlock:Q,surfaceBlock:N,yOffset:f,positioning:l,windowInnerHeight:E,blockScrollbarHeight:D});J>se.blockOutOfBoundsCorrection&&(ee=se.blockInset,J=se.blockOutOfBoundsCorrection,ce=se.surfaceBlockProperty)}let{inlineInset:_e,inlineOutOfBoundsCorrection:ie,surfaceInlineProperty:xe}=this.calculateInline({surfaceRect:z,anchorRect:B,anchorInline:A,surfaceInline:ne,xOffset:d,positioning:l,isLTR:le,windowInnerWidth:_,inlineScrollbarWidth:C});if(ie&&!m){const N=ne==="start"?"end":"start",Q=A==="start"?"end":"start",se=this.calculateInline({surfaceRect:z,anchorRect:B,anchorInline:Q,surfaceInline:N,xOffset:d,positioning:l,isLTR:le,windowInnerWidth:_,inlineScrollbarWidth:C});Math.abs(ie)>Math.abs(se.inlineOutOfBoundsCorrection)&&(_e=se.inlineInset,ie=se.inlineOutOfBoundsCorrection,xe=se.surfaceInlineProperty)}g==="move"&&(ee=ee-J,_e=_e-ie),this.surfaceStylesInternal={display:"block",opacity:"1",[ce]:`${ee}px`,[xe]:`${_e}px`},g==="resize"&&(J&&(this.surfaceStylesInternal.height=`${z.height-J}px`),ie&&(this.surfaceStylesInternal.width=`${z.width-ie}px`)),this.host.requestUpdate()}calculateBlock(t){const{surfaceRect:i,anchorRect:o,anchorBlock:s,surfaceBlock:l,yOffset:d,positioning:f,windowInnerHeight:h,blockScrollbarHeight:m}=t,g=f==="fixed"||f==="document"?1:0,y=f==="document"?1:0,b=l==="start"?1:0,_=l==="end"?1:0,T=(s!==l?1:0)*o.height+d,O=b*o.top+_*(h-o.bottom-m),D=b*window.scrollY-_*window.scrollY,C=Math.abs(Math.min(0,h-O-T-i.height));return{blockInset:g*O+y*D+T,blockOutOfBoundsCorrection:C,surfaceBlockProperty:l==="start"?"inset-block-start":"inset-block-end"}}calculateInline(t){const{isLTR:i,surfaceInline:o,anchorInline:s,anchorRect:l,surfaceRect:d,xOffset:f,positioning:h,windowInnerWidth:m,inlineScrollbarWidth:g}=t,y=h==="fixed"||h==="document"?1:0,b=h==="document"?1:0,_=i?1:0,E=i?0:1,T=o==="start"?1:0,O=o==="end"?1:0,C=(s!==o?1:0)*l.width+f,z=T*l.left+O*(m-l.right-g),B=T*(m-l.right-g)+O*l.left,H=_*z+E*B,ne=T*window.scrollX-O*window.scrollX,X=O*window.scrollX-T*window.scrollX,A=_*ne+E*X,le=Math.abs(Math.min(0,m-H-C-d.width)),ee=y*H+C+b*A;let J=o==="start"?"inset-inline-start":"inset-inline-end";return(h==="document"||h==="fixed")&&(o==="start"&&i||o==="end"&&!i?J="left":J="right"),{inlineInset:ee,inlineOutOfBoundsCorrection:le,surfaceInlineProperty:J}}hostUpdate(){this.onUpdate()}hostUpdated(){this.onUpdate()}async onUpdate(){const t=this.getProperties();let i=!1;for(const[d,f]of Object.entries(t))if(i=i||f!==this.lastValues[d],i)break;const o=this.lastValues.isOpen!==t.isOpen,s=!!t.anchorEl,l=!!t.surfaceEl;i&&s&&l&&(this.lastValues.isOpen=t.isOpen,t.isOpen?(this.lastValues=t,await this.position(),t.onOpen()):o&&(await t.beforeClose(),this.close(),t.onClose()))}close(){this.surfaceStylesInternal={display:"none"},this.host.requestUpdate();const t=this.getProperties().surfaceEl;t?.popover&&t?.isConnected&&t.hidePopover()}}const Hr={INDEX:0,ITEM:1,TEXT:2};class pP{constructor(t){this.getProperties=t,this.typeaheadRecords=[],this.typaheadBuffer="",this.cancelTypeaheadTimeout=0,this.isTypingAhead=!1,this.lastActiveRecord=null,this.onKeydown=i=>{this.isTypingAhead?this.typeahead(i):this.beginTypeahead(i)},this.endTypeahead=()=>{this.isTypingAhead=!1,this.typaheadBuffer="",this.typeaheadRecords=[]}}get items(){return this.getProperties().getItems()}get active(){return this.getProperties().active}beginTypeahead(t){this.active&&(t.code==="Space"||t.code==="Enter"||t.code.startsWith("Arrow")||t.code==="Escape"||(this.isTypingAhead=!0,this.typeaheadRecords=this.items.map((i,o)=>[o,i,i.typeaheadText.trim().toLowerCase()]),this.lastActiveRecord=this.typeaheadRecords.find(i=>i[Hr.ITEM].tabIndex===0)??null,this.lastActiveRecord&&(this.lastActiveRecord[Hr.ITEM].tabIndex=-1),this.typeahead(t)))}typeahead(t){if(t.defaultPrevented)return;if(clearTimeout(this.cancelTypeaheadTimeout),t.code==="Enter"||t.code.startsWith("Arrow")||t.code==="Escape"){this.endTypeahead(),this.lastActiveRecord&&(this.lastActiveRecord[Hr.ITEM].tabIndex=-1);return}t.code==="Space"&&t.preventDefault(),this.cancelTypeaheadTimeout=setTimeout(this.endTypeahead,this.getProperties().typeaheadBufferTime),this.typaheadBuffer+=t.key.toLowerCase();const i=this.lastActiveRecord?this.lastActiveRecord[Hr.INDEX]:-1,o=this.typeaheadRecords.length,s=h=>(h[Hr.INDEX]+o-i)%o,l=this.typeaheadRecords.filter(h=>!h[Hr.ITEM].disabled&&h[Hr.TEXT].startsWith(this.typaheadBuffer)).sort((h,m)=>s(h)-s(m));if(l.length===0){clearTimeout(this.cancelTypeaheadTimeout),this.lastActiveRecord&&(this.lastActiveRecord[Hr.ITEM].tabIndex=-1),this.endTypeahead();return}const d=this.typaheadBuffer.length===1;let f;this.lastActiveRecord===l[0]&&d?f=l[1]??l[0]:f=l[0],this.lastActiveRecord&&(this.lastActiveRecord[Hr.ITEM].tabIndex=-1),this.lastActiveRecord=f,f[Hr.ITEM].tabIndex=0,f[Hr.ITEM].focus()}}const Y3=200,Q3=new Set([Zt.ArrowDown,Zt.ArrowUp,Zt.Home,Zt.End]),mP=new Set([Zt.ArrowLeft,Zt.ArrowRight,...Q3]);function vP(e=document){let t=e.activeElement;for(;t&&t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}class Et extends ft{get openDirection(){return this.menuCorner.split("-")[0]==="start"?"DOWN":"UP"}get anchorElement(){return this.anchor?this.getRootNode().querySelector(`#${this.anchor}`):this.currentAnchorElement}set anchorElement(t){this.currentAnchorElement=t,this.requestUpdate("anchorElement")}constructor(){super(),this.anchor="",this.positioning="absolute",this.quick=!1,this.hasOverflow=!1,this.open=!1,this.xOffset=0,this.yOffset=0,this.noHorizontalFlip=!1,this.noVerticalFlip=!1,this.typeaheadDelay=Y3,this.anchorCorner=J2.END_START,this.menuCorner=J2.START_START,this.stayOpenOnOutsideClick=!1,this.stayOpenOnFocusout=!1,this.skipRestoreFocus=!1,this.defaultFocus=ui.FIRST_ITEM,this.noNavigationWrap=!1,this.typeaheadActive=!0,this.isSubmenu=!1,this.pointerPath=[],this.isRepositioning=!1,this.openCloseAnimationSignal=y9(),this.listController=new cP({isItem:t=>t.hasAttribute("md-menu-item"),getPossibleItems:()=>this.slotItems,isRtl:()=>getComputedStyle(this).direction==="rtl",deactivateItem:t=>{t.selected=!1,t.tabIndex=-1},activateItem:t=>{t.selected=!0,t.tabIndex=0},isNavigableKey:t=>{if(!this.isSubmenu)return mP.has(t);const o=getComputedStyle(this).direction==="rtl"?Zt.ArrowLeft:Zt.ArrowRight;return t===o?!0:Q3.has(t)},wrapNavigation:()=>!this.noNavigationWrap}),this.lastFocusedElement=null,this.typeaheadController=new pP(()=>({getItems:()=>this.items,typeaheadBufferTime:this.typeaheadDelay,active:this.typeaheadActive})),this.currentAnchorElement=null,this.internals=this.attachInternals(),this.menuPositionController=new hP(this,()=>({anchorCorner:this.anchorCorner,surfaceCorner:this.menuCorner,surfaceEl:this.surfaceEl,anchorEl:this.anchorElement,positioning:this.positioning==="popover"?"document":this.positioning,isOpen:this.open,xOffset:this.xOffset,yOffset:this.yOffset,disableBlockFlip:this.noVerticalFlip,disableInlineFlip:this.noHorizontalFlip,onOpen:this.onOpened,beforeClose:this.beforeClose,onClose:this.onClosed,repositionStrategy:this.hasOverflow&&this.positioning!=="popover"?"move":"resize"})),this.onWindowResize=()=>{this.isRepositioning||this.positioning!=="document"&&this.positioning!=="fixed"&&this.positioning!=="popover"||(this.isRepositioning=!0,this.reposition(),this.isRepositioning=!1)},this.handleFocusout=async t=>{const i=this.anchorElement;if(this.stayOpenOnFocusout||!this.open||this.pointerPath.includes(i))return;if(t.relatedTarget){if(Mv(t.relatedTarget,this)||this.pointerPath.length!==0&&Mv(t.relatedTarget,i))return}else if(this.pointerPath.includes(this))return;const o=this.skipRestoreFocus;this.skipRestoreFocus=!0,this.close(),await this.updateComplete,this.skipRestoreFocus=o},this.onOpened=async()=>{this.lastFocusedElement=vP();const t=this.items,i=Ol(t);i&&this.defaultFocus!==ui.NONE&&(i.item.tabIndex=-1);let o=!this.quick;switch(this.quick?this.dispatchEvent(new Event("opening")):o=!!await this.animateOpen(),this.defaultFocus){case ui.FIRST_ITEM:const s=ny(t);s&&(s.tabIndex=0,s.focus(),await s.updateComplete);break;case ui.LAST_ITEM:const l=K3(t);l&&(l.tabIndex=0,l.focus(),await l.updateComplete);break;case ui.LIST_ROOT:this.focus();break;default:case ui.NONE:break}o||this.dispatchEvent(new Event("opened"))},this.beforeClose=async()=>{this.open=!1,this.skipRestoreFocus||this.lastFocusedElement?.focus?.(),this.quick||await this.animateClose()},this.onClosed=()=>{this.quick&&(this.dispatchEvent(new Event("closing")),this.dispatchEvent(new Event("closed")))},this.onWindowPointerdown=t=>{this.pointerPath=t.composedPath()},this.onDocumentClick=t=>{if(!this.open)return;const i=t.composedPath();!this.stayOpenOnOutsideClick&&!i.includes(this)&&!i.includes(this.anchorElement)&&(this.open=!1)},this.internals.role="menu",this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keydown",this.captureKeydown,{capture:!0}),this.addEventListener("focusout",this.handleFocusout)}get items(){return this.listController.items}willUpdate(t){if(t.has("open")){if(this.open){this.removeAttribute("aria-hidden");return}this.setAttribute("aria-hidden","true")}}update(t){t.has("open")&&(this.open?this.setUpGlobalEventListeners():this.cleanUpGlobalEventListeners()),t.has("positioning")&&this.positioning==="popover"&&!this.showPopover&&(this.positioning="fixed"),super.update(t)}connectedCallback(){super.connectedCallback(),this.open&&this.setUpGlobalEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.cleanUpGlobalEventListeners()}getBoundingClientRect(){return this.surfaceEl?this.surfaceEl.getBoundingClientRect():super.getBoundingClientRect()}getClientRects(){return this.surfaceEl?this.surfaceEl.getClientRects():super.getClientRects()}render(){return this.renderSurface()}renderSurface(){return ue`
+      <div
+        class="menu ${xr(this.getSurfaceClasses())}"
+        style=${Uu(this.menuPositionController.surfaceStyles)}
+        popover=${this.positioning==="popover"?"manual":ae}>
+        ${this.renderElevation()}
+        <div class="items">
+          <div class="item-padding"> ${this.renderMenuItems()} </div>
+        </div>
+      </div>
+    `}renderMenuItems(){return ue`<slot
+      @close-menu=${this.onCloseMenu}
+      @deactivate-items=${this.onDeactivateItems}
+      @request-activation=${this.onRequestActivation}
+      @deactivate-typeahead=${this.handleDeactivateTypeahead}
+      @activate-typeahead=${this.handleActivateTypeahead}
+      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+      @close-on-focusout=${this.handleCloseOnFocusout}
+      @slotchange=${this.listController.onSlotchange}></slot>`}renderElevation(){return ue`<md-elevation part="elevation"></md-elevation>`}getSurfaceClasses(){return{open:this.open,fixed:this.positioning==="fixed","has-overflow":this.hasOverflow}}captureKeydown(t){t.target===this&&!t.defaultPrevented&&G3(t.code)&&(t.preventDefault(),this.close()),this.typeaheadController.onKeydown(t)}async animateOpen(){const t=this.surfaceEl,i=this.slotEl;if(!t||!i)return!0;const o=this.openDirection;this.dispatchEvent(new Event("opening")),t.classList.toggle("animating",!0);const s=this.openCloseAnimationSignal.start(),l=t.offsetHeight,d=o==="UP",f=this.items,h=500,m=50,g=250,y=(h-g)/f.length,b=t.animate([{height:"0px"},{height:`${l}px`}],{duration:h,easing:Oi.EMPHASIZED}),_=i.animate([{transform:d?`translateY(-${l}px)`:""},{transform:""}],{duration:h,easing:Oi.EMPHASIZED}),E=t.animate([{opacity:0},{opacity:1}],m),T=[];for(let C=0;C<f.length;C++){const z=d?f.length-1-C:C,B=f[z],H=B.animate([{opacity:0},{opacity:1}],{duration:g,delay:y*C});B.classList.toggle("md-menu-hidden",!0),H.addEventListener("finish",()=>{B.classList.toggle("md-menu-hidden",!1)}),T.push([B,H])}let O=C=>{};const D=new Promise(C=>{O=C});return s.addEventListener("abort",()=>{b.cancel(),_.cancel(),E.cancel(),T.forEach(([C,z])=>{C.classList.toggle("md-menu-hidden",!1),z.cancel()}),O(!0)}),b.addEventListener("finish",()=>{t.classList.toggle("animating",!1),this.openCloseAnimationSignal.finish(),O(!1)}),await D}animateClose(){let t;const i=new Promise(H=>{t=H}),o=this.surfaceEl,s=this.slotEl;if(!o||!s)return t(!1),i;const d=this.openDirection==="UP";this.dispatchEvent(new Event("closing")),o.classList.toggle("animating",!0);const f=this.openCloseAnimationSignal.start(),h=o.offsetHeight,m=this.items,g=150,y=50,b=g-y,_=50,E=50,T=.35,O=(g-E-_)/m.length,D=o.animate([{height:`${h}px`},{height:`${h*T}px`}],{duration:g,easing:Oi.EMPHASIZED_ACCELERATE}),C=s.animate([{transform:""},{transform:d?`translateY(-${h*(1-T)}px)`:""}],{duration:g,easing:Oi.EMPHASIZED_ACCELERATE}),z=o.animate([{opacity:1},{opacity:0}],{duration:y,delay:b}),B=[];for(let H=0;H<m.length;H++){const ne=d?H:m.length-1-H,X=m[ne],A=X.animate([{opacity:1},{opacity:0}],{duration:_,delay:E+O*H});A.addEventListener("finish",()=>{X.classList.toggle("md-menu-hidden",!0)}),B.push([X,A])}return f.addEventListener("abort",()=>{D.cancel(),C.cancel(),z.cancel(),B.forEach(([H,ne])=>{ne.cancel(),H.classList.toggle("md-menu-hidden",!1)}),t(!1)}),D.addEventListener("finish",()=>{o.classList.toggle("animating",!1),B.forEach(([H])=>{H.classList.toggle("md-menu-hidden",!1)}),this.openCloseAnimationSignal.finish(),this.dispatchEvent(new Event("closed")),t(!0)}),i}handleKeydown(t){this.pointerPath=[],this.listController.handleKeydown(t)}setUpGlobalEventListeners(){document.addEventListener("click",this.onDocumentClick,{capture:!0}),window.addEventListener("pointerdown",this.onWindowPointerdown),document.addEventListener("resize",this.onWindowResize,{passive:!0}),window.addEventListener("resize",this.onWindowResize,{passive:!0})}cleanUpGlobalEventListeners(){document.removeEventListener("click",this.onDocumentClick,{capture:!0}),window.removeEventListener("pointerdown",this.onWindowPointerdown),document.removeEventListener("resize",this.onWindowResize),window.removeEventListener("resize",this.onWindowResize)}onCloseMenu(){this.close()}onDeactivateItems(t){t.stopPropagation(),this.listController.onDeactivateItems()}onRequestActivation(t){t.stopPropagation(),this.listController.onRequestActivation(t)}handleDeactivateTypeahead(t){t.stopPropagation(),this.typeaheadActive=!1}handleActivateTypeahead(t){t.stopPropagation(),this.typeaheadActive=!0}handleStayOpenOnFocusout(t){t.stopPropagation(),this.stayOpenOnFocusout=!0}handleCloseOnFocusout(t){t.stopPropagation(),this.stayOpenOnFocusout=!1}close(){this.open=!1,this.slotItems.forEach(i=>{i.close?.()})}show(){this.open=!0}activateNextItem(){return this.listController.activateNextItem()??null}activatePreviousItem(){return this.listController.activatePreviousItem()??null}reposition(){this.open&&this.menuPositionController.position()}}j([at(".menu")],Et.prototype,"surfaceEl",void 0);j([at("slot")],Et.prototype,"slotEl",void 0);j([K()],Et.prototype,"anchor",void 0);j([K()],Et.prototype,"positioning",void 0);j([K({type:Boolean})],Et.prototype,"quick",void 0);j([K({type:Boolean,attribute:"has-overflow"})],Et.prototype,"hasOverflow",void 0);j([K({type:Boolean,reflect:!0})],Et.prototype,"open",void 0);j([K({type:Number,attribute:"x-offset"})],Et.prototype,"xOffset",void 0);j([K({type:Number,attribute:"y-offset"})],Et.prototype,"yOffset",void 0);j([K({type:Boolean,attribute:"no-horizontal-flip"})],Et.prototype,"noHorizontalFlip",void 0);j([K({type:Boolean,attribute:"no-vertical-flip"})],Et.prototype,"noVerticalFlip",void 0);j([K({type:Number,attribute:"typeahead-delay"})],Et.prototype,"typeaheadDelay",void 0);j([K({attribute:"anchor-corner"})],Et.prototype,"anchorCorner",void 0);j([K({attribute:"menu-corner"})],Et.prototype,"menuCorner",void 0);j([K({type:Boolean,attribute:"stay-open-on-outside-click"})],Et.prototype,"stayOpenOnOutsideClick",void 0);j([K({type:Boolean,attribute:"stay-open-on-focusout"})],Et.prototype,"stayOpenOnFocusout",void 0);j([K({type:Boolean,attribute:"skip-restore-focus"})],Et.prototype,"skipRestoreFocus",void 0);j([K({attribute:"default-focus"})],Et.prototype,"defaultFocus",void 0);j([K({type:Boolean,attribute:"no-navigation-wrap"})],Et.prototype,"noNavigationWrap",void 0);j([sn({flatten:!0})],Et.prototype,"slotItems",void 0);j([yt()],Et.prototype,"typeaheadActive",void 0);const gP=Ye`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}
+`;let Dv=class extends Et{};Dv.styles=[gP];Dv=j([bt("md-menu")],Dv);class yP extends Jg{computeValidity(t){return this.selectControl||(this.selectControl=document.createElement("select")),qg(ue`<option value=${t.value}></option>`,this.selectControl),this.selectControl.value=t.value,this.selectControl.required=t.required,{validity:this.selectControl.validity,validationMessage:this.selectControl.validationMessage}}equals(t,i){return t.value===i.value&&t.required===i.required}copy({value:t,required:i}){return{value:t,required:i}}}function bP(e){const t=[];for(let i=0;i<e.length;i++){const o=e[i];o.selected&&t.push([o,i])}return t}var e_;const iu=Symbol("value"),xP=ln(R3(nf(of(os(ft)))));class ht extends xP{get value(){return this[iu]}set value(t){this.lastUserSetValue=t,this.select(t)}get options(){return this.menu?.items??[]}get selectedIndex(){const[t,i]=(this.getSelectedOptions()??[])[0]??[];return i??-1}set selectedIndex(t){this.lastUserSetSelectedIndex=t,this.selectIndex(t)}get selectedOptions(){return(this.getSelectedOptions()??[]).map(([t])=>t)}get hasError(){return this.error||this.nativeError}constructor(){super(),this.quick=!1,this.required=!1,this.errorText="",this.label="",this.noAsterisk=!1,this.supportingText="",this.error=!1,this.menuPositioning="popover",this.clampMenuWidth=!1,this.typeaheadDelay=Y3,this.hasLeadingIcon=!1,this.displayText="",this.menuAlign="start",this[e_]="",this.lastUserSetValue=null,this.lastUserSetSelectedIndex=null,this.lastSelectedOption=null,this.lastSelectedOptionRecords=[],this.nativeError=!1,this.nativeErrorText="",this.focused=!1,this.open=!1,this.defaultFocus=ui.NONE,this.prevOpen=this.open,this.selectWidth=0,this.addEventListener("focus",this.handleFocus.bind(this)),this.addEventListener("blur",this.handleBlur.bind(this))}select(t){const i=this.options.find(o=>o.value===t);i&&this.selectItem(i)}selectIndex(t){const i=this.options[t];i&&this.selectItem(i)}reset(){for(const t of this.options)t.selected=t.hasAttribute("selected");this.updateValueAndDisplayText(),this.nativeError=!1,this.nativeErrorText=""}showPicker(){this.open=!0}[(e_=iu,Iu)](t){t?.preventDefault();const i=this.getErrorText();this.nativeError=!!t,this.nativeErrorText=this.validationMessage,i===this.getErrorText()&&this.field?.reannounceError()}update(t){if(this.hasUpdated||this.initUserSelection(),this.prevOpen!==this.open&&this.open){const i=this.getBoundingClientRect();this.selectWidth=i.width}this.prevOpen=this.open,super.update(t)}render(){return ue`
+      <span
+        class="select ${xr(this.getRenderClasses())}"
+        @focusout=${this.handleFocusout}>
+        ${this.renderField()} ${this.renderMenu()}
+      </span>
+    `}async firstUpdated(t){await this.menu?.updateComplete,this.lastSelectedOptionRecords.length||this.initUserSelection(),!this.lastSelectedOptionRecords.length&&!this.options.length&&setTimeout(()=>{this.updateValueAndDisplayText()}),super.firstUpdated(t)}getRenderClasses(){return{disabled:this.disabled,error:this.error,open:this.open}}renderField(){const t=this.ariaLabel||this.label;return Zg`
+      <${this.fieldTag}
+          aria-haspopup="listbox"
+          role="combobox"
+          part="field"
+          id="field"
+          tabindex=${this.disabled?"-1":"0"}
+          aria-label=${t||ae}
+          aria-describedby="description"
+          aria-expanded=${this.open?"true":"false"}
+          aria-controls="listbox"
+          class="field"
+          label=${this.label}
+          ?no-asterisk=${this.noAsterisk}
+          .focused=${this.focused||this.open}
+          .populated=${!!this.displayText}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .error=${this.hasError}
+          ?has-start=${this.hasLeadingIcon}
+          has-end
+          supporting-text=${this.supportingText}
+          error-text=${this.getErrorText()}
+          @keydown=${this.handleKeydown}
+          @click=${this.handleClick}>
+         ${this.renderFieldContent()}
+         <div id="description" slot="aria-describedby"></div>
+      </${this.fieldTag}>`}renderFieldContent(){return[this.renderLeadingIcon(),this.renderLabel(),this.renderTrailingIcon()]}renderLeadingIcon(){return ue`
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `}renderTrailingIcon(){return ue`
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}>
+          <svg height="5" viewBox="7 10 10 5" focusable="false">
+            <polygon
+              class="down"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 10 12 15 17 10"></polygon>
+            <polygon
+              class="up"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 15 12 10 17 15"></polygon>
+          </svg>
+        </slot>
+      </span>
+    `}renderLabel(){return ue`<div id="label">${this.displayText||ue`&nbsp;`}</div>`}renderMenu(){const t=this.label||this.ariaLabel;return ue`<div class="menu-wrapper">
+      <md-menu
+        id="listbox"
+        .defaultFocus=${this.defaultFocus}
+        role="listbox"
+        tabindex="-1"
+        aria-label=${t||ae}
+        stay-open-on-focusout
+        part="menu"
+        exportparts="focus-ring: menu-focus-ring"
+        anchor="field"
+        style=${Uu({"--__menu-min-width":`${this.selectWidth}px`,"--__menu-max-width":this.clampMenuWidth?`${this.selectWidth}px`:void 0})}
+        no-navigation-wrap
+        .open=${this.open}
+        .quick=${this.quick}
+        .positioning=${this.menuPositioning}
+        .typeaheadDelay=${this.typeaheadDelay}
+        .anchorCorner=${this.menuAlign==="start"?"end-start":"end-end"}
+        .menuCorner=${this.menuAlign==="start"?"start-start":"start-end"}
+        @opening=${this.handleOpening}
+        @opened=${this.redispatchEvent}
+        @closing=${this.redispatchEvent}
+        @closed=${this.handleClosed}
+        @close-menu=${this.handleCloseMenu}
+        @request-selection=${this.handleRequestSelection}
+        @request-deselection=${this.handleRequestDeselection}>
+        ${this.renderMenuContent()}
+      </md-menu>
+    </div>`}renderMenuContent(){return ue`<slot></slot>`}handleKeydown(t){if(this.open||this.disabled||!this.menu)return;const i=this.menu.typeaheadController,o=t.code==="Space"||t.code==="ArrowDown"||t.code==="ArrowUp"||t.code==="End"||t.code==="Home"||t.code==="Enter";if(!i.isTypingAhead&&o){switch(t.preventDefault(),this.open=!0,t.code){case"Space":case"ArrowDown":case"Enter":this.defaultFocus=ui.NONE;break;case"End":this.defaultFocus=ui.LAST_ITEM;break;case"ArrowUp":case"Home":this.defaultFocus=ui.FIRST_ITEM;break}return}if(t.key.length===1){i.onKeydown(t),t.preventDefault();const{lastActiveRecord:l}=i;if(!l)return;this.labelEl?.setAttribute?.("aria-live","polite"),this.selectItem(l[Hr.ITEM])&&this.dispatchInteractionEvents()}}handleClick(){this.open=!this.open}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1}handleFocusout(t){t.relatedTarget&&Mv(t.relatedTarget,this)||(this.open=!1)}getSelectedOptions(){if(!this.menu)return this.lastSelectedOptionRecords=[],null;const t=this.menu.items;return this.lastSelectedOptionRecords=bP(t),this.lastSelectedOptionRecords}async getUpdateComplete(){return await this.menu?.updateComplete,super.getUpdateComplete()}updateValueAndDisplayText(){const t=this.getSelectedOptions()??[];let i=!1;if(t.length){const[o]=t[0];i=this.lastSelectedOption!==o,this.lastSelectedOption=o,this[iu]=o.value,this.displayText=o.displayText}else i=this.lastSelectedOption!==null,this.lastSelectedOption=null,this[iu]="",this.displayText="";return i}async handleOpening(t){if(this.labelEl?.removeAttribute?.("aria-live"),this.redispatchEvent(t),this.defaultFocus!==ui.NONE)return;const i=this.menu.items,o=Ol(i)?.item;let[s]=this.lastSelectedOptionRecords[0]??[null];o&&o!==s&&(o.tabIndex=-1),s=s??i[0],s&&(s.tabIndex=0,s.focus())}redispatchEvent(t){as(this,t)}handleClosed(t){this.open=!1,this.redispatchEvent(t)}handleCloseMenu(t){const i=t.detail.reason,o=t.detail.itemPath[0];this.open=!1;let s=!1;i.kind==="click-selection"?s=this.selectItem(o):i.kind==="keydown"&&fP(i.key)?s=this.selectItem(o):(o.tabIndex=-1,o.blur()),s&&this.dispatchInteractionEvents()}selectItem(t){return(this.getSelectedOptions()??[]).forEach(([o])=>{t!==o&&(o.selected=!1)}),t.selected=!0,this.updateValueAndDisplayText()}handleRequestSelection(t){const i=t.target;this.lastSelectedOptionRecords.some(([o])=>o===i)||this.selectItem(i)}handleRequestDeselection(t){const i=t.target;this.lastSelectedOptionRecords.some(([o])=>o===i)&&this.updateValueAndDisplayText()}initUserSelection(){this.lastUserSetValue&&!this.lastSelectedOptionRecords.length?this.select(this.lastUserSetValue):this.lastUserSetSelectedIndex!==null&&!this.lastSelectedOptionRecords.length?this.selectIndex(this.lastUserSetSelectedIndex):this.updateValueAndDisplayText()}handleIconChange(){this.hasLeadingIcon=this.leadingIcons.length>0}dispatchInteractionEvents(){this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}getErrorText(){return this.error?this.errorText:this.nativeErrorText}[Mo](){return this.value}formResetCallback(){this.reset()}formStateRestoreCallback(t){this.value=t}click(){this.field?.click()}[Wa](){return new yP(()=>this)}[Za](){return this.field}}ht.shadowRootOptions={...ft.shadowRootOptions,delegatesFocus:!0};j([K({type:Boolean})],ht.prototype,"quick",void 0);j([K({type:Boolean})],ht.prototype,"required",void 0);j([K({type:String,attribute:"error-text"})],ht.prototype,"errorText",void 0);j([K()],ht.prototype,"label",void 0);j([K({type:Boolean,attribute:"no-asterisk"})],ht.prototype,"noAsterisk",void 0);j([K({type:String,attribute:"supporting-text"})],ht.prototype,"supportingText",void 0);j([K({type:Boolean,reflect:!0})],ht.prototype,"error",void 0);j([K({attribute:"menu-positioning"})],ht.prototype,"menuPositioning",void 0);j([K({type:Boolean,attribute:"clamp-menu-width"})],ht.prototype,"clampMenuWidth",void 0);j([K({type:Number,attribute:"typeahead-delay"})],ht.prototype,"typeaheadDelay",void 0);j([K({type:Boolean,attribute:"has-leading-icon"})],ht.prototype,"hasLeadingIcon",void 0);j([K({attribute:"display-text"})],ht.prototype,"displayText",void 0);j([K({attribute:"menu-align"})],ht.prototype,"menuAlign",void 0);j([K()],ht.prototype,"value",null);j([K({type:Number,attribute:"selected-index"})],ht.prototype,"selectedIndex",null);j([yt()],ht.prototype,"nativeError",void 0);j([yt()],ht.prototype,"nativeErrorText",void 0);j([yt()],ht.prototype,"focused",void 0);j([yt()],ht.prototype,"open",void 0);j([yt()],ht.prototype,"defaultFocus",void 0);j([at(".field")],ht.prototype,"field",void 0);j([at("md-menu")],ht.prototype,"menu",void 0);j([at("#label")],ht.prototype,"labelEl",void 0);j([sn({slot:"leading-icon",flatten:!0})],ht.prototype,"leadingIcons",void 0);class wP extends ht{constructor(){super(...arguments),this.fieldTag=Lo`md-outlined-field`}}const _P=Ye`:host{--_text-field-disabled-input-text-color: var(--md-outlined-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-outlined-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-outlined-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-outlined-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-outlined-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-outlined-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-outline-color: var(--md-outlined-select-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-outline-opacity: var(--md-outlined-select-text-field-disabled-outline-opacity, 0.12);--_text-field-disabled-outline-width: var(--md-outlined-select-text-field-disabled-outline-width, 1px);--_text-field-disabled-supporting-text-color: var(--md-outlined-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-outlined-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-outlined-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-outlined-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-focus-input-text-color: var(--md-outlined-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-outlined-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-outlined-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-outline-color: var(--md-outlined-select-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-supporting-text-color: var(--md-outlined-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-outlined-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-input-text-color: var(--md-outlined-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-outlined-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-outlined-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-outline-color: var(--md-outlined-select-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-supporting-text-color: var(--md-outlined-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-outlined-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-outlined-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-outlined-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-outlined-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-outline-color: var(--md-outlined-select-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-supporting-text-color: var(--md-outlined-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-outlined-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-input-text-color: var(--md-outlined-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-outlined-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-outlined-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-outline-color: var(--md-outlined-select-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-outline-width: var(--md-outlined-select-text-field-focus-outline-width, 3px);--_text-field-focus-supporting-text-color: var(--md-outlined-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-outlined-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-input-text-color: var(--md-outlined-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-outlined-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-outlined-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-outline-color: var(--md-outlined-select-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-outline-width: var(--md-outlined-select-text-field-hover-outline-width, 1px);--_text-field-hover-supporting-text-color: var(--md-outlined-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-outlined-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-outlined-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-outlined-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-outlined-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-outlined-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-outlined-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-outlined-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-outlined-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-outlined-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-outlined-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-outlined-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-outlined-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-outlined-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-outlined-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-outlined-select-text-field-leading-icon-size, 24px);--_text-field-outline-color: var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_text-field-outline-width: var(--md-outlined-select-text-field-outline-width, 1px);--_text-field-supporting-text-color: var(--md-outlined-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-outlined-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-outlined-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-outlined-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-outlined-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-outlined-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-outlined-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-outlined-select-text-field-container-shape-start-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-outlined-select-text-field-container-shape-start-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-outlined-select-text-field-container-shape-end-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-start: var(--md-outlined-select-text-field-container-shape-end-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--md-outlined-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-outlined-field-content-color: var(--_text-field-input-text-color);--md-outlined-field-content-font: var(--_text-field-input-text-font);--md-outlined-field-content-line-height: var(--_text-field-input-text-line-height);--md-outlined-field-content-size: var(--_text-field-input-text-size);--md-outlined-field-content-weight: var(--_text-field-input-text-weight);--md-outlined-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_text-field-disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_text-field-disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_text-field-disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_text-field-error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_text-field-error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_text-field-error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_text-field-error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_text-field-focus-outline-color);--md-outlined-field-focus-outline-width: var(--_text-field-focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_text-field-hover-outline-color);--md-outlined-field-hover-outline-width: var(--_text-field-hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_text-field-label-text-color);--md-outlined-field-label-text-font: var(--_text-field-label-text-font);--md-outlined-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-outlined-field-label-text-size: var(--_text-field-label-text-size);--md-outlined-field-label-text-weight: var(--_text-field-label-text-weight);--md-outlined-field-leading-content-color: var(--_text-field-leading-icon-color);--md-outlined-field-outline-color: var(--_text-field-outline-color);--md-outlined-field-outline-width: var(--_text-field-outline-width);--md-outlined-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-outlined-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-outlined-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
+`;const SP=Ye`:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu{min-width:var(--__menu-min-width);max-width:var(--__menu-max-width, inherit)}.menu-wrapper{width:0px;height:0px;max-width:inherit}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}
+`;let zv=class extends wP{};zv.styles=[SP,_P];zv=j([bt("md-outlined-select")],zv);const EP=Ye`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item{background-color:var(--md-menu-item-container-color, transparent)}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}
+`;class oy extends ft{constructor(){super(...arguments),this.multiline=!1}render(){return ue`
+      <slot name="container"></slot>
+      <slot class="non-text" name="start"></slot>
+      <div class="text">
+        <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          class="default-slot"
+          @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          name="supporting-text"
+          @slotchange=${this.handleTextSlotChange}></slot>
+      </div>
+      <slot class="non-text" name="trailing-supporting-text"></slot>
+      <slot class="non-text" name="end"></slot>
+    `}handleTextSlotChange(){let t=!1,i=0;for(const o of this.textSlots)if(TP(o)&&(i+=1),i>1){t=!0;break}this.multiline=t}}j([K({type:Boolean,reflect:!0})],oy.prototype,"multiline",void 0);j([i9(".text slot")],oy.prototype,"textSlots",void 0);function TP(e){for(const t of e.assignedNodes({flatten:!0})){const i=t.nodeType===Node.ELEMENT_NODE,o=t.nodeType===Node.TEXT_NODE&&t.textContent?.match(/\S/);if(i||o)return!0}return!1}const OP=Ye`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}
+`;let Pv=class extends oy{};Pv.styles=[OP];Pv=j([bt("md-item")],Pv);class CP{constructor(t,i){this.host=t,this.internalTypeaheadText=null,this.onClick=()=>{this.host.keepOpen||this.host.dispatchEvent(W2(this.host,{kind:Z2.CLICK_SELECTION}))},this.onKeydown=o=>{if(this.host.href&&o.code==="Enter"){const l=this.getInteractiveElement();l instanceof HTMLAnchorElement&&l.click()}if(o.defaultPrevented)return;const s=o.code;this.host.keepOpen&&s!=="Escape"||G3(s)&&(o.preventDefault(),this.host.dispatchEvent(W2(this.host,{kind:Z2.KEYDOWN,key:s})))},this.getHeadlineElements=i.getHeadlineElements,this.getSupportingTextElements=i.getSupportingTextElements,this.getDefaultElements=i.getDefaultElements,this.getInteractiveElement=i.getInteractiveElement,this.host.addController(this)}get typeaheadText(){if(this.internalTypeaheadText!==null)return this.internalTypeaheadText;const t=this.getHeadlineElements(),i=[];return t.forEach(o=>{o.textContent&&o.textContent.trim()&&i.push(o.textContent.trim())}),i.length===0&&this.getDefaultElements().forEach(o=>{o.textContent&&o.textContent.trim()&&i.push(o.textContent.trim())}),i.length===0&&this.getSupportingTextElements().forEach(o=>{o.textContent&&o.textContent.trim()&&i.push(o.textContent.trim())}),i.join(" ")}get tagName(){switch(this.host.type){case"link":return"a";case"button":return"button";default:case"menuitem":case"option":return"li"}}get role(){return this.host.type==="option"?"option":"menuitem"}hostConnected(){this.host.toggleAttribute("md-menu-item",!0)}hostUpdate(){this.host.href&&(this.host.type="link")}setTypeaheadText(t){this.internalTypeaheadText=t}}function AP(){return new Event("request-selection",{bubbles:!0,composed:!0})}function RP(){return new Event("request-deselection",{bubbles:!0,composed:!0})}class jP{get role(){return this.menuItemController.role}get typeaheadText(){return this.menuItemController.typeaheadText}setTypeaheadText(t){this.menuItemController.setTypeaheadText(t)}get displayText(){return this.internalDisplayText!==null?this.internalDisplayText:this.menuItemController.typeaheadText}setDisplayText(t){this.internalDisplayText=t}constructor(t,i){this.host=t,this.internalDisplayText=null,this.firstUpdate=!0,this.onClick=()=>{this.menuItemController.onClick()},this.onKeydown=o=>{this.menuItemController.onKeydown(o)},this.lastSelected=this.host.selected,this.menuItemController=new CP(t,i),t.addController(this)}hostUpdate(){this.lastSelected!==this.host.selected&&(this.host.ariaSelected=this.host.selected?"true":"false")}hostUpdated(){this.lastSelected!==this.host.selected&&!this.firstUpdate&&(this.host.selected?this.host.dispatchEvent(AP()):this.host.dispatchEvent(RP())),this.lastSelected=this.host.selected,this.firstUpdate=!1}}const kP=ln(ft);class Jr extends kP{constructor(){super(...arguments),this.disabled=!1,this.isMenuItem=!0,this.selected=!1,this.value="",this.type="option",this.selectOptionController=new jP(this,{getHeadlineElements:()=>this.headlineElements,getSupportingTextElements:()=>this.supportingTextElements,getDefaultElements:()=>this.defaultElements,getInteractiveElement:()=>this.listItemRoot})}get typeaheadText(){return this.selectOptionController.typeaheadText}set typeaheadText(t){this.selectOptionController.setTypeaheadText(t)}get displayText(){return this.selectOptionController.displayText}set displayText(t){this.selectOptionController.setDisplayText(t)}render(){return this.renderListItem(ue`
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()} ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `)}renderListItem(t){return ue`
+      <li
+        id="item"
+        tabindex=${this.disabled?-1:0}
+        role=${this.selectOptionController.role}
+        aria-label=${this.ariaLabel||ae}
+        aria-selected=${this.ariaSelected||ae}
+        aria-checked=${this.ariaChecked||ae}
+        aria-expanded=${this.ariaExpanded||ae}
+        aria-haspopup=${this.ariaHasPopup||ae}
+        class="list-item ${xr(this.getRenderClasses())}"
+        @click=${this.selectOptionController.onClick}
+        @keydown=${this.selectOptionController.onKeydown}
+        >${t}</li
+      >
+    `}renderRipple(){return ue` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}></md-ripple>`}renderFocusRing(){return ue` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return ue`
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
+    `}focus(){this.listItemRoot?.focus()}}Jr.shadowRootOptions={...ft.shadowRootOptions,delegatesFocus:!0};j([K({type:Boolean,reflect:!0})],Jr.prototype,"disabled",void 0);j([K({type:Boolean,attribute:"md-menu-item",reflect:!0})],Jr.prototype,"isMenuItem",void 0);j([K({type:Boolean})],Jr.prototype,"selected",void 0);j([K()],Jr.prototype,"value",void 0);j([at(".list-item")],Jr.prototype,"listItemRoot",void 0);j([sn({slot:"headline"})],Jr.prototype,"headlineElements",void 0);j([sn({slot:"supporting-text"})],Jr.prototype,"supportingTextElements",void 0);j([n9({slot:""})],Jr.prototype,"defaultElements",void 0);j([K({attribute:"typeahead-text"})],Jr.prototype,"typeaheadText",null);j([K({attribute:"display-text"})],Jr.prototype,"displayText",null);let Lv=class extends Jr{};Lv.styles=[EP];Lv=j([bt("md-select-option")],Lv);function Tc({ariaLabel:e,className:t,describedBy:i,disabled:o=!1,error:s=!1,errorText:l,label:d,leadingIcon:f,onChange:h,options:m,required:g=!1,supportingText:y,value:b}){const _=w.useRef(null);w.useEffect(()=>{const T=_.current;if(!T)throw new Error("MaterialSelect rendered before md-outlined-select was registered.");const O=()=>h(MP(T));return T.addEventListener("change",O),()=>T.removeEventListener("change",O)},[h]),w.useEffect(()=>{const T=_.current;if(!T)throw new Error("MaterialSelect rendered before md-outlined-select was registered.");T.label=d,T.disabled=o,T.error=s,T.errorText=l??"",T.required=g,T.supportingText=y??"",T.menuPositioning="popover",T.clampMenuWidth=!0,T.value=b,d?T.setAttribute("label",d):T.removeAttribute("label"),e?T.setAttribute("aria-label",e):T.removeAttribute("aria-label"),i?T.setAttribute("aria-describedby",i):T.removeAttribute("aria-describedby")},[e,i,o,s,l,d,g,y,b,m]);const E=DP(t,"material-select--single-line");return v.jsxs("md-outlined-select",{ref:_,className:E,children:[f?v.jsx("span",{"aria-hidden":"true",className:"material-select-leading-node",slot:"leading-icon",children:f}):null,m.map(T=>v.jsx(zP,{label:T.label,leadingIcon:T.leadingIcon,selected:T.value===b,value:T.value},T.value))]})}function MP(e){if(e.value)return e.value;const t=Array.from(e.querySelectorAll("md-select-option")).find(i=>i.selected);return t?.value||t?.getAttribute("value")||t?.getAttribute("data-value")||""}function DP(...e){return e.filter(Boolean).join(" ")}function zP({label:e,leadingIcon:t,selected:i,value:o}){const s=w.useRef(null);return w.useEffect(()=>{const l=s.current;if(!l)throw new Error("MaterialSelectOption rendered before md-select-option was registered.");l.value=o,l.displayText=e,l.selected=i},[e,i,o]),v.jsxs("md-select-option",{ref:s,"data-value":o,"display-text":e,selected:i,value:o,children:[t?v.jsx("span",{"aria-hidden":"true",className:"material-select-option-icon",slot:"start",children:t}):null,v.jsx("span",{slot:"headline",children:e})]})}const X3=Symbol("dispatchHooks");function PP(e,t){const i=e[X3];if(!i)throw new Error(`'${e.type}' event needs setupDispatchHooks().`);i.addEventListener("after",t)}const t_=new WeakMap;function LP(e,...t){let i=t_.get(e);i||(i=new Set,t_.set(e,i));for(const o of t){if(i.has(o))continue;let s=!1;e.addEventListener(o,l=>{if(s)return;l.stopImmediatePropagation();const d=Reflect.construct(l.constructor,[l.type,l]),f=new EventTarget;d[X3]=f,s=!0;const h=e.dispatchEvent(d);s=!1,h||l.preventDefault(),f.dispatchEvent(new Event("after"))},{capture:!0}),i.add(o)}}const NP=ln(nf(of(os(ft))));class Zn extends NP{constructor(){super(),this.selected=!1,this.icons=!1,this.showOnlySelectedIcon=!1,this.required=!1,this.value="on",this.addEventListener("click",t=>{!Wg(t)||!this.input||(this.focus(),Xg(this.input))}),LP(this,"keydown"),this.addEventListener("keydown",t=>{PP(t,()=>{t.defaultPrevented||t.key!=="Enter"||this.disabled||!this.input||this.input.click()})})}render(){return ue`
+      <div class="switch ${xr(this.getRenderClasses())}">
+        <input
+          id="switch"
+          class="touch"
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel||ae}
+          ?checked=${this.selected}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @input=${this.handleInput}
+          @change=${this.handleChange} />
+
+        <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
+        <span class="track"> ${this.renderHandle()} </span>
+      </div>
+    `}getRenderClasses(){return{selected:this.selected,unselected:!this.selected,disabled:this.disabled}}renderHandle(){const t={"with-icon":this.showOnlySelectedIcon?this.selected:this.icons};return ue`
+      ${this.renderTouchTarget()}
+      <span class="handle-container">
+        <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
+        <span class="handle ${xr(t)}">
+          ${this.shouldShowIcons()?this.renderIcons():ue``}
+        </span>
+      </span>
+    `}renderIcons(){return ue`
+      <div class="icons">
+        ${this.renderOnIcon()}
+        ${this.showOnlySelectedIcon?ue``:this.renderOffIcon()}
+      </div>
+    `}renderOnIcon(){return ue`
+      <slot class="icon icon--on" name="on-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
+        </svg>
+      </slot>
+    `}renderOffIcon(){return ue`
+      <slot class="icon icon--off" name="off-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
+        </svg>
+      </slot>
+    `}renderTouchTarget(){return ue`<span class="touch"></span>`}shouldShowIcons(){return this.icons||this.showOnlySelectedIcon}handleInput(t){const i=t.target;this.selected=i.checked}handleChange(t){as(this,t)}[Mo](){return this.selected?this.value:null}[Bu](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected")}formStateRestoreCallback(t){this.selected=t==="true"}[Wa](){return new O3(()=>({checked:this.selected,required:this.required}))}[Za](){return this.input}}Zn.shadowRootOptions={mode:"open",delegatesFocus:!0};j([K({type:Boolean})],Zn.prototype,"selected",void 0);j([K({type:Boolean})],Zn.prototype,"icons",void 0);j([K({type:Boolean,attribute:"show-only-selected-icon"})],Zn.prototype,"showOnlySelectedIcon",void 0);j([K({type:Boolean})],Zn.prototype,"required",void 0);j([K()],Zn.prototype,"value",void 0);j([at("input")],Zn.prototype,"input",void 0);const $P=Ye`@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}input{appearance:none;height:max(100%,var(--md-switch-touch-target-size, 48px));outline:none;margin:0;position:absolute;width:max(100%,var(--md-switch-touch-target-size, 48px));z-index:1;cursor:inherit;top:50%;left:50%;transform:translate(-50%, -50%)}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}
+`;let Nv=class extends Zn{};Nv.styles=[$P];Nv=j([bt("md-switch")],Nv);function Io({disabled:e=!1,label:t,onChange:i,selected:o}){const s=w.useRef(null);return w.useEffect(()=>{const l=s.current;if(!l)throw new Error("MaterialSwitch rendered before md-switch was registered.");const d=()=>i(l.selected);return l.addEventListener("change",d),()=>l.removeEventListener("change",d)},[i]),w.useEffect(()=>{if(!s.current)throw new Error("MaterialSwitch rendered before md-switch was registered.");s.current.selected=o},[o]),w.useEffect(()=>{if(!s.current)throw new Error("MaterialSwitch rendered before md-switch was registered.");s.current.disabled=e},[e]),v.jsx("md-switch",{ref:s,"aria-label":t})}const W3=w.createContext(null);function BP({report:e,children:t}){return v.jsx(W3.Provider,{value:e,children:t})}function ss(e,t){const i=w.useContext(W3);w.useEffect(()=>{i?.(e,t)},[i,e,t]),w.useEffect(()=>()=>{i?.(e,"idle")},[i,e])}function UP({options:e,value:t,onChange:i,disabled:o=!1,describedBy:s,error:l,errorText:d,ariaLabel:f,leadingIcon:h,placeholder:m,required:g,supportingText:y}){return v.jsx(Tc,{ariaLabel:f,describedBy:s,disabled:o,error:l,errorText:d,label:f??m??"",leadingIcon:h,options:e.map(b=>({value:b.value,label:b.label,leadingIcon:b.leadingIcon})),required:g,supportingText:y,value:t,onChange:i})}const nu=12,IP=8,r_=320;function ay(e,t){const[i,o]=w.useState();return w.useEffect(()=>{if(!t){o(void 0);return}function s(){const l=e.current;if(!l){o(void 0);return}o(VP(l.getBoundingClientRect()))}return s(),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0),()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0)}},[e,t]),i}function VP(e){const t=Math.max(window.innerWidth||r_,nu*2),i=Math.max(0,t-nu*2),o=Math.min(r_,i),s=e.right-o,l=t-nu-o;return{left:Math.round(FP(s,nu,l)),maxWidth:Math.round(i),top:Math.round(e.bottom+IP)}}function FP(e,t,i){return Math.min(Math.max(e,t),Math.max(t,i))}function HP({field:e,value:t,onChange:i,onCommit:o,onCommitValue:s,clearSecretDraft:l=!1,disabled:d=!1,idPrefix:f,docPath:h,error:m,options:g,warning:y,leadingIconNode:b,objectDisplay:_="collapsible"}){const{locale:E,t:T}=Oe(),O=w.useMemo(()=>`schema-field-${f?`${f}-`:""}${e.path}`.replace(/[^a-zA-Z0-9_-]/g,"-"),[e.path,f]),[D,C]=w.useState(a_(e,t)),[z,B]=w.useState(""),[H,ne]=w.useState(!1),[X,A]=w.useState(!1),le=w.useRef(void 0),ee=w.useRef(null),J=GP(e,h,E);w.useEffect(()=>{if(Ha(e)){typeof t=="string"&&t===le.current?C(t):(le.current=void 0,C("")),B("");return}C(a_(e,t)),B("")},[e,t]),w.useEffect(()=>{!l||!Ha(e)||(le.current=void 0,C(""),B(""))},[l,e]);const ce=tL(e),_e=`${O}-error`,ie=`${O}-warning`,xe=`${O}-help`,N=rL(e,J,h,E,{default:T("configDoc.default"),defaultEmpty:T("configDoc.default.empty"),optional:T("configDoc.optional"),required:T("configDoc.required"),restartMayBeRequired:T("configDoc.restartMayBeRequired"),savedRealtime:T("configDoc.savedRealtime"),sensitive:T("configDoc.sensitive"),type:T("configDoc.type"),typeArray:T("configDoc.type.array"),typeBoolean:T("configDoc.type.boolean"),typeHostPort:T("configDoc.type.hostPort"),typeNumber:T("configDoc.type.number"),typeObject:T("configDoc.type.object"),typeString:T("configDoc.type.string"),typeUrl:T("configDoc.type.url")}),Q=m||z,se=[H?xe:void 0,Q?_e:void 0].filter(Boolean).join(" ")||void 0,he=o?()=>o():void 0,Te=s??i;if(e.control==="select"||(e.enum?.length??0)>0||(g?.length??0)>0){const q=typeof t=="string"?t:"",oe=KP(e,h),de=g&&g.length>0?g:(e.enum??[]).map(Ee=>({value:Ee,label:iL(Ee,T),leadingIcon:oe?Fu(Ee):void 0})),Se=de.find(Ee=>Ee.value===q);return v.jsxs("div",{className:ce?"mb-field mb-field--wide":"mb-field","data-variant":"select",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(UP,{id:O,options:de,value:q,onChange:Ee=>Te(Ee),disabled:d,ariaLabel:J,describedBy:Q?_e:y?ie:void 0,error:!!Q,errorText:Q,leadingIcon:oe?Fu(q):Se?.leadingIcon,required:e.required})}),v.jsx(fl,{errorId:_e,error:Q}),y&&!Q?v.jsx("p",{className:"field-warning",id:ie,role:"note",children:y}):null]})}if(e.type==="boolean"||e.control==="switch")return v.jsxs("div",{className:"schema-field schema-field--inline",children:[v.jsxs("div",{className:"schema-field__switch-line",children:[v.jsxs("span",{className:"schema-field__label-row",children:[v.jsxs("span",{className:"schema-field__label",children:[J,e.required?v.jsx("span",{className:"schema-field__required","aria-hidden":"true",children:"*"}):null]}),v.jsx(Z3,{field:e,label:J,helpId:xe,helpOpen:H,helpParts:N,setHelpOpen:ne})]}),v.jsx(Io,{disabled:d,label:J,selected:!!t,onChange:q=>Te(q)})]}),Q?v.jsx("p",{className:"field-error",id:_e,role:"alert",children:Q}):null]});if(e.control==="textarea")return v.jsxs("div",{className:ce?"mb-field mb-field--wide":"mb-field","data-variant":"textarea",children:[v.jsxs("div",{className:"mb-field__control",children:[v.jsx(Yt,{ariaDescribedBy:se,ariaLabel:J,ariaInvalid:!!Q,className:"schema-text-field",disabled:d,error:!!Q,errorText:Q,id:O,label:J,required:e.required,rows:6,supportingText:n_(e,T("field.secretReplacementHint")),trailingIcon:v.jsx(Cl,{anchorRef:ee,field:e,label:J,helpId:xe,helpOpen:H,setHelpOpen:ne,slot:"trailing-icon"}),type:"textarea",value:D,onInput:q=>M(q,i,e),onBlur:he}),v.jsx(yl,{anchorRef:ee,helpId:xe,helpOpen:H,helpParts:N})]}),v.jsx(fl,{errorId:_e,error:Q})]});if(e.type==="object"||e.type==="array"||e.control==="object"||e.control==="array"){const q=nL(t,e,J,T);return oL(t)?v.jsxs("div",{className:o_(ce),children:[_==="expandedFixed"?null:v.jsx(i_,{field:e,label:J,helpId:xe,helpOpen:H,helpParts:N,id:O,setHelpOpen:ne}),v.jsx(YP,{describedBy:se,disabled:d,id:O,label:J,objectDisplay:_,onCommit:Te,summary:q,value:t,helpButton:_==="expandedFixed"?v.jsx(Cl,{anchorRef:ee,field:e,label:J,helpId:xe,helpOpen:H,setHelpOpen:ne}):null}),_==="expandedFixed"?v.jsx(yl,{anchorRef:ee,helpId:xe,helpOpen:H,helpParts:N}):null,v.jsx(fl,{errorId:_e,error:Q})]}):v.jsxs("div",{className:o_(ce),children:[_==="expandedFixed"?null:v.jsx(i_,{field:e,label:J,helpId:xe,helpOpen:H,helpParts:N,id:O,setHelpOpen:ne}),v.jsxs("div",{"aria-describedby":se,"aria-label":T("field.structuredSummaryLabel",{label:J}),className:"schema-structured-summary",id:O,children:[v.jsxs("div",{className:"schema-structured-summary__header",children:[v.jsx("span",{children:q.title}),v.jsx("strong",{children:T("field.structuredReadonly")}),_==="expandedFixed"?v.jsx(Cl,{anchorRef:ee,field:e,label:J,helpId:xe,helpOpen:H,setHelpOpen:ne}):null]}),q.rows.length?v.jsx("dl",{className:"schema-structured-summary__rows",children:q.rows.map(oe=>v.jsxs("div",{className:"schema-structured-summary__row",children:[v.jsx("dt",{children:oe.key}),v.jsx("dd",{children:oe.value})]},oe.key))}):v.jsx("p",{className:"schema-structured-summary__empty",children:T("field.structuredEmpty")})]}),_==="expandedFixed"?v.jsx(yl,{anchorRef:ee,helpId:xe,helpOpen:H,helpParts:N}):null,v.jsx(fl,{errorId:_e,error:Q})]})}return v.jsxs("div",{className:ce?"mb-field mb-field--wide":"mb-field","data-variant":"input",children:[v.jsxs("div",{className:"mb-field__control",children:[v.jsx(Yt,{ariaDescribedBy:se,ariaLabel:J,ariaInvalid:!!Q,autoComplete:e.secret?"new-password":void 0,className:"schema-text-field",disabled:d,error:!!Q,errorText:Q,id:O,label:J,leadingIcon:qP(e),leadingIconNode:b,required:e.required,supportingText:n_(e,T("field.secretReplacementHint")),trailingIcon:JP({field:e,revealed:X,setRevealed:A,revealLabel:T("auth.revealToken"),hideLabel:T("auth.hideToken"),displayLabel:J,helpId:xe,helpOpen:H,setHelpOpen:ne,trailingHelpAnchorRef:ee}),type:Ha(e)&&!X?"password":"text",value:D,onInput:q=>M(q,i,e),onBlur:he}),v.jsx(yl,{anchorRef:ee,helpId:xe,helpOpen:H,helpParts:N})]}),v.jsx(fl,{errorId:_e,error:Q})]});function M(q,oe,de){if(C(q),Ha(de)&&(le.current=q),de.type==="number"||de.control==="number"){if(q===""){B(""),oe(void 0);return}const Se=Number(q);if(!Number.isFinite(Se)){B(T("field.invalidNumber"));return}B(""),oe(Se);return}B(""),oe(q)}}function qP(e){if(e.secret||e.control==="secret")return"key";const t=e.path.toLowerCase();if(t.includes("url")||t.includes("endpoint")||t.includes("addr"))return"link";if(t.includes("model"))return"smart_toy";if(t.includes("agent"))return"badge";if(e.type==="number"||e.control==="number")return"tag"}function KP(e,t){return e.path==="protocol"&&t==="providers.<key>.protocol"}function GP(e,t,i){return(t?Di[t]:void 0)?.title[i]??e.label}function i_({field:e,helpId:t,helpOpen:i,helpParts:o,id:s,label:l,labelForControl:d=!0,labelId:f,setHelpOpen:h}){const m=v.jsxs(v.Fragment,{children:[l,e.required?v.jsx("span",{className:"schema-field__required","aria-hidden":"true",children:"*"}):null]});return v.jsx("div",{className:"schema-field__topline",children:v.jsxs("span",{className:"schema-field__label-row",children:[d?v.jsx("label",{className:"schema-field__label",htmlFor:s,children:m}):v.jsx("span",{className:"schema-field__label",id:f,children:m}),v.jsx(Z3,{field:e,label:l,helpId:t,helpOpen:i,helpParts:o,setHelpOpen:h})]})})}function YP({describedBy:e,disabled:t,helpButton:i,id:o,label:s,objectDisplay:l,onCommit:d,summary:f,value:h}){const{t:m}=Oe(),g=Object.entries(h).filter(([,b])=>c_(b)),y=Object.entries(h).filter(([,b])=>!c_(b));return v.jsxs("div",{"aria-describedby":e,"aria-label":m("field.structuredEditorLabel",{label:s}),className:"schema-structured-object",id:o,children:[v.jsxs("div",{className:"schema-structured-object__header",children:[v.jsx("span",{children:s}),i]}),g.length?v.jsx("div",{className:"schema-structured-object__grid",children:g.map(([b,_])=>v.jsx(QP,{disabled:t,label:b,value:_,onCommit:E=>d({...h,[b]:E})},b))}):null,y.length||g.length===0?v.jsx(ZP,{objectDisplay:l,summary:{title:g.length===0?f.title:m("field.structuredNestedValues"),rows:g.length===0?f.rows:y.map(([b,_])=>({key:b,value:$v(_,void 0,m)}))}}):null]})}function QP({disabled:e,label:t,onCommit:i,value:o}){return typeof o=="boolean"?v.jsx("div",{className:"schema-field schema-field--inline schema-structured-object__boolean",children:v.jsxs("div",{className:"schema-field__switch-line",children:[v.jsx("span",{className:"schema-field__label-row",children:v.jsx("span",{className:"schema-field__label",children:t})}),v.jsx(Io,{disabled:e,label:t,selected:o,onChange:i})]})}):typeof o=="number"?v.jsx(WP,{disabled:e,label:t,value:o,onCommit:i}):v.jsx(XP,{disabled:e,label:t,value:typeof o=="string"?o:"",onCommit:i})}function XP({disabled:e,label:t,onCommit:i,value:o}){const[s,l]=w.useState(o);return w.useEffect(()=>{l(o)},[o]),v.jsx("div",{className:"mb-field","data-variant":"input",children:v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{disabled:e,label:t,spellCheck:!1,type:"text",value:s,onBlur:()=>{s!==o&&i(s)},onInput:l})})})}function WP({disabled:e,label:t,onCommit:i,value:o}){const{t:s}=Oe(),[l,d]=w.useState(String(o)),[f,h]=w.useState("");w.useEffect(()=>{d(String(o)),h("")},[o]);function m(){const g=l.trim();if(g===String(o)){h("");return}const y=Number(g);if(!Number.isFinite(y)){h(s("field.invalidNumber"));return}h(""),i(y)}return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{ariaInvalid:!!f,disabled:e,error:!!f,errorText:f,inputMode:"decimal",label:t,spellCheck:!1,type:"text",value:l,onBlur:m,onInput:g=>{d(g),f&&g.trim()===String(o)&&h("")}})}),f?v.jsx("p",{className:"field-error field-error--sr",role:"alert",children:f}):null]})}function ZP({objectDisplay:e,summary:t}){const{t:i}=Oe();return v.jsxs("div",{className:"schema-structured-summary schema-structured-summary--nested",children:[v.jsxs("div",{className:"schema-structured-summary__header",children:[v.jsx("span",{children:t.title}),v.jsx("strong",{children:i(e==="expandedFixed"?"field.structuredReadonly":"field.structuredSummary")})]}),t.rows.length?v.jsx("dl",{className:"schema-structured-summary__rows",children:t.rows.map(o=>v.jsxs("div",{className:"schema-structured-summary__row",children:[v.jsx("dt",{children:o.key}),v.jsx("dd",{children:o.value})]},o.key))}):v.jsx("p",{className:"schema-structured-summary__empty",children:i("field.structuredEmpty")})]})}function Z3({field:e,helpId:t,helpOpen:i,helpParts:o,label:s,setHelpOpen:l}){const d=w.useRef(null);return v.jsxs("span",{className:"schema-field__help-wrap",children:[v.jsx(Cl,{anchorRef:d,field:e,label:s,helpId:t,helpOpen:i,setHelpOpen:l}),v.jsx(yl,{anchorRef:d,helpId:t,helpOpen:i,helpParts:o})]})}function JP({field:e,revealed:t,setRevealed:i,revealLabel:o,hideLabel:s,displayLabel:l,helpId:d,helpOpen:f,setHelpOpen:h,trailingHelpAnchorRef:m}){return Ha(e)?v.jsx(pi,{className:"field-visibility-toggle",icon:t?"visibility_off":"visibility",label:t?s:o,onClick:()=>i(g=>!g),onMouseDown:g=>g.preventDefault(),slot:"trailing-icon"}):v.jsx(Cl,{anchorRef:m,field:e,label:l,helpId:d,helpOpen:f,setHelpOpen:h,slot:"trailing-icon"})}function Cl({anchorRef:e,field:t,helpId:i,helpOpen:o,label:s,setHelpOpen:l,slot:d}){const{t:f}=Oe(),h=w.useRef(!1);return v.jsx(pi,{className:"schema-field__help",describedBy:o?i:void 0,icon:"help",label:f("field.helpFor",{label:s}),onBlur:()=>l(!1),onClick:()=>{if(h.current){h.current=!1,l(!0);return}l(m=>!m)},onFocus:()=>l(!0),onKeyDown:m=>{m.key==="Escape"&&l(!1)},onMouseDown:m=>m.preventDefault(),onMouseEnter:()=>{h.current=!0,l(!0)},onMouseLeave:()=>{h.current=!1,l(!1)},ref:e,slot:d})}function yl({anchorRef:e,helpId:t,helpOpen:i,helpParts:o}){const s=ay(e,i),l=eL(s);return i?v.jsxs("span",{className:"rich-tooltip",id:t,role:"tooltip",style:l,children:[o.subhead?v.jsx("span",{className:"rich-tooltip__subhead",children:o.subhead}):null,o.body?v.jsx("span",{className:"rich-tooltip__body",children:o.body}):null,o.metas.length?v.jsx("span",{className:"rich-tooltip__metas",children:o.metas.map((d,f)=>v.jsx("span",{className:"rich-tooltip__chip",children:d.label?`${d.label}: ${d.value}`:d.value},f))}):null]}):null}function eL(e){if(e)return{left:`${e.left}px`,maxWidth:`${e.maxWidth}px`,position:"fixed",top:`${e.top}px`}}function fl({errorId:e,error:t}){return v.jsx(v.Fragment,{children:t?v.jsx("p",{className:"field-error field-error--sr",id:e,role:"alert",children:t}):null})}function n_(e,t){return e.secret?t:""}function o_(e){return e?"schema-field schema-field--wide":"schema-field"}function tL(e){return e.control==="textarea"||e.control==="object"||e.control==="array"||e.type==="object"||e.type==="array"}function a_(e,t){return Ha(e)||t==null?"":e.type==="object"||e.type==="array"||e.control==="object"||e.control==="array"?JSON.stringify(t,null,2):String(t)}function Ha(e){return e.secret||e.control==="secret"}function rL(e,t,i,o,s){const l=i?Di[i]:void 0,d=[];return l?(d.push({label:s.type,value:s_(l.type,s)}),l.defaultValue&&d.push({label:s.default,value:s_(String(l.defaultValue),s)}),(l.sensitive||e.secret)&&d.push({value:s.sensitive}),{subhead:t,body:l.description[o],metas:d}):(d.push({label:s.type,value:e.type}),d.push({value:e.required?s.required:s.optional}),e.secret&&d.push({value:s.sensitive}),d.push({value:e.hotReloadable?s.savedRealtime:s.restartMayBeRequired}),{subhead:t,body:"",metas:d})}function s_(e,t){const i=e.trim().toLowerCase();return{array:t.typeArray,boolean:t.typeBoolean,empty:t.defaultEmpty,"host:port":t.typeHostPort,number:t.typeNumber,object:t.typeObject,string:t.typeString,url:t.typeUrl}[i]??e}function iL(e,t){const o={anthropic:"provider.protocol.anthropic","openai-response":"provider.protocol.openaiResponses","openai-chat":"provider.protocol.openaiChat","google-genai":"provider.protocol.googleGenai"}[e];return o?t(o):e}function nL(e,t,i,o){if(Array.isArray(e))return{title:i,rows:e.slice(0,6).map((s,l)=>({key:String(l+1),value:$v(s,t,o)}))};if(e&&typeof e=="object"){const s=Object.entries(e);return{title:i,rows:s.slice(0,6).map(([l,d])=>({key:l,value:$v(d,t,o)}))}}return{title:i,rows:[]}}function $v(e,t,i){if(e==null||e==="")return i("field.structuredEmptyValue");if(Array.isArray(e))return i(l_("field.summary.items",e.length),{count:e.length});if(e&&typeof e=="object"){const o=Object.keys(e).length;return i(l_("field.summary.keys",o),{count:o})}return t?.secret?"******":String(e)}function l_(e,t){return`${e}.${t===1?"one":"many"}`}function oL(e){return!!e&&typeof e=="object"&&!Array.isArray(e)}function c_(e){return e==null||typeof e=="string"||typeof e=="number"||typeof e=="boolean"}function Vo(e,t){switch(e.kind){case"mode":return t.path==="mode"?"mode":void 0;case"trace":return Bn("trace",t.path);case"log":return Bn("log",t.path);case"server":return Bn("server",t.path);case"defaults":return Bn("defaults",t.path);case"web_search":return Bn("web_search",t.path);case"cache":return Bn("cache",t.path);case"persistence":return Bn("persistence",t.path);case"proxy":return Bn("proxy",t.path);case"provider":return aL(t.path);case"provider_offer":return sL(t.path);case"model":return lL(t.path);case"route":return cL(t.path);case"extension":return dL(t.path);default:return}}function Bn(e,t){return`${e}.${t}`}function aL(e){return`providers.<key>.${e}`}function sL(e){return`providers.<key>.offers[].${e}`}function lL(e){return`models.<slug>.${e}`}function cL(e){return`routes.<alias>.${e}`}function dL(e){return`extensions.<name>.${e}`}function ls({resourceKind:e,resourceId:t,field:i,committedValue:o,revision:s,save:l,disabled:d=!1,configUpdateFailedMessage:f,requestFailedMessage:h}){const[m,g]=w.useState(o),[y,b]=w.useState("idle"),[_,E]=w.useState(),T=w.useRef(0),O=w.useRef(o),D=w.useRef(m),C=w.useRef(y),z=w.useRef(s);D.current=m,C.current=y,w.useEffect(()=>{z.current=s},[s]),w.useEffect(()=>{hl(o,O.current)||(O.current=o,!(C.current==="dirty"||C.current==="saving")&&(g(o),E(void 0),b("idle")))},[o]);const B=w.useCallback((J,ce)=>{if(d)return;const _e=++T.current;b("saving"),E(void 0),l({baseRevision:z.current,change:{kind:e,id:t,field:i,value:ce}}).then(ie=>{_e===T.current&&ee(ie,J)}).catch(ie=>{_e===T.current&&(E({resourceKind:e,resourceId:t,field:i,code:"requestFailed",message:ie instanceof Error?ie.message:h}),b("error"))})},[d,i,h,t,e,l]),H=w.useCallback(J=>{g(J),E(void 0),b(hl(J,O.current)?"idle":"dirty")},[]),ne=w.useCallback(()=>{C.current==="dirty"&&B(D.current,D.current)},[B]),X=w.useCallback(J=>{if(g(J),hl(J,O.current)){E(void 0),b("idle");return}B(J,J)},[B]),A=w.useCallback((J,ce)=>{if(g(J),hl(J,O.current)){E(void 0),b("idle");return}B(J,ce)},[B]),le=w.useCallback(()=>{g(O.current),E(void 0),b("idle")},[]);return{value:m,status:y,error:_,setValue:H,commit:ne,commitValue:X,commitSerializedValue:A,reset:le};function ee(J,ce){const _e=uL(J.errors,e,t,i);switch(J.result){case"committed":case"restartRequired":if(z.current=J.revision,O.current=ce,E(void 0),!hl(D.current,ce)){b("dirty");return}b("saved");return;case"draftRejected":case"validationRejected":case"revisionConflict":E(_e??Sm(J,e,t,i,f)),b("error");return;case"runtimeRejected":{const ie=J.rollbackValue===void 0?O.current:J.rollbackValue;g(ie),E(_e??Sm(J,e,t,i,f)),b("error");return}default:E(Sm(J,e,t,i,f)),b("error")}}}function uL(e,t,i,o){return e?.find(s=>(s.resourceKind===t||s.resourceKind==="")&&(s.resourceId===i||s.resourceId==="")&&(!s.field||s.field===o))??e?.[0]}function Sm(e,t,i,o,s){return{resourceKind:t,resourceId:i,field:o,code:e.result,message:s(e.result)}}function hl(e,t){return Object.is(e,t)?!0:typeof e!="object"||e===null||typeof t!="object"||t===null?!1:JSON.stringify(e)===JSON.stringify(t)}const fL=()=>Wn("/config/graph"),hL=e=>Wn("/config/graph",{method:"PATCH",body:e}),pL=(e,t)=>Wn(`/config/resources/${encodeURIComponent(e)}`,{method:"POST",body:{...t,value:t.value??{}}}),mL=(e,t,i)=>Wn(`/config/resources/${encodeURIComponent(e)}/${encodeURIComponent(t)}`,{method:"DELETE",body:{baseRevision:i}}),sc={configGraph:["config","graph"],extensions:["extensions"],usageStats:["stats","usage"]};function Jn(){return Zv({queryKey:sc.configGraph,queryFn:fL})}function vL(){const e=es();return Jv({mutationFn:t=>hL(t),onSuccess:t=>sy(e,t)})}function gL(){const e=es();return Jv({mutationFn:({kind:t,body:i})=>pL(t,i),onSuccess:t=>sy(e,t)})}function yL(){const e=es();return Jv({mutationFn:({kind:t,id:i,baseRevision:o})=>mL(t,i,o),onSuccess:t=>sy(e,t)})}function cs(){const e=vL();return t=>e.mutateAsync({baseRevision:t.baseRevision,changes:[t.change]})}function sy(e,t){if(t.graph){e.setQueryData(sc.configGraph,t.graph);return}e.invalidateQueries({queryKey:sc.configGraph})}function ly({resource:e,field:t,objectDisplay:i,revision:o,modelDisplayNames:s={}}){const{t:l}=Oe(),d=Jn(),f=cs(),h=w.useCallback(b=>f(b),[f]),m=ls({resourceKind:e.kind,resourceId:e.id,field:t.path,committedValue:e.value[t.path],revision:o,save:h,configUpdateFailedMessage:b=>l("field.configUpdateFailed",{result:b}),requestFailedMessage:l("error.requestFailed")});ss(`${e.kind}:${e.id}:${t.path}`,m.status);const g={...e,value:{...e.value,[t.path]:m.value}},y=e.kind==="route"&&(t.path==="model"||t.path==="provider")?bL(t.path,m.value,d.data?.resources??[],l):void 0;return v.jsx(HP,{error:m.error?.message,field:t,idPrefix:`${e.kind}-${e.id}`,leadingIconNode:tP(g,t,s),docPath:Vo(e,t),objectDisplay:i,options:y?.options,warning:y?.warning,onChange:m.setValue,onCommit:m.commit,onCommitValue:m.commitValue,clearSecretDraft:m.status==="saved",value:m.value})}function bL(e,t,i,o){const s=e==="model"?$3(i):rP(i),l=typeof t=="string"?t.trim():"",d=s.some(h=>h.value===l);let f;return l?d||(f=e==="model"?o("route.warning.modelUnknown",{value:l}):o("route.warning.providerUnknown",{value:l})):f=o(e==="model"?"route.warning.modelMissing":"route.warning.providerMissing"),{options:s,warning:f}}const xL={saved:"resource.status.saved",needsAttention:"resource.status.needsAttention",restartRequired:"resource.status.restartRequired"},wL={normal:"resource.impact.normal",critical:"resource.impact.critical"},_L={saved:"check_circle",needsAttention:"report",restartRequired:"restart_alt"},SL={normal:"info",critical:"priority_high"},EL=new Set(["extension","model","provider","provider_offer","route"]);function hi({ariaLabel:e,children:t,embedded:i=!1,modelDisplayNames:o={},onOpenEditor:s,resource:l,revision:d,title:f,variant:h="full"}){const{t:m}=Oe(),g=yL(),[y,b]=w.useState(!1),[_,E]=w.useState(""),[T,O]=w.useState({}),D=w.useCallback((ie,xe)=>{O(N=>N[ie]===xe?N:{...N,[ie]:xe})},[]),C=w.useMemo(()=>UL(T),[T]),z=l.schema.fields.length,B=l.hotReloadable?m("resource.reload.hot"):m("resource.reload.restart"),H=e??l.id,ne=FL(l.kind,l.schema.fields),X=f??l.label,A=EL.has(l.kind),le=h==="summary";async function ee(){E("");try{await g.mutateAsync({kind:l.kind,id:l.id,baseRevision:d})}catch(ie){E(qN(ie,m("error.requestFailed")))}}const J=["resource-editor-card",le?"resource-editor-card--summary":"",i?"resource-editor-card--embedded":""].filter(Boolean).join(" "),ce=l.status!=="saved",_e=!le||ce?v.jsxs("span",{className:"resource-editor-card__status-group","aria-label":m("resource.statusGroupLabel",{label:H}),children:[v.jsxs("span",{className:`resource-meta-pill status-pill status-pill--${l.status}`,children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:$L(l.status)}),m(xL[l.status])]}),!le&&l.runtimeImpact==="critical"?v.jsxs("span",{className:"resource-meta-pill status-pill status-pill--critical",children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:BL(l.runtimeImpact)}),m(wL[l.runtimeImpact])]}):null,!le&&C?v.jsxs(Wr.span,{className:`resource-meta-pill editor-live-status editor-live-status--${C}`,initial:{opacity:0,scale:.85,y:-2},animate:{opacity:1,scale:1,y:0},transition:ur.spatialFast,children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:VL(C)}),m(IL[C])]},C):null]}):null;return v.jsxs(Wr.section,{"aria-label":H,className:J,initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:ur.spatial,children:[v.jsxs("div",{className:`resource-editor-card__header${le?" resource-editor-card__header--summary":""}`,children:[v.jsxs("div",{className:"resource-editor-card__identity",children:[v.jsxs("div",{className:"resource-editor-card__identity-line",children:[v.jsx("span",{className:"resource-kind-icon material-symbol","aria-hidden":"true",children:NL(l.kind)}),le?TL(l):null,v.jsx("h3",{children:l.id})]}),v.jsxs("div",{className:"resource-editor-card__facts",children:[_e,le?OL(l,m).map(ie=>v.jsxs("span",{className:"resource-meta-pill resource-fact",children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:ie.icon}),ie.text]},ie.key)):v.jsxs("span",{className:"resource-meta-pill resource-fact",children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:"list_alt"}),m(z===1?"resource.fieldCount.one":"resource.fieldCount.many",{count:z})]}),le?null:v.jsxs("span",{className:`resource-meta-pill resource-fact resource-fact--${l.hotReloadable?"hot":"restart"}`,children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:l.hotReloadable?"bolt":"restart_alt"}),B]})]})]}),v.jsxs("div",{className:"resource-editor-card__meta",children:[le&&s?v.jsx(Xa,{ariaLabel:m("resource.openEditor",{title:X,id:l.id}),icon:"tune",onClick:()=>s(),children:m("resource.editShort")}):null,A?v.jsx(Qn,{ariaLabel:m("resource.delete",{title:X,id:l.id}),className:"fab-button fab-button--danger",icon:"delete",onClick:()=>{b(!0),E("")},children:m("resource.deleteShort")}):null]})]}),y?v.jsxs(Wr.div,{className:"resource-delete-confirmation",initial:{opacity:0,y:-4},animate:{opacity:1,y:0},transition:ur.spatial,children:[v.jsx("p",{children:m("resource.deletePrompt",{id:l.id})}),_?v.jsx("p",{className:"field-error",role:"alert",children:_}):null,v.jsxs("div",{className:"resource-delete-confirmation__actions",children:[v.jsx(Qn,{ariaLabel:m("resource.confirmDelete",{id:l.id}),className:"resource-delete-confirmation__confirm",disabled:g.isPending,onClick:ee,children:m("resource.confirmDeleteShort")}),v.jsx(Xa,{ariaLabel:m("resource.cancelDelete"),className:"secondary-button",onClick:()=>{b(!1),E("")},children:m("resource.cancelDelete")})]})]}):null,le?null:v.jsx(BP,{report:D,children:v.jsx(RL,{alwaysExpanded:i,fieldGroups:ne,modelDisplayNames:o,resource:l,revision:d,children:t})})]})}function TL(e){const t=e.kind==="route"?Ei(e.value.model)||e.id:e.kind==="model"&&Ei(e.value.display_name)||e.id;return Ec(t)??null}function OL(e,t){const i=e.value??{},o=[],s=(l,d,f)=>{f&&o.push({key:l,icon:d,text:f})};if(e.kind==="provider"){const l=Ei(i.protocol);s("protocol","swap_horiz",CL(l,t)),s("host","link",AL(Ei(i.base_url))),Ei(i.api_key)&&s("key","vpn_key",t("resource.fact.keySet"));const d=Ei(i.version);d&&s("version","history",d)}else if(e.kind==="model"){const l=Ei(i.display_name);l&&l!==e.id&&s("displayName","label",l);const d=ou(i.context_window);typeof d=="number"&&s("context","memory",Em(d));const f=ou(i.max_output_tokens);typeof f=="number"&&s("maxout","output",Em(f))}else if(e.kind==="route"){const l=Ei(i.model),d=Ei(i.provider);l&&s("model","smart_toy",l),d&&s("provider","cloud",d);const f=ou(i.context_window);typeof f=="number"&&s("context","memory",Em(f))}else if(e.kind==="provider_offer"){const l=ou(i.priority);typeof l=="number"&&s("priority","format_list_numbered",`#${l}`);const d=Ei(i.upstream_name);d&&s("upstream","arrow_forward",d)}return o}function CL(e,t){switch(e){case"anthropic":return t("provider.protocol.anthropic");case"google-genai":case"googleGenai":return t("provider.protocol.googleGenai");case"openai-chat":case"openaiChat":return t("provider.protocol.openaiChat");case"openai-response":case"openaiResponses":return t("provider.protocol.openaiResponses");default:return e}}function AL(e){if(!e)return"";try{return new URL(e).host}catch{return e.replace(/^https?:\/\//,"").split("/")[0]}}function Em(e){return e>=1e3?`${Math.round(e/1e3)}k ctx`:`${e} ctx`}function Ei(e){return typeof e=="string"?e:""}function ou(e){return typeof e=="number"&&Number.isFinite(e)?e:void 0}function RL({alwaysExpanded:e,children:t,fieldGroups:i,modelDisplayNames:o,resource:s,revision:l}){const f=s.kind==="model"&&s.schema.fields.some(m=>m.path==="supports_reasoning")?s.schema.fields.find(m=>m.path==="supported_reasoning_levels"):void 0,h=kN(s,l,f);return v.jsxs("div",{className:"resource-field-groups",children:[i.map(m=>v.jsx(jL,{alwaysExpanded:e,group:m,modelDisplayNames:o,modelReasoningLevels:h,resource:s,revision:l},m.key)),t]})}function jL({alwaysExpanded:e,group:t,modelDisplayNames:i,modelReasoningLevels:o,resource:s,revision:l}){const{t:d}=Oe(),f=!e&&QL(s.kind,t),[h,m]=w.useState(!f);if(t.key==="reasoning")return v.jsx(kL,{group:t,modelReasoningLevels:o,resource:s,revision:l});if(t.key==="billing")return v.jsx(iN,{group:t,resource:s,revision:l});const g=t.fields.filter(Hu),y=t.fields.filter(E=>!Hu(E)),b=`${s.kind}-${s.id}-${t.key}-fields`.replace(/[^a-zA-Z0-9_-]/g,"-"),_=d(t.labelKey);return v.jsxs("div",{"aria-label":_,className:dy(s.kind,t,f&&!h),role:"group",children:[v.jsxs("div",{className:"resource-field-group__header",children:[v.jsxs("h4",{children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:uy(t)}),_]}),f?v.jsx(pi,{ariaExpanded:h,className:"resource-field-group__toggle",controls:b,icon:"chevron_right",label:d("resource.group.toggle",{label:_}),onClick:()=>m(E=>!E)}):null]}),h?v.jsxs("div",{className:"resource-field-group__body",id:b,children:[y.length?v.jsx("div",{className:tE(s.kind,t),children:rE(s,l,t,y,i,o)}):null,g.length?v.jsx("div",{className:"switch-bank",children:g.map(E=>v.jsx(ly,{field:E,modelDisplayNames:i,objectDisplay:fy(s.kind,E,t),resource:s,revision:l},`${s.kind}-${s.id}-${E.path}`))}):null]}):null]})}function kL({group:e,modelReasoningLevels:t,resource:i,revision:o}){const{t:s}=Oe(),l=e.key==="reasoning"?e.fields.find(y=>y.path==="supports_reasoning"):void 0,d=RN(i,o,l),f=y_(d).value,h=e.fields.filter(y=>y.path!=="supports_reasoning"),m=h.filter(Hu),g=h.filter(y=>!Hu(y));return v.jsxs("div",{"aria-label":s(e.labelKey),className:dy(i.kind,e),role:"group",children:[v.jsxs("div",{className:"resource-field-group__header",children:[v.jsxs("h4",{children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:uy(e)}),s(e.labelKey)]}),l?v.jsx(rN,{autosave:y_(d),field:l,resource:i}):null]}),f&&g.length?v.jsx("div",{className:tE(i.kind,e),children:rE(i,o,e,g,{},t)}):null,f&&m.length?v.jsx("div",{className:"switch-bank",children:m.map(y=>v.jsx(ly,{field:y,objectDisplay:fy(i.kind,y,e),resource:i,revision:o},`${i.kind}-${i.id}-${y.path}`))}):null]})}const ML=new Set(["web_search","extensions"]),DL=new Set(["input_modalities","supports_image_detail_original"]),J3=new Set(["supports_reasoning","default_reasoning_level","supported_reasoning_levels","supports_reasoning_summaries","default_reasoning_summary"]),eE=["default_reasoning_level","default_reasoning_summary"],zL=new Set(["input_modalities"]),cy=new Set(["model","provider","route"]),PL=new Set(["pricing"]),LL={provider:"dns",offer:"smart_toy",model:"smart_toy",route:"alt_route",defaults:"tune",server:"lan",cache:"database",persistence:"save",store:"database",proxy:"swap_horiz",plugin:"extension",extension:"extension"};function NL(e){return LL[e]??"tune"}function $L(e){return _L[e]}function BL(e){return SL[e]}function Hu(e){return e.type==="boolean"||e.control==="switch"}function UL(e){const t=Object.values(e);return t.includes("saving")?"saving":t.includes("error")?"error":t.includes("dirty")?"dirty":null}const IL={saving:"editor.liveSaving",error:"editor.liveError",dirty:"editor.liveUnsaved"};function VL(e){return e==="saving"?"progress_activity":e==="error"?"error":"edit"}function FL(e,t){const i=e==="model"&&t.some(l=>l.path==="supports_reasoning"),o={identity:{key:"identity",labelKey:"resource.group.identity",fields:[]},basic:{key:"basic",labelKey:"resource.group.basic",fields:[]},billing:{key:"billing",labelKey:"resource.group.billing",fields:[]},multimodal:{key:"multimodal",labelKey:"resource.group.multimodal",fields:[]},reasoning:{key:"reasoning",labelKey:"resource.group.reasoning",fields:[]},advancedFeatures:{key:"advancedFeatures",labelKey:"resource.group.advancedFeatures",fields:[]}},s=e==="model"?["identity","basic","reasoning","multimodal","advancedFeatures","billing"]:["identity","basic","billing","multimodal","advancedFeatures","reasoning"];for(const l of t)if(HL(l))o.identity.fields.push(l);else if(GL(e,l))o.billing.fields.push(l);else if(KL(e,l))o.multimodal.fields.push(l);else if(d_(e,l)&&i)o.reasoning.fields.push(l);else if(qL(e,l))o.advancedFeatures.fields.push(l);else{if(d_(e,l))continue;o.basic.fields.push(l)}return e==="model"&&(o.basic.fields=UN(o.basic.fields),o.reasoning.fields=VN(o.reasoning.fields)),s.map(l=>o[l]).filter(l=>l.fields.length>0)}function HL(e){return["addr","base_url","display_name","model","mode","provider","protocol","to","upstream_name"].includes(e.path)}function qL(e,t){return cy.has(e)&&ML.has(t.path)}function d_(e,t){return e==="model"&&J3.has(t.path)}function KL(e,t){return e==="model"&&DL.has(t.path)}function GL(e,t){return e==="provider_offer"&&PL.has(t.path)}function YL(e,t){return e==="provider_offer"&&t.path==="overrides"}function dy(e,t,i=!1){const s=[`resource-field-group resource-field-group--${t.key}`];return(t.key==="advancedFeatures"||t.key==="billing"||t.key==="multimodal"||t.key==="reasoning")&&s.push("resource-field-group--advanced"),t.key==="multimodal"&&s.push("resource-field-group--multimodal"),t.key==="reasoning"&&s.push("resource-field-group--reasoning"),e==="route"&&t.key==="identity"&&s.push("resource-field-group--route-identity"),i&&s.push("resource-field-group--collapsed"),s.join(" ")}function QL(e,t){return e==="model"&&(t.key==="multimodal"||t.key==="advancedFeatures")}function tE(e,t){return e==="route"&&t.key==="identity"?"form-grid form-grid--route-identity":"form-grid"}function uy(e){return e.key==="identity"?"badge":e.key==="advancedFeatures"?"extension":e.key==="multimodal"?"image":e.key==="reasoning"?"psychology":e.key==="billing"?"payments":"tune"}function rE(e,t,i,o,s,l){const d=[];let f=0;for(;f<o.length;){if(tN(e.kind,o,f)){const h=o.slice(f,f+eE.length);d.push(v.jsx("div",{className:"form-grid__wide form-grid__reasoning-defaults",children:h.map(m=>u_(e,t,i,m,s,l))},`${e.kind}-${e.id}-reasoning-defaults`)),f+=h.length;continue}d.push(u_(e,t,i,o[f],s,l)),f+=1}return d}function u_(e,t,i,o,s,l){return WL(e.kind,o)?v.jsx("div",{className:"form-grid__wide",children:v.jsx(qu,{field:o,autosave:b_(l),valueFromDraft:sE,valueFromInput:lE})},`${e.kind}-${e.id}-${o.path}`):XL(e.kind,o)?v.jsx("div",{className:"form-grid__wide",children:v.jsx(AN,{field:o,resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`):YL(e.kind,o)?v.jsx("div",{className:"form-grid__wide",children:v.jsx(fN,{field:o,resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`):ZL(e.kind,o)?v.jsx("div",{className:w_(o),children:v.jsx(MN,{field:o,levels:b_(l).value,resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`):JL(e.kind,o)?v.jsx("div",{className:"form-grid__wide",children:v.jsx(bN,{field:o,resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`):eN(e.kind,o)?v.jsx("div",{className:"form-grid__wide",children:v.jsx(SN,{field:o,resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`):v.jsx("div",{className:w_(o),children:v.jsx(ly,{field:o,modelDisplayNames:s,objectDisplay:fy(e.kind,o,i),resource:e,revision:t})},`${e.kind}-${e.id}-${o.path}`)}function XL(e,t){return e==="model"&&zL.has(t.path)}function WL(e,t){return e==="model"&&t.path==="supported_reasoning_levels"}function ZL(e,t){return e==="model"&&t.path==="default_reasoning_level"}function JL(e,t){return cy.has(e)&&t.path==="web_search"}function eN(e,t){return cy.has(e)&&t.path==="extensions"}function tN(e,t,i){return e==="model"&&eE.every((o,s)=>t[i+s]?.path===o)}function fy(e,t,i){if(i.key==="advancedFeatures")return"expandedFixed"}function rN({autosave:e,field:t,resource:i}){const{locale:o}=Oe(),s=Vo(i,t),l=s?Di[s].title[o]:t.label;return v.jsx("span",{className:"resource-field-group__switch","aria-label":l,children:v.jsx(Io,{disabled:e.status==="saving",label:l,selected:e.value,onChange:e.commitValue})})}const iE=["input_price","output_price","cache_write_price","cache_read_price"];function iN({group:e,resource:t,revision:i}){const{t:o}=Oe(),s=e.fields.find(g=>g.path==="pricing");if(!s)throw new Error("Provider offer billing group requires a pricing field.");const l=af(t,i,s),[d,f]=w.useState(()=>f_(l.value)),h=w.useRef(!1);w.useEffect(()=>{if(f_(l.value)){f(!0);return}!h.current&&l.status!=="dirty"&&f(!1)},[l.status,l.value]);function m(g){h.current=g,f(g),g||l.commitSerializedValue({},null)}return v.jsxs("div",{"aria-label":o(e.labelKey),className:dy(t.kind,e),role:"group",children:[v.jsxs("div",{className:"resource-field-group__header",children:[v.jsxs("h4",{children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:uy(e)}),o(e.labelKey)]}),v.jsx("span",{className:"resource-field-group__switch","aria-label":o(e.labelKey),children:v.jsx(Io,{disabled:l.status==="saving",label:o(e.labelKey),selected:d,onChange:m})})]}),d?v.jsxs("div",{className:"structured-feature-field structured-feature-field--billing","aria-label":o(e.labelKey),children:[v.jsx("div",{className:"structured-feature-field__grid",children:iE.map(g=>v.jsx(nN,{autosave:l,fieldKey:g,label:oN(g,o)},g))}),l.error?v.jsx("p",{className:"field-error",role:"alert",children:l.error.message}):null]}):null]})}function nN({autosave:e,fieldKey:t,label:i}){const{t:o}=Oe(),s=sN(e.value[t]),[l,d]=w.useState(s),[f,h]=w.useState("");w.useEffect(()=>{d(s),h("")},[s]);function m(){const g=l.trim();if(g===s){h("");return}const y=Number(g);if(!Number.isFinite(y)){h(o("field.invalidNumber"));return}h(""),e.commitValue({...aN(e.value),[t]:y})}return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{ariaInvalid:!!f,className:"structured-feature-field__number",disabled:e.status==="saving",error:!!f,errorText:f,inputMode:"decimal",label:i,spellCheck:!1,type:"text",value:l,onBlur:m,onInput:g=>{d(g),f&&g.trim()===s&&h("")}})}),f?v.jsx("p",{className:"field-error field-error--sr",role:"alert",children:f}):null]})}function oN(e,t){return t({input_price:"create.offer.inputPrice",output_price:"create.offer.outputPrice",cache_write_price:"create.offer.cacheWritePrice",cache_read_price:"create.offer.cacheReadPrice"}[e])}function f_(e){return iE.some(t=>e[t]!==void 0)}function aN(e){return{input_price:bl(e.input_price),output_price:bl(e.output_price),cache_write_price:bl(e.cache_write_price),cache_read_price:bl(e.cache_read_price)}}function sN(e){return String(bl(e))}function bl(e){if(e==null||e==="")return 0;if(typeof e!="number"||!Number.isFinite(e))throw new Error("Provider offer price requires a finite number.");return e}const lN=["context_window","max_output_tokens"],cN=["display_name","default_reasoning_level","default_reasoning_summary"],dN=["description","base_instructions"],uN=["supports_reasoning","supports_reasoning_summaries","supports_image_detail_original"];function fN({field:e,resource:t,revision:i}){const{t:o}=Oe(),s=af(t,i,e);function l(h,m){const g=m===void 0?lc(s.value,h):{...s.value,[h]:m};mN(s,g)}const d=gN(s.value.input_modalities),f=aE(s.value.supported_reasoning_levels);return v.jsxs("div",{className:"provider-overrides-editor structured-feature-field","aria-label":o("field.providerOverrides.title"),children:[v.jsx("div",{className:"schema-structured-object__header",children:v.jsx("span",{children:o("field.providerOverrides.title")})}),v.jsxs("div",{className:"structured-feature-field__grid",children:[lN.map(h=>v.jsx(hN,{disabled:s.status==="saving",label:au(h,o),value:s.value[h],onCommit:m=>l(h,m)},h)),cN.map(h=>v.jsx(h_,{disabled:s.status==="saving",label:au(h,o),value:s.value[h],onCommit:m=>l(h,m)},h)),uN.map(h=>v.jsx(pN,{disabled:s.status==="saving",label:au(h,o),value:s.value[h],onCommit:m=>l(h,m)},h))]}),v.jsx("div",{className:"structured-feature-field__grid structured-feature-field__grid--wide",children:dN.map(h=>v.jsx(h_,{disabled:s.status==="saving",label:au(h,o),multiline:!0,value:s.value[h],onCommit:m=>l(h,m)},h))}),v.jsx(qu,{autosave:{commitValue:h=>l("input_modalities",h.length?h:void 0),error:s.error,label:p_(o("field.providerOverrides.inputModalities")),status:s.status,value:d},field:e,valueFromDraft:uE,valueFromInput:h=>h}),v.jsx(qu,{autosave:{commitValue:h=>l("supported_reasoning_levels",h.length?h:void 0),error:s.error,label:p_(o("field.providerOverrides.supportedReasoningLevels")),status:s.status,value:f},field:e,valueFromDraft:sE,valueFromInput:lE}),s.error?v.jsx("p",{className:"field-error",role:"alert",children:s.error.message}):null]})}function hN({disabled:e,label:t,onCommit:i,value:o}){const{t:s}=Oe(),l=Bv(o),[d,f]=w.useState(l),[h,m]=w.useState("");w.useEffect(()=>{f(l),m("")},[l]);function g(){const y=d.trim();if(y===l){m("");return}if(y===""){m(""),i(void 0);return}const b=Number(y);if(!Number.isFinite(b)){m(s("field.invalidNumber"));return}m(""),i(b)}return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{ariaInvalid:!!h,disabled:e,error:!!h,errorText:h,inputMode:"numeric",label:t,spellCheck:!1,type:"text",value:d,onBlur:g,onInput:y=>{f(y),h&&y.trim()===l&&m("")}})}),h?v.jsx("p",{className:"field-error field-error--sr",role:"alert",children:h}):null]})}function h_({disabled:e,label:t,multiline:i=!1,onCommit:o,value:s}){const l=cc(s,!1),[d,f]=w.useState(l);w.useEffect(()=>{f(l)},[l]);function h(){d!==l&&o(d.trim()===""?void 0:d)}return v.jsx("div",{className:"mb-field","data-variant":i?"textarea":"input",children:v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{disabled:e,label:t,rows:i?4:void 0,spellCheck:i,type:i?"textarea":"text",value:d,onBlur:h,onInput:f})})})}function pN({disabled:e,label:t,onCommit:i,value:o}){const{t:s}=Oe(),l=typeof o=="boolean"?String(o):"inherit";return v.jsx("div",{className:"mb-field","data-variant":"select",children:v.jsx("div",{className:"mb-field__control",children:v.jsx(Tc,{ariaLabel:t,disabled:e,label:t,options:[{value:"inherit",label:s("field.providerOverrides.inherit")},{value:"true",label:s("field.providerOverrides.enabled")},{value:"false",label:s("field.providerOverrides.disabled")}],value:l,onChange:d=>{if(d==="inherit"){i(void 0);return}i(d==="true")}})})})}function au(e,t){return t({base_instructions:"field.providerOverrides.baseInstructions",context_window:"field.providerOverrides.contextWindow",default_reasoning_level:"field.providerOverrides.defaultReasoningLevel",default_reasoning_summary:"field.providerOverrides.defaultReasoningSummary",description:"field.providerOverrides.description",display_name:"field.providerOverrides.displayName",max_output_tokens:"field.providerOverrides.maxOutputTokens",supports_image_detail_original:"field.providerOverrides.supportsImageDetailOriginal",supports_reasoning:"field.providerOverrides.supportsReasoning",supports_reasoning_summaries:"field.providerOverrides.supportsReasoningSummaries"}[e])}function mN(e,t){const i=vN(t);e.commitSerializedValue(i,Object.keys(i).length?i:null)}function vN(e){const t={};for(const[i,o]of Object.entries(e))o==null||o===""||Array.isArray(o)&&o.length===0||typeof o=="object"&&!Array.isArray(o)&&Object.keys(o).length===0||(t[i]=o);return t}function gN(e){return Array.isArray(e)?e.filter(t=>typeof t=="string"):[]}function p_(e){return{"en-US":e,"zh-CN":e}}const yN={max_uses:"web_search.max_uses",search_max_rounds:"web_search.search_max_rounds",tavily_api_key:"web_search.tavily_api_key",firecrawl_api_key:"web_search.firecrawl_api_key"};function bN({field:e,resource:t,revision:i}){const{locale:o,t:s}=Oe(),l=af(t,i,e),d=l.value,f=Vo(t,e),h=f?Di[f].title[o]:e.label,m=s("field.webSearch.support",{label:h}),g=`${t.kind}-${t.id}-${e.path}`,y=s("field.webSearch.maxUses",{label:h}),b=s("field.webSearch.tavilyAPIKey",{label:h}),_=s("field.webSearch.firecrawlAPIKey",{label:h}),E=s("field.webSearch.searchMaxRounds",{label:h});function T(O,D){l.commitValue(D===void 0?lc(d,O):{...d,[O]:D})}return v.jsxs("div",{className:"structured-feature-field structured-feature-field--web-search","aria-label":h,children:[v.jsxs("div",{className:"structured-feature-field__grid",children:[v.jsx("div",{className:"mb-field","data-variant":"select",children:v.jsx("div",{className:"mb-field__control",children:v.jsx(Tc,{ariaLabel:m,disabled:l.status==="saving",label:m,options:oE,value:zN(d.support),onChange:O=>T("support",O)})})}),v.jsx(g_,{autosave:l,fieldKey:"max_uses",helpScope:g,label:y}),v.jsx(g_,{autosave:l,fieldKey:"search_max_rounds",helpScope:g,label:E}),v.jsx(v_,{autosave:l,fieldKey:"tavily_api_key",helpScope:g,label:b}),v.jsx(v_,{autosave:l,fieldKey:"firecrawl_api_key",helpScope:g,label:_})]}),l.error?v.jsx("p",{className:"field-error",role:"alert",children:l.error.message}):null]})}function nE(e,t,i){const o=Oe(),s=w.useRef(null),l=w.useRef(!1),[d,f]=w.useState(!1),h=yN[e],m=`structured-help-${t}-${h}`.replace(/[^a-zA-Z0-9_-]/g,"-"),g=ay(s,d),y=wN(h,i,o);return{button:v.jsx(pi,{className:"schema-field__help",describedBy:d?m:void 0,icon:"help",label:o.t("field.helpFor",{label:i}),onBlur:()=>f(!1),onClick:()=>{if(l.current){l.current=!1,f(!0);return}f(b=>!b)},onFocus:()=>f(!0),onKeyDown:b=>{b.key==="Escape"&&f(!1)},onMouseDown:b=>b.preventDefault(),onMouseEnter:()=>{l.current=!0,f(!0)},onMouseLeave:()=>{l.current=!1,f(!1)},ref:s,slot:"trailing-icon"}),tooltip:d?v.jsx(xN,{helpId:m,helpParts:y,position:g}):null}}function xN({helpId:e,helpParts:t,position:i}){return v.jsxs("span",{className:"rich-tooltip",id:e,role:"tooltip",style:_N(i),children:[v.jsx("span",{className:"rich-tooltip__subhead",children:t.subhead}),v.jsx("span",{className:"rich-tooltip__body",children:t.body}),v.jsx("span",{className:"rich-tooltip__metas",children:t.metas.map((o,s)=>v.jsx("span",{className:"rich-tooltip__chip",children:o.label?`${o.label}: ${o.value}`:o.value},s))})]})}function wN(e,t,{locale:i,t:o}){const s=Di[e],l=[{label:o("configDoc.type"),value:m_(s.type,o)}];return s.defaultValue&&l.push({label:o("configDoc.default"),value:m_(String(s.defaultValue),o)}),s.sensitive&&l.push({value:o("configDoc.sensitive")}),{subhead:t,body:s.description[i],metas:l}}function m_(e,t){const i=e.trim().toLowerCase(),o={array:"configDoc.type.array",boolean:"configDoc.type.boolean",empty:"configDoc.default.empty","host:port":"configDoc.type.hostPort",number:"configDoc.type.number",object:"configDoc.type.object",string:"configDoc.type.string",url:"configDoc.type.url"};return o[i]?t(o[i]):e}function _N(e){if(e)return{left:`${e.left}px`,maxWidth:`${e.maxWidth}px`,position:"fixed",top:`${e.top}px`}}function v_({autosave:e,fieldKey:t,helpScope:i,label:o}){const s=nE(t,i,o),[l,d]=w.useState(()=>cc(e.value[t],!0)),f=cc(e.value[t],!0);w.useEffect(()=>{d(f)},[f]);const h=w.useCallback(()=>{l!==f&&e.commitValue({...e.value,[t]:l})},[e,f,l,t]);return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{autoComplete:"new-password",className:"structured-feature-field__secret",disabled:e.status==="saving",label:o,spellCheck:!1,trailingIcon:s.button,type:"password",value:l,onBlur:h,onInput:d})}),s.tooltip]})}function g_({autosave:e,fieldKey:t,helpScope:i,label:o}){const{t:s}=Oe(),l=nE(t,i,o),[d,f]=w.useState(()=>x_(e.value[t])),[h,m]=w.useState(""),g=x_(e.value[t]);w.useEffect(()=>{f(g),m("")},[g]);const y=w.useCallback(()=>{const b=d.trim();if(b===""){m(""),e.commitValue(lc(e.value,t));return}if(!/^\d+$/.test(b)){m(s("field.invalidNumber"));return}const _=Number.parseInt(b,10);m(""),e.commitValue({...e.value,[t]:_})},[e,d,t,s]);return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{ariaInvalid:!!h,className:"structured-feature-field__number",disabled:e.status==="saving",error:!!h,errorText:h,inputMode:"numeric",label:o,spellCheck:!1,trailingIcon:l.button,type:"text",value:d,onBlur:y,onInput:b=>{f(b),h&&b.trim()===g&&m("")}})}),l.tooltip,h?v.jsx("p",{className:"field-error field-error--sr",role:"alert",children:h}):null]})}function SN({field:e,resource:t,revision:i}){const{locale:o,t:s}=Oe(),[l,d]=w.useState(""),f=af(t,i,e),h=Vo(t,e),m=h?Di[h].title[o]:e.label,g=LN(f.value),y=g.map(z=>z.name),b=l.trim(),_=y.includes(b),E=!b||_||f.status==="saving";function T(){E||(d(""),f.commitValue({...f.value,[b]:{enabled:!0}}))}function O(z){f.commitValue(lc(f.value,z))}function D(z,B){f.commitValue({...f.value,[z]:{...Ku(f.value[z]),enabled:B}})}function C(z,B,H){const ne=Ku(f.value[z]),X=dE(ne.config);f.commitValue({...f.value,[z]:{...ne,config:H===void 0?lc(X,B):{...X,[B]:H}}})}return v.jsxs("div",{className:"structured-feature-field structured-feature-field--extensions","aria-label":m,children:[v.jsx("div",{className:"extension-feature-list",role:"list","aria-label":m,children:g.map(z=>v.jsxs("div",{className:"extension-feature-row","data-extension-name":z.name,role:"listitem",children:[v.jsx(F3,{className:"extension-feature-row__chip",disabled:f.status==="saving",label:s("field.extensions.remove",{name:z.name}),onRemove:()=>O(z.name),children:z.name}),v.jsx("span",{className:"extension-feature-row__switch","aria-label":s("field.extensions.enable",{name:z.name}),children:v.jsx(Io,{disabled:f.status==="saving",label:s("field.extensions.enable",{name:z.name}),selected:z.enabled,onChange:B=>D(z.name,B)})}),v.jsx(EN,{disabled:f.status==="saving",entry:z,onCommit:(B,H)=>C(z.name,B,H)})]},z.name))}),v.jsxs("div",{className:"editable-list-field__composer",children:[v.jsx(Yt,{ariaLabel:s("field.extensions.addInput",{label:m}),className:"editable-list-field__input",label:s("field.extensions.addInput",{label:m}),spellCheck:!1,value:l,onInput:d,onBlur:()=>{}}),v.jsx(Qn,{ariaLabel:s("field.extensions.addAction",{label:m}),className:"editable-list-field__add",disabled:E,icon:"add",onClick:T,children:s("field.editableList.add")})]}),f.error?v.jsx("p",{className:"field-error",role:"alert",children:f.error.message}):null]})}function EN({disabled:e,entry:t,onCommit:i}){const o=NN(t);return o.length===0?null:v.jsx("div",{className:"extension-config-grid",children:o.map(s=>v.jsx(TN,{disabled:e,field:s,value:t.config[s.key],onCommit:l=>i(s.key,l)},s.key))})}function TN({disabled:e,field:t,onCommit:i,value:o}){return t.type==="boolean"?v.jsx("div",{className:"schema-field schema-field--inline",children:v.jsxs("div",{className:"schema-field__switch-line",children:[v.jsx("span",{className:"schema-field__label-row",children:v.jsx("span",{className:"schema-field__label",children:t.label})}),v.jsx(Io,{disabled:e,label:t.label,selected:o===!0,onChange:i})]})}):t.type==="number"?v.jsx(CN,{disabled:e,field:t,value:o,onCommit:i}):v.jsx(ON,{disabled:e,field:t,value:o,onCommit:i})}function ON({disabled:e,field:t,onCommit:i,value:o}){const[s,l]=w.useState(()=>cc(o,!1)),d=cc(o,!1);return w.useEffect(()=>{l(d)},[d]),v.jsx("div",{className:"mb-field","data-variant":"input",children:v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{disabled:e,label:t.label,spellCheck:!1,type:"text",value:s,onBlur:()=>i(s.trim()===""?void 0:s),onInput:l})})})}function CN({disabled:e,field:t,onCommit:i,value:o}){const{t:s}=Oe(),[l,d]=w.useState(()=>Bv(o)),[f,h]=w.useState(""),m=Bv(o);w.useEffect(()=>{d(m),h("")},[m]);function g(){const y=l.trim();if(y===""){h(""),i(void 0);return}const b=Number(y);if(!Number.isFinite(b)){h(s("field.invalidNumber"));return}h(""),i(b)}return v.jsxs("div",{className:"mb-field","data-variant":"input",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Yt,{ariaInvalid:!!f,disabled:e,error:!!f,errorText:f,inputMode:"numeric",label:t.label,spellCheck:!1,type:"text",value:l,onBlur:g,onInput:y=>{d(y),f&&y.trim()===m&&h("")}})}),f?v.jsx("p",{className:"field-error field-error--sr",role:"alert",children:f}):null]})}function AN({field:e,resource:t,revision:i}){const o=jN(t,i,e);return v.jsx(qu,{autosave:o,field:e,valueFromDraft:uE,valueFromInput:s=>s})}function qu({autosave:e,field:t,valueFromDraft:i,valueFromInput:o}){const{locale:s,t:l}=Oe(),[d,f]=w.useState(""),h=e.label[s],m=e.value,g=d.trim(),y=w.useMemo(()=>m.map(D=>i(D)),[m,i]),b=g?y.includes(g):!1,_=!g||b||e.status==="saving";function E(D){e.commitValue(D)}function T(){!g||b||(f(""),E([...m,o(g)]))}function O(D){const C=i(D);E(m.filter(z=>i(z)!==C))}return v.jsxs("div",{className:"editable-list-field","aria-label":h,children:[v.jsx("div",{className:"editable-list-field__header",children:v.jsx("span",{className:"editable-list-field__title",children:h})}),v.jsx("md-chip-set",{className:"editable-list-field__items",role:"list","aria-label":h,children:m.map(D=>{const C=i(D);return v.jsx(F3,{className:"editable-list-field__chip",disabled:e.status==="saving",label:l("field.editableList.remove",{item:C,label:h}),onRemove:()=>O(D),children:C},C)})}),v.jsxs("div",{className:"editable-list-field__composer",children:[v.jsx(Yt,{ariaLabel:l("field.editableList.addInput",{label:h}),className:"editable-list-field__input",label:l("field.editableList.addInput",{label:h}),spellCheck:!1,value:d,onInput:f,onBlur:()=>{}}),v.jsx(Qn,{ariaLabel:l("field.editableList.addAction",{label:h}),className:"editable-list-field__add",disabled:_,icon:"add",onClick:T,children:l("field.editableList.add")})]}),e.error?v.jsx("p",{className:"field-error",role:"alert",children:e.error.message}):null]})}const oE=[{value:"auto",label:"auto"},{value:"enabled",label:"enabled"},{value:"disabled",label:"disabled"},{value:"injected",label:"injected"}];function af(e,t,i){const{t:o}=Oe(),s=e.value[i.path],l=JSON.stringify(cE(s)),d=w.useMemo(()=>JSON.parse(l),[l]),f=cs(),h=w.useCallback(g=>f(g),[f]),m=ls({resourceKind:e.kind,resourceId:e.id,field:i.path,committedValue:d,revision:t,save:h,configUpdateFailedMessage:g=>o("field.configUpdateFailed",{result:g}),requestFailedMessage:o("error.requestFailed")});return ss(`${e.kind}:${e.id}:${i.path}`,m.status),{commitValue:m.commitValue,commitSerializedValue:m.commitSerializedValue,error:m.error,status:m.status,value:m.value}}function RN(e,t,i){const{t:o}=Oe(),s=i?e.value[i.path]===!0:!1,l=cs(),d=w.useCallback(h=>l(h),[l]),f=ls({resourceKind:e.kind,resourceId:e.id,field:"supports_reasoning",committedValue:s,revision:t,save:d,disabled:!i,configUpdateFailedMessage:h=>o("field.configUpdateFailed",{result:h}),requestFailedMessage:o("error.requestFailed")});if(ss(`${e.kind}:${e.id}:supports_reasoning`,f.status),!!i)return{commitValue:f.commitValue,status:f.status,value:f.value}}function y_(e){if(!e)throw new Error("Model reasoning support field is required to render model reasoning controls.");return e}function jN(e,t,i){const{t:o}=Oe(),s=e.value[i.path],l=Array.isArray(s)?JSON.stringify(s.map(b=>String(b))):"[]",d=w.useMemo(()=>JSON.parse(l),[l]),f=cs(),h=w.useCallback(b=>f(b),[f]),m=ls({resourceKind:e.kind,resourceId:e.id,field:i.path,committedValue:d,revision:t,save:h,configUpdateFailedMessage:b=>o("field.configUpdateFailed",{result:b}),requestFailedMessage:o("error.requestFailed")});ss(`${e.kind}:${e.id}:${i.path}`,m.status);const g=Vo(e,i),y=g?Di[g].title:fE(i.label);return{commitValue:m.commitValue,error:m.error,label:y,status:m.status,value:m.value}}function kN(e,t,i){const{t:o}=Oe(),s=i?e.value[i.path]:void 0,l=JSON.stringify(aE(s)),d=w.useMemo(()=>JSON.parse(l),[l]),f=cs(),h=w.useCallback(y=>f(y),[f]),m=ls({resourceKind:e.kind,resourceId:e.id,field:"supported_reasoning_levels",committedValue:d,revision:t,save:h,disabled:!i,configUpdateFailedMessage:y=>o("field.configUpdateFailed",{result:y}),requestFailedMessage:o("error.requestFailed")});if(ss(`${e.kind}:${e.id}:supported_reasoning_levels`,m.status),!i)return;const g=Vo(e,i);return{commitValue:m.commitValue,error:m.error,label:g?Di[g].title:fE(i.label),status:m.status,value:m.value}}function b_(e){if(!e)throw new Error("Model reasoning levels field is required to render model reasoning controls.");return e}function MN({field:e,levels:t,resource:i,revision:o}){const{locale:s,t:l}=Oe(),d=i.value[e.path],f=typeof d=="string"?d:"",h=cs(),m=w.useCallback(E=>h(E),[h]),g=ls({resourceKind:i.kind,resourceId:i.id,field:e.path,committedValue:f,revision:o,save:m,configUpdateFailedMessage:E=>l("field.configUpdateFailed",{result:E}),requestFailedMessage:l("error.requestFailed")});ss(`${i.kind}:${i.id}:${e.path}`,g.status);const y=Vo(i,e),b=y?Di[y].title[s]:e.label,_=w.useMemo(()=>DN(t,g.value),[g.value,t]);return v.jsxs("div",{className:"mb-field","data-variant":"select",children:[v.jsx("div",{className:"mb-field__control",children:v.jsx(Tc,{ariaLabel:b,disabled:g.status==="saving",error:!!g.error,errorText:g.error?.message,label:b,options:_,required:e.required,value:g.value,onChange:g.commitValue})}),g.error?v.jsx("p",{className:"field-error",role:"alert",children:g.error.message}):null]})}function aE(e){return Array.isArray(e)?e.map(t=>{if(typeof t=="string")return{effort:t};if(!t||typeof t!="object")return;const i="effort"in t?t.effort:void 0;if(typeof i!="string"||i.trim()==="")return;const o="description"in t?t.description:void 0;return typeof o=="string"&&o.trim()?{effort:i,description:o}:{effort:i}}).filter(t=>t!==void 0):[]}function DN(e,t){const i=e.map(o=>({value:o.effort,label:o.effort}));return t&&!i.some(o=>o.value===t)?[{value:t,label:t},...i]:i}function sE(e){if(!e||typeof e!="object"||!("effort"in e)||typeof e.effort!="string")throw new Error("Reasoning level preset requires a string effort.");return e.effort}function lE(e){return{effort:e}}function cE(e){if(e==null)return{};if(typeof e!="object"||Array.isArray(e))throw new Error("Structured feature field requires an object value.");return e}function lc(e,t){const i={...e};return delete i[t],i}function zN(e){if(typeof e!="string"||e.trim()==="")return"auto";if(!oE.some(t=>t.value===e))throw new Error(`Unknown web search support mode: ${e}`);return e}function x_(e){if(e==null||e==="")return"";if(typeof e!="number"||!Number.isInteger(e))throw new Error("Structured integer field requires an integer value.");return String(e)}const PN={deepseek_v4:[{key:"reinforce_instructions",label:"deepseek_v4 reinforce instructions",type:"boolean"},{key:"reinforce_prompt",label:"deepseek_v4 reinforce prompt",type:"string"}],db_d1:[{key:"binding",label:"db_d1 binding",type:"string"}],db_sqlite:[{key:"path",label:"db_sqlite path",type:"string"},{key:"wal",label:"db_sqlite WAL",type:"boolean"},{key:"busy_timeout_ms",label:"db_sqlite busy timeout ms",type:"number"},{key:"max_open_conns",label:"db_sqlite max open conns",type:"number"}],kimi_workaround:[{key:"max_tool_rounds",label:"kimi_workaround max tool rounds",type:"number"},{key:"convergence_margin",label:"kimi_workaround convergence margin",type:"number"}],metrics:[{key:"default_limit",label:"metrics default limit",type:"number"},{key:"max_limit",label:"metrics max limit",type:"number"}],visual:[{key:"provider",label:"visual provider",type:"string"},{key:"model",label:"visual model",type:"string"},{key:"max_rounds",label:"visual max rounds",type:"number"},{key:"max_tokens",label:"visual max tokens",type:"number"}]};function LN(e){return Object.keys(e).sort((t,i)=>t.localeCompare(i)).map(t=>{const i=Ku(e[t]);return{name:t,config:dE(i.config),enabled:BN(e[t])}})}function NN(e){const t=PN[e.name]??[],i=new Set(t.map(s=>s.key)),o=Object.keys(e.config).filter(s=>!i.has(s)).sort((s,l)=>s.localeCompare(l)).flatMap(s=>{const l=$N(e.config[s]);return l?[{key:s,label:`${e.name} ${s}`,type:l}]:[]});return t.concat(o)}function $N(e){if(e==null)return"string";if(typeof e=="boolean")return"boolean";if(typeof e=="number")return"number";if(typeof e=="string")return"string"}function BN(e){const t=Ku(e);if(!("enabled"in t))return!0;if(typeof t.enabled!="boolean")throw new Error("Extension enabled value must be boolean when present.");return t.enabled}function Ku(e){if(e==null)return{};if(typeof e!="object"||Array.isArray(e))throw new Error("Extension entry must be an object.");return e}function dE(e){return e==null?{}:cE(e)}function cc(e,t){if(t&&e==="******"||e==null)return"";if(typeof e!="string")throw new Error("Structured string field requires a string value.");return e}function Bv(e){if(e==null||e==="")return"";if(typeof e!="number")throw new Error("Structured number field requires a number value.");return String(e)}function uE(e){if(typeof e!="string")throw new Error("Editable string list item must be a string.");return e}function fE(e){return{"en-US":e,"zh-CN":e}}function UN(e){return["context_window","max_output_tokens","description","base_instructions"].flatMap(t=>e.filter(i=>i.path===t)).concat(e.filter(t=>!IN.has(t.path)))}const IN=new Set(["context_window","max_output_tokens","description","base_instructions"]);function VN(e){return["supports_reasoning","default_reasoning_level","default_reasoning_summary","supported_reasoning_levels","supports_reasoning_summaries"].flatMap(t=>e.filter(i=>i.path===t)).concat(e.filter(t=>!J3.has(t.path)))}function FN(e){return e.control==="textarea"||e.control==="object"||e.control==="array"||e.type==="object"||e.type==="array"}function w_(e){return FN(e)?"form-grid__wide":e.type==="number"||e.type==="boolean"||e.control==="number"||e.control==="switch"||HN.has(e.path)?"form-grid__compact":"form-grid__medium"}const HN=new Set(["active_provider","addr","default_reasoning_level","default_reasoning_summary","format","level","max_sessions","mode","priority","search_max_rounds","session_ttl","support","ttl","version"]);function qN(e,t){const i=KN(e);return i.length>0&&typeof i[0]?.message=="string"?i[0].message:e instanceof Error?e.message:t}function KN(e){if(!e||typeof e!="object")return[];const t="raw"in e?e.raw:void 0;if(!t||typeof t!="object"||!("errors"in t))return[];const i=t.errors;return Array.isArray(i)?i:[]}function hE({title:e,message:t}){const{t:i}=Oe();return v.jsxs("section",{className:"state-panel",role:"alert",children:[v.jsx("p",{className:"eyebrow",children:i("common.error")}),v.jsx("h2",{children:e??i("error.requestFailed")}),v.jsx("p",{children:t})]})}function Fo({title:e}){return v.jsx("header",{className:"page-header",children:v.jsx("h1",{children:e})})}function GN(){const{t:e}=Oe();return v.jsx(hE,{title:e("error.storeTitle"),message:e("error.storeMessage")})}function Ho({error:e}){if(e instanceof No&&(e.code==="store_unavailable"||e.status===404))return v.jsx(GN,{});const{t}=Oe(),i=e instanceof Error?e.message:t("error.unknownRequest");return v.jsx(hE,{title:t("error.requestFailed"),message:i})}const YN=["defaults","trace","log"],QN={defaults:"resource.kind.defaults",trace:"resource.kind.trace",log:"resource.kind.log"};function XN(){const{t:e}=Oe(),t=Jn();if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("common.loading")});const i=YN.map(s=>t.data.resources.find(l=>l.kind===s)).filter(s=>!!s),o=ry(t.data.resources);return v.jsxs("section",{className:"page-stack","aria-labelledby":"defaults-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.config"),title:e("nav.defaults"),children:e("config.description")}),i.map(s=>v.jsx(WN,{modelDisplayNames:o,resource:s,revision:t.data.revision},s.kind))]})}function WN({resource:e,revision:t,modelDisplayNames:i}){const{t:o}=Oe(),s=QN[e.kind],l=s?o(s):e.label;return v.jsxs("section",{className:"resource-section","aria-label":l,children:[v.jsx("h2",{children:l}),v.jsx(hi,{ariaLabel:o("resource.cardLabel",{title:l,id:e.id}),modelDisplayNames:i,resource:e,revision:t,title:l})]})}class Oc extends cn{constructor(){super(...arguments),this.elevated=!1,this.href="",this.download="",this.target=""}get primaryId(){return this.href?"link":"button"}get rippleDisabled(){return!this.href&&(this.disabled||this.softDisabled)}getContainerClasses(){return{...super.getContainerClasses(),disabled:!this.href&&(this.disabled||this.softDisabled),elevated:this.elevated,link:!!this.href}}renderPrimaryAction(t){const{ariaLabel:i}=this;return this.href?ue`
+        <a
+          class="primary action"
+          id="link"
+          aria-label=${i||ae}
+          href=${this.href}
+          download=${this.download||ae}
+          target=${this.target||ae}
+          >${t}</a
+        >
+      `:ue`
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${i||ae}
+        aria-disabled=${this.softDisabled||ae}
+        ?disabled=${this.disabled&&!this.alwaysFocusable}
+        type="button"
+        >${t}</button
+      >
+    `}renderOutline(){return this.elevated?ue`<md-elevation part="elevation"></md-elevation>`:super.renderOutline()}}j([K({type:Boolean})],Oc.prototype,"elevated",void 0);j([K()],Oc.prototype,"href",void 0);j([K()],Oc.prototype,"download",void 0);j([K()],Oc.prototype,"target",void 0);const ZN=Ye`:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-assist-chip-leading-space, 16px);--_trailing-space: var(--md-assist-chip-trailing-space, 16px);--_icon-label-space: var(--md-assist-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-assist-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}}
+`;const pE=Ye`.elevated{--md-elevation-level: var(--_elevated-container-elevation);--md-elevation-shadow-color: var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level: var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level: var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level: var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level: var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}}
+`;let Uv=class extends Oc{};Uv.styles=[iy,pE,ZN];Uv=j([bt("md-assist-chip")],Uv);class mE extends ft{get chips(){return this.childElements.filter(t=>t instanceof cn)}constructor(){super(),this.internals=this.attachInternals(),this.addEventListener("focusin",this.updateTabIndices.bind(this)),this.addEventListener("update-focus",this.updateTabIndices.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.internals.role="toolbar"}render(){return ue`<slot @slotchange=${this.updateTabIndices}></slot>`}handleKeyDown(t){const i=t.key==="ArrowLeft",o=t.key==="ArrowRight",s=t.key==="Home",l=t.key==="End";if(!i&&!o&&!s&&!l)return;const{chips:d}=this;if(d.length<2)return;if(t.preventDefault(),s||l){const b=s?0:d.length-1;d[b].focus({trailing:l}),this.updateTabIndices();return}const h=getComputedStyle(this).direction==="rtl"?i:o,m=d.find(b=>b.matches(":focus-within"));if(!m){(h?d[0]:d[d.length-1]).focus({trailing:!h}),this.updateTabIndices();return}const g=d.indexOf(m);let y=h?g+1:g-1;for(;y!==g;){y>=d.length?y=0:y<0&&(y=d.length-1);const b=d[y];if(b.disabled&&!b.alwaysFocusable){h?y++:y--;continue}b.focus({trailing:!h}),this.updateTabIndices();break}}updateTabIndices(){const{chips:t}=this;let i;for(const o of t){const s=o.alwaysFocusable||!o.disabled;if(o.matches(":focus-within")&&s){i=o;continue}s&&!i&&(i=o),o.tabIndex=-1}i&&(i.tabIndex=0)}}j([sn()],mE.prototype,"childElements",void 0);const JN=Ye`:host{display:flex;flex-wrap:wrap;gap:8px}
+`;let Iv=class extends mE{};Iv.styles=[JN];Iv=j([bt("md-chip-set")],Iv);class qo extends B3{constructor(){super(...arguments),this.elevated=!1,this.removable=!1,this.selected=!1,this.hasSelectedIcon=!1}get primaryId(){return"button"}getContainerClasses(){return{...super.getContainerClasses(),elevated:this.elevated,selected:this.selected,"has-trailing":this.removable,"has-icon":this.hasIcon||this.selected}}renderPrimaryAction(t){const{ariaLabel:i}=this;return ue`
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${i||ae}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.softDisabled||ae}
+        ?disabled=${this.disabled&&!this.alwaysFocusable}
+        @click=${this.handleClickOnChild}
+        >${t}</button
+      >
+    `}renderLeadingIcon(){return this.selected?ue`
+      <slot name="selected-icon">
+        <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+          <path
+            d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+        </svg>
+      </slot>
+    `:super.renderLeadingIcon()}renderTrailingAction(t){return this.removable?U3({focusListener:t,ariaLabel:this.ariaLabelRemove,disabled:this.disabled||this.softDisabled}):ae}renderOutline(){return this.elevated?ue`<md-elevation part="elevation"></md-elevation>`:super.renderOutline()}handleClickOnChild(t){if(this.disabled||this.softDisabled)return;const i=this.selected;if(this.selected=!this.selected,!as(this,t)){this.selected=i;return}}}j([K({type:Boolean})],qo.prototype,"elevated",void 0);j([K({type:Boolean})],qo.prototype,"removable",void 0);j([K({type:Boolean,reflect:!0})],qo.prototype,"selected",void 0);j([K({type:Boolean,reflect:!0,attribute:"has-selected-icon"})],qo.prototype,"hasSelectedIcon",void 0);j([at(".primary.action")],qo.prototype,"primaryAction",void 0);j([at(".trailing.action")],qo.prototype,"trailingAction",void 0);const e$=Ye`:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-filter-chip-leading-space, 16px);--_trailing-space: var(--md-filter-chip-trailing-space, 16px);--_icon-label-space: var(--md-filter-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-filter-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-filter-chip-with-trailing-icon-trailing-space, 8px)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}}
+`;let Vv=class extends qo{};Vv.styles=[iy,pE,V3,I3,e$];Vv=j([bt("md-filter-chip")],Vv);function Al({children:e,onSelect:t,selected:i,value:o}){const s=w.useRef(null);return w.useEffect(()=>{const l=s.current;if(!l)throw new Error("MaterialFilterChip rendered before md-filter-chip was registered.");const d=()=>{t(o),i&&window.requestAnimationFrame(()=>{s.current&&(s.current.selected=!0)})};return l.addEventListener("click",d),()=>l.removeEventListener("click",d)},[t,i,o]),w.useEffect(()=>{if(!s.current)throw new Error("MaterialFilterChip rendered before md-filter-chip was registered.");s.current.selected=i},[i]),v.jsx("md-filter-chip",{ref:s,children:e})}function t$({children:e}){return w.createElement("md-assist-chip",null,e)}const __={id:"",baseUrl:"",apiKey:"",protocol:"openai-response",displayName:"",contextWindow:"128000",model:"",provider:"",upstreamName:"",priority:"1",inputPrice:"0",outputPrice:"0",cacheWritePrice:"0",cacheReadPrice:"0",billingEnabled:!1,enabled:!0},Tm={extension:{add:"create.extension.add",submit:"create.extension.submit",title:"create.extension.title"},model:{add:"create.model.add",submit:"create.model.submit",title:"create.model.title"},provider:{add:"create.provider.add",submit:"create.provider.submit",title:"create.provider.title"},provider_offer:{add:"create.offer.add",submit:"create.offer.submit",title:"create.offer.title"},route:{add:"create.route.add",submit:"create.route.submit",title:"create.route.title"}};function dc({availableExtensionIds:e,graph:t,kind:i,modelId:o,providerId:s}){const{t:l}=Oe(),d=gL(),f=e??[],h=i==="extension"&&f.length===0,[m,g]=w.useState(!1),[y,b]=w.useState(()=>Cm(i,t,s,o,f)),[_,E]=w.useState(""),T=l(Tm[i].title),O=l(Tm[i].add),D=l(Tm[i].submit);function C(){b(Cm(i,t,s,o,f)),E(""),g(!0)}async function z(B){B.preventDefault(),E("");const H=c$(i,y,{cacheReadPrice:l("create.offer.cacheReadPrice"),cacheWritePrice:l("create.offer.cacheWritePrice"),contextWindow:l("create.model.contextWindow"),inputPrice:l("create.offer.inputPrice"),outputPrice:l("create.offer.outputPrice"),priority:l("create.offer.priority")},ne=>l("create.invalidNumber",{field:ne}),ne=>l("create.positiveNumber",{field:ne}));if(!H.ok){E(H.error);return}try{await d.mutateAsync({kind:i,body:{baseRevision:t.revision,id:H.id,value:H.value}}),g(!1),b(Cm(i,t,s,o,f))}catch(ne){E(f$(ne,l("error.requestFailed")))}}return v.jsxs("div",{className:"create-resource",children:[v.jsx(Qn,{type:"button",className:"create-resource__add",disabled:h,onClick:C,icon:"add",children:O}),m?v.jsxs("form",{className:"create-resource__panel","aria-label":T,onSubmit:z,children:[v.jsxs("div",{className:"create-resource__header",children:[v.jsx("h3",{children:T}),v.jsx(pi,{className:"icon-button",icon:"close",label:l("create.close"),onClick:()=>g(!1)})]}),_?v.jsx("p",{className:"field-error",role:"alert",children:_}):null,v.jsx("div",{className:"form-grid create-resource__fields",children:v.jsx(r$,{graph:t,kind:i,availableExtensionIds:f,values:y,modelId:o,providerId:s,setValues:b})}),v.jsxs("div",{className:"form-actions",children:[v.jsx(Qn,{type:"submit",disabled:d.isPending,children:D}),v.jsx(Xa,{className:"secondary-button",onClick:()=>g(!1),children:l("create.cancel")})]})]}):null]})}function r$({availableExtensionIds:e=[],graph:t,kind:i,modelId:o,providerId:s,values:l,setValues:d}){const{locale:f,t:h}=Oe(),m=t.resources.filter(b=>b.kind==="model"),g=t.resources.filter(b=>b.kind==="provider"),y=(b,_)=>Di[b]?.description[f]??h(_);return i==="provider"?v.jsxs(v.Fragment,{children:[v.jsx(Fr,{helpText:y("providers.<key>.key","create.help.providerId"),label:h("create.provider.id"),path:"key",value:l.id,onChange:b=>d({...l,id:b})}),v.jsx(Fr,{helpText:y("providers.<key>.base_url","create.help.providerBaseUrl"),label:h("create.provider.baseUrl"),path:"base_url",value:l.baseUrl,onChange:b=>d({...l,baseUrl:b})}),v.jsx(Fr,{helpText:y("providers.<key>.api_key","create.help.providerApiKey"),label:h("create.provider.apiKey"),path:"api_key",value:l.apiKey,onChange:b=>d({...l,apiKey:b}),secret:!0}),v.jsx(pl,{helpText:y("providers.<key>.protocol","create.help.providerProtocol"),label:h("create.provider.protocol"),options:s$(h),value:l.protocol,onChange:b=>d({...l,protocol:b})})]}):i==="model"?v.jsxs(v.Fragment,{children:[v.jsx(Fr,{helpText:y("models.<slug>.slug","create.help.modelId"),label:h("create.model.id"),path:"slug",value:l.id,onChange:b=>d({...l,id:b})}),v.jsx(Fr,{helpText:h("create.help.modelDisplayName"),label:h("create.model.displayName"),leadingIconNode:Ec(l.displayName||l.id),path:"display_name",value:l.displayName,onChange:b=>d({...l,displayName:b})}),v.jsx(i$,{helpText:y("models.<slug>.context_window","create.help.modelContextWindow"),label:h("create.model.contextWindow"),value:l.contextWindow,onChange:b=>d({...l,contextWindow:b})})]}):i==="route"?v.jsxs(v.Fragment,{children:[v.jsx(Fr,{helpText:y("routes.<alias>.alias","create.help.routeId"),label:h("create.route.id"),path:"alias",value:l.id,onChange:b=>d({...l,id:b})}),v.jsx(pl,{helpText:y("routes.<alias>.model","create.help.routeModel"),label:h("create.route.model"),options:$3(m),value:l.model,onChange:b=>d({...l,model:b})}),v.jsx(pl,{helpText:y("routes.<alias>.provider","create.help.routeProvider"),label:h("create.route.provider"),options:Om(g.map(b=>b.id)),value:l.provider,onChange:b=>d({...l,provider:b})})]}):i==="provider_offer"?v.jsxs(v.Fragment,{children:[v.jsxs("div",{className:"schema-field form-field--create-track",children:[v.jsx(vE,{helpText:y("providers.<key>.offers[].model","create.help.offerModel"),label:h("create.offer.model")}),v.jsx(t$,{children:o??l.model})]}),v.jsx(pl,{helpText:y("providers.<key>.key","create.help.offerProvider"),label:h("create.offer.provider"),options:Om(g.map(b=>b.id)),value:l.provider,onChange:b=>d({...l,provider:b})}),v.jsx(Fr,{helpText:y("providers.<key>.offers[].upstream_name","create.help.offerUpstreamName"),label:h("create.offer.upstreamName"),path:"upstream_name",value:l.upstreamName,onChange:b=>d({...l,upstreamName:b})}),v.jsx(Fr,{helpText:h("create.help.offerPriority"),label:h("create.offer.priority"),path:"priority",value:l.priority,onChange:b=>d({...l,priority:b})}),v.jsx(S_,{helpText:h("create.help.offerBilling"),label:h("create.offer.billing"),value:l.billingEnabled,onChange:b=>d({...l,billingEnabled:b})}),l.billingEnabled?v.jsxs(v.Fragment,{children:[v.jsx(Fr,{helpText:y("providers.<key>.offers[].pricing","create.help.offerInputPrice"),label:h("create.offer.inputPrice"),path:"input_price",value:l.inputPrice,onChange:b=>d({...l,inputPrice:b})}),v.jsx(Fr,{helpText:y("providers.<key>.offers[].pricing","create.help.offerOutputPrice"),label:h("create.offer.outputPrice"),path:"output_price",value:l.outputPrice,onChange:b=>d({...l,outputPrice:b})}),v.jsx(Fr,{helpText:y("providers.<key>.offers[].pricing","create.help.offerCacheWritePrice"),label:h("create.offer.cacheWritePrice"),path:"cache_write_price",value:l.cacheWritePrice,onChange:b=>d({...l,cacheWritePrice:b})}),v.jsx(Fr,{helpText:y("providers.<key>.offers[].pricing","create.help.offerCacheReadPrice"),label:h("create.offer.cacheReadPrice"),path:"cache_read_price",value:l.cacheReadPrice,onChange:b=>d({...l,cacheReadPrice:b})})]}):null]}):v.jsxs(v.Fragment,{children:[v.jsx(pl,{helpText:h("create.help.extensionId"),label:h("create.extension.id"),options:Om(e),value:l.id,onChange:b=>d({...l,id:b})}),v.jsx(S_,{helpText:y("extensions.<name>.enabled","create.help.extensionEnabled"),label:h("create.extension.enabled"),value:l.enabled,onChange:b=>d({...l,enabled:b})})]})}function Fr({helpText:e,label:t,leadingIconNode:i,onChange:o,path:s,secret:l,value:d}){const f=hy(t),h=sf(t);return v.jsx("div",{className:"mb-field form-field--create-track","data-variant":"input",children:v.jsxs("div",{className:"mb-field__control",children:[v.jsx(Yt,{ariaDescribedBy:h.open?h.helpId:void 0,ariaLabel:t,autoComplete:l?"new-password":void 0,id:f,label:t,leadingIcon:n$(s,l),leadingIconNode:i,trailingIcon:h.button("trailing-icon"),type:l?"password":"text",value:d,onInput:o}),v.jsx(lf,{anchorRef:h.anchorRef,helpId:h.helpId,helpText:e,open:h.open})]})})}function pl({helpText:e,label:t,onChange:i,options:o,value:s}){const l=sf(t);return v.jsxs("div",{className:"mb-field form-field--create-track","data-variant":"select",children:[v.jsx("div",{className:"mb-field__select-actions",children:l.button(void 0,"mb-field__select-help")}),v.jsx("div",{className:"mb-field__control",children:v.jsx(Tc,{describedBy:l.open?l.helpId:void 0,ariaLabel:t,label:t,leadingIcon:o.find(d=>d.value===s)?.leadingIcon,onChange:i,options:o,value:s})}),v.jsx(lf,{anchorRef:l.anchorRef,helpId:l.helpId,helpText:e,open:l.open})]})}function i$({helpText:e,label:t,onChange:i,value:o}){const{t:s}=Oe(),l=hy(t),d=sf(t),f=[[s("create.contextWindowPreset.128k"),"128000"],[s("create.contextWindowPreset.400k"),"400000"],[s("create.contextWindowPreset.1m"),"1000000"]];return v.jsxs("div",{className:"mb-field form-field--create-track form-grid__wide create-resource__context-window-row","data-variant":"input",children:[v.jsxs("div",{className:"mb-field__control",children:[v.jsx(Yt,{ariaDescribedBy:d.open?d.helpId:void 0,ariaLabel:t,id:l,inputMode:"numeric",label:t,leadingIcon:"tag",trailingIcon:d.button("trailing-icon"),type:"text",value:o,onInput:i}),v.jsx(lf,{anchorRef:d.anchorRef,helpId:d.helpId,helpText:e,open:d.open})]}),v.jsx("md-chip-set",{className:"material-chip-group create-resource__context-window-presets",role:"group","aria-label":s("create.contextWindowPresets",{label:t}),children:f.map(([h,m])=>v.jsx(Al,{selected:o===m,value:m,onSelect:i,children:h},m))})]})}function S_({helpText:e,label:t,onChange:i,value:o}){return v.jsx("div",{className:"schema-field schema-field--inline form-field--create-track",children:v.jsxs("div",{className:"schema-field__switch-line",children:[v.jsx(vE,{helpText:e,label:t}),v.jsx(Io,{label:t,selected:o,onChange:i})]})})}function vE({helpText:e,label:t}){return v.jsxs("span",{className:"schema-field__label-row",children:[v.jsx("span",{className:"schema-field__label",children:t}),v.jsx(o$,{helpText:e,label:t})]})}function n$(e,t=!1){if(t)return"key";const i=e.toLowerCase();if(i.includes("url")||i.includes("endpoint")||i.includes("addr"))return"link";if(i.includes("model"))return"smart_toy";if(i.includes("agent"))return"badge";if(i.includes("price")||i.includes("priority")||i.includes("window"))return"tag"}function sf(e){const{t}=Oe(),[i,o]=w.useState(!1),s=w.useRef(!1),l=w.useRef(null),d=`${hy(e)}-help`;return{anchorRef:l,button:(f,h="schema-field__help")=>v.jsx(pi,{className:h,describedBy:i?d:void 0,icon:"help",label:t("field.helpFor",{label:e}),onBlur:()=>o(!1),onClick:m=>{if(m.stopPropagation(),s.current){s.current=!1,o(!0);return}o(g=>!g)},onFocus:()=>o(!0),onKeyDown:m=>{m.key==="Escape"&&o(!1)},onMouseDown:m=>m.preventDefault(),onMouseEnter:()=>{s.current=!0,o(!0)},onMouseLeave:()=>{s.current=!1,o(!1)},ref:l,slot:f}),helpId:d,open:i}}function o$({helpText:e,label:t}){const i=sf(t);return v.jsxs("span",{className:"schema-field__help-wrap",children:[i.button(),v.jsx(lf,{anchorRef:i.anchorRef,helpId:i.helpId,helpText:e,open:i.open})]})}function lf({anchorRef:e,helpId:t,helpText:i,open:o}){const s=ay(e,o);return o?v.jsx("span",{className:"rich-tooltip",id:t,role:"tooltip",style:a$(s),children:i}):null}function a$(e){if(e)return{left:`${e.left}px`,maxWidth:`${e.maxWidth}px`,position:"fixed",top:`${e.top}px`}}function hy(e){return`create-resource-${w.useId()}-${e}`.replace(/[^a-zA-Z0-9_-]/g,"-")}function Om(e){return e.map(t=>({label:t,value:t}))}function s$(e){return["openai-response","openai-chat","anthropic","google-genai"].map(t=>({label:p$(t,e),leadingIcon:Fu(t),value:t}))}function Cm(e,t,i,o,s=[]){const l=t.resources.find(f=>f.kind==="model")?.id??"",d=t.resources.find(f=>f.kind==="provider")?.id??"";return{...__,id:e==="extension"?s[0]??"":__.id,model:e==="provider_offer"?o??l:e==="route"?l:"",provider:e==="route"||e==="provider_offer"?i??d:""}}function l$(e,t){return e==="provider_offer"?`${t.provider}/${t.model}`:t.id}function c$(e,t,i,o,s){const l=d$(e,t,i,o,s);return l.ok?{ok:!0,id:l$(e,t),value:l.value}:l}function d$(e,t,i,o,s){if(e==="provider")return{ok:!0,value:{base_url:t.baseUrl,api_key:t.apiKey,protocol:t.protocol}};if(e==="model"){const l=u$(t.contextWindow,i.contextWindow,o,s);return l.ok?{ok:!0,value:{display_name:t.displayName,context_window:l.value}}:l}if(e==="route")return{ok:!0,value:{model:t.model,provider:t.provider}};if(e==="provider_offer"){const l=Ba(t.priority,i.priority,o);if(!l.ok)return l;const d={model:t.model,upstream_name:t.upstreamName,priority:l.value};if(!t.billingEnabled)return{ok:!0,value:d};const f=Ba(t.inputPrice,i.inputPrice,o),h=Ba(t.outputPrice,i.outputPrice,o),m=Ba(t.cacheWritePrice,i.cacheWritePrice,o),g=Ba(t.cacheReadPrice,i.cacheReadPrice,o);return f.ok?h.ok?m.ok?g.ok?{ok:!0,value:{...d,pricing:{input_price:f.value,output_price:h.value,cache_write_price:m.value,cache_read_price:g.value}}}:g:m:h:f}return{ok:!0,value:{enabled:t.enabled}}}function Ba(e,t,i){if(e.trim()==="")return{ok:!0,value:0};const o=Number(e);return Number.isFinite(o)?{ok:!0,value:o}:{ok:!1,error:i(t)}}function u$(e,t,i,o){const s=Ba(e,t,i);return s.ok&&s.value<=0?{ok:!1,error:o(t)}:s}function f$(e,t){const i=h$(e);return i.length>0&&typeof i[0]?.message=="string"?i[0].message:e instanceof Error?e.message:t}function h$(e){if(!e||typeof e!="object")return[];const t="raw"in e?e.raw:void 0;if(!t||typeof t!="object"||!("errors"in t))return[];const i=t.errors;return Array.isArray(i)?i:[]}function p$(e,t){const o={anthropic:"provider.protocol.anthropic","openai-response":"provider.protocol.openaiResponses","openai-chat":"provider.protocol.openaiChat","google-genai":"provider.protocol.googleGenai"}[e];return o?t(o):e}class cf extends ft{constructor(){super(...arguments),this.inset=!1,this.insetStart=!1,this.insetEnd=!1}}j([K({type:Boolean,reflect:!0})],cf.prototype,"inset",void 0);j([K({type:Boolean,reflect:!0,attribute:"inset-start"})],cf.prototype,"insetStart",void 0);j([K({type:Boolean,reflect:!0,attribute:"inset-end"})],cf.prototype,"insetEnd",void 0);const m$=Ye`:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}
+`;let Fv=class extends cf{};Fv.styles=[m$];Fv=j([bt("md-divider")],Fv);const v$={dialog:[[[{transform:"translateY(-50px)"},{transform:"translateY(0)"}],{duration:500,easing:Oi.EMPHASIZED}]],scrim:[[[{opacity:0},{opacity:.32}],{duration:500,easing:"linear"}]],container:[[[{opacity:0},{opacity:1}],{duration:50,easing:"linear",pseudoElement:"::before"}],[[{height:"35%"},{height:"100%"}],{duration:500,easing:Oi.EMPHASIZED,pseudoElement:"::before"}]],headline:[[[{opacity:0},{opacity:0,offset:.2},{opacity:1}],{duration:250,easing:"linear",fill:"forwards"}]],content:[[[{opacity:0},{opacity:0,offset:.2},{opacity:1}],{duration:250,easing:"linear",fill:"forwards"}]],actions:[[[{opacity:0},{opacity:0,offset:.5},{opacity:1}],{duration:300,easing:"linear",fill:"forwards"}]]},g$={dialog:[[[{transform:"translateY(0)"},{transform:"translateY(-50px)"}],{duration:150,easing:Oi.EMPHASIZED_ACCELERATE}]],scrim:[[[{opacity:.32},{opacity:0}],{duration:150,easing:"linear"}]],container:[[[{height:"100%"},{height:"35%"}],{duration:150,easing:Oi.EMPHASIZED_ACCELERATE,pseudoElement:"::before"}],[[{opacity:"1"},{opacity:"0"}],{delay:100,duration:50,easing:"linear",pseudoElement:"::before"}]],headline:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]],content:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]],actions:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]]};const y$=ln(ft);class Rt extends y${get open(){return this.isOpen}set open(t){t!==this.isOpen&&(this.isOpen=t,t?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.quick=!1,this.returnValue="",this.noFocusTrap=!1,this.getOpenAnimation=()=>v$,this.getCloseAnimation=()=>g$,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,this.treewalker=document.createTreeWalker(this,NodeFilter.SHOW_ELEMENT),this.addEventListener("submit",this.handleSubmit)}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;const t=this.dialog;if(t.open||!this.isOpening){this.isOpening=!1;return}if(!this.dispatchEvent(new Event("open",{cancelable:!0}))){this.open=!1,this.isOpening=!1;return}t.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),this.querySelector("[autofocus]")?.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1}async close(t=this.returnValue){if(this.isOpening=!1,!this.isConnected){this.open=!1;return}await this.updateComplete;const i=this.dialog;if(!i.open||this.isOpening){this.open=!1;return}const o=this.returnValue;if(this.returnValue=t,!this.dispatchEvent(new Event("close",{cancelable:!0}))){this.returnValue=o;return}await this.animateDialog(this.getCloseAnimation()),i.close(t),this.open=!1,this.dispatchEvent(new Event("closed"))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){const t=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),i={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:t,"show-top-divider":t&&!this.isAtScrollTop,"show-bottom-divider":t&&!this.isAtScrollBottom},o=this.open&&!this.noFocusTrap,s=ue`
+      <div
+        class="focus-trap"
+        tabindex="0"
+        aria-hidden="true"
+        @focus=${this.handleFocusTrapFocus}></div>
+    `,{ariaLabel:l}=this;return ue`
+      <div class="scrim"></div>
+      <dialog
+        class=${xr(i)}
+        aria-label=${l||ae}
+        aria-labelledby=${this.hasHeadline?"headline":ae}
+        role=${this.type==="alert"?"alertdialog":ae}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        @close=${this.handleClose}
+        @keydown=${this.handleKeydown}
+        .returnValue=${this.returnValue||ae}>
+        ${o?s:ae}
+        <div class="container" @click=${this.handleContentClick}>
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline||ae}>
+              <slot
+                name="headline"
+                @slotchange=${this.handleHeadlineChange}></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions" @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+        ${o?s:ae}
+      </dialog>
+    `}firstUpdated(){this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)this.handleAnchorIntersection(i)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(){if(this.nextClickIsFromContent){this.nextClickIsFromContent=!1;return}this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(t){const i=t.target,{submitter:o}=t;i.getAttribute("method")!=="dialog"||!o||this.close(o.getAttribute("value")??this.returnValue)}handleCancel(t){if(t.target!==this.dialog)return;this.escapePressedWithoutCancel=!1;const i=!as(this,t);t.preventDefault(),!i&&this.close()}handleClose(){this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,this.dialog?.dispatchEvent(new Event("cancel",{cancelable:!0})))}handleKeydown(t){t.key==="Escape"&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(t){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;const{dialog:i,scrim:o,container:s,headline:l,content:d,actions:f}=this;if(!i||!o||!s||!l||!d||!f)return;const{container:h,dialog:m,scrim:g,headline:y,content:b,actions:_}=t,E=[[i,m??[]],[o,g??[]],[s,h??[]],[l,y??[]],[d,b??[]],[f,_??[]]],T=[];for(const[O,D]of E)for(const C of D){const z=O.animate(...C);this.cancelAnimations.signal.addEventListener("abort",()=>{z.cancel()}),T.push(z)}await Promise.all(T.map(O=>O.finished.catch(()=>{})))}handleHeadlineChange(t){const i=t.target;this.hasHeadline=i.assignedElements().length>0}handleActionsChange(t){const i=t.target;this.hasActions=i.assignedElements().length>0}handleIconChange(t){const i=t.target;this.hasIcon=i.assignedElements().length>0}handleAnchorIntersection(t){const{target:i,isIntersecting:o}=t;i===this.topAnchor&&(this.isAtScrollTop=o),i===this.bottomAnchor&&(this.isAtScrollBottom=o)}getIsConnectedPromise(){return new Promise(t=>{this.isConnectedPromiseResolve=t})}handleFocusTrapFocus(t){const[i,o]=this.getFirstAndLastFocusableChildren();if(!i||!o){this.dialog?.focus();return}const s=t.target===this.firstFocusTrap,l=!s,d=t.relatedTarget===i,f=t.relatedTarget===o,h=!d&&!f;if(l&&f||s&&h){i.focus();return}if(s&&d||l&&h){o.focus();return}}getFirstAndLastFocusableChildren(){if(!this.treewalker)return[null,null];let t=null,i=null;for(this.treewalker.currentNode=this.treewalker.root;this.treewalker.nextNode();){const o=this.treewalker.currentNode;b$(o)&&(t||(t=o),i=o)}return[t,i]}}j([K({type:Boolean})],Rt.prototype,"open",null);j([K({type:Boolean})],Rt.prototype,"quick",void 0);j([K({attribute:!1})],Rt.prototype,"returnValue",void 0);j([K()],Rt.prototype,"type",void 0);j([K({type:Boolean,attribute:"no-focus-trap"})],Rt.prototype,"noFocusTrap",void 0);j([at("dialog")],Rt.prototype,"dialog",void 0);j([at(".scrim")],Rt.prototype,"scrim",void 0);j([at(".container")],Rt.prototype,"container",void 0);j([at(".headline")],Rt.prototype,"headline",void 0);j([at(".content")],Rt.prototype,"content",void 0);j([at(".actions")],Rt.prototype,"actions",void 0);j([yt()],Rt.prototype,"isAtScrollTop",void 0);j([yt()],Rt.prototype,"isAtScrollBottom",void 0);j([at(".scroller")],Rt.prototype,"scroller",void 0);j([at(".top.anchor")],Rt.prototype,"topAnchor",void 0);j([at(".bottom.anchor")],Rt.prototype,"bottomAnchor",void 0);j([at(".focus-trap")],Rt.prototype,"firstFocusTrap",void 0);j([yt()],Rt.prototype,"hasHeadline",void 0);j([yt()],Rt.prototype,"hasActions",void 0);j([yt()],Rt.prototype,"hasIcon",void 0);function b$(e){const t=":is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])",i=":not(:disabled,[disabled])";return e.matches(t+i+':not([tabindex^="-"])')?!0:!e.localName.includes("-")||!e.matches(i)?!1:e.shadowRoot?.delegatesFocus??!1}const x$=Ye`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));flex:1;font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}
+`;let Hv=class extends Rt{};Hv.styles=[x$];Hv=j([bt("md-dialog")],Hv);function w$({open:e,onClose:t,ariaLabel:i,headline:o,actions:s,className:l,children:d}){const f=w.useRef(null),h=w.useRef(t);return h.current=t,w.useEffect(()=>{const m=f.current;m&&(e&&typeof m.show=="function"&&!m.open?m.show().catch(()=>{}):!e&&typeof m.close=="function"&&m.open&&m.close())},[e]),w.useEffect(()=>{const m=f.current;if(!m)return;const g=()=>h.current();return m.addEventListener("close",g),()=>m.removeEventListener("close",g)},[]),v.jsxs("md-dialog",{ref:f,"aria-label":i,className:l,children:[o?v.jsxs("div",{slot:"headline",className:"material-dialog__headline",children:[v.jsx("span",{className:"material-dialog__headline-text",children:o}),v.jsx(pi,{className:"material-dialog__close",icon:"close",label:"Close",onClick:t})]}):null,v.jsx("div",{slot:"content",className:"material-dialog__content",children:d}),s?v.jsx("div",{slot:"actions",children:s}):null]})}function gE({onClose:e,open:t,resource:i,revision:o,modelDisplayNames:s,title:l,children:d}){const{t:f}=Oe(),h=l??i.label;return v.jsx(w$,{open:t,onClose:e,ariaLabel:f("resource.editorAriaLabel",{title:h,id:i.id}),headline:f("resource.editorHeading",{title:h}),className:"resource-editor-dialog",children:v.jsx(hi,{embedded:!0,resource:i,revision:o,modelDisplayNames:s,title:l,children:d})})}function _$(){const{t:e}=Oe(),t=Jn(),[i,o]=w.useState(null),s=w.useMemo(()=>t.data?ry(t.data.resources):{},[t.data]);if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("loading.providers")});const l=t.data.resources,d=Am(l,"provider"),f=Am(l,"provider_offer"),h=Am(l,"model"),m=E$(f),g=f.filter(b=>!h.some(_=>_.id===yE(b))),y=i?l.find(b=>b.kind===i.kind&&b.id===i.id):void 0;return v.jsxs("section",{className:"page-stack","aria-labelledby":"models-providers-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.upstream"),title:e("nav.modelsProviders"),children:e("modelsProviders.description")}),v.jsxs("section",{className:"resource-section","aria-labelledby":"providers-heading",children:[v.jsxs("div",{className:"section-heading",children:[v.jsx("h2",{id:"providers-heading",children:e("modelsProviders.providers",{count:d.length})}),v.jsx(dc,{graph:t.data,kind:"provider"})]}),v.jsx("div",{className:"resource-card-list resource-card-list--summary",children:d.map(b=>v.jsx(hi,{ariaLabel:e("modelsProviders.providerRegion",{id:b.id}),onOpenEditor:()=>o({kind:"provider",id:b.id}),resource:b,revision:t.data.revision,title:e("resource.kind.provider"),variant:"summary"},b.id))})]}),g.length>0?v.jsxs("section",{className:"resource-section","aria-labelledby":"offers-heading",children:[v.jsx("h2",{id:"offers-heading",children:e("modelsProviders.unmatchedSupplies",{count:g.length})}),v.jsx("div",{className:"resource-card-list resource-card-list--summary",children:g.map(b=>v.jsx(hi,{modelDisplayNames:s,onOpenEditor:()=>o({kind:"provider_offer",id:b.id}),resource:b,revision:t.data.revision,title:e("resource.kind.offer"),variant:"summary"},b.id))})]}):null,v.jsxs("section",{className:"resource-section","aria-labelledby":"models-heading",children:[v.jsxs("div",{className:"section-heading",children:[v.jsx("h2",{id:"models-heading",children:e("modelsProviders.models",{count:h.length})}),v.jsx(dc,{graph:t.data,kind:"model"})]}),v.jsx("div",{className:"resource-card-list resource-card-list--summary",children:h.map(b=>v.jsx(hi,{ariaLabel:e("modelsProviders.modelRegion",{id:b.id}),modelDisplayNames:s,onOpenEditor:()=>o({kind:"model",id:b.id}),resource:b,revision:t.data.revision,title:e("resource.kind.model"),variant:"summary"},b.id))})]}),y?v.jsx(gE,{open:!0,onClose:()=>o(null),modelDisplayNames:s,resource:y,revision:t.data.revision,title:S$(y.kind,e),children:y.kind==="model"?v.jsx(T$,{graph:t.data,modelDisplayNames:s,modelId:y.id,offers:m.get(y.id)??[]}):null}):null]})}function S$(e,t){switch(e){case"model":return t("resource.kind.model");case"provider":return t("resource.kind.provider");case"provider_offer":return t("resource.kind.offer");default:return""}}function Am(e,t){return e.filter(i=>i.kind===t)}function E$(e){const t=new Map;for(const i of e){const o=yE(i),s=t.get(o)??[];s.push(i),t.set(o,s)}return t}function yE(e){const t=e.value.model;if(typeof t=="string"&&t.trim())return t;const i=e.id.indexOf("/");return i>=0?e.id.slice(i+1):""}function T$({graph:e,modelDisplayNames:t,modelId:i,offers:o}){const{t:s}=Oe(),l=`model-${i}-providers-heading`,d=`model-${i}-providers-body`.replace(/[^a-zA-Z0-9_-]/g,"-"),f=s("modelsProviders.modelProviders",{count:o.length});return v.jsxs("section",{className:"resource-field-group resource-field-group--advanced model-provider-bindings","aria-labelledby":l,"aria-label":f,children:[v.jsxs("div",{className:"resource-field-group__header",children:[v.jsxs("h4",{id:l,children:[v.jsx("span",{className:"material-symbol","aria-hidden":"true",children:"cloud_sync"}),f]}),v.jsx("div",{className:"resource-field-group__header-actions",children:v.jsx(dc,{graph:e,kind:"provider_offer",modelId:i})})]}),v.jsx("div",{className:"resource-card-list resource-card-list--compact resource-field-group__body",id:d,children:o.map(h=>v.jsx(hi,{modelDisplayNames:t,resource:h,revision:e.revision,title:s("resource.kind.offer")},h.id))})]})}const O$=()=>Wn("/extensions"),C$=(e="session")=>Wn(e==="session"?"/stats/usage":`/stats/usage?range=${e}`),A$=(e={})=>{const t=new URLSearchParams;e.limit!==void 0&&t.set("limit",String(e.limit));const i=t.toString();return Wn(`/logs/recent${i?`?${i}`:""}`)};async function R$(e={}){const t={Accept:"text/event-stream"},i=M3();i&&(t.Authorization=`Bearer ${i}`);const o=await fetch(D3("/logs/stream"),{method:"GET",headers:t,signal:e.signal});if(!o.ok)throw new No(o.status,"log_stream_error",$u("logs.streamFailedWithStatus",{status:o.status}));if(!o.body)throw new No(o.status,"log_stream_error",$u("logs.streamBodyEmpty"));return o}const j$=["ALL","ERROR","WARN","INFO","DEBUG"];function k$({labelledBy:e,embedded:t}){const{t:i}=Oe(),[o,s]=w.useState([]),[l,d]=w.useState(""),[f,h]=w.useState("ALL"),[m,g]=w.useState(!0),[y,b]=w.useState(!1),[_,E]=w.useState(!0),[T,O]=w.useState();w.useEffect(()=>{let C=!1;return A$({limit:200}).then(z=>{C||(s(z),E(!1))}).catch(z=>{C||(O(z),E(!1))}),()=>{C=!0}},[]),w.useEffect(()=>{if(!m)return;b(!1);const C=new AbortController;return z$(C.signal,z=>{s(B=>[...B,z])}).catch(z=>{C.signal.aborted||(b(!0),console.error("log stream failed",z))}),()=>C.abort()},[m]);const D=w.useMemo(()=>{const C=l.trim().toLowerCase();return o.filter(z=>f!=="ALL"&&bE(z.level)!==f.toLowerCase()?!1:C?uc(z).toLowerCase().includes(C):!0)},[o,l,f]);return v.jsxs("section",{"aria-label":e?void 0:i("logs.panelLabel"),"aria-labelledby":e,className:t?"logs-panel":"content-panel logs-panel",children:[v.jsxs("div",{className:"logs-panel__header",children:[e?v.jsx("span",{"aria-hidden":"true"}):v.jsx("h2",{children:i("logs.panelTitle")}),v.jsxs("div",{className:"logs-panel__actions",children:[v.jsx(Xa,{disabled:D.length===0,icon:"content_copy",onClick:()=>P$(D),children:i("logs.copy")}),v.jsx(Xa,{disabled:D.length===0,icon:"download",onClick:()=>L$(D),children:i("logs.download")})]})]}),v.jsxs("div",{className:"logs-toolbar",children:[v.jsx("div",{className:"logs-toolbar__actions",children:v.jsxs("md-chip-set",{className:"logs-chip-set logs-follow-mode",role:"group","aria-label":i("logs.followMode"),children:[v.jsx(Al,{value:"follow",selected:m,onSelect:()=>g(!0),children:i("logs.follow")}),v.jsx(Al,{value:"pause",selected:!m,onSelect:()=>g(!1),children:i("logs.pause")})]})}),v.jsx("p",{className:"logs-count",children:i("logs.visibleCount",{visible:D.length,total:o.length})})]}),v.jsx("md-chip-set",{className:"logs-chip-set log-level-filter",role:"group","aria-label":i("logs.levelFilter"),children:j$.map(C=>v.jsx(Al,{value:C,selected:f===C,onSelect:h,children:C==="ALL"?i("logs.levelAll"):C},C))}),y?v.jsx("p",{className:"logs-stream-status",role:"status",children:i("logs.streamDisconnected")}):null,T?v.jsx("p",{className:"logs-stream-status",role:"status",children:T instanceof Error?T.message:i("error.unknownRequest")}):null,v.jsxs("div",{className:"logs-search",children:[v.jsx(Yt,{className:"logs-search__field",label:i("logs.search"),type:"search",value:l,onInput:d}),v.jsx(pi,{disabled:l.length===0,icon:"close",label:i("logs.clearSearch"),onClick:()=>d("")})]}),v.jsx("div",{className:"log-output","aria-label":i("logs.output"),children:_?v.jsx("p",{className:"log-empty-state",role:"status",children:i("common.loading")}):D.length===0?v.jsx("p",{className:"log-empty-state",role:"status",children:o.length===0?i("logs.empty"):i("logs.emptyFiltered")}):D.map((C,z)=>v.jsx(M$,{entry:C,index:z},`${C.timestamp}-${z}-${uc(C)}`))})]})}function M$({entry:e,index:t}){const{t:i}=Oe(),o=bE(e.level);return v.jsxs(Wr.article,{className:`log-row log-row--${o}`,"aria-label":i("logs.rowLabel",{index:t+1}),initial:{opacity:0,y:6},animate:{opacity:1,y:0},transition:ur.effects,children:[v.jsx("span",{className:`log-row__level log-row__level--${o}`,"aria-hidden":"true",children:e.level}),v.jsx("time",{className:"log-row__time",dateTime:e.timestamp,children:D$(e.timestamp)}),v.jsx("p",{className:"log-row__message",children:e.message||uc(e)})]})}function D$(e){const t=e.split("T")[1];return t?t.replace(/\.\d{3,}.*$/,"").replace(/Z$/i,""):e}async function z$(e,t){const o=(await R$({signal:e})).body?.getReader();if(!o)throw new Error("log stream response body is empty");const s=new TextDecoder;let l="";for(;;){const{done:f,value:h}=await o.read();if(f)break;l+=s.decode(h,{stream:!0});const m=l.split(`
+
+`);l=m.pop()??"";for(const g of m){const y=E_(g);y&&t(y)}}l+=s.decode();const d=E_(l);d&&t(d)}function E_(e){const t=e.split(`
+`).filter(i=>i.startsWith("data:")).map(i=>i.slice(5).trimStart()).join(`
+`);if(t)return JSON.parse(t)}function uc(e){return e.raw||`${e.timestamp} ${e.level} ${e.message}`}function bE(e){return e.trim().toLowerCase()}function P$(e){const t=e.map(i=>uc(i)).join(`
+`);if(!navigator.clipboard){console.error("clipboard API unavailable");return}navigator.clipboard.writeText(t).catch(i=>{console.error("copy logs failed",i)})}function L$(e){const t=new Blob([e.map(s=>uc(s)).join(`
+`)],{type:"text/plain"}),i=URL.createObjectURL(t),o=document.createElement("a");o.href=i,o.download="moonbridge-logs.txt",o.click(),URL.revokeObjectURL(i)}const N$=[{model:"claude-sonnet",actual:"claude-3-5-sonnet"},{model:"claude-opus",actual:"claude-3-opus"},{model:"claude-haiku",actual:"claude-3-5-haiku"},{model:"gpt-4o",actual:"gpt-4o-2024-08-06"},{model:"gpt-4o-mini",actual:"gpt-4o-mini"},{model:"o3-mini",actual:"o3-mini"},{model:"gemini-pro",actual:"gemini-1.5-pro"},{model:"gemini-flash",actual:"gemini-1.5-flash"}],$$={session:1,"24h":4,"7d":26,"30d":110,all:340},B$={session:"1h 12m","24h":"23h 48m","7d":"167h","30d":"718h",all:"2400h"};function U$(e="session"){const t=$$[e]??1,i=N$.map((o,s)=>{const l=Math.max(1,Math.round((38+s*19+s*7%5*11)*t)),d=l*(1400+s%4*520),f=l*(260+s%3*180),h=Math.round(d*(.22+s%3*.05)),m=Math.round(d*(.7+s%4*.12)),g=Math.min(99,Math.round((58+s*6%38)*10)/10),y=Math.round((d*3e-6+f*15e-6+m*4e-7)*100)/100;return{model:o.model,actual_model:o.actual,requests:l,input_tokens:d,output_tokens:f,cache_creation:h,cache_read:m,cache_hit_rate:g,cost:y,avg_cost_per_mtoken:Math.round(y/Math.max(1,d+f)*1e6*100)/100}});return{totals:I$(i,e),by_model:i}}function I$(e,t){const i=m=>e.reduce((g,y)=>g+m(y),0),o=i(m=>m.requests),s=i(m=>m.input_tokens),l=i(m=>m.output_tokens),d=i(m=>m.cache_creation),f=i(m=>m.cache_read),h=Math.round(i(m=>m.cost)*100)/100;return{requests:o,input_tokens:s,output_tokens:l,cache_creation:d,cache_read:f,cache_hit_rate:s+f>0?Math.round(f/(s+f)*1e3)/10:0,cache_write_rate:s>0?Math.round(d/s*1e3)/10:0,cache_rw_ratio:d>0?Math.round(f/d*100)/100:0,total_cost:h,duration:B$[t]??"0s"}}const V$=["session","24h","7d","30d","all"],F$={session:"overview.range.session","24h":"overview.range.24h","7d":"overview.range.7d","30d":"overview.range.30d",all:"overview.range.all"};function H$(){const{t:e}=Oe(),t=Jn(),[i,o]=w.useState("session"),[s,l]=w.useState(!1),d=Zv({queryKey:[...sc.usageStats,i,s?"demo":"live"],queryFn:()=>s?U$(i):C$(i),placeholderData:X6}),f=q$(d.data?.totals.duration,i==="session"&&!d.isPlaceholderData&&!s);return v.jsxs("section",{className:"page-stack","aria-labelledby":"overview-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.analytics"),title:e("nav.overview"),children:e("overview.description")}),t.error?v.jsxs("section",{className:"state-panel state-panel--inline",role:"status",children:[v.jsx("p",{className:"eyebrow",children:e("common.error")}),v.jsx("h2",{children:e("overview.graphUnavailableTitle")}),v.jsx("p",{children:e("overview.graphUnavailableDescription")})]}):null,v.jsxs("section",{className:"usage-dashboard","aria-labelledby":"usage-title",children:[v.jsxs("div",{className:"panel-heading",children:[v.jsxs("div",{children:[v.jsx("h2",{id:"usage-title",children:e("overview.usageTitle")}),v.jsx("p",{children:e("overview.usageDescription")})]}),v.jsxs("div",{className:"usage-heading-controls",children:[v.jsx("md-chip-set",{className:"usage-range",role:"group","aria-label":e("overview.rangeLabel"),children:V$.map(h=>v.jsx(Al,{value:h,selected:i===h,onSelect:o,children:e(F$[h])},h))}),d.data?v.jsx("span",{className:"status-pill status-pill--muted",children:f}):null,null]})]}),d.isLoading?v.jsx(Bo,{label:e("common.loading")}):d.error?v.jsx(Ho,{error:d.error}):d.data?v.jsx(K$,{stats:d.data}):null]}),v.jsxs("section",{id:"logs",className:"overview-logs",children:[v.jsx("div",{className:"panel-heading",children:v.jsxs("div",{children:[v.jsx("h2",{id:"overview-logs-title",children:e("logs.panelTitle")}),v.jsx("p",{children:e("logs.description")})]})}),v.jsx(k$,{labelledBy:"overview-logs-title",embedded:!0})]})]})}function q$(e,t){const{t:i}=Oe(),[o,s]=w.useState(0),l=e?xE(e):void 0;if(w.useEffect(()=>{if(s(0),!t||l===void 0)return;const f=window.setInterval(()=>{s(h=>h+1)},1e3);return()=>window.clearInterval(f)},[t,l,e]),!e)return"";if(!t||l===void 0)return Y$(e,d);return wE(l+o,d);function d(f,h){return i(f,{count:h})}}function K$({stats:e}){const{t}=Oe(),i=e.totals.requests>0||e.by_model.length>0;return v.jsxs(v.Fragment,{children:[i?null:v.jsx("div",{className:"usage-empty-state",children:v.jsx("p",{children:t("overview.usageEmpty")})}),v.jsxs(Wr.div,{className:"usage-summary-grid",variants:lk,initial:"hidden",animate:"show",children:[v.jsx(Da,{icon:"swap_horiz",tone:"primary",value:t("overview.requestsValue",{count:e.totals.requests}),label:t("overview.requests")}),v.jsx(Da,{icon:"south_west",tone:"primary",value:t("overview.inputValue",{count:qa(e.totals.input_tokens)}),label:t("overview.inputTokens")}),v.jsx(Da,{icon:"north_east",tone:"tertiary",value:t("overview.outputValue",{count:qa(e.totals.output_tokens)}),label:t("overview.outputTokens")}),v.jsx(Da,{icon:"bolt",tone:"secondary",value:t("overview.cacheHitValue",{rate:_E(e.totals.cache_hit_rate)}),label:t("overview.cacheHit")}),v.jsx(Da,{icon:"sync_alt",tone:"secondary",value:t("overview.cacheRatioValue",{ratio:Q$(e.totals.cache_rw_ratio)}),label:t("overview.cacheReadWrite")}),v.jsx(Da,{icon:"payments",tone:"tertiary",value:t("overview.totalCostValue",{cost:qv(e.totals.total_cost)}),label:t("overview.totalCost")})]}),v.jsxs("div",{className:"usage-chart-grid",children:[v.jsx(Rm,{ariaLabel:jm(t,t("overview.tokenSplitChart"),[[t("overview.inputTokens"),e.totals.input_tokens],[t("overview.outputTokens"),e.totals.output_tokens]],t("overview.noData")),title:t("overview.tokenSplit"),segments:[{label:t("overview.inputTokens"),value:e.totals.input_tokens,className:"usage-segment--input"},{label:t("overview.outputTokens"),value:e.totals.output_tokens,className:"usage-segment--output"}]}),v.jsx(Rm,{ariaLabel:jm(t,t("overview.cacheSplitChart"),[[t("overview.cacheWrite"),e.totals.cache_creation],[t("overview.cacheRead"),e.totals.cache_read]],t("overview.noData")),title:t("overview.cacheSplit"),segments:[{label:t("overview.cacheWrite"),value:e.totals.cache_creation,className:"usage-segment--cache-write"},{label:t("overview.cacheRead"),value:e.totals.cache_read,className:"usage-segment--cache-read"}]}),v.jsx(Rm,{ariaLabel:jm(t,t("overview.costByModelChart"),e.by_model.map(o=>[o.model,o.cost]),t("overview.noData")),title:t("overview.costByModel"),segments:e.by_model.map((o,s)=>({label:o.model,value:o.cost,className:`usage-segment--cost-${s%6+1}`}))})]}),v.jsx("div",{className:"table-scroll",children:v.jsxs("table",{className:"resource-table usage-table","aria-label":t("overview.modelUsageTable"),children:[v.jsx("thead",{children:v.jsxs("tr",{children:[v.jsx("th",{children:t("overview.model")}),v.jsx("th",{children:t("overview.actualModel")}),v.jsx("th",{children:t("overview.requests")}),v.jsx("th",{children:t("overview.inputTokens")}),v.jsx("th",{children:t("overview.outputTokens")}),v.jsx("th",{children:t("overview.cacheWrite")}),v.jsx("th",{children:t("overview.cacheRead")}),v.jsx("th",{children:t("overview.cacheHit")}),v.jsx("th",{children:t("overview.cost")}),v.jsx("th",{children:t("overview.avgCost")})]})}),v.jsx("tbody",{children:e.by_model.map(o=>v.jsx(G$,{row:o},o.model))})]})})]})}function Da({label:e,value:t,icon:i,tone:o="primary"}){return v.jsxs(Wr.article,{className:`usage-metric usage-metric--${o}`,variants:ck,children:[v.jsx("span",{className:"usage-metric__icon material-symbol","aria-hidden":"true",children:i}),v.jsx("span",{className:"usage-metric__label",children:e}),v.jsx("strong",{children:t})]})}function Rm({ariaLabel:e,title:t,segments:i}){const o=i.reduce((s,l)=>s+Math.max(0,l.value),0);return v.jsxs("section",{className:"usage-chart",role:"img","aria-label":e,tabIndex:0,children:[v.jsxs("div",{className:"usage-chart__header",children:[v.jsx("h3",{children:t}),v.jsx("span",{children:fc(o)})]}),v.jsx("div",{className:"usage-chart__bar","aria-hidden":"true",children:i.map(s=>v.jsx("span",{className:`usage-chart__segment ${s.className}`,style:{inlineSize:`${o>0?Math.max(0,s.value)/o*100:0}%`}},s.label))}),v.jsx("ul",{className:"usage-chart__legend",children:i.map(s=>v.jsxs("li",{children:[v.jsx("span",{className:`usage-chart__dot ${s.className}`,"aria-hidden":"true"}),v.jsx("span",{children:s.label}),v.jsx("strong",{children:fc(s.value)})]},s.label))})]})}function G$({row:e}){const{t}=Oe();return v.jsxs("tr",{"aria-label":t("overview.modelUsageRow",{model:e.model}),children:[v.jsx("td",{children:e.model}),v.jsx("td",{children:e.actual_model||"-"}),v.jsx("td",{children:fc(e.requests)}),v.jsx("td",{children:qa(e.input_tokens)}),v.jsx("td",{children:qa(e.output_tokens)}),v.jsx("td",{children:qa(e.cache_creation)}),v.jsx("td",{children:qa(e.cache_read)}),v.jsx("td",{children:_E(e.cache_hit_rate)}),v.jsx("td",{children:qv(e.cost)}),v.jsxs("td",{children:[qv(e.avg_cost_per_mtoken),t("overview.costPerMillionSuffix")]})]})}function fc(e){return new Intl.NumberFormat().format(e)}function Y$(e,t){if(!e||e==="N/A")return"—";const i=xE(e);return i===void 0?e.trim():wE(i,t)}function xE(e){const t=/^(?:(\d+)h)?(?:(\d+)m)?(?:([\d.]+)s)?$/.exec(e.trim());if(!t||!t[1]&&!t[2]&&!t[3])return;const i=t[1]?parseInt(t[1],10):0,o=t[2]?parseInt(t[2],10):0,s=t[3]?Math.round(parseFloat(t[3])):0;return i*3600+o*60+s}function wE(e,t){const i=Math.max(0,Math.round(e)),o=Math.floor(i/3600),s=Math.floor(i%3600/60),l=i%60,d=[];return o&&d.push(t("overview.duration.hoursShort",o)),s&&d.push(t("overview.duration.minutesShort",s)),(l||d.length===0)&&d.push(t("overview.duration.secondsShort",l)),d.join(" ")}function qa(e){return fc(e)}function _E(e){return`${new Intl.NumberFormat(void 0,{maximumFractionDigits:1}).format(e)}%`}function Q$(e){return new Intl.NumberFormat(void 0,{maximumFractionDigits:2}).format(e)}function qv(e){return new Intl.NumberFormat(void 0,{style:"currency",currency:"CNY",currencyDisplay:"narrowSymbol",minimumFractionDigits:2,maximumFractionDigits:2}).format(e)}function jm(e,t,i,o){const s=i.length>0?i.map(([l,d])=>e("overview.chartAriaItem",{label:l,value:fc(d)})).join(e("overview.chartAriaSeparator")):o;return e("overview.chartAriaLabel",{title:t,summary:s})}function X$(){const{t:e}=Oe(),t=Jn(),[i,o]=w.useState(null);if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("loading.routes")});const s=t.data.resources.filter(h=>h.kind==="route"),l=e("routes.resourceTitle"),d=ry(t.data.resources),f=i?s.find(h=>h.id===i):void 0;return v.jsxs("section",{className:"page-stack","aria-labelledby":"routes-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.aliases"),title:e("nav.routes"),children:e("routes.description")}),v.jsxs("section",{className:"resource-section","aria-labelledby":"routes-list-heading",children:[v.jsxs("div",{className:"section-heading",children:[v.jsx("h2",{id:"routes-list-heading",children:e("routes.listTitle",{count:s.length})}),v.jsx(dc,{graph:t.data,kind:"route"})]}),v.jsx("div",{className:"resource-card-list resource-card-list--summary",children:s.map(h=>v.jsx(hi,{ariaLabel:e("resource.cardLabel",{title:l,id:h.id}),modelDisplayNames:d,onOpenEditor:()=>o(h.id),resource:h,revision:t.data.revision,title:l,variant:"summary"},h.id))})]}),f?v.jsx(gE,{open:!0,onClose:()=>o(null),modelDisplayNames:d,resource:f,revision:t.data.revision,title:l}):null]})}function W$(){const{t:e}=Oe(),t=Jn(),i=Zv({queryKey:sc.extensions,queryFn:O$});if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("common.loading")});const o=t.data.resources.find(h=>h.kind==="web_search"),s=t.data.resources.filter(h=>h.kind==="extension"),l=t.data.resources.find(h=>h.kind==="proxy"),d=new Set(s.map(h=>h.id)),f=(i.data??[]).filter(h=>!d.has(h));return v.jsxs("section",{className:"page-stack","aria-labelledby":"search-tools-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.config"),title:e("nav.searchTools"),children:e("searchTools.description")}),o?v.jsx(T_,{resource:o,revision:t.data.revision,title:e("searchTools.webSearch")}):null,v.jsxs("section",{className:"resource-section","aria-labelledby":"extensions-heading",children:[v.jsxs("div",{className:"section-heading",children:[v.jsx("h2",{id:"extensions-heading",children:e("searchTools.extensions")}),i.isLoading?v.jsx("span",{className:"status-pill status-pill--muted",children:e("common.loading")}):i.error?v.jsx("span",{className:"field-error",role:"alert",children:i.error instanceof Error?i.error.message:e("error.unknownRequest")}):v.jsx(dc,{availableExtensionIds:f,graph:t.data,kind:"extension"})]}),v.jsx("div",{className:"resource-card-list",children:s.map(h=>v.jsx(hi,{ariaLabel:e("resource.cardLabel",{title:e("searchTools.extension"),id:h.id}),resource:h,revision:t.data.revision,title:e("searchTools.extension")},h.id))})]}),l?v.jsx(T_,{resource:l,revision:t.data.revision,title:e("searchTools.proxy")}):null]})}function T_({resource:e,revision:t,title:i}){const{t:o}=Oe();return v.jsxs("section",{className:"resource-section","aria-label":i,children:[v.jsx("h2",{children:i}),v.jsx(hi,{ariaLabel:o("resource.cardLabel",{title:i,id:e.id}),resource:e,revision:t,title:i})]})}function Z$(){const{t:e}=Oe(),t=Jn();if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("common.loading")});const i=t.data.resources.find(o=>o.kind==="server");return v.jsxs("section",{className:"page-stack","aria-labelledby":"security-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.config"),title:e("nav.security"),children:e("security.description")}),i?v.jsx(J$,{resource:i,revision:t.data.revision}):null]})}function J$({resource:e,revision:t}){const{t:i}=Oe(),o=i("security.server");return v.jsxs("section",{className:"resource-section","aria-label":o,children:[v.jsx("h2",{children:o}),v.jsx(hi,{ariaLabel:i("resource.cardLabel",{title:o,id:e.id}),resource:e,revision:t,title:o})]})}const eB=new Set(["cache","persistence"]);function tB(){const{t:e}=Oe(),t=Jn();if(t.error)return v.jsx(Ho,{error:t.error});if(t.isLoading||!t.data)return v.jsx(Bo,{label:e("common.loading")});const i=t.data.resources.find(l=>l.kind==="cache"),o=t.data.resources.find(l=>l.kind==="persistence"),s=(t.data.runtime.errors??[]).filter(l=>eB.has(l.resourceKind));return v.jsxs("section",{className:"page-stack","aria-labelledby":"storage-title",children:[v.jsx(Fo,{eyebrow:e("pageEyebrow.config"),title:e("nav.storage"),children:e("storage.description")}),s.length>0?v.jsx(rB,{errors:s}):null,i?v.jsx(O_,{resource:i,revision:t.data.revision,title:e("storage.cache")}):null,o?v.jsx(O_,{resource:o,revision:t.data.revision,title:e("storage.persistence")}):null]})}function rB({errors:e}){const{t}=Oe();return v.jsxs("section",{className:"content-panel","aria-label":t("storage.errors"),children:[v.jsx("h2",{children:t("storage.status")}),v.jsx("ul",{className:"compact-list",children:e.map(i=>v.jsxs("li",{children:[v.jsx("strong",{children:i.resourceId||i.resourceKind}),v.jsx("span",{children:i.message})]},`${i.resourceKind}-${i.resourceId}-${i.field}-${i.code}`))})]})}function O_({resource:e,revision:t,title:i}){const{t:o}=Oe();return v.jsxs("section",{className:"resource-section","aria-label":i,children:[v.jsx("h2",{children:i}),v.jsx(hi,{ariaLabel:o("resource.cardLabel",{title:i,id:e.id}),resource:e,revision:t,title:i})]})}const iB=[{index:!0,element:v.jsx(K1,{to:"/overview",replace:!0})},{path:"overview",element:v.jsx(H$,{})},{path:"models-providers",element:v.jsx(_$,{})},{path:"routes",element:v.jsx(X$,{})},{path:"defaults",element:v.jsx(XN,{})},{path:"search-tools",element:v.jsx(W$,{})},{path:"storage",element:v.jsx(tB,{})},{path:"security",element:v.jsx(Z$,{})},{path:"logs",element:v.jsx(K1,{to:"/overview#logs",replace:!0})}],nB=NC([{path:"/",element:v.jsx(Zk,{}),children:iB}],{basename:"/console"}),oB=new pT({defaultOptions:{queries:{retry:1,staleTime:15e3,refetchOnWindowFocus:!1}}}),SE=document.getElementById("root");if(!SE)throw new Error("Root element #root was not found");I6.createRoot(SE).render(v.jsx(w.StrictMode,{children:v.jsx(mT,{client:oB,children:v.jsx(Z9,{children:v.jsx(ak,{children:v.jsx(IR,{reducedMotion:"user",children:v.jsx(Qk,{children:v.jsx(QC,{router:nB})})})})})})}));
diff --git a/internal/service/webui/dist/index.html b/internal/service/webui/dist/index.html
new file mode 100644
index 00000000..323dc065
--- /dev/null
+++ b/internal/service/webui/dist/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>Moon Bridge Console</title>
+    <!--
+      Material Design 3 Expressive type + iconography.
+      Roboto Flex (variable) is the M3 text font; Roboto Mono is used for code
+      and log output; Material Symbols Rounded (variable: optical-size, weight,
+      fill, grade) powers every <md-icon> and .material-symbol glyph. Loading
+      the web fonts removes the reliance on a system-installed icon font and
+      unlocks the FILL axis used for expressive selected/active states.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..900&family=Roboto+Mono:wght@400..600&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200&display=block"
+    />
+    <script type="module" crossorigin src="/console/assets/index-sUGx9Bin.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/internal/service/webui/embed.go b/internal/service/webui/embed.go
new file mode 100644
index 00000000..09b17a4e
--- /dev/null
+++ b/internal/service/webui/embed.go
@@ -0,0 +1,70 @@
+package webui
+
+import (
+	"embed"
+	"io/fs"
+	"mime"
+	"net/http"
+	"path"
+	"strings"
+)
+
+//go:embed dist
+var embedded embed.FS
+
+// Embedded returns the production console handler backed by embedded assets.
+func Embedded() http.Handler {
+	dist, err := fs.Sub(embedded, "dist")
+	if err != nil {
+		panic(err)
+	}
+	return NewHandler(dist)
+}
+
+// NewHandler serves a console SPA rooted at /console/.
+func NewHandler(content fs.FS) http.Handler {
+	return &handler{content: content}
+}
+
+type handler struct {
+	content fs.FS
+}
+
+func (h *handler) ServeHTTP(writer http.ResponseWriter, request *http.Request) {
+	name := strings.TrimPrefix(request.URL.Path, "/console/")
+	name = strings.TrimPrefix(name, "/")
+	if name == "" {
+		h.serveFile(writer, request, "index.html")
+		return
+	}
+
+	name = path.Clean(name)
+	if name == "." || strings.HasPrefix(name, "../") || !fs.ValidPath(name) {
+		http.NotFound(writer, request)
+		return
+	}
+
+	if info, err := fs.Stat(h.content, name); err == nil && !info.IsDir() {
+		h.serveFile(writer, request, name)
+		return
+	}
+
+	h.serveFile(writer, request, "index.html")
+}
+
+func (h *handler) serveFile(writer http.ResponseWriter, request *http.Request, name string) {
+	data, err := fs.ReadFile(h.content, name)
+	if err != nil {
+		http.NotFound(writer, request)
+		return
+	}
+	if contentType := mime.TypeByExtension(path.Ext(name)); contentType != "" {
+		writer.Header().Set("Content-Type", contentType)
+	} else {
+		writer.Header().Set("Content-Type", http.DetectContentType(data))
+	}
+	if request.Method == http.MethodHead {
+		return
+	}
+	_, _ = writer.Write(data)
+}
diff --git a/internal/service/webui/embed_test.go b/internal/service/webui/embed_test.go
new file mode 100644
index 00000000..50a0f69d
--- /dev/null
+++ b/internal/service/webui/embed_test.go
@@ -0,0 +1,158 @@
+package webui_test
+
+import (
+	"io/fs"
+	"net/http"
+	"net/http/httptest"
+	"regexp"
+	"strings"
+	"testing"
+	"testing/fstest"
+
+	"moonbridge/internal/service/webui"
+)
+
+func TestHandlerServesConsoleIndex(t *testing.T) {
+	handler := webui.NewHandler(testFS())
+
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest(http.MethodGet, "/console/", nil)
+	handler.ServeHTTP(recorder, request)
+
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", recorder.Code, recorder.Body.String())
+	}
+	if body := recorder.Body.String(); !strings.Contains(body, `<div id="root"></div>`) {
+		t.Fatalf("body does not contain index marker: %s", body)
+	}
+	if contentType := recorder.Header().Get("Content-Type"); !strings.Contains(contentType, "text/html") {
+		t.Fatalf("Content-Type = %q, want text/html", contentType)
+	}
+}
+
+func TestHandlerFallsBackToIndexForClientRoute(t *testing.T) {
+	handler := webui.NewHandler(testFS())
+
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest(http.MethodGet, "/console/providers/openai", nil)
+	handler.ServeHTTP(recorder, request)
+
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", recorder.Code, recorder.Body.String())
+	}
+	if body := recorder.Body.String(); !strings.Contains(body, "<title>Moon Bridge Console</title>") {
+		t.Fatalf("body does not contain index title: %s", body)
+	}
+}
+
+func TestHandlerServesStaticAsset(t *testing.T) {
+	handler := webui.NewHandler(testFS())
+
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest(http.MethodGet, "/console/assets/app.js", nil)
+	handler.ServeHTTP(recorder, request)
+
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", recorder.Code, recorder.Body.String())
+	}
+	if body := recorder.Body.String(); body != `console.log("console asset");` {
+		t.Fatalf("body = %q", body)
+	}
+	if contentType := recorder.Header().Get("Content-Type"); !strings.Contains(contentType, "javascript") {
+		t.Fatalf("Content-Type = %q, want javascript", contentType)
+	}
+}
+
+func TestEmbeddedReturnsHandler(t *testing.T) {
+	handler := webui.Embedded()
+
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest(http.MethodGet, "/console/", nil)
+	handler.ServeHTTP(recorder, request)
+
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", recorder.Code, recorder.Body.String())
+	}
+}
+
+func TestEmbeddedIndexReferencesExistingAssets(t *testing.T) {
+	handler := webui.Embedded()
+
+	index := httptest.NewRecorder()
+	handler.ServeHTTP(index, httptest.NewRequest(http.MethodGet, "/console/", nil))
+	if index.Code != http.StatusOK {
+		t.Fatalf("index status = %d, body = %s", index.Code, index.Body.String())
+	}
+
+	scriptSrcs := regexp.MustCompile(`src="(/console/assets/[^"]+)"`).FindAllStringSubmatch(index.Body.String(), -1)
+	if len(scriptSrcs) == 0 {
+		t.Fatalf("index does not reference any console script asset: %s", index.Body.String())
+	}
+
+	for _, match := range scriptSrcs {
+		assetPath := match[1]
+		recorder := httptest.NewRecorder()
+		handler.ServeHTTP(recorder, httptest.NewRequest(http.MethodGet, assetPath, nil))
+		if recorder.Code != http.StatusOK {
+			t.Fatalf("asset %s status = %d, body = %s", assetPath, recorder.Code, recorder.Body.String())
+		}
+		if contentType := recorder.Header().Get("Content-Type"); !strings.Contains(contentType, "javascript") {
+			t.Fatalf("asset %s Content-Type = %q, want javascript", assetPath, contentType)
+		}
+		if recorder.Body.Len() == 0 {
+			t.Fatalf("asset %s is empty", assetPath)
+		}
+	}
+}
+
+func TestEmbeddedConsoleIncludesModelReasoningSupportSwitch(t *testing.T) {
+	scripts := embeddedScriptBodies(t)
+	combined := strings.Join(scripts, "\n")
+
+	if !strings.Contains(combined, "supports_reasoning") {
+		t.Fatalf("embedded console scripts do not include supports_reasoning; run make webui-build to sync the bundled webui")
+	}
+	if !strings.Contains(combined, "Model reasoning support field") {
+		t.Fatalf("embedded console scripts do not include the model reasoning switch guard; run make webui-build to sync the bundled webui")
+	}
+}
+
+func embeddedScriptBodies(t *testing.T) []string {
+	t.Helper()
+
+	handler := webui.Embedded()
+
+	index := httptest.NewRecorder()
+	handler.ServeHTTP(index, httptest.NewRequest(http.MethodGet, "/console/", nil))
+	if index.Code != http.StatusOK {
+		t.Fatalf("index status = %d, body = %s", index.Code, index.Body.String())
+	}
+
+	scriptSrcs := regexp.MustCompile(`src="(/console/assets/[^"]+)"`).FindAllStringSubmatch(index.Body.String(), -1)
+	if len(scriptSrcs) == 0 {
+		t.Fatalf("index does not reference any console script asset: %s", index.Body.String())
+	}
+
+	scripts := make([]string, 0, len(scriptSrcs))
+	for _, match := range scriptSrcs {
+		assetPath := match[1]
+		recorder := httptest.NewRecorder()
+		handler.ServeHTTP(recorder, httptest.NewRequest(http.MethodGet, assetPath, nil))
+		if recorder.Code != http.StatusOK {
+			t.Fatalf("asset %s status = %d, body = %s", assetPath, recorder.Code, recorder.Body.String())
+		}
+		scripts = append(scripts, recorder.Body.String())
+	}
+	return scripts
+}
+
+func testFS() fs.FS {
+	return fstest.MapFS{
+		"index.html": &fstest.MapFile{
+			Data: []byte(`<!doctype html><html><head><title>Moon Bridge Console</title></head><body><div id="root"></div><script type="module" src="/console/assets/app.js"></script></body></html>`),
+		},
+		"assets/app.js": &fstest.MapFile{
+			Data: []byte(`console.log("console asset");`),
+		},
+	}
+}
diff --git a/packaging/arch/.gitignore b/packaging/arch/.gitignore
new file mode 100644
index 00000000..a516be71
--- /dev/null
+++ b/packaging/arch/.gitignore
@@ -0,0 +1,5 @@
+/*.pkg.tar*
+/*.src.tar*
+/*.tar.gz
+/src/
+/pkg/
diff --git a/packaging/arch/PKGBUILD b/packaging/arch/PKGBUILD
new file mode 100644
index 00000000..0ddf284e
--- /dev/null
+++ b/packaging/arch/PKGBUILD
@@ -0,0 +1,61 @@
+# Maintainer: Moon Bridge local package
+pkgname=moon-bridge
+pkgver=0.1.0
+pkgrel=5
+pkgdesc='Protocol conversion and model routing proxy for OpenAI Responses-compatible clients'
+arch=('x86_64')
+url='https://github.com/moon-bridge/moon-bridge'
+license=('GPL-3.0-only')
+depends=('glibc')
+makedepends=('go' 'npm')
+install="${pkgname}.install"
+source=(
+  "${pkgname}-${pkgver}.tar.gz"
+  "config.local.yml"
+)
+sha256sums=('SKIP' 'SKIP')
+
+build() {
+  cd "${srcdir}/${pkgname}-${pkgver}"
+
+  export CGO_ENABLED=0
+  export GOCACHE="${srcdir}/go-build"
+  export GOMODCACHE="${srcdir}/go-mod"
+  export GOFLAGS="-modcacherw"
+  export npm_config_cache="${srcdir}/npm-cache"
+  export npm_config_legacy_peer_deps=true
+
+  npm --prefix webui ci
+  npm --prefix webui run build
+
+  rm -rf internal/service/webui/dist
+  mkdir -p internal/service/webui/dist
+  cp -R webui/dist/. internal/service/webui/dist/
+
+  go build -buildvcs=false -trimpath -ldflags="-s -w" -o moonbridge ./cmd/moonbridge
+}
+
+check() {
+  cd "${srcdir}/${pkgname}-${pkgver}"
+
+  export CGO_ENABLED=0
+  export GOCACHE="${srcdir}/go-build"
+  export GOMODCACHE="${srcdir}/go-mod"
+  export GOFLAGS="-modcacherw"
+  export npm_config_cache="${srcdir}/npm-cache"
+  export npm_config_legacy_peer_deps=true
+
+  npm --prefix webui test
+  go test ./...
+  ./moonbridge -config "${srcdir}/config.local.yml" -print-addr
+}
+
+package() {
+  cd "${srcdir}/${pkgname}-${pkgver}"
+
+  install -Dm755 moonbridge "${pkgdir}/usr/bin/moonbridge"
+  install -Dm644 LICENSE "${pkgdir}/usr/share/licenses/${pkgname}/LICENSE"
+  install -Dm644 README.md "${pkgdir}/usr/share/doc/${pkgname}/README.md"
+  install -Dm644 config.example.yml "${pkgdir}/usr/share/doc/${pkgname}/config.example.yml"
+  install -Dm644 "${srcdir}/config.local.yml" "${pkgdir}/usr/share/doc/${pkgname}/config.local.yml"
+}
diff --git a/packaging/arch/config.local.yml b/packaging/arch/config.local.yml
new file mode 100644
index 00000000..e2aee512
--- /dev/null
+++ b/packaging/arch/config.local.yml
@@ -0,0 +1,49 @@
+mode: "Transform"
+
+log:
+  level: "info"
+  format: "text"
+
+server:
+  addr: "127.0.0.1:38440"
+
+persistence:
+  active_provider: db_sqlite
+
+extensions:
+  db_sqlite:
+    enabled: true
+    config:
+      path: ./data/moonbridge.db
+      wal: true
+      busy_timeout_ms: 5000
+      max_open_conns: 1
+
+cache:
+  mode: "off"
+
+defaults:
+  model: "moonbridge"
+  max_tokens: 1024
+
+models:
+  local-test-model:
+    context_window: 128000
+    max_output_tokens: 4096
+    display_name: "Local Test Model"
+    description: "Minimal local configuration placeholder. Replace provider credentials before sending real requests."
+
+providers:
+  local:
+    base_url: "https://api.example.invalid"
+    api_key: "replace-with-real-api-key"
+    protocol: "openai-chat"
+    user_agent: "moonbridge/1.0"
+    offers:
+      - model: local-test-model
+        upstream_name: "replace-with-upstream-model"
+
+routes:
+  moonbridge:
+    model: "replace-with-upstream-model"
+    provider: "local"
diff --git a/packaging/arch/moon-bridge.install b/packaging/arch/moon-bridge.install
new file mode 100644
index 00000000..76fc6c92
--- /dev/null
+++ b/packaging/arch/moon-bridge.install
@@ -0,0 +1,26 @@
+post_install() {
+  cat <<'EOF'
+Moon Bridge has been installed as /usr/bin/moonbridge.
+
+Default config path:
+  ~/moonbridge/config.yml
+
+Start Moon Bridge after installation:
+  moonbridge
+
+Open Web Console:
+  http://127.0.0.1:38440/console/
+
+On first run without an existing default config, Moon Bridge creates:
+  ~/moonbridge/config.yml
+
+Example configs remain available under:
+  /usr/share/doc/moon-bridge/
+
+Replace provider, model, and API key placeholders before sending real upstream requests.
+EOF
+}
+
+post_upgrade() {
+  post_install
+}
diff --git a/webui/index.html b/webui/index.html
new file mode 100644
index 00000000..c60ccfd6
--- /dev/null
+++ b/webui/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>Moon Bridge Console</title>
+    <!--
+      Material Design 3 Expressive type + iconography.
+      Roboto Flex (variable) is the M3 text font; Roboto Mono is used for code
+      and log output; Material Symbols Rounded (variable: optical-size, weight,
+      fill, grade) powers every <md-icon> and .material-symbol glyph. Loading
+      the web fonts removes the reliance on a system-installed icon font and
+      unlocks the FILL axis used for expressive selected/active states.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..900&family=Roboto+Mono:wght@400..600&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200&display=block"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/webui/package-lock.json b/webui/package-lock.json
new file mode 100644
index 00000000..d2b95804
--- /dev/null
+++ b/webui/package-lock.json
@@ -0,0 +1,3921 @@
+{
+  "name": "@moonbridge/console",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@moonbridge/console",
+      "version": "0.1.0",
+      "dependencies": {
+        "@lobehub/icons": "^5.10.0",
+        "@material/web": "^2.4.0",
+        "@tanstack/react-query": "^5.83.0",
+        "@tanstack/react-table": "^8.21.3",
+        "motion": "^12.23.6",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.7.0",
+        "yaml": "^2.8.0"
+      },
+      "devDependencies": {
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/node": "^24.0.15",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "@vitejs/plugin-react": "^4.6.0",
+        "jsdom": "^26.1.0",
+        "typescript": "^5.8.3",
+        "vite": "^7.0.5",
+        "vitest": "^3.2.4"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-2.1.2.tgz",
+      "integrity": "sha512-2Hy8BnCEH31xPeSLbhhB2ctCPXE2ZnASdi+KbSeS79BNbUhL9hAEe20SkUk+BR8aKTmqb6+FKFruk7w8z0VoRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "@rc-component/util": "^1.4.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "stylis": "^4.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
+      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
+      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/css": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.13.5.tgz",
+      "integrity": "sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
+      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
+      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
+      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
+      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
+      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
+      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
+      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
+      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
+      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
+      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
+      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
+      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
+      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
+      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
+      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
+      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
+      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
+      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
+      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
+      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
+      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.2.tgz",
+      "integrity": "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0"
+      }
+    },
+    "node_modules/@lobehub/icons": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@lobehub/icons/-/icons-5.10.0.tgz",
+      "integrity": "sha512-CIpjkISCLRK7haDtSugGFd0o3odaJts8ewJOkUiEFtns3xvsqbl8i24eowBnjw+yMDQVQyNONlhqTD58YC6Ljg==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "antd-style": "^4.1.0",
+        "es-toolkit": "^1.45.1",
+        "lucide-react": "^0.469.0",
+        "polished": "^4.3.1"
+      },
+      "peerDependencies": {
+        "@lobehub/ui": "^5.0.0",
+        "antd": "^6.1.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
+    "node_modules/@material/web": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-2.4.1.tgz",
+      "integrity": "sha512-0sk9t25acJ72Qv3r0n9r0lgDbPaAKnpm0p+QmEAAwYyZomHxuVbgrrAdtNXaRm7jFyGh+WsTr8bhtvCnpPRFjw==",
+      "license": "Apache-2.0",
+      "workspaces": [
+        "catalog"
+      ],
+      "dependencies": {
+        "lit": "^2.8.0 || ^3.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rc-component/util": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.11.1.tgz",
+      "integrity": "sha512-awVlI3ub2vqfqkYxOBc/uQ0efm3jw0wcrhtO/YWLyZfxiKXczKwNbVuhlnyxytDt7H9pbbVQiqr+O6MLATtRYg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-mobile": "^5.0.0",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.4.tgz",
+      "integrity": "sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.4.tgz",
+      "integrity": "sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.4.tgz",
+      "integrity": "sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.4.tgz",
+      "integrity": "sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.4.tgz",
+      "integrity": "sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.4.tgz",
+      "integrity": "sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.4.tgz",
+      "integrity": "sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.4.tgz",
+      "integrity": "sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.4.tgz",
+      "integrity": "sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.4.tgz",
+      "integrity": "sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.4.tgz",
+      "integrity": "sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.4.tgz",
+      "integrity": "sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.4.tgz",
+      "integrity": "sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.4.tgz",
+      "integrity": "sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.4.tgz",
+      "integrity": "sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.4.tgz",
+      "integrity": "sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.4.tgz",
+      "integrity": "sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.4.tgz",
+      "integrity": "sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.4.tgz",
+      "integrity": "sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.4.tgz",
+      "integrity": "sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.4.tgz",
+      "integrity": "sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.4.tgz",
+      "integrity": "sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.4.tgz",
+      "integrity": "sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.4.tgz",
+      "integrity": "sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.4.tgz",
+      "integrity": "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.100.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.14.tgz",
+      "integrity": "sha512-5X41dGpxgeaHISCRW2oYwcSycZeULZzAunaudXT9ov1KOTj9xwt0CH6hbwqP1/z74ZWF7rYFnDpyYH07XFcZew==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.100.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.14.tgz",
+      "integrity": "sha512-oOr6aRdSFEwWhzxEkD/9ZcItM3+LjBSkeVmadWKwUssAHTsqd/7bOjWrX4AbvEkoEhgAxzN0Xk6H/aYzXiYBAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.100.14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.4.tgz",
+      "integrity": "sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz",
+      "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/antd-style": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/antd-style/-/antd-style-4.1.0.tgz",
+      "integrity": "sha512-vnPBGg0OVlSz90KRYZhxd89aZiOImTiesF+9MQqN8jsLGZUQTjbP04X9jTdEfsztKUuMbBWg/RmB/wHTakbtMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/cssinjs": "^2.0.0",
+        "@babel/runtime": "^7.24.1",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/css": "^11.11.2",
+        "@emotion/react": "^11.11.4",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/utils": "^1.2.1",
+        "use-merge-value": "^1.2.0"
+      },
+      "peerDependencies": {
+        "antd": ">=6.0.0",
+        "react": ">=18"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.32",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.32.tgz",
+      "integrity": "sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.361",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.361.tgz",
+      "integrity": "sha512-Q6Hts7N9FnJc5LeGRINFvLhCI9xZmNtTDe5ZbcVezQz7cU4a8Aua3GH1b8J2XY8Al9PF+OCwYqhgsOOheMdvkA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.47.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.47.0.tgz",
+      "integrity": "sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/esbuild": {
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
+      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.7",
+        "@esbuild/android-arm": "0.27.7",
+        "@esbuild/android-arm64": "0.27.7",
+        "@esbuild/android-x64": "0.27.7",
+        "@esbuild/darwin-arm64": "0.27.7",
+        "@esbuild/darwin-x64": "0.27.7",
+        "@esbuild/freebsd-arm64": "0.27.7",
+        "@esbuild/freebsd-x64": "0.27.7",
+        "@esbuild/linux-arm": "0.27.7",
+        "@esbuild/linux-arm64": "0.27.7",
+        "@esbuild/linux-ia32": "0.27.7",
+        "@esbuild/linux-loong64": "0.27.7",
+        "@esbuild/linux-mips64el": "0.27.7",
+        "@esbuild/linux-ppc64": "0.27.7",
+        "@esbuild/linux-riscv64": "0.27.7",
+        "@esbuild/linux-s390x": "0.27.7",
+        "@esbuild/linux-x64": "0.27.7",
+        "@esbuild/netbsd-arm64": "0.27.7",
+        "@esbuild/netbsd-x64": "0.27.7",
+        "@esbuild/openbsd-arm64": "0.27.7",
+        "@esbuild/openbsd-x64": "0.27.7",
+        "@esbuild/openharmony-arm64": "0.27.7",
+        "@esbuild/sunos-x64": "0.27.7",
+        "@esbuild/win32-arm64": "0.27.7",
+        "@esbuild/win32-ia32": "0.27.7",
+        "@esbuild/win32-x64": "0.27.7"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-mobile": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-5.0.0.tgz",
+      "integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/lit": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz",
+      "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz",
+      "integrity": "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz",
+      "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.469.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.40.0.tgz",
+      "integrity": "sha512-yjrHUrBFW6kQvjJwRsoiPSAhC5tRwRqNGJWmiJ4CrGnbKp0V88AdzkhBmDoqIsIPfarOe0Uddd37Xq43/gIocA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.40.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz",
+      "integrity": "sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
+      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
+      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.6"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz",
+      "integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.15.1.tgz",
+      "integrity": "sha512-AzF62gjY6U9rkMq4RfP/r2EVtQ7DMfNMjyOp/flLTCrtRylLiK4wT4pSq6O8rOXZ2eXdZYJPEYe+ifomiv+Igg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.15.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz",
+      "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.4",
+        "@rollup/rollup-android-arm64": "4.60.4",
+        "@rollup/rollup-darwin-arm64": "4.60.4",
+        "@rollup/rollup-darwin-x64": "4.60.4",
+        "@rollup/rollup-freebsd-arm64": "4.60.4",
+        "@rollup/rollup-freebsd-x64": "4.60.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.4",
+        "@rollup/rollup-linux-arm64-musl": "4.60.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.4",
+        "@rollup/rollup-linux-loong64-musl": "4.60.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.4",
+        "@rollup/rollup-linux-x64-gnu": "4.60.4",
+        "@rollup/rollup-linux-x64-musl": "4.60.4",
+        "@rollup/rollup-openbsd-x64": "4.60.4",
+        "@rollup/rollup-openharmony-arm64": "4.60.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.4",
+        "@rollup/rollup-win32-x64-gnu": "4.60.4",
+        "@rollup/rollup-win32-x64-msvc": "4.60.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylis": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz",
+      "integrity": "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==",
+      "license": "MIT"
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-merge-value": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-merge-value/-/use-merge-value-1.2.0.tgz",
+      "integrity": "sha512-DXgG0kkgJN45TcyoXL49vJnn55LehnrmoHc7MbKi+QDBvr8dsesqws8UlyIWGHMR+JXgxc1nvY+jDGMlycsUcw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.x"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
+      "integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    }
+  }
+}
diff --git a/webui/package.json b/webui/package.json
new file mode 100644
index 00000000..2c0c5650
--- /dev/null
+++ b/webui/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@moonbridge/console",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsc -p tsconfig.json --noEmit && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "e2e": "vitest run --config vite.config.ts --dir src/e2e"
+  },
+  "dependencies": {
+    "@lobehub/icons": "^5.10.0",
+    "@material/web": "^2.4.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-table": "^8.21.3",
+    "motion": "^12.23.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.0",
+    "yaml": "^2.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.0.15",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5",
+    "vitest": "^3.2.4"
+  }
+}
diff --git a/webui/src/app/App.test.tsx b/webui/src/app/App.test.tsx
new file mode 100644
index 00000000..7f1fe5c6
--- /dev/null
+++ b/webui/src/app/App.test.tsx
@@ -0,0 +1,193 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { renderWithConsoleProviders } from "../test/renderWithConsoleProviders";
+import { expectPanelElementToBeFlat, expectPanelRuleToAvoidEdges } from "../test/panelStyleAssertions";
+import { AppShell } from "./App";
+
+describe("AppShell", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("shows the config graph navigation surface without staged apply", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell />
+      </MemoryRouter>
+    );
+
+    const labels = Array.from(
+      document.querySelectorAll<HTMLAnchorElement>(".navigation-rail a")
+    ).map((link) => link.querySelector(".nav-item__label")?.textContent);
+
+    expect(labels).toEqual([
+      "Overview",
+      "Models & Providers",
+      "Routes",
+      "Defaults",
+      "Search & Tools",
+      "Storage",
+      "Security"
+    ]);
+    expect(document.querySelector(".navigation-rail")?.textContent).not.toContain("Config");
+    expect(document.querySelector(".navigation-rail")?.textContent).not.toContain("RPC Test");
+    expect(document.querySelector(".navigation-rail")?.textContent).not.toContain("Extensions");
+    expect(screen.queryByRole("button", { name: /^apply$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("dialog", { name: /apply changes/i })).not.toBeInTheDocument();
+  });
+
+  test("keeps shell actions limited to locale and theme controls", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText(/language/i)).toBeInTheDocument();
+    expect(getMaterialIconButton(document, "Switch to light theme")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /apply/i })).not.toBeInTheDocument();
+  });
+
+  test("uses Material Web locale actions instead of a native browser select", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    expect(document.querySelector(".top-app-bar__meta select")).not.toBeInTheDocument();
+    expect(screen.getByRole("group", { name: /language/i })).toBeInTheDocument();
+    expect(getMaterialButton(document, "English", "filled")).toHaveAttribute("aria-pressed", "true");
+    expect(getMaterialButton(document, "中文", "outlined")).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("keeps global filled button icon colors aligned with label colors", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    const selectedLocaleButton = getMaterialButton(document, "English", "filled");
+    expectMaterialFilledButtonContentColors(selectedLocaleButton, "var(--mb-color-on-primary)");
+  });
+
+  test("changes locale through Material Web locale actions", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(getMaterialButton(document, "中文", "outlined"));
+
+    expect(screen.getByRole("navigation", { name: "控制台分区" })).toBeInTheDocument();
+    expect(getMaterialButton(document, "English", "outlined")).toHaveAttribute("aria-pressed", "false");
+    expect(getMaterialButton(document, "中文", "filled")).toHaveAttribute("aria-pressed", "true");
+  });
+
+  test("changes theme through the Material Web icon button", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    const themeButton = getMaterialIconButton(document, "Switch to light theme");
+    expect(themeButton.tagName.toLowerCase()).toBe("md-icon-button");
+    expect(document.documentElement).toHaveAttribute("data-theme", "dark");
+
+    fireEvent.click(themeButton);
+
+    expect(document.documentElement).toHaveAttribute("data-theme", "light");
+    expect(getMaterialIconButton(document, "Switch to dark theme")).toBeInTheDocument();
+  });
+
+  test("keeps route content in a named main landmark with mobile-safe nav labels", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByRole("main", { name: "Console route content" })).toHaveTextContent("Console content");
+    expect(screen.getByRole("link", { name: /models & providers/i })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /search & tools/i })).toBeInTheDocument();
+    expect(screen.getByRole("navigation", { name: /console sections/i })).not.toHaveTextContent("YAML");
+    expect(screen.getByRole("navigation", { name: /console sections/i })).not.toHaveTextContent("Diagnostics");
+    expect(screen.getByRole("navigation", { name: /console sections/i })).not.toHaveTextContent("Logs");
+  });
+
+  test("gives shell background panels tonal surfaces without borders or glow", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell
+          content={(
+            <>
+              <section className="content-panel">Console content</section>
+              <section className="placeholder-panel">Placeholder content</section>
+            </>
+          )}
+        />
+      </MemoryRouter>
+    );
+
+    const shellStyle = document.querySelector("style")?.textContent ?? "";
+    const railRule = shellStyle.match(/\.navigation-rail \{[^}]+\}/)?.[0] ?? "";
+    const rail = document.querySelector(".navigation-rail")!;
+    const contentPanel = document.querySelector(".content-panel")!;
+    const placeholderPanel = document.querySelector(".placeholder-panel")!;
+
+    expect(railRule).toContain("background: var(--mb-color-surface-container-low)");
+    expect(railRule).not.toContain("box-shadow");
+    expect(railRule).not.toContain("background: transparent");
+    for (const panel of [rail, contentPanel, placeholderPanel]) {
+      expectPanelElementToBeFlat(panel);
+    }
+    expectPanelRuleToAvoidEdges(".navigation-rail");
+    expectPanelRuleToAvoidEdges(".content-panel");
+    expectPanelRuleToAvoidEdges(".placeholder-panel");
+  });
+});
+
+function getMaterialButton(
+  container: ParentNode,
+  label: string,
+  variant: "filled" | "outlined"
+) {
+  const tagName = variant === "filled" ? "md-filled-button" : "md-outlined-button";
+  const element = Array.from(container.querySelectorAll(tagName)).find(
+    (button) => button.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web ${variant} button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (button) => button.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function expectMaterialFilledButtonContentColors(button: HTMLElement, colorToken: string) {
+  expect(button.tagName.toLowerCase()).toBe("md-filled-button");
+  for (const property of [
+    "--md-filled-button-label-text-color",
+    "--md-filled-button-hover-label-text-color",
+    "--md-filled-button-focus-label-text-color",
+    "--md-filled-button-pressed-label-text-color",
+    "--md-filled-button-icon-color",
+    "--md-filled-button-hover-icon-color",
+    "--md-filled-button-focus-icon-color",
+    "--md-filled-button-pressed-icon-color"
+  ]) {
+    expect(getComputedStyle(button).getPropertyValue(property).trim()).toBe(colorToken);
+  }
+}
diff --git a/webui/src/app/App.tsx b/webui/src/app/App.tsx
new file mode 100644
index 00000000..d41d8def
--- /dev/null
+++ b/webui/src/app/App.tsx
@@ -0,0 +1,170 @@
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+import { createElement, type ReactNode } from "react";
+import { NavLink, Outlet } from "react-router-dom";
+import { motion } from "motion/react";
+import { MaterialFilledButton, MaterialIconButton, MaterialOutlinedButton } from "../components/MaterialButton";
+import { type Locale, type MessageKey } from "../i18n/messages";
+import { useI18n } from "../i18n/I18nProvider";
+import { useConsoleTheme } from "../theme/ThemeProvider";
+import { pageMotion, springs } from "../theme/motion";
+import { shellStyles } from "./styles/shellStyles";
+import { ConsoleAuthGate } from "./auth/ConsoleAuthGate";
+import { useConsoleAuth } from "./auth/ConsoleAuthContext";
+
+const navItems = [
+  { to: "/overview", icon: "dashboard", labelKey: "nav.overview" },
+  { to: "/models-providers", icon: "hub", labelKey: "nav.modelsProviders" },
+  { to: "/routes", icon: "alt_route", labelKey: "nav.routes" },
+  { to: "/defaults", icon: "rule_settings", labelKey: "nav.defaults" },
+  { to: "/search-tools", icon: "travel_explore", labelKey: "nav.searchTools" },
+  { to: "/storage", icon: "database", labelKey: "nav.storage" },
+  { to: "/security", icon: "shield", labelKey: "nav.security" }
+] as const;
+
+type NavItem = (typeof navItems)[number];
+
+export function App() {
+  // shellStyles (incl. base tokens + .auth-card) is injected here — not in
+  // AppShell — so the login card is fully styled even while the shell is
+  // unmounted behind ConsoleAuthGate.
+  return (
+    <>
+      <style>{shellStyles}</style>
+      <ConsoleAuthGate>
+        <AppShell content={<Outlet />} />
+      </ConsoleAuthGate>
+    </>
+  );
+}
+
+export function AppShell({ content }: { content?: ReactNode }) {
+  return <AppShellContent content={content} />;
+}
+
+function AppShellContent({ content }: { content?: ReactNode }) {
+  const { theme, toggleTheme } = useConsoleTheme();
+  const { locale, setLocale, t } = useI18n();
+  const { signOut } = useConsoleAuth();
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  const themeIcon = theme === "dark" ? "light_mode" : "dark_mode";
+  const nextThemeLabel = t(nextTheme === "dark" ? "theme.dark" : "theme.light");
+
+  return (
+    <div className="app-shell">
+      <header className="top-app-bar">
+        <div>
+          <p>Moon Bridge</p>
+          <strong>{t("app.console")}</strong>
+        </div>
+        <div className="top-app-bar__meta">
+          <div className="locale-switch" role="group" aria-label={t("app.language")}>
+            <span>{t("app.language")}</span>
+            {(["en-US", "zh-CN"] as const).map((nextLocale) => (
+              <LocaleButton
+                key={nextLocale}
+                label={t(nextLocale === "en-US" ? "app.language.en" : "app.language.zh")}
+                onClick={() => setLocale(nextLocale)}
+                selected={locale === nextLocale}
+              />
+            ))}
+          </div>
+          <motion.div
+            className="theme-toggle"
+            whileHover={{ scale: 1.06 }}
+            whileTap={{ scale: 0.9 }}
+            transition={springs.spatialFast}
+          >
+            <motion.span
+              key={themeIcon}
+              style={{ display: "inline-flex" }}
+              initial={{ rotate: -90, opacity: 0, scale: 0.6 }}
+              animate={{ rotate: 0, opacity: 1, scale: 1 }}
+              transition={springs.spatial}
+            >
+              <MaterialIconButton
+                icon={themeIcon}
+                label={t("app.switchTheme", { theme: nextThemeLabel })}
+                onClick={toggleTheme}
+              />
+            </motion.span>
+          </motion.div>
+          <MaterialIconButton
+            className="app-bar__sign-out"
+            icon="lock"
+            label={t("app.signOut")}
+            onClick={signOut}
+          />
+        </div>
+      </header>
+
+      <div className="workspace">
+        <nav className="navigation-rail" aria-label={t("app.consoleSections")}>
+          {navItems.map((item) => (
+            <NavRailItem key={item.to} item={item} label={t(item.labelKey as MessageKey)} />
+          ))}
+        </nav>
+
+        <motion.main
+          aria-label={t("app.routeContent")}
+          className="content-surface"
+          initial={pageMotion.initial}
+          animate={pageMotion.animate}
+          transition={pageMotion.transition}
+        >
+          {content ?? <Outlet />}
+        </motion.main>
+      </div>
+    </div>
+  );
+}
+
+function LocaleButton({
+  label,
+  onClick,
+  selected
+}: {
+  label: string;
+  onClick: () => void;
+  selected: boolean;
+}) {
+  if (selected) {
+    return (
+      <MaterialFilledButton ariaPressed={selected} className="locale-switch__button" onClick={onClick}>
+        {label}
+      </MaterialFilledButton>
+    );
+  }
+  return (
+    <MaterialOutlinedButton ariaPressed={selected} className="locale-switch__button" onClick={onClick}>
+      {label}
+    </MaterialOutlinedButton>
+  );
+}
+
+function NavRailItem({ item, label }: { item: NavItem; label: string }) {
+  return (
+    <NavLink
+      to={item.to}
+      className={({ isActive }) => (isActive ? "nav-item nav-item--active" : "nav-item")}
+    >
+      {({ isActive }) => (
+        <>
+          <span className="nav-item__icon">
+            {isActive ? (
+              <motion.span
+                aria-hidden="true"
+                className="nav-item__indicator"
+                layoutId="nav-active-indicator"
+                transition={springs.spatial}
+              />
+            ) : null}
+            {createElement("md-icon", null, item.icon)}
+            {createElement("md-ripple")}
+          </span>
+          <span className="nav-item__label">{label}</span>
+        </>
+      )}
+    </NavLink>
+  );
+}
diff --git a/webui/src/app/PlaceholderPage.tsx b/webui/src/app/PlaceholderPage.tsx
new file mode 100644
index 00000000..9fa7de65
--- /dev/null
+++ b/webui/src/app/PlaceholderPage.tsx
@@ -0,0 +1,15 @@
+import { useI18n } from "../i18n/I18nProvider";
+
+export function PlaceholderPage({ title }: { title: string }) {
+  const { t } = useI18n();
+
+  return (
+    <section className="placeholder-panel" aria-labelledby="page-title">
+      <div>
+        <p className="eyebrow">{t("placeholder.eyebrow")}</p>
+        <h1 id="page-title">{title}</h1>
+        <p>{t("placeholder.description")}</p>
+      </div>
+    </section>
+  );
+}
diff --git a/webui/src/app/auth/ConsoleAuthContext.test.tsx b/webui/src/app/auth/ConsoleAuthContext.test.tsx
new file mode 100644
index 00000000..d70d3b59
--- /dev/null
+++ b/webui/src/app/auth/ConsoleAuthContext.test.tsx
@@ -0,0 +1,143 @@
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { apiFetch, clearStoredToken, TOKEN_STORAGE_KEY } from "../../rpc/http";
+import { CONSOLE_LOCALE_STORAGE_KEY, I18nProvider } from "../../i18n/I18nProvider";
+import { ThemeProvider } from "../../theme/ThemeProvider";
+import { ConsoleAuthProvider, useConsoleAuth } from "./ConsoleAuthContext";
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { "Content-Type": "application/json" },
+    ...init
+  });
+}
+
+// Returns 200 for `Authorization: Bearer good`, otherwise a 401 — mirroring the server.
+function authFetchMock() {
+  return vi.spyOn(globalThis, "fetch").mockImplementation((input, init) => {
+    const headers = new Headers(init?.headers);
+    if (headers.get("Authorization") === "Bearer good") {
+      return Promise.resolve(jsonResponse({ ok: true }));
+    }
+    return Promise.resolve(
+      jsonResponse(
+        { error: { code: "invalid_auth", message: "missing or invalid token" } },
+        { status: 401 }
+      )
+    );
+  });
+}
+
+function Consumer() {
+  const auth = useConsoleAuth();
+  useQuery({
+    queryKey: ["status"],
+    queryFn: () => apiFetch<{ ok: boolean }>("/status")
+  });
+  return (
+    <>
+      <span data-testid="required">{String(auth.required)}</span>
+      <span data-testid="pending">{String(auth.pending)}</span>
+      <span data-testid="error">{auth.error?.message ?? ""}</span>
+      <button onClick={() => void auth.authenticate("good", false)}>auth-good</button>
+      <button onClick={() => void auth.authenticate("bad", false)}>auth-bad</button>
+      <button onClick={() => auth.signOut()}>sign-out</button>
+    </>
+  );
+}
+
+function renderHarness() {
+  localStorage.setItem(CONSOLE_LOCALE_STORAGE_KEY, "en-US");
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={client}>
+      <I18nProvider>
+        <ThemeProvider>
+          <ConsoleAuthProvider>
+            <Consumer />
+          </ConsoleAuthProvider>
+        </ThemeProvider>
+      </I18nProvider>
+    </QueryClientProvider>
+  );
+}
+
+const requiredEl = () => screen.getByTestId("required");
+const pendingEl = () => screen.getByTestId("pending");
+const errorEl = () => screen.getByTestId("error");
+
+describe("ConsoleAuthProvider", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    clearStoredToken();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("locks the console and surfaces the message when a query returns 401", async () => {
+    authFetchMock();
+    renderHarness();
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("true"));
+    expect(errorEl()).toHaveTextContent("missing or invalid token");
+  });
+
+  test("authenticate opens the gate after verifying a valid token", async () => {
+    const fetchMock = authFetchMock();
+    renderHarness();
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("true"));
+
+    fireEvent.click(screen.getByText("auth-good"));
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("false"));
+    expect(pendingEl()).toHaveTextContent("false");
+
+    const sentGood = fetchMock.mock.calls.some(([, init]) => {
+      const headers = new Headers(init?.headers);
+      return headers.get("Authorization") === "Bearer good";
+    });
+    expect(sentGood).toBe(true);
+  });
+
+  test("authenticate keeps the gate locked and updates the message for a wrong token", async () => {
+    authFetchMock();
+    renderHarness();
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("true"));
+
+    fireEvent.click(screen.getByText("auth-bad"));
+
+    await waitFor(() => expect(pendingEl()).toHaveTextContent("false"));
+    expect(requiredEl()).toHaveTextContent("true");
+    expect(errorEl()).toHaveTextContent("missing or invalid token");
+  });
+
+  test("signOut clears the stored token and locks the console", async () => {
+    authFetchMock();
+    renderHarness();
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("true"));
+    fireEvent.click(screen.getByText("auth-good"));
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("false"));
+    expect(sessionStorage.getItem(TOKEN_STORAGE_KEY)).toBe("good");
+
+    fireEvent.click(screen.getByText("sign-out"));
+
+    await waitFor(() => expect(requiredEl()).toHaveTextContent("true"));
+    expect(sessionStorage.getItem(TOKEN_STORAGE_KEY)).toBeNull();
+    expect(errorEl()).toHaveTextContent("Signed out");
+  });
+
+  test("useConsoleAuth throws when used outside the provider", () => {
+    // Silence the expected error from React/error logging.
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    function Orphan() {
+      useConsoleAuth();
+      return null;
+    }
+    expect(() => render(<Orphan />)).toThrow(/ConsoleAuthProvider/);
+    spy.mockRestore();
+  });
+});
diff --git a/webui/src/app/auth/ConsoleAuthContext.tsx b/webui/src/app/auth/ConsoleAuthContext.tsx
new file mode 100644
index 00000000..9e875ca6
--- /dev/null
+++ b/webui/src/app/auth/ConsoleAuthContext.tsx
@@ -0,0 +1,120 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode
+} from "react";
+import {
+  ApiError,
+  apiFetch,
+  clearStoredToken,
+  isAuthError,
+  saveToken
+} from "../../rpc/http";
+import { useI18n } from "../../i18n/I18nProvider";
+
+type ConsoleAuthState = {
+  /** True while the console is locked behind the login card. */
+  required: boolean;
+  /** Latest 401 error to surface as the card message, when locked. */
+  error: ApiError | undefined;
+  /** True while a submitted token is being verified via refetch. */
+  pending: boolean;
+  /** Persist a candidate token, verify it by refetching, and open the gate on success. */
+  authenticate: (token: string, remember: boolean) => Promise<void>;
+  /** Clear any stored token and lock the console again. */
+  signOut: () => void;
+};
+
+const ConsoleAuthContext = createContext<ConsoleAuthState | null>(null);
+
+export function ConsoleAuthProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient();
+  const { t } = useI18n();
+  const [state, setState] = useState<{
+    required: boolean;
+    error: ApiError | undefined;
+    pending: boolean;
+  }>({ required: false, error: undefined, pending: false });
+
+  // Any query that settles with a 401 locks the console. This also re-arms the
+  // gate when the server's token is rotated while the console is in use.
+  useEffect(() => {
+    const cache = queryClient.getQueryCache();
+    const unsubscribe = cache.subscribe((event) => {
+      // Only react to actual query state changes. react-query also emits
+      // observerOptionsUpdated/observerResultsUpdated on every useQuery render;
+      // acting on those while a query sits in a 401 error state would re-render
+      // in a loop (setState -> render -> setOptions -> notify -> setState ...).
+      if (event.type !== "updated") {
+        return;
+      }
+      const query = event.query;
+      // Ignore mid-refetch notifies: react-query keeps the previous error
+      // visible while fetching, and acting on that stale error would re-lock the
+      // console the moment a valid token lets the app remount and refetch.
+      if (query.state.fetchStatus === "fetching") {
+        return;
+      }
+      const error = query.state.error;
+      if (isAuthError(error)) {
+        setState((prev) => ({ ...prev, required: true, error, pending: false }));
+      }
+    });
+    return unsubscribe;
+  }, [queryClient]);
+
+  const authenticate = useCallback(
+    async (token: string, remember: boolean) => {
+      saveToken(token, remember);
+      setState((prev) => ({ ...prev, pending: true }));
+      try {
+        // Verify the token directly against an authenticated endpoint. While the
+        // console is locked the app shell is unmounted, so its queries are inactive
+        // and we can't rely on refetching them — a direct probe is deterministic.
+        await apiFetch("/status");
+        // Success — open the gate; pages remount and refetch fresh data.
+        setState((prev) => ({ ...prev, pending: false, required: false, error: undefined }));
+        queryClient.invalidateQueries();
+      } catch (error) {
+        setState((prev) => ({ ...prev, pending: false }));
+        if (isAuthError(error)) {
+          // Token rejected — keep the gate locked with the server's message.
+          setState((prev) => ({ ...prev, required: true, error }));
+        }
+        // Non-auth errors (network, 5xx): leave the gate as-is without opening.
+      }
+    },
+    [queryClient]
+  );
+
+  const signOut = useCallback(() => {
+    clearStoredToken();
+    setState({
+      required: true,
+      pending: false,
+      error: new ApiError(401, "signed_out", t("auth.signedOut"))
+    });
+    // No invalidate here: while locked the app shell is unmounted so no queries
+    // are active, and `authenticate` refetches everything on the next login.
+  }, [t]);
+
+  const value = useMemo<ConsoleAuthState>(
+    () => ({ ...state, authenticate, signOut }),
+    [state, authenticate, signOut]
+  );
+
+  return <ConsoleAuthContext.Provider value={value}>{children}</ConsoleAuthContext.Provider>;
+}
+
+export function useConsoleAuth(): ConsoleAuthState {
+  const context = useContext(ConsoleAuthContext);
+  if (!context) {
+    throw new Error("useConsoleAuth must be used within a ConsoleAuthProvider.");
+  }
+  return context;
+}
diff --git a/webui/src/app/auth/ConsoleAuthGate.test.tsx b/webui/src/app/auth/ConsoleAuthGate.test.tsx
new file mode 100644
index 00000000..5e619d61
--- /dev/null
+++ b/webui/src/app/auth/ConsoleAuthGate.test.tsx
@@ -0,0 +1,61 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { CONSOLE_LOCALE_STORAGE_KEY, I18nProvider } from "../../i18n/I18nProvider";
+import { ThemeProvider } from "../../theme/ThemeProvider";
+import { ConsoleAuthProvider, useConsoleAuth } from "./ConsoleAuthContext";
+import { ConsoleAuthGate } from "./ConsoleAuthGate";
+
+function Harness() {
+  const auth = useConsoleAuth();
+  return (
+    <ConsoleAuthGate>
+      <span>App content</span>
+      <button type="button" onClick={() => auth.signOut()}>
+        lock
+      </button>
+    </ConsoleAuthGate>
+  );
+}
+
+function renderHarness() {
+  localStorage.setItem(CONSOLE_LOCALE_STORAGE_KEY, "en-US");
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={client}>
+      <I18nProvider>
+        <ThemeProvider>
+          <ConsoleAuthProvider>
+            <Harness />
+          </ConsoleAuthProvider>
+        </ThemeProvider>
+      </I18nProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe("ConsoleAuthGate", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders the app when the console is unlocked", () => {
+    renderHarness();
+
+    expect(screen.getByText("App content")).toBeInTheDocument();
+    expect(document.querySelector("md-filled-text-field")).not.toBeInTheDocument();
+  });
+
+  test("replaces the app with the Material login card when locked", () => {
+    renderHarness();
+
+    fireEvent.click(screen.getByText("lock"));
+
+    expect(screen.queryByText("App content")).not.toBeInTheDocument();
+    const card = document.querySelector(".auth-card");
+    expect(card).toBeInTheDocument();
+    // Real Material Web controls drive the login (skill requirement).
+    expect(card?.querySelector("md-outlined-text-field")).toBeInTheDocument();
+    expect(card?.querySelector("md-filled-button")).toBeInTheDocument();
+  });
+});
diff --git a/webui/src/app/auth/ConsoleAuthGate.tsx b/webui/src/app/auth/ConsoleAuthGate.tsx
new file mode 100644
index 00000000..bcdffe04
--- /dev/null
+++ b/webui/src/app/auth/ConsoleAuthGate.tsx
@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { AuthGate } from "../../components/AuthGate";
+import { useConsoleAuth } from "./ConsoleAuthContext";
+
+type ConsoleAuthGateProps = {
+  children: ReactNode;
+};
+
+/**
+ * Replaces the whole app shell with the login card while the console is locked,
+ * and renders the app otherwise. Auth state comes from {@link useConsoleAuth}.
+ */
+export function ConsoleAuthGate({ children }: ConsoleAuthGateProps) {
+  const { required, error, pending, authenticate } = useConsoleAuth();
+
+  if (!required) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthGate error={error} pending={pending} onSubmit={authenticate}>
+      {children}
+    </AuthGate>
+  );
+}
diff --git a/webui/src/app/auth/console-auth-integration.test.tsx b/webui/src/app/auth/console-auth-integration.test.tsx
new file mode 100644
index 00000000..8e1a2859
--- /dev/null
+++ b/webui/src/app/auth/console-auth-integration.test.tsx
@@ -0,0 +1,119 @@
+import { useQuery } from "@tanstack/react-query";
+import { act, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { apiFetch, clearStoredToken } from "../../rpc/http";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { AppShell } from "../App";
+import { ConsoleAuthGate } from "./ConsoleAuthGate";
+
+type MaterialTextFieldElement = HTMLElement & { label: string; value: string };
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { "Content-Type": "application/json" },
+    ...init
+  });
+}
+
+function StatusPage() {
+  const { data } = useQuery({
+    queryKey: ["status"],
+    queryFn: () => apiFetch<{ ok: boolean }>("/status")
+  });
+  return <div>{data?.ok ? "status ok" : "status pending"}</div>;
+}
+
+function getOutlinedTextField(label: string) {
+  const element = Array.from(
+    document.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")
+  ).find((candidate) => candidate.label === label);
+  if (!element) {
+    throw new Error(`Expected a Material Web text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function setTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+async function submitAuthCard() {
+  const button = Array.from(document.querySelectorAll("md-filled-button")).find(
+    (candidate) => candidate.textContent?.trim() === "Save token"
+  );
+  if (!button) {
+    throw new Error("Expected the Save token button.");
+  }
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected the submit button inside the auth form.");
+  }
+  let submitted = false;
+  form.addEventListener("submit", () => {
+    submitted = true;
+  }, { once: true });
+  await userEvent.click(button);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  if (!submitted) {
+    await act(async () => {
+      form.requestSubmit();
+      await Promise.resolve();
+    });
+  }
+}
+
+describe("console auth integration", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    clearStoredToken();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("a 401 locks the console, then a valid token unlocks it via a Bearer refetch", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockImplementation((input, init) => {
+      const headers = new Headers(init?.headers);
+      if (headers.get("Authorization") === "Bearer good") {
+        return Promise.resolve(jsonResponse({ ok: true }));
+      }
+      return Promise.resolve(
+        jsonResponse(
+          { error: { code: "invalid_auth", message: "missing or invalid token" } },
+          { status: 401 }
+        )
+      );
+    });
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <ConsoleAuthGate>
+          <AppShell content={<StatusPage />} />
+        </ConsoleAuthGate>
+      </MemoryRouter>
+    );
+
+    // Initial 401 locks the console and shows the Material login card.
+    await waitFor(() => expect(document.querySelector(".auth-card")).toBeInTheDocument());
+
+    // The Material text field's `.label` reflects once Lit upgrades the custom
+    // element, which happens slightly after the card mounts.
+    const tokenField = await waitFor(() => getOutlinedTextField("Token"));
+    setTextFieldValue(tokenField, "good");
+    await submitAuthCard();
+
+    // Valid token unlocks; the page renders with verified data.
+    await waitFor(() => expect(document.querySelector(".auth-card")).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("status ok")).toBeInTheDocument());
+
+    const sentGood = fetchMock.mock.calls.some(([, init]) => {
+      const headers = new Headers(init?.headers);
+      return headers.get("Authorization") === "Bearer good";
+    });
+    expect(sentGood).toBe(true);
+  });
+});
diff --git a/webui/src/app/queryClient.ts b/webui/src/app/queryClient.ts
new file mode 100644
index 00000000..f22e754a
--- /dev/null
+++ b/webui/src/app/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      staleTime: 15_000,
+      refetchOnWindowFocus: false
+    }
+  }
+});
diff --git a/webui/src/app/routes.tsx b/webui/src/app/routes.tsx
new file mode 100644
index 00000000..8a3a749f
--- /dev/null
+++ b/webui/src/app/routes.tsx
@@ -0,0 +1,38 @@
+import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import type { MessageKey } from "../i18n/messages";
+import { useI18n } from "../i18n/I18nProvider";
+import { DefaultsPage } from "../features/defaults/DefaultsPage";
+import { ModelsProvidersPage } from "../features/modelProviders/ModelsProvidersPage";
+import { OverviewPage } from "../features/overview/OverviewPage";
+import { RoutesPage } from "../features/routes/RoutesPage";
+import { SearchToolsPage } from "../features/searchTools/SearchToolsPage";
+import { SecurityPage } from "../features/security/SecurityPage";
+import { StoragePage } from "../features/storage/StoragePage";
+
+export function RouteOutlet() {
+  return <Outlet />;
+}
+
+export const routes = [
+  { index: true, element: <Navigate to="/overview" replace /> },
+  { path: "overview", element: <OverviewPage /> },
+  { path: "models-providers", element: <ModelsProvidersPage /> },
+  { path: "routes", element: <RoutesPage /> },
+  { path: "defaults", element: <DefaultsPage /> },
+  { path: "search-tools", element: <SearchToolsPage /> },
+  { path: "storage", element: <StoragePage /> },
+  { path: "security", element: <SecurityPage /> },
+  { path: "logs", element: <Navigate to="/overview#logs" replace /> }
+];
+
+export const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <App />,
+      children: routes
+    }
+  ],
+  { basename: "/console" }
+);
diff --git a/webui/src/app/styles/base.ts b/webui/src/app/styles/base.ts
new file mode 100644
index 00000000..c9af7923
--- /dev/null
+++ b/webui/src/app/styles/base.ts
@@ -0,0 +1,402 @@
+export const baseStyles = `
+  :root {
+    color-scheme: dark;
+    /* Reserve the scrollbar gutter so the layout (and centered dialogs) does not shift
+       when a scrollbar appears or disappears — keeps left/right spacing symmetric. */
+    scrollbar-gutter: stable;
+    font-family:
+      "Roboto Flex", Inter, ui-sans-serif, system-ui, -apple-system,
+      BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-optical-sizing: auto;
+    background: var(--mb-color-surface);
+    color: var(--mb-color-on-surface);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+
+    /* ---- M3 Expressive shape scale ---- */
+    --mb-shape-xs: 8px;
+    --mb-shape-sm: 12px;
+    --mb-shape-md: 16px;
+    --mb-shape-lg: 20px;
+    --mb-shape-xl: 28px;
+    --mb-shape-2xl: 36px;
+    --mb-shape-full: 999px;
+
+    /* Buttons use a uniform small-radius (square-ish) shape rather than pills. */
+    --mb-button-shape: 8px;
+
+    /* All panel/card/dialog backgrounds share one radius for a consistent surface language. */
+    --mb-shape-panel: 20px;
+
+    /* ---- Code/mono font ---- */
+    --mb-font-mono: "Roboto Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+
+    /* ---- M3 Expressive type scale ---- */
+    --mb-type-display: 700 clamp(2rem, 1.4rem + 2.4vw, 2.9rem)/1.06 "Roboto Flex", Inter, system-ui, sans-serif;
+    --mb-tracking-display: -0.015em;
+
+    /* ---- Content measure: caps the reading/editing width on wide and ultrawide screens so
+       content does not stretch into unreadable line lengths, while still filling common
+       1440–1920px laptops. Section grids inside keep using auto-fit to fill the column. ---- */
+    --mb-content-max: 1560px;
+    --mb-content-gutter: clamp(16px, 3.2vw, 44px);
+
+    /* ---- M3 motion easings + durations ---- */
+    --mb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --mb-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --mb-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    --mb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --mb-duration-short: 140ms;
+    --mb-duration-medium: 240ms;
+    --mb-duration-long: 420ms;
+    --mb-motion-standard: var(--mb-duration-medium) var(--mb-ease-standard);
+    --mb-motion-emphasized: var(--mb-duration-long) var(--mb-ease-decelerate);
+
+    /* ---- State-layer opacities (M3) ---- */
+    --mb-state-hover: 0.08;
+    --mb-state-focus: 0.10;
+    --mb-state-press: 0.12;
+
+    /* ---- Tonal elevation shadows for transient floating surfaces. App panels use tonal color instead. ---- */
+    --mb-elevation-1:
+      0 1px 2px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent),
+      0 1px 3px 1px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent);
+    --mb-elevation-2:
+      0 1px 2px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent),
+      0 2px 6px 2px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent);
+    --mb-elevation-3:
+      0 4px 8px 3px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 1px 3px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+    --mb-elevation-4:
+      0 6px 10px 4px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 2px 3px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+    --mb-elevation-5:
+      0 8px 12px 6px color-mix(in srgb, var(--mb-color-shadow) 15%, transparent),
+      0 4px 4px color-mix(in srgb, var(--mb-color-shadow) 30%, transparent);
+
+    /* Material Symbols default to an outlined, unfilled glyph. */
+    --md-icon-font: "Material Symbols Rounded";
+    --md-icon-size: 24px;
+  }
+
+  :root[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: var(--mb-color-surface);
+  }
+
+  md-icon,
+  .material-symbol {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+    transition: font-variation-settings var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  /* Filled icon variant for active/selected expressive states. */
+  .nav-item--active md-icon,
+  .icon--filled {
+    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--mb-color-primary) 32%, transparent);
+    color: var(--mb-color-on-surface);
+  }
+
+  :focus-visible {
+    outline: none;
+  }
+
+  /* Themed, slim scrollbars to avoid heavy native chrome. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--mb-color-outline) 55%, transparent) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: var(--mb-shape-full);
+    background: color-mix(in srgb, var(--mb-color-outline) 50%, transparent);
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--mb-color-outline) 80%, transparent);
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  @keyframes mb-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes mb-shimmer {
+    0% { background-position: -480px 0; }
+    100% { background-position: 480px 0; }
+  }
+  @keyframes mb-pulse-ring {
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb-color-primary) 45%, transparent); }
+    70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mb-color-primary) 0%, transparent); }
+    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb-color-primary) 0%, transparent); }
+  }
+  @keyframes mb-pop-in {
+    0% { opacity: 0; transform: scale(0.8); }
+    60% { opacity: 1; transform: scale(1.06); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+
+  .app-shell {
+    min-height: 100vh;
+    background:
+      radial-gradient(1200px 420px at 12% -8%, color-mix(in srgb, var(--mb-color-primary) 14%, transparent), transparent 70%),
+      radial-gradient(900px 360px at 100% -4%, color-mix(in srgb, var(--mb-color-tertiary) 10%, transparent), transparent 72%),
+      var(--mb-color-surface);
+  }
+
+  .auth-gate {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background:
+      radial-gradient(900px 500px at 50% -12%, color-mix(in srgb, var(--mb-color-primary) 20%, transparent), transparent 70%),
+      var(--mb-color-surface);
+  }
+
+  .auth-card {
+    width: min(420px, 100%);
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 32px;
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .auth-card__badge {
+    width: 56px;
+    height: 56px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-lg);
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+    --md-icon-size: 30px;
+  }
+
+  .auth-card h1 {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.15;
+  }
+
+  .auth-card__message {
+    margin: 0;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .auth-token-field {
+    width: 100%;
+  }
+
+  /* Smaller (~ -25%) visibility-toggle icon button used inside secret/token
+     text fields, so it doesn't dominate the field's trailing area. */
+  .field-visibility-toggle {
+    --md-icon-button-state-layer-size: 30px;
+    --md-icon-size: 18px;
+  }
+
+  .auth-remember {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    color: var(--mb-color-on-surface);
+    font-size: 0.9rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .auth-remember md-checkbox {
+    --md-checkbox-selected-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-icon-color: var(--mb-color-on-primary);
+    --md-checkbox-selected-hover-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-focus-container-color: var(--mb-color-primary);
+    --md-checkbox-selected-pressed-container-color: var(--mb-color-primary);
+    --md-checkbox-unselected-outline-color: var(--mb-color-outline);
+    --md-checkbox-unselected-hover-outline-color: var(--mb-color-on-surface-variant);
+    --md-checkbox-unselected-focus-outline-color: var(--mb-color-primary);
+  }
+
+  .auth-submit {
+    margin-top: 4px;
+    width: 100%;
+    min-height: 48px;
+  }
+
+  .top-app-bar {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    min-height: 68px;
+    padding: 10px 24px;
+    border-bottom: 1px solid color-mix(in srgb, var(--mb-color-outline) 36%, transparent);
+    background: color-mix(in srgb, var(--mb-color-surface) 92%, transparent);
+    backdrop-filter: blur(16px);
+  }
+
+  .top-app-bar p,
+  .top-app-bar strong {
+    margin: 0;
+  }
+
+  .top-app-bar p {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.75rem;
+    line-height: 1.2;
+  }
+
+  .top-app-bar strong {
+    display: block;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    font-weight: 650;
+  }
+
+  .top-app-bar__meta {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+
+  .top-app-bar__meta > span {
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-outline-variant) 60%, transparent);
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container);
+    font-size: 0.78rem;
+    font-weight: 600;
+  }
+
+  .locale-switch {
+    min-height: 38px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-outline-variant) 60%, transparent);
+    border-radius: var(--mb-button-shape);
+    padding: 3px;
+    background: var(--mb-color-surface-container);
+  }
+
+  .locale-switch > span {
+    min-height: 30px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 7px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .locale-switch__button {
+    min-width: 36px;
+    min-height: 30px;
+    --md-filled-button-container-height: 30px;
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-label-text-size: 0.75rem;
+    --md-filled-button-label-text-weight: 700;
+    --md-filled-button-leading-space: 10px;
+    --md-filled-button-trailing-space: 10px;
+    --md-outlined-button-container-height: 30px;
+    --md-outlined-button-container-shape: var(--mb-button-shape);
+    --md-outlined-button-label-text-size: 0.75rem;
+    --md-outlined-button-label-text-weight: 700;
+    --md-outlined-button-leading-space: 10px;
+    --md-outlined-button-trailing-space: 10px;
+  }
+
+  md-filled-button {
+    --md-filled-button-container-color: var(--mb-color-primary);
+    --md-filled-button-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-primary);
+    --md-filled-button-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-primary);
+    --md-filled-button-container-shape: var(--mb-button-shape);
+  }
+
+  md-outlined-button {
+    --md-outlined-button-container-shape: var(--mb-button-shape);
+    --md-outlined-button-label-text-color: var(--mb-color-on-surface);
+    --md-outlined-button-outline-color: var(--mb-color-outline-variant);
+    --md-outlined-button-hover-label-text-color: var(--mb-color-primary);
+    --md-outlined-button-hover-outline-color: var(--mb-color-primary);
+  }
+
+  .secondary-button {
+    --md-outlined-button-label-text-color: var(--mb-color-on-surface);
+    --md-outlined-button-outline-color: var(--mb-color-outline-variant);
+  }
+
+  md-icon-button {
+    --md-icon-button-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+  }
+
+  md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-hover-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-focus-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-pressed-track-color: var(--mb-color-surface-container-highest);
+    --md-switch-track-outline-color: var(--mb-color-outline);
+    --md-switch-hover-track-outline-color: var(--mb-color-outline);
+    --md-switch-focus-track-outline-color: var(--mb-color-outline);
+    --md-switch-pressed-track-outline-color: var(--mb-color-outline);
+    --md-switch-handle-color: var(--mb-color-outline);
+    --md-switch-hover-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-focus-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-pressed-handle-color: var(--mb-color-on-surface-variant);
+    --md-switch-selected-hover-state-layer-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-state-layer-color: var(--mb-color-primary);
+    --md-switch-hover-state-layer-color: var(--mb-color-on-surface);
+    --md-switch-pressed-state-layer-color: var(--mb-color-on-surface);
+  }
+
+`;
diff --git a/webui/src/app/styles/forms.ts b/webui/src/app/styles/forms.ts
new file mode 100644
index 00000000..c75b9c89
--- /dev/null
+++ b/webui/src/app/styles/forms.ts
@@ -0,0 +1,781 @@
+export const formStyles = `  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .form-grid label,
+  .form-field,
+  .schema-field {
+    display: grid;
+    gap: 6px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+    min-width: 0;
+  }
+
+  .form-field label {
+    display: grid;
+    gap: 6px;
+    color: inherit;
+    font: inherit;
+  }
+
+  .schema-field__topline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    min-height: 26px;
+  }
+
+  .schema-field--inline {
+    gap: 6px;
+  }
+
+  .schema-field__label-row {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .schema-field__label {
+    color: inherit;
+    font: inherit;
+  }
+
+  .schema-field__label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .schema-field__required {
+    margin-left: 3px;
+    color: var(--mb-color-error);
+  }
+
+  .schema-field__help-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .schema-field__help {
+    min-height: 0;
+    flex: 0 0 auto;
+    --md-icon-button-state-layer-width: 20px;
+    --md-icon-button-state-layer-height: 20px;
+    --md-icon-button-state-layer-shape: 999px;
+    --md-icon-button-icon-size: 16px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.14;
+    --md-icon-button-focus-state-layer-opacity: 0.14;
+  }
+
+  .rich-tooltip {
+    position: fixed;
+    z-index: 40;
+    width: min(320px, calc(100vw - 24px));
+    max-width: min(320px, 78vw);
+    display: grid;
+    gap: 6px;
+    border-radius: var(--mb-shape-md);
+    padding: 16px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    box-shadow: var(--mb-elevation-3);
+    text-align: left;
+    pointer-events: none;
+  }
+
+  .rich-tooltip__subhead {
+    color: var(--mb-color-on-surface);
+    font-size: 0.82rem;
+    font-weight: 720;
+    line-height: 1.3;
+  }
+
+  .rich-tooltip__body {
+    font-size: 0.8rem;
+    font-weight: 460;
+    line-height: 1.5;
+  }
+
+  .rich-tooltip__metas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 0;
+  }
+
+  .rich-tooltip__chip {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 9px;
+    background: color-mix(in srgb, var(--mb-color-primary) 14%, transparent);
+    color: var(--mb-color-on-surface);
+    font-size: 0.7rem;
+    font-weight: 640;
+    white-space: nowrap;
+  }
+
+  .schema-field__switch-line {
+    width: 100%;
+    min-width: 0;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 4px 6px 4px 14px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 60%, transparent);
+  }
+
+  .material-chip-group {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+    min-height: 38px;
+  }
+
+  .schema-structured-summary {
+    width: 100%;
+    display: grid;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    padding: 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .schema-structured-summary__header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    text-align: left;
+  }
+
+  .schema-structured-summary__header span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--mb-color-on-surface);
+  }
+
+  .schema-structured-summary__header strong {
+    min-height: 24px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 11px;
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+    font-size: 0.76rem;
+    white-space: nowrap;
+  }
+
+  .schema-structured-summary__rows {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 8px;
+  }
+
+  .schema-structured-summary__row {
+    min-width: 0;
+    display: grid;
+    gap: 3px;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 10px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 54%, transparent);
+  }
+
+  .schema-structured-summary__row dt,
+  .schema-structured-summary__row dd {
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-structured-summary__row dt {
+    color: var(--mb-color-on-surface);
+    font-size: 0.76rem;
+    font-weight: 700;
+  }
+
+  .schema-structured-summary__row dd,
+  .schema-structured-summary__empty {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 520;
+  }
+
+  .schema-structured-summary__empty {
+    margin: 0;
+  }
+
+  .schema-structured-object {
+    width: 100%;
+    display: grid;
+    gap: 10px;
+    border-radius: var(--mb-shape-sm);
+    padding: 12px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .schema-structured-object__header {
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+  }
+
+  .schema-structured-object__header span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-structured-object__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .schema-structured-object__boolean {
+    min-height: 44px;
+    align-self: center;
+  }
+
+  .schema-structured-summary--nested {
+    padding: 10px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 42%, transparent);
+  }
+
+  .schema-field--wide {
+    grid-column: 1 / -1;
+  }
+
+  .editable-list-field {
+    display: grid;
+    gap: 10px;
+    min-width: 0;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .editable-list-field__header {
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .editable-list-field__title {
+    min-width: 0;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
+    overflow-wrap: anywhere;
+  }
+
+  .editable-list-field__items {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    min-height: 32px;
+  }
+
+  .editable-list-field__chip {
+    --md-input-chip-container-height: 32px;
+    --md-input-chip-container-shape: var(--mb-shape-sm);
+    --md-input-chip-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-hover-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-focus-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-pressed-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-outline-color: var(--mb-color-outline-variant);
+    --md-input-chip-hover-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-focus-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-pressed-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-hover-state-layer-opacity: 0.08;
+    --md-input-chip-focus-state-layer-opacity: 0.08;
+    --md-input-chip-icon-size: 18px;
+    --md-input-chip-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-input-chip-hover-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-pressed-trailing-icon-color: var(--mb-color-primary);
+  }
+
+  .editable-list-field__composer {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .structured-feature-field {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+    border-radius: var(--mb-shape-sm);
+    outline: 0;
+    padding: 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 58%, transparent);
+  }
+
+  .structured-feature-field__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px 18px;
+    align-items: start;
+  }
+
+  .structured-feature-field__grid--wide {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .structured-feature-field__number {
+    width: 100%;
+  }
+
+  .structured-feature-field__secret {
+    width: 100%;
+  }
+
+  .extension-feature-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    min-height: 32px;
+  }
+
+  .extension-feature-row {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 48%, transparent);
+  }
+
+  .extension-config-grid {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .extension-feature-row__chip {
+    min-width: 0;
+    --md-input-chip-container-height: 32px;
+    --md-input-chip-container-shape: var(--mb-shape-sm);
+    --md-input-chip-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-hover-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-focus-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-pressed-label-text-color: var(--mb-color-on-surface);
+    --md-input-chip-outline-color: var(--mb-color-outline-variant);
+    --md-input-chip-hover-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-focus-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-pressed-state-layer-color: var(--mb-color-primary);
+    --md-input-chip-hover-state-layer-opacity: 0.08;
+    --md-input-chip-focus-state-layer-opacity: 0.08;
+    --md-input-chip-icon-size: 18px;
+    --md-input-chip-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-input-chip-hover-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-input-chip-pressed-trailing-icon-color: var(--mb-color-primary);
+  }
+
+  .extension-feature-row__switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .extension-feature-row__switch md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+  }
+
+  .editable-list-field__input {
+    width: 100%;
+  }
+
+  .editable-list-field__add {
+    align-self: stretch;
+    --md-filled-button-container-height: 44px;
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-leading-space: 12px;
+    --md-filled-button-trailing-space: 14px;
+  }
+
+  .field-status {
+    display: inline-flex;
+    align-items: center;
+    justify-self: end;
+    gap: 6px;
+    min-height: 24px;
+    border-radius: var(--mb-shape-full);
+    padding: 2px 11px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 78%, transparent);
+    font-size: 0.72rem;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  @keyframes mb-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+
+  .field-status--saving .field-status__dot {
+    animation: mb-blink 1s var(--mb-ease-standard) infinite;
+  }
+
+  .field-status__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: currentColor;
+  }
+
+  .field-status--dirty {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .field-status--saving {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .field-status--saved,
+  .field-status--idle {
+    color: var(--mb-color-on-surface-variant);
+    background: transparent;
+    font-weight: 600;
+  }
+
+  .field-status--saved .field-status__dot,
+  .field-status--idle .field-status__dot {
+    color: var(--mb-color-success);
+  }
+
+  .field-status--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  .mb-field {
+    position: relative;
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .mb-field__control {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+  }
+
+  .mb-field md-outlined-text-field {
+    width: 100%;
+    min-width: 0;
+    --md-outlined-text-field-input-text-color: var(--mb-color-on-surface);
+    --md-outlined-text-field-input-text-size: 0.88rem;
+    --md-outlined-text-field-input-text-weight: 640;
+    --md-outlined-text-field-label-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-label-text-color: var(--mb-color-primary);
+    --md-outlined-text-field-outline-color: var(--mb-color-outline);
+    --md-outlined-text-field-hover-outline-color: var(--mb-color-on-surface);
+    --md-outlined-text-field-focus-outline-color: var(--mb-color-primary);
+    --md-outlined-text-field-error-outline-color: var(--mb-color-error);
+    --md-outlined-text-field-error-focus-outline-color: var(--mb-color-error);
+    --md-outlined-text-field-error-label-text-color: var(--mb-color-error);
+    --md-outlined-text-field-error-focus-label-text-color: var(--mb-color-error);
+    --md-outlined-text-field-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-outlined-text-field-supporting-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-text-field-error-supporting-text-color: var(--mb-color-error);
+  }
+
+  .material-field-leading-node,
+  .material-select-leading-node,
+  .material-select-option-icon {
+    display: inline-grid;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    color: currentColor;
+    line-height: 1;
+  }
+
+  .material-field-leading-node svg,
+  .material-select-leading-node svg,
+  .material-select-option-icon svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+  }
+
+  md-outlined-text-field.material-text-field--single-line {
+    --md-outlined-text-field-top-space: 12px;
+    --md-outlined-text-field-bottom-space: 12px;
+    --md-outlined-text-field-input-text-line-height: 1.25rem;
+  }
+
+  md-filled-text-field.material-text-field--single-line {
+    --md-filled-text-field-top-space: 12px;
+    --md-filled-text-field-bottom-space: 12px;
+    --md-filled-text-field-with-label-top-space: 4px;
+    --md-filled-text-field-with-label-bottom-space: 4px;
+    --md-filled-text-field-input-text-line-height: 1.25rem;
+  }
+
+  .mb-field[data-variant="textarea"] md-outlined-text-field {
+    --md-outlined-text-field-input-text-font: var(--mb-font-mono);
+    --md-outlined-text-field-input-text-line-height: 1.45;
+  }
+
+  .mb-field[data-variant="textarea"] md-outlined-text-field {
+    min-height: 132px;
+  }
+
+  .mb-field__required {
+    margin-left: 2px;
+    color: var(--mb-color-error);
+  }
+
+  md-outlined-select.material-select--single-line {
+    --md-outlined-select-text-field-input-text-line-height: 1.25rem;
+    --md-outlined-field-top-space: 12px;
+    --md-outlined-field-bottom-space: 12px;
+  }
+
+  .mb-field md-outlined-select {
+    width: 100%;
+    min-width: 0;
+    --md-outlined-select-text-field-input-text-color: var(--mb-color-on-surface);
+    --md-outlined-select-text-field-input-text-size: 0.88rem;
+    --md-outlined-select-text-field-input-text-weight: 640;
+    --md-outlined-select-text-field-label-text-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-label-text-color: var(--mb-color-primary);
+    --md-outlined-select-text-field-outline-color: var(--mb-color-outline);
+    --md-outlined-select-text-field-hover-outline-color: var(--mb-color-on-surface);
+    --md-outlined-select-text-field-focus-outline-color: var(--mb-color-primary);
+    --md-outlined-select-text-field-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-leading-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-trailing-icon-color: var(--mb-color-on-surface-variant);
+    --md-outlined-select-text-field-focus-trailing-icon-color: var(--mb-color-primary);
+    --md-menu-container-color: var(--mb-color-surface-container-high);
+    --md-menu-container-shape: var(--mb-shape-md);
+    --md-menu-container-elevation: 2;
+  }
+
+  .mb-field__select-actions {
+    min-height: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: -2px;
+    pointer-events: none;
+  }
+
+  .mb-field__select-help {
+    min-height: 0;
+    flex: 0 0 auto;
+    pointer-events: auto;
+    --md-icon-button-state-layer-width: 20px;
+    --md-icon-button-state-layer-height: 20px;
+    --md-icon-button-state-layer-shape: 999px;
+    --md-icon-button-icon-size: 16px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.14;
+    --md-icon-button-focus-state-layer-opacity: 0.14;
+  }
+
+  .form-field--create-track.mb-field {
+    display: grid;
+  }
+
+  .form-grid .mb-field--wide,
+  .mb-field--wide {
+    min-width: 0;
+  }
+
+  .form-grid__wide,
+  .form-actions {
+    grid-column: 1 / -1;
+  }
+
+  .form-grid__compact {
+    grid-column: span 1;
+  }
+
+  .form-grid__medium {
+    grid-column: span 1;
+  }
+
+  .form-grid--route-identity {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .form-grid__reasoning-defaults {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px 18px;
+  }
+
+  @media (max-width: 1080px) {
+    .form-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 680px) {
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .structured-feature-field__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .schema-structured-object__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .editable-list-field__composer {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .form-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .feedback-inline,
+  .feedback-banner {
+    color: var(--mb-color-primary);
+    font-weight: 650;
+  }
+
+  .edit-state-banner {
+    margin: 0;
+    border: 1px solid color-mix(in srgb, var(--mb-color-primary) 40%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 14px 16px;
+    background: color-mix(in srgb, var(--mb-color-primary-container) 42%, var(--mb-color-surface));
+  }
+
+  .field-hint {
+    display: block;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.76rem;
+    line-height: 1.45;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+  }
+
+  .field-hint span {
+    display: inline-block;
+  }
+
+  .field-error {
+    margin: 0;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 12px;
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+    font-size: 0.76rem;
+    line-height: 1.4;
+    font-weight: 650;
+    overflow-wrap: anywhere;
+  }
+
+  .field-warning {
+    margin: 0;
+    border-radius: var(--mb-shape-sm);
+    padding: 8px 12px;
+    color: var(--mb-color-on-warning-container);
+    background: var(--mb-color-warning-container);
+    font-size: 0.76rem;
+    line-height: 1.4;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+
+  .field-error--sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  .json-block {
+    max-height: 420px;
+    overflow: auto;
+    margin: 0;
+    border-radius: var(--mb-shape-md);
+    padding: 16px;
+    color: var(--mb-color-on-surface);
+    background: var(--mb-color-surface-container-lowest);
+    font-family: var(--mb-font-mono);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }
+
+`;
diff --git a/webui/src/app/styles/logs.ts b/webui/src/app/styles/logs.ts
new file mode 100644
index 00000000..249972be
--- /dev/null
+++ b/webui/src/app/styles/logs.ts
@@ -0,0 +1,197 @@
+export const logStyles = `  .logs-panel__header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .logs-panel__header h2 {
+    margin: 0;
+  }
+
+  .logs-panel__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .logs-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+  }
+
+  .logs-toolbar__actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .logs-count {
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    border-radius: var(--mb-shape-full);
+    padding: 0 14px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    font-size: 0.82rem;
+    font-weight: 650;
+  }
+
+  .logs-chip-set {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+  }
+
+  .log-level-filter {
+    margin-bottom: 14px;
+  }
+
+  .logs-stream-status {
+    margin: 0 0 14px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-error) 45%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 12px 14px;
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+    font-size: 0.85rem;
+    font-weight: 650;
+  }
+
+  .logs-search {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+
+  .logs-search__field {
+    width: 100%;
+  }
+
+  .material-symbol {
+    font-family: "Material Symbols Rounded", "Material Symbols Outlined", sans-serif;
+    font-size: 1.15rem;
+    line-height: 1;
+  }
+
+  .log-output {
+    max-height: min(46vh, 600px);
+    overflow: auto;
+    display: grid;
+    gap: 4px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 10px;
+    background: var(--mb-color-surface-container-lowest);
+  }
+
+  .log-empty-state {
+    min-height: 180px;
+    display: grid;
+    place-items: center;
+    margin: 0;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 18px;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container) 48%, transparent);
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: 650;
+  }
+
+  .log-row {
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr);
+    align-items: baseline;
+    gap: 10px;
+    border-radius: var(--mb-shape-xs);
+    padding: 7px 12px;
+    background: color-mix(in srgb, var(--mb-color-surface-container) 58%, transparent);
+    transition: background-color var(--mb-duration-short) var(--mb-ease-standard);
+  }
+
+  .log-row:hover {
+    background: color-mix(in srgb, var(--mb-color-surface-container) 84%, transparent);
+  }
+
+  .log-row__level {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    justify-self: start;
+    min-width: 56px;
+    border-radius: var(--mb-shape-xs);
+    padding: 2px 8px;
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container-high);
+    font-size: 0.66rem;
+    font-weight: 760;
+    letter-spacing: 0.05em;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .log-row__level--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  .log-row__level--warn {
+    color: var(--mb-color-on-warning-container);
+    background: var(--mb-color-warning-container);
+  }
+
+  .log-row__level--info {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .log-row__level--debug {
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .log-row__time {
+    font-family: var(--mb-font-mono);
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--mb-color-on-surface-variant);
+    white-space: nowrap;
+  }
+
+  .log-row__message {
+    margin: 0;
+    min-width: 0;
+    color: var(--mb-color-on-surface);
+    font-family: var(--mb-font-mono);
+    font-size: 0.8rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @media (max-width: 600px) {
+    .log-row {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+    .log-row__time {
+      display: none;
+    }
+  }
+
+`;
+
diff --git a/webui/src/app/styles/overview.ts b/webui/src/app/styles/overview.ts
new file mode 100644
index 00000000..c9cf158b
--- /dev/null
+++ b/webui/src/app/styles/overview.ts
@@ -0,0 +1,295 @@
+export const overviewStyles = `  .metric-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-dashboard {
+    display: grid;
+    gap: 16px;
+  }
+
+  .panel-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .panel-heading h2,
+  .panel-heading p {
+    margin: 0;
+  }
+
+  .panel-heading h2 {
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  .panel-heading p {
+    margin-top: 5px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.86rem;
+    line-height: 1.45;
+  }
+
+  .usage-heading-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .usage-range {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+  }
+
+  .usage-demo-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 32px;
+    padding: 0 12px;
+    border-radius: var(--mb-button-shape);
+    color: var(--mb-color-on-surface-variant);
+    background: var(--mb-color-surface-container);
+    font-size: 0.78rem;
+    font-weight: 650;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .usage-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-metric {
+    position: relative;
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 14px 16px;
+    background: var(--mb-color-surface-container-high);
+    transition:
+      background-color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .usage-metric:hover {
+    background: var(--mb-color-surface-container-highest);
+  }
+
+  .usage-metric__icon {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .usage-metric__icon.material-symbol {
+    font-size: 20px;
+  }
+
+  .usage-metric--tertiary .usage-metric__icon {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .usage-metric--secondary .usage-metric__icon {
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .usage-metric__label {
+    padding-right: 44px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .usage-metric strong {
+    min-width: 0;
+    padding-right: 44px;
+    overflow-wrap: anywhere;
+    font-size: 1.32rem;
+    line-height: 1.12;
+    font-weight: 650;
+  }
+
+  .usage-chart-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+    gap: 12px;
+  }
+
+  .usage-chart {
+    min-width: 0;
+    display: grid;
+    gap: 12px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 16px;
+    background: color-mix(in srgb, var(--mb-color-surface-container-high) 76%, var(--mb-color-surface));
+  }
+
+  .usage-chart:focus-visible {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .usage-chart__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .usage-chart__header h3 {
+    margin: 0;
+    font-size: 0.88rem;
+    line-height: 1.25;
+  }
+
+  .usage-chart__header span {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+
+  .usage-chart__bar {
+    overflow: hidden;
+    display: flex;
+    gap: 0;
+    /* Fixed height (not min-height) so the bar never stretches when the panel
+       around it grows; only the outer ends are rounded via the container. */
+    block-size: 10px;
+    border-radius: var(--mb-shape-full);
+    background: var(--mb-color-surface-container);
+  }
+
+  .usage-chart__segment {
+    min-inline-size: 4px;
+    border-radius: 0;
+    transition: inline-size var(--mb-duration-long) var(--mb-ease-decelerate);
+  }
+
+  .usage-segment--input {
+    background: var(--mb-color-primary);
+  }
+
+  .usage-segment--output {
+    background: var(--mb-color-tertiary);
+  }
+
+  .usage-segment--cache-write {
+    background: var(--mb-color-secondary);
+  }
+
+  .usage-segment--cache-read {
+    background: var(--mb-color-primary-container);
+  }
+
+  .usage-segment--cost-1 {
+    background: #7c6fdd;
+  }
+
+  .usage-segment--cost-2 {
+    background: #2f8f68;
+  }
+
+  .usage-segment--cost-3 {
+    background: #c26a30;
+  }
+
+  .usage-segment--cost-4 {
+    background: #b84f76;
+  }
+
+  .usage-segment--cost-5 {
+    background: #4f82c8;
+  }
+
+  .usage-segment--cost-6 {
+    background: #8a7a24;
+  }
+
+  .usage-chart__legend {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .usage-chart__legend li {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: center;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+  }
+
+  .usage-chart__legend li > span:not(.usage-chart__dot) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .usage-chart__legend strong {
+    color: var(--mb-color-on-surface);
+    font-weight: 700;
+  }
+
+  .usage-chart__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--mb-shape-full);
+  }
+
+  .usage-table td {
+    white-space: nowrap;
+  }
+
+  .usage-table td:first-child,
+  .usage-table td:nth-child(2) {
+    max-width: 260px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .usage-empty-state {
+    min-height: 180px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container) 48%, transparent);
+    font-weight: 650;
+  }
+
+  .usage-empty-state p {
+    margin: 0;
+  }
+
+  .overview-logs {
+    display: grid;
+    gap: 16px;
+  }
+
+`;
diff --git a/webui/src/app/styles/resourceEditor.ts b/webui/src/app/styles/resourceEditor.ts
new file mode 100644
index 00000000..1a5232f0
--- /dev/null
+++ b/webui/src/app/styles/resourceEditor.ts
@@ -0,0 +1,420 @@
+export const resourceEditorStyles = `  .resource-editor-card {
+    position: relative;
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 16px 18px;
+    background: var(--mb-color-surface-container);
+    transition:
+      background-color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .resource-editor-card:hover {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .resource-editor-card:focus-within {
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .resource-editor-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .resource-editor-card__identity {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+  }
+
+  .resource-editor-card__identity-line {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__identity h3 {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--mb-color-on-surface);
+    font-size: 1rem;
+    line-height: 1.2;
+    font-weight: 720;
+  }
+
+  .resource-editor-card__facts {
+    display: flex;
+    align-items: center;
+    gap: 8px var(--mb-resource-meta-gap, 12px);
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__facts .resource-meta-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    font-size: 0.76rem;
+    font-weight: 650;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .resource-editor-card__facts .resource-meta-pill .material-symbol {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .resource-fact {
+    color: var(--mb-color-on-surface-variant);
+    background: color-mix(in srgb, var(--mb-color-surface-container-highest) 68%, transparent);
+  }
+
+  .resource-fact .material-symbol {
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  .resource-fact--hot .material-symbol {
+    color: var(--mb-color-primary);
+  }
+
+  .resource-fact--restart .material-symbol {
+    color: var(--mb-color-tertiary);
+  }
+
+  .resource-kind-icon {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-secondary-container);
+    background: var(--mb-color-secondary-container);
+    font-size: 18px;
+  }
+
+  .resource-editor-card__status-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mb-resource-meta-gap, 12px);
+    flex-wrap: wrap;
+  }
+
+  .resource-editor-card__meta {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+  }
+
+  .editor-live-status {
+    font-weight: 700;
+  }
+
+  .editor-live-status--saving {
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+  }
+
+  .editor-live-status--saving .material-symbol {
+    animation: mb-spin 0.9s linear infinite;
+  }
+
+  .editor-live-status--dirty {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .editor-live-status--error {
+    color: var(--mb-color-on-error-container);
+    background: var(--mb-color-error-container);
+  }
+
+  @keyframes mb-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .fab-button {
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px 0 16px;
+    font-size: 0.82rem;
+    font-weight: 680;
+    white-space: nowrap;
+    --md-filled-button-container-color: var(--mb-color-primary-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-primary-container);
+    --md-filled-button-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-primary-container);
+    --md-filled-button-container-shape: var(--mb-button-shape);
+    --md-filled-button-container-elevation: 1;
+    --md-filled-button-hover-container-elevation: 2;
+    --md-filled-button-pressed-container-elevation: 1;
+    --md-filled-button-icon-size: 20px;
+    transition:
+      transform var(--mb-duration-short) var(--mb-ease-spring);
+  }
+
+  .fab-button:hover {
+    transform: translateY(-1px);
+  }
+
+  .fab-button:active {
+    transform: translateY(0);
+  }
+
+  .fab-button--danger {
+    --md-filled-button-container-color: var(--mb-color-error-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-error-container);
+    --md-filled-button-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-error-container);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-error);
+  }
+
+  .switch-bank {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+    gap: 8px 14px;
+    align-items: start;
+  }
+
+  .resource-delete-confirmation {
+    display: grid;
+    gap: 10px;
+    border: 1px solid color-mix(in srgb, var(--mb-color-error) 34%, transparent);
+    border-radius: var(--mb-shape-md);
+    padding: 14px 16px;
+    color: var(--mb-color-on-error-container);
+    background: color-mix(in srgb, var(--mb-color-error-container) 70%, var(--mb-color-surface));
+  }
+
+  .resource-delete-confirmation p {
+    margin: 0;
+    font-size: 0.82rem;
+    line-height: 1.45;
+    font-weight: 650;
+  }
+
+  .resource-delete-confirmation__actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .resource-delete-confirmation__confirm {
+    --md-filled-button-container-color: var(--mb-color-error);
+    --md-filled-button-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-error);
+    --md-filled-button-icon-color: var(--mb-color-on-error);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-error);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-error);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-error);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-on-error);
+    --md-filled-button-container-elevation: 1;
+  }
+
+  .resource-editor-card__summary {
+    display: none;
+  }
+
+  .resource-field-groups {
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-field-group {
+    display: grid;
+    gap: 12px;
+    border-radius: var(--mb-shape-md);
+    outline: 0;
+    padding: 16px;
+    background: color-mix(in srgb, var(--mb-color-surface) 68%, var(--mb-color-surface-container-high));
+  }
+
+  .resource-field-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .resource-field-group__header-actions {
+    min-width: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .resource-field-group__body {
+    display: grid;
+    gap: 12px;
+  }
+
+  .resource-field-group__header h4 {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--mb-color-on-surface);
+    font-size: 0.84rem;
+    line-height: 1.25;
+    font-weight: 760;
+  }
+
+  .resource-field-group__header h4 .material-symbol {
+    font-size: 1.1rem;
+    color: var(--mb-color-primary);
+  }
+
+  .resource-field-group--advanced {
+    background: color-mix(in srgb, var(--mb-color-surface) 68%, var(--mb-color-surface-container-high));
+  }
+
+  .resource-field-group__toggle {
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-focus-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    flex: 0 0 auto;
+    transition: transform var(--mb-duration-medium) var(--mb-ease-spring);
+  }
+
+  .resource-field-group__toggle[aria-expanded="true"] {
+    --md-icon-button-icon-color: var(--mb-color-primary);
+    transform: rotate(90deg);
+  }
+
+  .resource-field-group__switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 64px;
+  }
+
+  .resource-field-group__switch md-switch {
+    --md-switch-selected-track-color: var(--mb-color-primary);
+    --md-switch-selected-handle-color: var(--mb-color-on-primary);
+    --md-switch-selected-hover-track-color: var(--mb-color-primary);
+    --md-switch-selected-focus-track-color: var(--mb-color-primary);
+    --md-switch-selected-pressed-track-color: var(--mb-color-primary);
+  }
+
+  /* ---- Summary row variant: compact, scannable list item ---- */
+  .resource-editor-card--summary {
+    padding: 12px 16px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__header {
+    align-items: center;
+    gap: 16px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__identity {
+    gap: 6px;
+  }
+
+  .resource-editor-card--summary .resource-editor-card__meta {
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* Brand badge between the kind icon and the id in summary rows */
+  .resource-editor-card__identity-line .lobe-brand-icon {
+    display: inline-flex;
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  /* ---- Embedded variant: card sits directly on the dialog surface (no nested card) ---- */
+  .resource-editor-card--embedded {
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+  }
+
+  .resource-editor-card--embedded:hover,
+  .resource-editor-card--embedded:focus-within {
+    background: transparent;
+  }
+
+  /* ---- Material dialog (resource editor) ----
+     md-dialog hard-codes a 560px host max-width. Override on the host element
+     (layout only) so the editor's multi-column form grid has room to breathe. */
+  md-dialog.resource-editor-dialog {
+    --md-dialog-container-shape: var(--mb-shape-panel);
+    --md-dialog-container-color: var(--mb-color-surface-container);
+    --md-dialog-container-elevation: var(--mb-elevation-3);
+    max-width: min(900px, calc(100% - 48px));
+    max-height: min(86vh, calc(100% - 48px));
+  }
+
+  md-dialog.resource-editor-dialog .material-dialog__content {
+    width: min(860px, 100%);
+  }
+
+  /* Generic Material dialog headline + content helpers (emitted by MaterialDialog) */
+  .material-dialog__headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .material-dialog__headline-text {
+    overflow-wrap: anywhere;
+    font-size: 1.02rem;
+    font-weight: 680;
+    color: var(--mb-color-on-surface);
+  }
+
+  .material-dialog__close {
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-focus-icon-color: var(--mb-color-on-surface);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+  }
+
+  @media (max-width: 600px) {
+    .resource-editor-card--summary .resource-editor-card__header {
+      flex-wrap: wrap;
+    }
+    .resource-editor-card--summary .resource-editor-card__meta {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+    md-dialog.resource-editor-dialog .material-dialog__content {
+      width: 100%;
+    }
+  }
+`;
diff --git a/webui/src/app/styles/responsive.ts b/webui/src/app/styles/responsive.ts
new file mode 100644
index 00000000..509d4571
--- /dev/null
+++ b/webui/src/app/styles/responsive.ts
@@ -0,0 +1,135 @@
+export const responsiveStyles = `  @media (max-width: 760px) {
+    .top-app-bar {
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 14px 16px;
+    }
+
+    .top-app-bar__meta {
+      width: 100%;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      white-space: normal;
+    }
+
+    .workspace {
+      grid-template-columns: 1fr;
+      align-content: start;
+      min-height: 0;
+    }
+
+    .navigation-rail {
+      position: static;
+      top: auto;
+      z-index: 1;
+      height: auto;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: flex-start;
+      overflow-x: auto;
+      padding: 10px 12px;
+      scroll-snap-type: x proximity;
+    }
+
+    .nav-item {
+      flex: 0 0 108px;
+      scroll-snap-align: start;
+    }
+
+    .content-surface {
+      padding: 16px;
+    }
+
+    .log-output {
+      max-height: 360px;
+    }
+
+    .placeholder-panel {
+      min-height: 440px;
+      padding: 24px;
+    }
+
+    .metric-grid,
+    .section-grid,
+    .usage-summary-grid,
+    .usage-chart-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .compact-list li {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+
+    .resource-table {
+      min-width: 640px;
+    }
+
+    .resource-editor-card__header {
+      display: grid;
+    }
+
+    .resource-editor-card__meta {
+      min-width: 0;
+      justify-content: flex-start;
+    }
+
+    .resource-editor-card__status {
+      justify-content: flex-start;
+    }
+
+    .section-heading {
+      display: grid;
+    }
+
+    .create-resource {
+      justify-items: stretch;
+    }
+
+    .create-resource__add {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .form-grid,
+    .section-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid__compact,
+    .form-grid__medium,
+    .form-grid__wide,
+    .form-grid.create-resource__fields .form-field--create-track {
+      grid-column: 1 / -1;
+      max-width: none;
+    }
+
+    .form-grid__reasoning-defaults {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid.create-resource__fields .create-resource__context-window-row {
+      grid-template-columns: 1fr;
+    }
+
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+
+    .resource-editor-card:hover,
+    .usage-metric:hover,
+    md-filled-button:active,
+    md-outlined-button:active,
+    .nav-item:hover .nav-item__icon md-icon {
+      transform: none !important;
+    }
+  }
+`;
diff --git a/webui/src/app/styles/sharedResources.ts b/webui/src/app/styles/sharedResources.ts
new file mode 100644
index 00000000..1ed08d09
--- /dev/null
+++ b/webui/src/app/styles/sharedResources.ts
@@ -0,0 +1,311 @@
+export const sharedResourceStyles = `  .metric-card,
+  .content-panel,
+  .state-panel {
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    background: var(--mb-color-surface-container);
+  }
+
+  .metric-card {
+    min-height: 112px;
+    display: grid;
+    align-content: space-between;
+    gap: 18px;
+    padding: 20px;
+  }
+
+  .metric-card span {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.78rem;
+    font-weight: 650;
+    text-transform: uppercase;
+  }
+
+  .metric-card strong {
+    overflow-wrap: anywhere;
+    font-size: 1.65rem;
+    line-height: 1.1;
+    font-weight: 680;
+  }
+
+  .section-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
+    gap: 16px;
+  }
+
+  .content-panel,
+  .state-panel {
+    min-width: 0;
+    padding: 24px;
+  }
+
+  .state-panel {
+    min-height: 280px;
+    display: grid;
+    align-content: center;
+  }
+
+  .content-panel h2,
+  .state-panel h2 {
+    margin: 0 0 14px;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .content-panel--subtle {
+    background: color-mix(in srgb, var(--mb-color-surface-container) 74%, var(--mb-color-surface));
+  }
+
+  .state-panel p:last-child {
+    margin: 0;
+    color: var(--mb-color-on-surface-variant);
+    line-height: 1.55;
+  }
+
+  .compact-list {
+    display: grid;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .compact-list li {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 0;
+    border-top: 1px solid color-mix(in srgb, var(--mb-color-outline) 24%, transparent);
+  }
+
+  .compact-list li:first-child {
+    border-top: 0;
+  }
+
+  .compact-list strong,
+  .compact-list span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .compact-list span,
+  .empty-state {
+    color: var(--mb-color-on-surface-variant);
+  }
+
+  .empty-state {
+    margin: 0;
+    line-height: 1.55;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+  }
+
+  .resource-table {
+    width: 100%;
+    min-width: 720px;
+    border-collapse: collapse;
+    font-size: 0.92rem;
+  }
+
+  .resource-table th,
+  .resource-table td {
+    padding: 13px 12px;
+    border-bottom: 1px solid color-mix(in srgb, var(--mb-color-outline) 28%, transparent);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .resource-table th {
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.74rem;
+    font-weight: 720;
+    text-transform: uppercase;
+  }
+
+  .resource-table td {
+    overflow-wrap: anywhere;
+  }
+
+  .resource-table tbody tr:hover {
+    background: color-mix(in srgb, var(--mb-color-primary) 7%, transparent);
+  }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-height: 30px;
+    border-radius: var(--mb-shape-full);
+    padding: 0 12px;
+    color: var(--mb-color-on-primary-container);
+    background: var(--mb-color-primary-container);
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .status-pill--muted {
+    color: var(--mb-color-on-surface);
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .status-pill--restartRequired,
+  .status-pill--critical {
+    --mb-status-danger-container: color-mix(in srgb, var(--mb-color-error) 16%, var(--mb-color-surface-container-highest));
+    --mb-status-danger-label: color-mix(in srgb, var(--mb-color-error) 72%, var(--mb-color-on-surface));
+    color: var(--mb-status-danger-label);
+    background: var(--mb-status-danger-container);
+  }
+
+  .status-pill--needsAttention {
+    color: var(--mb-color-on-tertiary-container);
+    background: var(--mb-color-tertiary-container);
+  }
+
+  .resource-card-list {
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-section {
+    min-width: 0;
+    display: grid;
+    gap: 14px;
+  }
+
+  .resource-section h2 {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .resource-card-list--compact {
+    gap: 10px;
+  }
+
+  /* Summary rows: compact, evenly spaced scannable list (dialog-based editing). */
+  .resource-card-list--summary {
+    gap: 10px;
+  }
+
+  .model-resource-group,
+  .provider-resource-group {
+    display: grid;
+    gap: 10px;
+  }
+
+  .model-provider-bindings .resource-card-list--compact {
+    gap: 12px;
+  }
+
+  .section-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .section-heading h2 {
+    margin: 0;
+  }
+
+  .section-heading--compact {
+    margin-bottom: 0;
+  }
+
+  .section-heading--compact h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.25;
+  }
+
+  .create-resource {
+    display: grid;
+    justify-items: end;
+    gap: 12px;
+  }
+
+  .create-resource__add {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 40px;
+    padding: 0 20px;
+    --md-filled-button-container-color: var(--mb-color-secondary-container);
+    --md-filled-button-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-focus-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-pressed-label-text-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-focus-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-pressed-icon-color: var(--mb-color-on-secondary-container);
+    --md-filled-button-hover-state-layer-color: var(--mb-color-secondary);
+  }
+
+  .create-resource__panel {
+    width: min(760px, 100%);
+    display: grid;
+    gap: 14px;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 18px 20px;
+    background: var(--mb-color-surface-container-high);
+  }
+
+  .create-resource__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .create-resource__header h3 {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.25;
+  }
+
+  .form-grid.create-resource__fields {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .form-grid.create-resource__fields .form-field--create-track {
+    grid-column: span 1;
+  }
+
+  .form-grid.create-resource__fields .create-resource__context-window-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) auto;
+    align-items: start;
+    gap: 12px 18px;
+  }
+
+  .create-resource__context-window-presets {
+    align-self: start;
+    min-height: 40px;
+    align-content: start;
+  }
+
+  .icon-button {
+    --md-icon-button-state-layer-width: 36px;
+    --md-icon-button-state-layer-height: 36px;
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-icon-color: var(--mb-color-on-surface-variant);
+    --md-icon-button-hover-icon-color: var(--mb-color-primary);
+    --md-icon-button-focus-icon-color: var(--mb-color-primary);
+    --md-icon-button-pressed-icon-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-focus-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-pressed-state-layer-color: var(--mb-color-primary);
+    --md-icon-button-hover-state-layer-opacity: 0.12;
+    --md-icon-button-focus-state-layer-opacity: 0.12;
+  }
+
+`;
diff --git a/webui/src/app/styles/shellLayout.ts b/webui/src/app/styles/shellLayout.ts
new file mode 100644
index 00000000..472ea513
--- /dev/null
+++ b/webui/src/app/styles/shellLayout.ts
@@ -0,0 +1,188 @@
+export const shellLayoutStyles = `  .workspace {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr);
+    min-height: calc(100vh - 69px);
+  }
+
+  .navigation-rail {
+    position: sticky;
+    top: 69px;
+    align-self: start;
+    height: calc(100vh - 69px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 14px 8px;
+    outline: 0;
+    background: var(--mb-color-surface-container-low);
+  }
+
+  .nav-item {
+    position: relative;
+    width: 100%;
+    min-height: 58px;
+    display: grid;
+    justify-items: center;
+    align-content: center;
+    gap: 5px;
+    padding: 6px 2px;
+    border-radius: var(--mb-shape-md);
+    color: var(--mb-color-on-surface-variant);
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .nav-item__icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 32px;
+    border-radius: var(--mb-shape-full);
+    overflow: hidden;
+    isolation: isolate;
+    --md-ripple-hover-color: var(--mb-color-on-surface);
+    --md-ripple-pressed-color: var(--mb-color-primary);
+    --md-icon-size: 24px;
+  }
+
+  .nav-item__icon md-icon {
+    position: relative;
+    z-index: 1;
+    transition: transform var(--mb-duration-medium) var(--mb-ease-spring);
+  }
+
+  .nav-item__indicator {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--mb-shape-full);
+    background: var(--mb-color-secondary-container);
+  }
+
+  .nav-item__icon::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    background: transparent;
+    transition: background var(--mb-duration-short) var(--mb-ease-standard);
+  }
+
+  .nav-item:hover .nav-item__icon::after {
+    background: color-mix(in srgb, var(--mb-color-on-surface) 8%, transparent);
+  }
+
+  .nav-item__label {
+    max-width: 90px;
+    font-size: 0.6875rem;
+    line-height: 1.15;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-align: center;
+    white-space: normal;
+    transition: color var(--mb-duration-medium) var(--mb-ease-standard);
+  }
+
+  .nav-item:hover {
+    color: var(--mb-color-on-surface);
+  }
+
+  .nav-item:hover .nav-item__icon md-icon {
+    transform: translateY(-1px) scale(1.08);
+  }
+
+  .nav-item--active {
+    color: var(--mb-color-on-surface);
+  }
+
+  .nav-item--active .nav-item__icon {
+    color: var(--mb-color-on-secondary-container);
+  }
+
+  .nav-item--active .nav-item__label {
+    color: var(--mb-color-on-surface);
+    font-weight: 700;
+  }
+
+  .nav-item:focus-visible {
+    outline: none;
+  }
+
+  .nav-item:focus-visible .nav-item__icon {
+    outline: 2px solid var(--mb-color-primary);
+    outline-offset: 3px;
+  }
+
+  .content-surface {
+    min-width: 0;
+    padding: 24px var(--mb-content-gutter);
+  }
+
+  .placeholder-panel {
+    min-height: calc(100vh - 120px);
+    display: flex;
+    align-items: center;
+    border-radius: var(--mb-shape-panel);
+    outline: 0;
+    padding: 32px;
+    background: var(--mb-color-surface-container);
+  }
+
+  .placeholder-panel > div {
+    max-width: 760px;
+  }
+
+  .eyebrow {
+    margin: 0 0 10px;
+    color: var(--mb-color-primary);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: clamp(2rem, 4vw, 3.5rem);
+    line-height: 1.05;
+    font-weight: 650;
+  }
+
+  .placeholder-panel p:last-child {
+    margin: 18px 0 0;
+    max-width: 620px;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  .page-stack {
+    display: grid;
+    gap: 20px;
+    /* Center the page content within the available rail+content area and cap it at the
+       content measure so wide/ultrawide screens stay readable instead of stretching. */
+    width: min(100%, var(--mb-content-max));
+    margin-inline: auto;
+  }
+
+  .page-header {
+    max-width: none;
+  }
+
+  .page-header h1 {
+    font: var(--mb-type-display);
+    letter-spacing: var(--mb-tracking-display);
+  }
+
+  .page-header p:last-child {
+    margin: 12px 0 0;
+    max-width: 68ch;
+    color: var(--mb-color-on-surface-variant);
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+
+`;
diff --git a/webui/src/app/styles/shellStyles.ts b/webui/src/app/styles/shellStyles.ts
new file mode 100644
index 00000000..da3ccc08
--- /dev/null
+++ b/webui/src/app/styles/shellStyles.ts
@@ -0,0 +1,19 @@
+import { baseStyles } from "./base";
+import { shellLayoutStyles } from "./shellLayout";
+import { overviewStyles } from "./overview";
+import { sharedResourceStyles } from "./sharedResources";
+import { resourceEditorStyles } from "./resourceEditor";
+import { formStyles } from "./forms";
+import { logStyles } from "./logs";
+import { responsiveStyles } from "./responsive";
+
+export const shellStyles = [
+  baseStyles,
+  shellLayoutStyles,
+  overviewStyles,
+  sharedResourceStyles,
+  resourceEditorStyles,
+  formStyles,
+  logStyles,
+  responsiveStyles
+].join("");
diff --git a/webui/src/components/AuthGate.test.tsx b/webui/src/components/AuthGate.test.tsx
new file mode 100644
index 00000000..1716cc8a
--- /dev/null
+++ b/webui/src/components/AuthGate.test.tsx
@@ -0,0 +1,191 @@
+import { act, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithConsoleProviders } from "../test/renderWithConsoleProviders";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { ApiError } from "../rpc/http";
+import { expectPanelElementToBeFlat } from "../test/panelStyleAssertions";
+import { AuthGate } from "./AuthGate";
+
+describe("AuthGate", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders children when there is no auth error", () => {
+    renderWithConsoleProviders(<AuthGate>Console content</AuthGate>);
+
+    expect(screen.getByText("Console content")).toBeInTheDocument();
+  });
+
+  test("calls onSubmit with the token and remember flag", async () => {
+    const onSubmit = vi.fn();
+
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")} onSubmit={onSubmit}>
+        Console content
+      </AuthGate>
+    );
+
+    const tokenField = getMaterialTextField(document, "Token");
+    const submitButton = getMaterialButton(document, "Save token");
+    expect(tokenField.type).toBe("password");
+    expect(submitButton.type).toBe("submit");
+
+    setMaterialTextFieldValue(tokenField, "secret-token");
+    await submitAuthForm(submitButton);
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledWith("secret-token", false));
+  });
+
+  test("toggles token visibility through the trailing icon button", async () => {
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")}>
+        Console content
+      </AuthGate>
+    );
+
+    const tokenField = getMaterialTextField(document, "Token");
+    // Hidden by default; the trailing toggle reveals it.
+    expect(tokenField.type).toBe("password");
+    const showButton = getMaterialIconButton(document, "Show token");
+
+    await userEvent.click(showButton);
+
+    expect(tokenField.type).toBe("text");
+    expect(getMaterialIconButton(document, "Hide token")).toBeInTheDocument();
+  });
+
+  test("forwards remember=true when the checkbox is checked", async () => {
+    const onSubmit = vi.fn();
+
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")} onSubmit={onSubmit}>
+        Console content
+      </AuthGate>
+    );
+
+    const tokenField = getMaterialTextField(document, "Token");
+    const rememberCheckbox = getMaterialCheckbox(document, "Remember on this device");
+
+    setMaterialTextFieldValue(tokenField, "remembered-token");
+    setMaterialCheckboxChecked(rememberCheckbox, true);
+    await submitAuthForm(getMaterialButton(document, "Save token"));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledWith("remembered-token", true));
+  });
+
+  test("disables and relabels the submit button while pending", () => {
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")} pending>
+        Console content
+      </AuthGate>
+    );
+
+    const submitButton = getMaterialButton(document, "Verifying…");
+    expect(submitButton).toBeInTheDocument();
+    expect((submitButton as unknown as { disabled: boolean }).disabled).toBe(true);
+  });
+
+  test("localizes authentication controls in Chinese locale", () => {
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")}>
+        Console content
+      </AuthGate>,
+      { locale: "zh-CN" }
+    );
+
+    expect(getMaterialTextField(document, "Token")).toBeInTheDocument();
+    expect(getMaterialCheckbox(document, "在此设备记住")).toBeInTheDocument();
+    expect(getMaterialButton(document, "保存 Token")).toBeInTheDocument();
+  });
+
+  test("renders the auth background panel without borders or glow", () => {
+    renderWithConsoleProviders(
+      <AuthGate error={new ApiError(401, "invalid_auth", "missing token")}>
+        Console content
+      </AuthGate>
+    );
+
+    const authCard = document.querySelector(".auth-card");
+    expect(authCard).toBeInTheDocument();
+    expectPanelElementToBeFlat(authCard!);
+  });
+});
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => (textField as HTMLElement & { label: string }).label === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web text field labelled "${label}".`);
+  }
+  return element as HTMLElement & { label: string; type: string; value: string };
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (button) => button.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialCheckbox(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-checkbox")).find(
+    (checkbox) => checkbox.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web checkbox labelled "${label}".`);
+  }
+  return element as HTMLElement & { checked: boolean };
+}
+
+function getMaterialButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filled-button")).find(
+    (button) => button.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filled button labelled "${label}".`);
+  }
+  return element as HTMLElement & { type: string };
+}
+
+function setMaterialTextFieldValue(element: HTMLElement & { value: string }, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+
+function setMaterialCheckboxChecked(element: HTMLElement & { checked: boolean }, checked: boolean) {
+  act(() => {
+    element.checked = checked;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+async function submitAuthForm(button: HTMLElement) {
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected Material Web submit button inside AuthGate form.");
+  }
+  let clicked = false;
+  let submitted = false;
+  button.addEventListener("click", () => {
+    clicked = true;
+  }, { once: true });
+  form.addEventListener("submit", () => {
+    submitted = true;
+  }, { once: true });
+  await userEvent.click(button);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  expect(clicked).toBe(true);
+  if (!submitted) {
+    await act(async () => {
+      form.requestSubmit();
+      await Promise.resolve();
+    });
+  }
+}
diff --git a/webui/src/components/AuthGate.tsx b/webui/src/components/AuthGate.tsx
new file mode 100644
index 00000000..3744b5dd
--- /dev/null
+++ b/webui/src/components/AuthGate.tsx
@@ -0,0 +1,95 @@
+import { createElement, type FormEvent, type ReactNode, useState } from "react";
+import { motion } from "motion/react";
+import { MaterialFilledButton, MaterialIconButton } from "./MaterialButton";
+import { MaterialCheckbox } from "./MaterialCheckbox";
+import { MaterialOutlinedTextField } from "./MaterialTextField";
+import { type ApiError, isAuthError } from "../rpc/http";
+import { useI18n } from "../i18n/I18nProvider";
+import { springs, surfaceMotion } from "../theme/motion";
+
+type AuthGateProps = {
+  children: ReactNode;
+  /** When this is a 401 error the login card is shown; otherwise children render. */
+  error?: unknown;
+  /** True while a submitted token is being verified — disables + relabels submit. */
+  pending?: boolean;
+  /** Called with the trimmed token and the remember flag on submit. */
+  onSubmit?: (token: string, remember: boolean) => void | Promise<void>;
+};
+
+export function AuthGate({ children, error, pending = false, onSubmit }: AuthGateProps) {
+  const { t } = useI18n();
+  const [token, setToken] = useState("");
+  const [remember, setRemember] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+
+  if (!isAuthError(error)) {
+    return <>{children}</>;
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const value = token.trim();
+    if (!value || pending) {
+      return;
+    }
+    await onSubmit?.(value, remember);
+  }
+
+  const apiError = error as ApiError;
+
+  return (
+    <main className="auth-gate" aria-labelledby="auth-title">
+      <motion.form
+        className="auth-card"
+        onSubmit={submit}
+        initial={surfaceMotion.initial}
+        animate={surfaceMotion.animate}
+        transition={surfaceMotion.transition}
+      >
+        <motion.span
+          className="auth-card__badge"
+          aria-hidden="true"
+          initial={{ scale: 0.6, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={springs.spatial}
+        >
+          {createElement("md-icon", null, "shield_lock")}
+        </motion.span>
+        <p className="eyebrow">{t("auth.eyebrow")}</p>
+        <h1 id="auth-title">{t("auth.title")}</h1>
+        <p className="auth-card__message">{apiError.message}</p>
+        <MaterialOutlinedTextField
+          autoFocus
+          className="auth-token-field"
+          label={t("auth.token")}
+          spellCheck={false}
+          type={revealed ? "text" : "password"}
+          value={token}
+          onInput={setToken}
+          trailingIcon={
+            <MaterialIconButton
+              className="field-visibility-toggle"
+              icon={revealed ? "visibility_off" : "visibility"}
+              label={t(revealed ? "auth.hideToken" : "auth.revealToken")}
+              onClick={() => setRevealed((current) => !current)}
+              onMouseDown={(event) => event.preventDefault()}
+              slot="trailing-icon"
+            />
+          }
+        />
+        <label className="auth-remember">
+          <MaterialCheckbox
+            checked={remember}
+            label={t("auth.remember")}
+            onChange={setRemember}
+          />
+          <span>{t("auth.remember")}</span>
+        </label>
+        <MaterialFilledButton className="auth-submit" type="submit" disabled={pending}>
+          {pending ? t("auth.verifying") : t("action.saveToken")}
+        </MaterialFilledButton>
+      </motion.form>
+    </main>
+  );
+}
diff --git a/webui/src/components/ErrorState.tsx b/webui/src/components/ErrorState.tsx
new file mode 100644
index 00000000..4ae65fb7
--- /dev/null
+++ b/webui/src/components/ErrorState.tsx
@@ -0,0 +1,12 @@
+import { useI18n } from "../i18n/I18nProvider";
+
+export function ErrorState({ title, message }: { title?: string; message: string }) {
+  const { t } = useI18n();
+  return (
+    <section className="state-panel" role="alert">
+      <p className="eyebrow">{t("common.error")}</p>
+      <h2>{title ?? t("error.requestFailed")}</h2>
+      <p>{message}</p>
+    </section>
+  );
+}
diff --git a/webui/src/components/LoadingState.tsx b/webui/src/components/LoadingState.tsx
new file mode 100644
index 00000000..31fbd177
--- /dev/null
+++ b/webui/src/components/LoadingState.tsx
@@ -0,0 +1,11 @@
+import { useI18n } from "../i18n/I18nProvider";
+
+export function LoadingState({ label }: { label?: string }) {
+  const { t } = useI18n();
+  return (
+    <section className="state-panel" aria-busy="true">
+      <p className="eyebrow">{t("common.loading")}</p>
+      <h2>{label ?? t("common.loading")}</h2>
+    </section>
+  );
+}
diff --git a/webui/src/components/MaterialButton.tsx b/webui/src/components/MaterialButton.tsx
new file mode 100644
index 00000000..4b43c12e
--- /dev/null
+++ b/webui/src/components/MaterialButton.tsx
@@ -0,0 +1,161 @@
+import "@material/web/button/filled-button.js";
+import "@material/web/button/outlined-button.js";
+import "@material/web/icon/icon.js";
+import "@material/web/iconbutton/icon-button.js";
+import { createElement, forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import type { MdOutlinedButton } from "@material/web/button/outlined-button.js";
+import type { MdIconButton } from "@material/web/iconbutton/icon-button.js";
+
+type MaterialOutlinedButtonProps = {
+  ariaExpanded?: boolean;
+  ariaLabel?: string;
+  ariaPressed?: boolean;
+  children: ReactNode;
+  className?: string;
+  controls?: string;
+  disabled?: boolean;
+  id?: string;
+  icon?: string;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+  type?: "button" | "reset" | "submit";
+};
+
+type MaterialFilledButtonProps = {
+  ariaLabel?: string;
+  ariaPressed?: boolean;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  icon?: string;
+  onClick?: () => void;
+  type?: "button" | "reset" | "submit";
+};
+
+type MaterialIconButtonProps = {
+  ariaExpanded?: boolean;
+  className?: string;
+  controls?: string;
+  describedBy?: string;
+  disabled?: boolean;
+  icon: string;
+  label: string;
+  onBlur?: () => void;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+  onFocus?: () => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  slot?: string;
+};
+
+export const MaterialOutlinedButton = forwardRef<MdOutlinedButton, MaterialOutlinedButtonProps>(
+  function MaterialOutlinedButton({
+    ariaExpanded,
+    ariaLabel,
+    ariaPressed,
+    children,
+    className,
+    controls,
+    disabled = false,
+    id,
+    icon,
+    onClick,
+    type = "button"
+  }: MaterialOutlinedButtonProps, ref) {
+    return (
+      <md-outlined-button
+        aria-controls={controls}
+        aria-expanded={ariaBoolean(ariaExpanded)}
+        aria-label={ariaLabel}
+        aria-pressed={ariaBoolean(ariaPressed)}
+        className={className}
+        disabled={disabled}
+        id={id}
+        onClick={onClick}
+        ref={ref}
+        type={type}
+        {...(icon ? { "has-icon": true } : {})}
+      >
+        {icon ? createElement("md-icon", { slot: "icon" }, icon) : null}
+        {children}
+      </md-outlined-button>
+    );
+  }
+);
+
+export function MaterialFilledButton({
+  ariaLabel,
+  ariaPressed,
+  children,
+  className,
+  disabled = false,
+  icon,
+  onClick,
+  type = "button"
+}: MaterialFilledButtonProps) {
+  return (
+    <md-filled-button
+      aria-label={ariaLabel}
+      aria-pressed={ariaBoolean(ariaPressed)}
+      className={className}
+      disabled={disabled}
+      onClick={onClick}
+      type={type}
+      {...(icon ? { "has-icon": true } : {})}
+    >
+      {icon ? createElement("md-icon", { slot: "icon" }, icon) : null}
+      {children}
+    </md-filled-button>
+  );
+}
+
+export const MaterialIconButton = forwardRef<MdIconButton, MaterialIconButtonProps>(
+  function MaterialIconButton({
+    ariaExpanded,
+    className,
+    controls,
+    describedBy,
+    disabled = false,
+    icon,
+    label,
+    onBlur,
+    onClick,
+    onFocus,
+    onKeyDown,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    slot
+  }: MaterialIconButtonProps, ref) {
+    return (
+      <md-icon-button
+        aria-controls={controls}
+        aria-describedby={describedBy}
+        aria-expanded={ariaBoolean(ariaExpanded)}
+        aria-label={label}
+        className={className}
+        disabled={disabled}
+        onBlur={onBlur}
+        onClick={onClick}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        slot={slot}
+        type="button"
+      >
+        {createElement("md-icon", null, icon)}
+      </md-icon-button>
+    );
+  }
+);
+
+function ariaBoolean(value: boolean | undefined): "true" | "false" | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  return value ? "true" : "false";
+}
diff --git a/webui/src/components/MaterialCheckbox.tsx b/webui/src/components/MaterialCheckbox.tsx
new file mode 100644
index 00000000..4ac143a0
--- /dev/null
+++ b/webui/src/components/MaterialCheckbox.tsx
@@ -0,0 +1,33 @@
+import "@material/web/checkbox/checkbox.js";
+import { useEffect, useRef } from "react";
+import type { MdCheckbox } from "@material/web/checkbox/checkbox.js";
+
+type MaterialCheckboxProps = {
+  checked: boolean;
+  className?: string;
+  label: string;
+  onChange: (checked: boolean) => void;
+};
+
+export function MaterialCheckbox({ checked, className, label, onChange }: MaterialCheckboxProps) {
+  const checkboxRef = useRef<MdCheckbox>(null);
+
+  useEffect(() => {
+    const checkbox = checkboxRef.current;
+    if (!checkbox) {
+      throw new Error("MaterialCheckbox rendered before md-checkbox was registered.");
+    }
+    const handleChange = () => onChange(checkbox.checked);
+    checkbox.addEventListener("change", handleChange);
+    return () => checkbox.removeEventListener("change", handleChange);
+  }, [onChange]);
+
+  useEffect(() => {
+    if (!checkboxRef.current) {
+      throw new Error("MaterialCheckbox rendered before md-checkbox was registered.");
+    }
+    checkboxRef.current.checked = checked;
+  }, [checked]);
+
+  return <md-checkbox ref={checkboxRef} aria-label={label} className={className} />;
+}
diff --git a/webui/src/components/MaterialDialog.test.tsx b/webui/src/components/MaterialDialog.test.tsx
new file mode 100644
index 00000000..6adc6bf4
--- /dev/null
+++ b/webui/src/components/MaterialDialog.test.tsx
@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { MaterialDialog } from "./MaterialDialog";
+
+describe("MaterialDialog", () => {
+  test("renders the official md-dialog host with aria-label, headline and content", () => {
+    const { container } = render(
+      <MaterialDialog open={false} onClose={() => undefined} ariaLabel="Edit Route primary" headline="Edit Route">
+        <p>route fields</p>
+      </MaterialDialog>
+    );
+
+    const dialog = container.querySelector("md-dialog");
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).toHaveAttribute("aria-label", "Edit Route primary");
+
+    const headlineSlot = container.querySelector('[slot="headline"]');
+    expect(headlineSlot).toBeInTheDocument();
+    expect(screen.getByText("Edit Route")).toBeInTheDocument();
+
+    const contentSlot = container.querySelector('[slot="content"]');
+    expect(contentSlot).toBeInTheDocument();
+    expect(screen.getByText("route fields")).toBeInTheDocument();
+  });
+
+  test("renders an official Material icon button to close the dialog", () => {
+    const { container } = render(
+      <MaterialDialog open onClose={() => undefined} headline="Edit Route">
+        body
+      </MaterialDialog>
+    );
+
+    const closeButton = container.querySelector('md-icon-button[aria-label="Close"]');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  test("invokes onClose when the close button is clicked", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <MaterialDialog open={false} onClose={onClose} headline="Edit Route">
+        body
+      </MaterialDialog>
+    );
+
+    fireEvent.click(container.querySelector('md-icon-button[aria-label="Close"]')!);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("invokes onClose when md-dialog dispatches its close event (scrim/Escape)", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <MaterialDialog open onClose={onClose} headline="Edit Route">
+        body
+      </MaterialDialog>
+    );
+
+    const dialog = container.querySelector("md-dialog")!;
+    dialog.dispatchEvent(new Event("close"));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/webui/src/components/MaterialDialog.tsx b/webui/src/components/MaterialDialog.tsx
new file mode 100644
index 00000000..3be3dfce
--- /dev/null
+++ b/webui/src/components/MaterialDialog.tsx
@@ -0,0 +1,89 @@
+import "@material/web/dialog/dialog.js";
+import { createElement, useEffect, useRef, type ReactNode } from "react";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import { MaterialIconButton } from "./MaterialButton";
+
+type MaterialDialogProps = {
+  /** Controlled open state. When true the underlying md-dialog is shown. */
+  open: boolean;
+  /** Called when the dialog closes (scrim click, Escape, or the close button). */
+  onClose: () => void;
+  /** Accessible name for the dialog surface. */
+  ariaLabel?: string;
+  /** Headline text/node rendered in the headline slot. */
+  headline?: ReactNode;
+  /** Footer actions rendered in the actions slot. */
+  actions?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+
+/**
+ * React bridge over the official Material Web `md-dialog`.
+ *
+ * The element owns its own show/close animations; this wrapper reconciles the
+ * controlled `open` prop with the imperative `show()`/`close()` API and forwards
+ * the `close` event (fired on scrim/Escape/programmatic close) back as `onClose`.
+ */
+export function MaterialDialog({
+  open,
+  onClose,
+  ariaLabel,
+  headline,
+  actions,
+  className,
+  children
+}: MaterialDialogProps) {
+  const ref = useRef<MdDialog>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // Reconcile the controlled open flag with the imperative md-dialog API.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (open && typeof el.show === "function" && !el.open) {
+      el.show().catch(() => {
+        /* show() rejects if already showing or not connected; safe to ignore */
+      });
+    } else if (!open && typeof el.close === "function" && el.open) {
+      el.close();
+    }
+  }, [open]);
+
+  // Forward close events (scrim / Escape / programmatic) back to React.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const handleClose = () => onCloseRef.current();
+    el.addEventListener("close", handleClose);
+    return () => el.removeEventListener("close", handleClose);
+  }, []);
+
+  return (
+    <md-dialog ref={ref} aria-label={ariaLabel} className={className}>
+      {headline ? (
+        <div slot="headline" className="material-dialog__headline">
+          <span className="material-dialog__headline-text">{headline}</span>
+          <MaterialIconButton
+            className="material-dialog__close"
+            icon="close"
+            label="Close"
+            onClick={onClose}
+          />
+        </div>
+      ) : null}
+      <div slot="content" className="material-dialog__content">
+        {children}
+      </div>
+      {actions ? <div slot="actions">{actions}</div> : null}
+    </md-dialog>
+  );
+}
+
+// Re-exported for callers that need to render the host element directly.
+export { createElement };
diff --git a/webui/src/components/MaterialFilterChip.tsx b/webui/src/components/MaterialFilterChip.tsx
new file mode 100644
index 00000000..42df5b7d
--- /dev/null
+++ b/webui/src/components/MaterialFilterChip.tsx
@@ -0,0 +1,57 @@
+import "@material/web/chips/assist-chip.js";
+import "@material/web/chips/chip-set.js";
+import "@material/web/chips/filter-chip.js";
+import { createElement, useEffect, useRef, type ReactNode } from "react";
+import type { MdFilterChip } from "@material/web/chips/filter-chip.js";
+
+type MaterialFilterChipProps<Value extends string> = {
+  children: ReactNode;
+  onSelect: (value: Value) => void;
+  selected: boolean;
+  value: Value;
+};
+
+export function MaterialFilterChip<Value extends string>({
+  children,
+  onSelect,
+  selected,
+  value
+}: MaterialFilterChipProps<Value>) {
+  const chipRef = useRef<MdFilterChip>(null);
+
+  useEffect(() => {
+    const chip = chipRef.current;
+    if (!chip) {
+      throw new Error("MaterialFilterChip rendered before md-filter-chip was registered.");
+    }
+    const handleClick = () => {
+      onSelect(value);
+      if (selected) {
+        window.requestAnimationFrame(() => {
+          if (chipRef.current) {
+            chipRef.current.selected = true;
+          }
+        });
+      }
+    };
+    chip.addEventListener("click", handleClick);
+    return () => chip.removeEventListener("click", handleClick);
+  }, [onSelect, selected, value]);
+
+  useEffect(() => {
+    if (!chipRef.current) {
+      throw new Error("MaterialFilterChip rendered before md-filter-chip was registered.");
+    }
+    chipRef.current.selected = selected;
+  }, [selected]);
+
+  return (
+    <md-filter-chip ref={chipRef}>
+      {children}
+    </md-filter-chip>
+  );
+}
+
+export function MaterialAssistChip({ children }: { children: ReactNode }) {
+  return createElement("md-assist-chip", null, children);
+}
diff --git a/webui/src/components/MaterialInputChip.tsx b/webui/src/components/MaterialInputChip.tsx
new file mode 100644
index 00000000..6233ecd5
--- /dev/null
+++ b/webui/src/components/MaterialInputChip.tsx
@@ -0,0 +1,53 @@
+import "@material/web/chips/input-chip.js";
+import { useEffect, useRef, type ReactNode } from "react";
+import type { MdInputChip } from "@material/web/chips/input-chip.js";
+
+type MaterialInputChipProps = {
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  label: string;
+  onRemove: () => void;
+};
+
+export function MaterialInputChip({
+  children,
+  className,
+  disabled = false,
+  label,
+  onRemove
+}: MaterialInputChipProps) {
+  const chipRef = useRef<MdInputChip>(null);
+
+  useEffect(() => {
+    const chip = chipRef.current;
+    if (!chip) {
+      throw new Error("MaterialInputChip rendered before md-input-chip was registered.");
+    }
+    const handleRemove = () => onRemove();
+    chip.addEventListener("remove", handleRemove);
+    return () => chip.removeEventListener("remove", handleRemove);
+  }, [onRemove]);
+
+  useEffect(() => {
+    const chip = chipRef.current;
+    if (!chip) {
+      throw new Error("MaterialInputChip rendered before md-input-chip was registered.");
+    }
+    chip.disabled = disabled;
+    chip.removeOnly = true;
+    chip.setAttribute("aria-label", label);
+  }, [disabled, label]);
+
+  return (
+    <md-input-chip
+      aria-label={label}
+      className={className}
+      disabled={disabled}
+      ref={chipRef}
+      remove-only
+    >
+      {children}
+    </md-input-chip>
+  );
+}
diff --git a/webui/src/components/MaterialSelect.tsx b/webui/src/components/MaterialSelect.tsx
new file mode 100644
index 00000000..e9622fb3
--- /dev/null
+++ b/webui/src/components/MaterialSelect.tsx
@@ -0,0 +1,158 @@
+import "@material/web/select/outlined-select.js";
+import "@material/web/select/select-option.js";
+import { type ReactNode, useEffect, useRef } from "react";
+import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
+import type { MdSelectOption } from "@material/web/select/select-option.js";
+
+export type MaterialSelectOption = {
+  label: string;
+  leadingIcon?: ReactNode;
+  value: string;
+};
+
+type MaterialSelectProps = {
+  ariaLabel?: string;
+  className?: string;
+  describedBy?: string;
+  disabled?: boolean;
+  error?: boolean;
+  errorText?: string;
+  label: string;
+  leadingIcon?: ReactNode;
+  onChange: (value: string) => void;
+  options: MaterialSelectOption[];
+  required?: boolean;
+  supportingText?: string;
+  value: string;
+};
+
+export function MaterialSelect({
+  ariaLabel,
+  className,
+  describedBy,
+  disabled = false,
+  error = false,
+  errorText,
+  label,
+  leadingIcon,
+  onChange,
+  options,
+  required = false,
+  supportingText,
+  value
+}: MaterialSelectProps) {
+  const selectRef = useRef<MdOutlinedSelect>(null);
+
+  useEffect(() => {
+    const selectElement = selectRef.current;
+    if (!selectElement) {
+      throw new Error("MaterialSelect rendered before md-outlined-select was registered.");
+    }
+    const handleChange = () => onChange(selectedMaterialSelectValue(selectElement));
+    selectElement.addEventListener("change", handleChange);
+    return () => selectElement.removeEventListener("change", handleChange);
+  }, [onChange]);
+
+  useEffect(() => {
+    const selectElement = selectRef.current;
+    if (!selectElement) {
+      throw new Error("MaterialSelect rendered before md-outlined-select was registered.");
+    }
+    selectElement.label = label;
+    selectElement.disabled = disabled;
+    selectElement.error = error;
+    selectElement.errorText = errorText ?? "";
+    selectElement.required = required;
+    selectElement.supportingText = supportingText ?? "";
+    selectElement.menuPositioning = "popover";
+    selectElement.clampMenuWidth = true;
+    selectElement.value = value;
+    if (label) {
+      selectElement.setAttribute("label", label);
+    } else {
+      selectElement.removeAttribute("label");
+    }
+    if (ariaLabel) {
+      selectElement.setAttribute("aria-label", ariaLabel);
+    } else {
+      selectElement.removeAttribute("aria-label");
+    }
+    if (describedBy) {
+      selectElement.setAttribute("aria-describedby", describedBy);
+    } else {
+      selectElement.removeAttribute("aria-describedby");
+    }
+  }, [ariaLabel, describedBy, disabled, error, errorText, label, required, supportingText, value, options]);
+
+  const resolvedClassName = mergeClassNames(className, "material-select--single-line");
+
+  return (
+    <md-outlined-select ref={selectRef} className={resolvedClassName}>
+      {leadingIcon ? (
+        <span aria-hidden="true" className="material-select-leading-node" slot="leading-icon">
+          {leadingIcon}
+        </span>
+      ) : null}
+      {options.map((option) => (
+        <MaterialSelectOptionElement
+          key={option.value}
+          label={option.label}
+          leadingIcon={option.leadingIcon}
+          selected={option.value === value}
+          value={option.value}
+        />
+      ))}
+    </md-outlined-select>
+  );
+}
+
+function selectedMaterialSelectValue(selectElement: MdOutlinedSelect) {
+  if (selectElement.value) {
+    return selectElement.value;
+  }
+  const selectedOption = Array.from(selectElement.querySelectorAll<MdSelectOption>("md-select-option"))
+    .find((option) => option.selected);
+  return selectedOption?.value || selectedOption?.getAttribute("value") || selectedOption?.getAttribute("data-value") || "";
+}
+
+function mergeClassNames(...classNames: Array<string | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+type MaterialSelectOptionElementProps = {
+  label: string;
+  leadingIcon?: ReactNode;
+  selected: boolean;
+  value: string;
+};
+
+function MaterialSelectOptionElement({ label, leadingIcon, selected, value }: MaterialSelectOptionElementProps) {
+  const optionRef = useRef<MdSelectOption>(null);
+
+  useEffect(() => {
+    const optionElement = optionRef.current;
+    if (!optionElement) {
+      throw new Error("MaterialSelectOption rendered before md-select-option was registered.");
+    }
+    optionElement.value = value;
+    optionElement.displayText = label;
+    optionElement.selected = selected;
+  }, [label, selected, value]);
+
+  return (
+    <md-select-option
+      ref={optionRef}
+      data-value={value}
+      display-text={label}
+      selected={selected}
+      value={value}
+    >
+      {leadingIcon ? (
+        <span aria-hidden="true" className="material-select-option-icon" slot="start">
+          {leadingIcon}
+        </span>
+      ) : null}
+      <span slot="headline">{label}</span>
+    </md-select-option>
+  );
+}
diff --git a/webui/src/components/MaterialSwitch.tsx b/webui/src/components/MaterialSwitch.tsx
new file mode 100644
index 00000000..8bdfb3a5
--- /dev/null
+++ b/webui/src/components/MaterialSwitch.tsx
@@ -0,0 +1,45 @@
+import "@material/web/switch/switch.js";
+import { useEffect, useRef } from "react";
+import type { MdSwitch } from "@material/web/switch/switch.js";
+
+type MaterialSwitchProps = {
+  disabled?: boolean;
+  label: string;
+  onChange: (selected: boolean) => void;
+  selected: boolean;
+};
+
+export function MaterialSwitch({ disabled = false, label, onChange, selected }: MaterialSwitchProps) {
+  const switchRef = useRef<MdSwitch>(null);
+
+  useEffect(() => {
+    const switchElement = switchRef.current;
+    if (!switchElement) {
+      throw new Error("MaterialSwitch rendered before md-switch was registered.");
+    }
+    const handleChange = () => onChange(switchElement.selected);
+    switchElement.addEventListener("change", handleChange);
+    return () => switchElement.removeEventListener("change", handleChange);
+  }, [onChange]);
+
+  useEffect(() => {
+    if (!switchRef.current) {
+      throw new Error("MaterialSwitch rendered before md-switch was registered.");
+    }
+    switchRef.current.selected = selected;
+  }, [selected]);
+
+  useEffect(() => {
+    if (!switchRef.current) {
+      throw new Error("MaterialSwitch rendered before md-switch was registered.");
+    }
+    switchRef.current.disabled = disabled;
+  }, [disabled]);
+
+  return (
+    <md-switch
+      ref={switchRef}
+      aria-label={label}
+    />
+  );
+}
diff --git a/webui/src/components/MaterialTextField.test.tsx b/webui/src/components/MaterialTextField.test.tsx
new file mode 100644
index 00000000..b7cf77c5
--- /dev/null
+++ b/webui/src/components/MaterialTextField.test.tsx
@@ -0,0 +1,88 @@
+import { render } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { MaterialFilledTextField, MaterialOutlinedTextField } from "./MaterialTextField";
+
+describe("MaterialTextField", () => {
+  test("marks single-line outlined text fields with the compact density class", () => {
+    const { container } = render(
+      <MaterialOutlinedTextField
+        className="external-field"
+        label="Model"
+        value="moonbridge"
+        onInput={() => undefined}
+      />
+    );
+
+    const field = getOutlinedTextField(container, "Model");
+
+    expect(field).toHaveClass("external-field");
+    expect(field).toHaveClass("material-text-field--single-line");
+  });
+
+  test("serializes the Material label on the host element", () => {
+    const { container } = render(
+      <MaterialOutlinedTextField
+        label="Max uses"
+        value=""
+        onInput={() => undefined}
+      />
+    );
+
+    expect(getOutlinedTextField(container, "Max uses")).toHaveAttribute("label", "Max uses");
+  });
+
+  test("marks single-line filled text fields with the compact density class", () => {
+    const { container } = render(
+      <MaterialFilledTextField
+        className="auth-token-field"
+        label="Token"
+        type="password"
+        value=""
+        onInput={() => undefined}
+      />
+    );
+
+    const field = getFilledTextField(container, "Token");
+
+    expect(field).toHaveClass("auth-token-field");
+    expect(field).toHaveClass("material-text-field--single-line");
+  });
+
+  test("keeps textarea text fields out of the single-line density class", () => {
+    const { container } = render(
+      <MaterialOutlinedTextField
+        label="Input"
+        rows={6}
+        type="textarea"
+        value="ping"
+        onInput={() => undefined}
+      />
+    );
+
+    expect(getOutlinedTextField(container, "Input")).not.toHaveClass("material-text-field--single-line");
+  });
+});
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+};
+
+function getOutlinedTextField(container: ParentNode, label: string) {
+  const field = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => candidate.label === label
+  );
+  if (!field) {
+    throw new Error(`Expected outlined text field labelled "${label}".`);
+  }
+  return field;
+}
+
+function getFilledTextField(container: ParentNode, label: string) {
+  const field = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-filled-text-field")).find(
+    (candidate) => candidate.label === label
+  );
+  if (!field) {
+    throw new Error(`Expected filled text field labelled "${label}".`);
+  }
+  return field;
+}
diff --git a/webui/src/components/MaterialTextField.tsx b/webui/src/components/MaterialTextField.tsx
new file mode 100644
index 00000000..ba5c4790
--- /dev/null
+++ b/webui/src/components/MaterialTextField.tsx
@@ -0,0 +1,252 @@
+import "@material/web/textfield/filled-text-field.js";
+import "@material/web/textfield/outlined-text-field.js";
+import { createElement, forwardRef, type ForwardedRef, type ReactNode, useCallback, useEffect, useRef } from "react";
+import type { MdFilledTextField } from "@material/web/textfield/filled-text-field.js";
+import type { MdOutlinedTextField, TextFieldType } from "@material/web/textfield/outlined-text-field.js";
+
+type MaterialTextFieldProps = {
+  ariaDescribedBy?: string;
+  ariaLabel?: string;
+  ariaInvalid?: boolean;
+  autoFocus?: boolean;
+  autoComplete?: string;
+  disabled?: boolean;
+  error?: boolean;
+  errorText?: string;
+  className?: string;
+  id?: string;
+  label: string;
+  leadingIcon?: string;
+  leadingIconNode?: ReactNode;
+  onBlur?: () => void;
+  onInput: (value: string) => void;
+  inputMode?: string;
+  rows?: number;
+  spellCheck?: boolean;
+  step?: string;
+  supportingText?: string;
+  required?: boolean;
+  trailingIcon?: ReactNode;
+  type?: TextFieldType;
+  value: string;
+};
+
+export type MaterialTextFieldElement = MdFilledTextField | MdOutlinedTextField;
+
+export const MaterialFilledTextField = forwardRef<MaterialTextFieldElement, MaterialTextFieldProps>(
+  function MaterialFilledTextField(props, ref) {
+    return <MaterialTextField ref={ref} tagName="md-filled-text-field" {...props} />;
+  }
+);
+
+export const MaterialOutlinedTextField = forwardRef<MaterialTextFieldElement, MaterialTextFieldProps>(
+  function MaterialOutlinedTextField({
+    ariaDescribedBy,
+    ariaLabel,
+    ariaInvalid,
+    autoFocus,
+    autoComplete,
+    className,
+    disabled,
+    error,
+    errorText,
+    id,
+    label,
+    leadingIcon,
+    leadingIconNode,
+    onBlur,
+    onInput,
+    inputMode,
+    rows,
+    spellCheck,
+    step,
+    supportingText,
+    required,
+    trailingIcon,
+    type = "text",
+    value
+  }: MaterialTextFieldProps, ref) {
+    return (
+      <MaterialTextField
+        ref={ref}
+        ariaDescribedBy={ariaDescribedBy}
+        ariaLabel={ariaLabel}
+        ariaInvalid={ariaInvalid}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        className={className}
+        disabled={disabled}
+        error={error}
+        errorText={errorText}
+        id={id}
+        label={label}
+        leadingIcon={leadingIcon}
+        leadingIconNode={leadingIconNode}
+        onBlur={onBlur}
+        onInput={onInput}
+        inputMode={inputMode}
+        rows={rows}
+        spellCheck={spellCheck}
+        step={step}
+        supportingText={supportingText}
+        required={required}
+        trailingIcon={trailingIcon}
+        type={type}
+        value={value}
+        tagName="md-outlined-text-field"
+      />
+    );
+});
+
+type MaterialTextFieldTagName = "md-filled-text-field" | "md-outlined-text-field";
+
+const MaterialTextField = forwardRef<MaterialTextFieldElement, MaterialTextFieldProps & { tagName: MaterialTextFieldTagName }>(
+  function MaterialTextField({
+    ariaDescribedBy,
+    ariaLabel,
+    ariaInvalid = false,
+    autoFocus = false,
+    autoComplete,
+    className,
+    disabled = false,
+    error = false,
+    errorText,
+    id,
+    label,
+    leadingIcon,
+    leadingIconNode,
+    onBlur,
+    onInput,
+    inputMode,
+    rows,
+    spellCheck,
+    step,
+    supportingText,
+    required = false,
+    trailingIcon,
+    type = "text",
+    value,
+    tagName
+  }, forwardedRef) {
+    const fieldRef = useRef<MaterialTextFieldElement>(null);
+    const setFieldRef = useCallback((field: MaterialTextFieldElement | null) => {
+      fieldRef.current = field;
+      assignRef(forwardedRef, field);
+    }, [forwardedRef]);
+
+    useEffect(() => {
+      const field = fieldRef.current;
+      if (!field) {
+        throw new Error("MaterialTextField rendered before the Material Web text field was registered.");
+      }
+      const handleInput = () => onInput(field.value);
+      field.addEventListener("input", handleInput);
+      return () => field.removeEventListener("input", handleInput);
+    }, [onInput]);
+
+    useEffect(() => {
+      const field = fieldRef.current;
+      if (!field) {
+        throw new Error("MaterialTextField rendered before the Material Web text field was registered.");
+      }
+      field.label = label;
+      field.type = type;
+      field.value = value;
+      field.autocomplete = autoComplete ?? "";
+      field.disabled = disabled;
+      field.error = error;
+      field.errorText = errorText ?? "";
+      field.supportingText = supportingText ?? "";
+      field.required = required;
+      field.spellcheck = spellCheck ?? false;
+      field.setAttribute("spellcheck", spellCheck ?? false ? "true" : "false");
+      if (label) {
+        field.setAttribute("label", label);
+      } else {
+        field.removeAttribute("label");
+      }
+      field.inputMode = inputMode ?? "";
+      if (ariaLabel) {
+        field.setAttribute("aria-label", ariaLabel);
+      } else {
+        field.removeAttribute("aria-label");
+      }
+      if (ariaInvalid) {
+        field.setAttribute("aria-invalid", "true");
+      } else {
+        field.removeAttribute("aria-invalid");
+      }
+      if (ariaDescribedBy) {
+        field.setAttribute("aria-describedby", ariaDescribedBy);
+      } else {
+        field.removeAttribute("aria-describedby");
+      }
+      if (rows !== undefined) {
+        field.rows = rows;
+      }
+      if (step !== undefined) {
+        field.step = step;
+      }
+    }, [
+      ariaDescribedBy,
+      ariaInvalid,
+      ariaLabel,
+      autoComplete,
+      disabled,
+      error,
+      errorText,
+      inputMode,
+      label,
+      rows,
+      spellCheck,
+      step,
+      supportingText,
+      required,
+      type,
+      value
+    ]);
+
+    const resolvedClassName = mergeClassNames(
+      className,
+      type !== "textarea" && rows === undefined ? "material-text-field--single-line" : undefined
+    );
+
+    return createElement(
+      tagName,
+      {
+        ref: setFieldRef,
+        autoFocus,
+        className: resolvedClassName,
+        id,
+        onBlur
+      },
+      renderLeadingIcon(leadingIcon, leadingIconNode),
+      trailingIcon
+    );
+  }
+);
+
+function renderLeadingIcon(leadingIcon: string | undefined, leadingIconNode: ReactNode | undefined) {
+  if (leadingIconNode) {
+    return createElement(
+      "span",
+      { "aria-hidden": "true", className: "material-field-leading-node", slot: "leading-icon" },
+      leadingIconNode
+    );
+  }
+  return leadingIcon ? createElement("md-icon", { slot: "leading-icon" }, leadingIcon) : null;
+}
+
+function mergeClassNames(...classNames: Array<string | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
diff --git a/webui/src/components/ResourceTable.tsx b/webui/src/components/ResourceTable.tsx
new file mode 100644
index 00000000..df8c112c
--- /dev/null
+++ b/webui/src/components/ResourceTable.tsx
@@ -0,0 +1,73 @@
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/I18nProvider";
+
+export type ResourceColumn<T> = {
+  header: string;
+  accessor: (row: T) => ReactNode;
+};
+
+type ResourceTableProps<T> = {
+  columns: ResourceColumn<T>[];
+  data: T[];
+  emptyLabel?: string;
+};
+
+export function ResourceTable<T>({
+  columns,
+  data,
+  emptyLabel
+}: ResourceTableProps<T>) {
+  const { t } = useI18n();
+  const columnHelper = createColumnHelper<T>();
+  const table = useReactTable({
+    data,
+    columns: columns.map((column, index) =>
+      columnHelper.display({
+        id: `${index}-${column.header}`,
+        header: column.header,
+        cell: (context) => column.accessor(context.row.original)
+      })
+    ) as ColumnDef<T>[],
+    getCoreRowModel: getCoreRowModel()
+  });
+
+  if (data.length === 0) {
+    return <p className="empty-state">{emptyLabel ?? t("empty.resources")}</p>;
+  }
+
+  return (
+    <div className="table-scroll">
+      <table className="resource-table">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} scope="col">
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/webui/src/components/material-web.d.ts b/webui/src/components/material-web.d.ts
new file mode 100644
index 00000000..8332df2b
--- /dev/null
+++ b/webui/src/components/material-web.d.ts
@@ -0,0 +1,66 @@
+import type { MdFilledButton } from "@material/web/button/filled-button.js";
+import type { MdOutlinedButton } from "@material/web/button/outlined-button.js";
+import type { MdChipSet } from "@material/web/chips/chip-set.js";
+import type { MdFilterChip } from "@material/web/chips/filter-chip.js";
+import type { MdInputChip } from "@material/web/chips/input-chip.js";
+import type { MdCheckbox } from "@material/web/checkbox/checkbox.js";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
+import type { MdIcon } from "@material/web/icon/icon.js";
+import type { MdIconButton } from "@material/web/iconbutton/icon-button.js";
+import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
+import type { MdSelectOption } from "@material/web/select/select-option.js";
+import type { MdSwitch } from "@material/web/switch/switch.js";
+import type { MdFilledTextField } from "@material/web/textfield/filled-text-field.js";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "md-chip-set": React.DetailedHTMLProps<React.HTMLAttributes<MdChipSet>, MdChipSet>;
+      "md-checkbox": React.DetailedHTMLProps<React.HTMLAttributes<MdCheckbox>, MdCheckbox>;
+      "md-dialog": React.DetailedHTMLProps<React.HTMLAttributes<MdDialog>, MdDialog>;
+      "md-filter-chip": React.DetailedHTMLProps<React.HTMLAttributes<MdFilterChip>, MdFilterChip>;
+      "md-input-chip": React.DetailedHTMLProps<React.HTMLAttributes<MdInputChip>, MdInputChip> & {
+        disabled?: boolean;
+        "remove-only"?: boolean;
+        selected?: boolean;
+      };
+      "md-filled-button": React.DetailedHTMLProps<React.HTMLAttributes<MdFilledButton>, MdFilledButton> & {
+        disabled?: boolean;
+        "has-icon"?: boolean;
+        type?: "button" | "reset" | "submit";
+      };
+      "md-filled-text-field": React.DetailedHTMLProps<React.HTMLAttributes<MdFilledTextField>, MdFilledTextField> & {
+        label?: string;
+        type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | "textarea";
+      };
+      "md-icon": React.DetailedHTMLProps<React.HTMLAttributes<MdIcon>, MdIcon> & {
+        slot?: string;
+      };
+      "md-icon-button": React.DetailedHTMLProps<React.HTMLAttributes<MdIconButton>, MdIconButton> & {
+        disabled?: boolean;
+        type?: "button" | "reset" | "submit";
+      };
+      "md-outlined-button": React.DetailedHTMLProps<React.HTMLAttributes<MdOutlinedButton>, MdOutlinedButton> & {
+        disabled?: boolean;
+        "has-icon"?: boolean;
+        type?: "button" | "reset" | "submit";
+      };
+      "md-outlined-select": React.DetailedHTMLProps<React.HTMLAttributes<MdOutlinedSelect>, MdOutlinedSelect> & {
+        "clamp-menu-width"?: boolean;
+        "menu-positioning"?: "absolute" | "fixed" | "popover";
+        label?: string;
+      };
+      "md-outlined-text-field": React.DetailedHTMLProps<React.HTMLAttributes<MdOutlinedTextField>, MdOutlinedTextField> & {
+        label?: string;
+        type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | "textarea";
+      };
+      "md-select-option": React.DetailedHTMLProps<React.HTMLAttributes<MdSelectOption>, MdSelectOption> & {
+        "display-text"?: string;
+        selected?: boolean;
+        value?: string;
+      };
+      "md-switch": React.DetailedHTMLProps<React.HTMLAttributes<MdSwitch>, MdSwitch>;
+    }
+  }
+}
diff --git a/webui/src/configDocs/configDescriptions.test.ts b/webui/src/configDocs/configDescriptions.test.ts
new file mode 100644
index 00000000..1a6fd8ec
--- /dev/null
+++ b/webui/src/configDocs/configDescriptions.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, test } from "vitest";
+import { configDescriptions, requiredConfigPaths } from "./configDescriptions";
+
+describe("configDescriptions", () => {
+  test("documents all required first-pass config paths in both languages", () => {
+    for (const path of requiredConfigPaths) {
+      const entry = configDescriptions[path];
+
+      expect(entry, path).toBeDefined();
+      expect(entry.title["en-US"], path).toBeTruthy();
+      expect(entry.title["zh-CN"], path).toBeTruthy();
+      expect(entry.description["en-US"], path).toBeTruthy();
+      expect(entry.description["zh-CN"], path).toBeTruthy();
+    }
+  });
+
+  test("marks secret-bearing fields as sensitive", () => {
+    expect(configDescriptions["server.auth_token"].sensitive).toBe(true);
+    expect(configDescriptions["providers.<key>.api_key"].sensitive).toBe(true);
+    expect(configDescriptions["web_search.tavily_api_key"].sensitive).toBe(true);
+    expect(configDescriptions["web_search.firecrawl_api_key"].sensitive).toBe(true);
+  });
+
+  test("covers backend schema fields rendered by the resource editor", () => {
+    const expectedPaths = [
+      "trace.enabled",
+      "log.level",
+      "log.format",
+      "server.max_sessions",
+      "server.session_ttl",
+      "models.<slug>.display_name",
+      "models.<slug>.description",
+      "models.<slug>.base_instructions",
+      "models.<slug>.supports_reasoning",
+      "models.<slug>.default_reasoning_level",
+      "models.<slug>.supported_reasoning_levels",
+      "models.<slug>.supports_reasoning_summaries",
+      "models.<slug>.default_reasoning_summary",
+      "models.<slug>.input_modalities",
+      "models.<slug>.supports_image_detail_original",
+      "models.<slug>.web_search",
+      "models.<slug>.extensions",
+      "providers.<key>.web_search",
+      "providers.<key>.extensions",
+      "providers.<key>.offers[].priority",
+      "providers.<key>.offers[].overrides",
+      "routes.<alias>.to",
+      "routes.<alias>.display_name",
+      "routes.<alias>.description",
+      "routes.<alias>.context_window",
+      "routes.<alias>.web_search",
+      "routes.<alias>.extensions",
+      "cache.ttl",
+      "cache.prompt_caching",
+      "cache.automatic_prompt_cache",
+      "cache.explicit_cache_breakpoints",
+      "cache.allow_retention_downgrade",
+      "cache.max_breakpoints",
+      "cache.min_cache_tokens",
+      "cache.expected_reuse",
+      "cache.minimum_value_score",
+      "cache.min_breakpoint_tokens"
+    ] as const;
+
+    for (const path of expectedPaths) {
+      expect(configDescriptions[path], path).toBeDefined();
+    }
+  });
+});
diff --git a/webui/src/configDocs/configDescriptions.ts b/webui/src/configDocs/configDescriptions.ts
new file mode 100644
index 00000000..5fbcf23f
--- /dev/null
+++ b/webui/src/configDocs/configDescriptions.ts
@@ -0,0 +1,696 @@
+import type { Locale } from "../i18n/messages";
+
+export type ConfigDocEntry = {
+  path: string;
+  title: Record<Locale, string>;
+  description: Record<Locale, string>;
+  type: string;
+  defaultValue?: string;
+  sensitive?: boolean;
+  apply: Record<Locale, string>;
+};
+
+export const requiredConfigPaths = [
+  "mode",
+  "trace.enabled",
+  "log.level",
+  "log.format",
+  "server.addr",
+  "server.auth_token",
+  "server.max_sessions",
+  "server.session_ttl",
+  "persistence.active_provider",
+  "cache.mode",
+  "cache.ttl",
+  "cache.prompt_caching",
+  "cache.automatic_prompt_cache",
+  "cache.explicit_cache_breakpoints",
+  "cache.allow_retention_downgrade",
+  "cache.max_breakpoints",
+  "cache.min_cache_tokens",
+  "cache.expected_reuse",
+  "cache.minimum_value_score",
+  "cache.min_breakpoint_tokens",
+  "defaults.model",
+  "defaults.max_tokens",
+  "defaults.system_prompt",
+  "models.<slug>.context_window",
+  "models.<slug>.max_output_tokens",
+  "models.<slug>.slug",
+  "models.<slug>.display_name",
+  "models.<slug>.description",
+  "models.<slug>.base_instructions",
+  "models.<slug>.supports_reasoning",
+  "models.<slug>.default_reasoning_level",
+  "models.<slug>.supported_reasoning_levels",
+  "models.<slug>.supports_reasoning_summaries",
+  "models.<slug>.default_reasoning_summary",
+  "models.<slug>.input_modalities",
+  "models.<slug>.supports_image_detail_original",
+  "models.<slug>.web_search",
+  "models.<slug>.extensions",
+  "providers.<key>.key",
+  "providers.<key>.base_url",
+  "providers.<key>.api_key",
+  "providers.<key>.protocol",
+  "providers.<key>.version",
+  "providers.<key>.user_agent",
+  "providers.<key>.web_search",
+  "providers.<key>.extensions",
+  "providers.<key>.offers[].model",
+  "providers.<key>.offers[].upstream_name",
+  "providers.<key>.offers[].priority",
+  "providers.<key>.offers[].pricing",
+  "providers.<key>.offers[].overrides",
+  "routes.<alias>.alias",
+  "routes.<alias>.to",
+  "routes.<alias>.model",
+  "routes.<alias>.provider",
+  "routes.<alias>.display_name",
+  "routes.<alias>.description",
+  "routes.<alias>.context_window",
+  "routes.<alias>.web_search",
+  "routes.<alias>.extensions",
+  "web_search.support",
+  "web_search.max_uses",
+  "web_search.tavily_api_key",
+  "web_search.firecrawl_api_key",
+  "web_search.search_max_rounds",
+  "extensions.<name>.enabled",
+  "extensions.<name>.config",
+  "proxy.response",
+  "proxy.anthropic"
+] as const;
+
+export type ConfigPath = (typeof requiredConfigPaths)[number];
+
+export const configDescriptions: Record<ConfigPath, ConfigDocEntry> = {
+  "mode": entry(
+    "mode",
+    "运行模式",
+    "Run mode",
+    "决定 Moon Bridge 如何处理请求：在协议之间转换，或直接转发给单一上游。",
+    "How Moon Bridge handles requests: convert between formats, or pass straight through to one provider.",
+    "Transform | CaptureResponse | CaptureAnthropic",
+    "Transform"
+  ),
+  "trace.enabled": entry(
+    "trace.enabled",
+    "启用追踪",
+    "Enable tracing",
+    "记录每个请求的处理过程，方便排查问题。",
+    "Records how each request is handled, for troubleshooting.",
+    "boolean"
+  ),
+  "log.level": entry(
+    "log.level",
+    "日志级别",
+    "Log level",
+    "控制运行时输出的最低日志级别。",
+    "Controls the minimum runtime log level.",
+    "debug | info | warn | error",
+    "info"
+  ),
+  "log.format": entry(
+    "log.format",
+    "日志格式",
+    "Log format",
+    "控制运行时日志输出为文本或 JSON。",
+    "Controls whether runtime logs are emitted as text or JSON.",
+    "text | json",
+    "text"
+  ),
+  "server.addr": entry(
+    "server.addr",
+    "监听地址",
+    "Listen address",
+    "服务监听的地址。控制台和 API 都从这里访问。",
+    "Address the server listens on. The console and API are served here.",
+    "host:port",
+    "127.0.0.1:38440"
+  ),
+  "server.auth_token": entry(
+    "server.auth_token",
+    "认证 Token",
+    "Auth token",
+    "控制台与 API 的访问密码。留空则不需要登录。",
+    "Password for the console and API. Leave empty to disable sign-in.",
+    "string",
+    "empty",
+    true
+  ),
+  "server.max_sessions": entry(
+    "server.max_sessions",
+    "最大会话数",
+    "Max sessions",
+    "允许保留的最大会话数量；0 表示不限制。",
+    "Maximum retained session count; 0 means unlimited.",
+    "number",
+    "0"
+  ),
+  "server.session_ttl": entry(
+    "server.session_ttl",
+    "会话 TTL",
+    "Session TTL",
+    "会话状态保留时长，例如 24h。",
+    "How long session state is retained, for example 24h.",
+    "string",
+    "24h"
+  ),
+  "persistence.active_provider": entry(
+    "persistence.active_provider",
+    "持久化提供商",
+    "Persistence provider",
+    "设置保存的位置。启用后才能在控制台保存修改。",
+    "Where settings are stored. Needed to save changes from the console.",
+    "db_sqlite | db_d1",
+    "db_sqlite"
+  ),
+  "cache.mode": entry(
+    "cache.mode",
+    "缓存模式",
+    "Cache mode",
+    "提示词缓存的工作方式：关闭、显式断点、自动选择，或两者混合。",
+    "How prompt caching works: off, explicit breakpoints, automatic, or a mix of both.",
+    "off | explicit | automatic | hybrid",
+    "explicit"
+  ),
+  "cache.ttl": entry(
+    "cache.ttl",
+    "缓存 TTL",
+    "Cache TTL",
+    "缓存条目的保留时长，例如 1h。",
+    "Retention duration for cache entries, for example 1h.",
+    "string"
+  ),
+  "cache.prompt_caching": entry(
+    "cache.prompt_caching",
+    "启用 Prompt Cache",
+    "Enable prompt caching",
+    "允许 Moon Bridge 为支持的上游协议启用 prompt cache。",
+    "Allows Moon Bridge to enable prompt caching for supported upstream protocols.",
+    "boolean"
+  ),
+  "cache.automatic_prompt_cache": entry(
+    "cache.automatic_prompt_cache",
+    "自动 Prompt Cache",
+    "Automatic prompt cache",
+    "根据请求内容自动选择合适的缓存断点。",
+    "Automatically chooses suitable cache breakpoints from request content.",
+    "boolean"
+  ),
+  "cache.explicit_cache_breakpoints": entry(
+    "cache.explicit_cache_breakpoints",
+    "显式缓存断点",
+    "Explicit cache breakpoints",
+    "允许请求显式指定 prompt cache 断点。",
+    "Allows requests to explicitly specify prompt cache breakpoints.",
+    "boolean"
+  ),
+  "cache.allow_retention_downgrade": entry(
+    "cache.allow_retention_downgrade",
+    "允许降级保留策略",
+    "Allow retention downgrade",
+    "当上游不支持所选缓存时长时，自动改用较短的可用时长。",
+    "Use a shorter cache lifetime if the provider doesn't support the chosen one.",
+    "boolean"
+  ),
+  "cache.max_breakpoints": entry(
+    "cache.max_breakpoints",
+    "最大断点数",
+    "Max breakpoints",
+    "单次请求可插入的最大缓存断点数量。",
+    "Maximum number of cache breakpoints inserted for one request.",
+    "number"
+  ),
+  "cache.min_cache_tokens": entry(
+    "cache.min_cache_tokens",
+    "最小缓存 Token",
+    "Min cache tokens",
+    "低于该 token 数的片段不会作为缓存候选。",
+    "Segments below this token count are not considered cache candidates.",
+    "number"
+  ),
+  "cache.expected_reuse": entry(
+    "cache.expected_reuse",
+    "预期复用次数",
+    "Expected reuse",
+    "缓存内容预期被复用的次数（用于自动缓存决策）。",
+    "How many times a cached block is expected to be reused (for automatic caching).",
+    "number"
+  ),
+  "cache.minimum_value_score": entry(
+    "cache.minimum_value_score",
+    "最小价值分",
+    "Minimum value score",
+    "自动缓存生效的最低价值阈值。",
+    "Threshold below which automatic caching is skipped.",
+    "number"
+  ),
+  "cache.min_breakpoint_tokens": entry(
+    "cache.min_breakpoint_tokens",
+    "最小断点 Token",
+    "Min breakpoint tokens",
+    "两个缓存点之间至少要相隔的 token 数。",
+    "Minimum number of tokens between two cache points.",
+    "number"
+  ),
+  "defaults.model": entry(
+    "defaults.model",
+    "默认模型",
+    "Default model",
+    "请求未指定模型时使用的模型。",
+    "Model used when a request doesn't specify one.",
+    "string",
+    "moonbridge"
+  ),
+  "defaults.max_tokens": entry(
+    "defaults.max_tokens",
+    "默认最大 Token",
+    "Default max tokens",
+    "请求未提供 max_output_tokens 时的默认输出上限。",
+    "Default output limit when a request does not provide max_output_tokens.",
+    "number",
+    "65536"
+  ),
+  "defaults.system_prompt": entry(
+    "defaults.system_prompt",
+    "全局系统提示词",
+    "Global system prompt",
+    "追加到请求中的全局 system prompt，适合放置所有模型共享的行为约束。",
+    "Global system prompt appended to requests, useful for behavior rules shared by all models.",
+    "string",
+    "empty"
+  ),
+  "models.<slug>.context_window": entry(
+    "models.<slug>.context_window",
+    "上下文窗口",
+    "Context window",
+    "模型一次最多能处理的 token 数。",
+    "Maximum tokens the model can handle at once.",
+    "number"
+  ),
+  "models.<slug>.max_output_tokens": entry(
+    "models.<slug>.max_output_tokens",
+    "最大输出 Token",
+    "Max output tokens",
+    "模型单次响应允许的最大输出 token 数。",
+    "Maximum output tokens the model can emit in one response.",
+    "number"
+  ),
+  "models.<slug>.slug": entry(
+    "models.<slug>.slug",
+    "模型 Slug",
+    "Model slug",
+    "模型的稳定标识，其他设置通过它引用此模型。",
+    "Stable id other settings use to refer to this model.",
+    "string"
+  ),
+  "models.<slug>.display_name": entry(
+    "models.<slug>.display_name",
+    "模型显示名称",
+    "Model display name",
+    "控制台中展示的人类可读模型名称。",
+    "Human-readable model name shown in the console.",
+    "string"
+  ),
+  "models.<slug>.description": entry(
+    "models.<slug>.description",
+    "模型描述",
+    "Model description",
+    "描述模型用途、能力或限制，便于控制台识别。",
+    "Describes model purpose, capabilities, or limits for console readers.",
+    "string"
+  ),
+  "models.<slug>.base_instructions": entry(
+    "models.<slug>.base_instructions",
+    "基础指令",
+    "Base instructions",
+    "追加到该模型请求中的默认行为指令。",
+    "Default behavior instructions appended to requests for this model.",
+    "string"
+  ),
+  "models.<slug>.supports_reasoning": entry(
+    "models.<slug>.supports_reasoning",
+    "支持思考",
+    "Supports reasoning",
+    "标记该模型是否支持思考深度配置。",
+    "Marks whether this model supports reasoning configuration.",
+    "boolean"
+  ),
+  "models.<slug>.default_reasoning_level": entry(
+    "models.<slug>.default_reasoning_level",
+    "默认思考深度",
+    "Default reasoning level",
+    "请求未指定思考深度时使用的默认 level。",
+    "Default reasoning level used when a request does not specify one.",
+    "string"
+  ),
+  "models.<slug>.supported_reasoning_levels": entry(
+    "models.<slug>.supported_reasoning_levels",
+    "支持的思考深度",
+    "Supported reasoning levels",
+    "该模型允许选择的思考深度列表。",
+    "List of reasoning levels allowed for this model.",
+    "array"
+  ),
+  "models.<slug>.supports_reasoning_summaries": entry(
+    "models.<slug>.supports_reasoning_summaries",
+    "支持思考摘要",
+    "Supports reasoning summaries",
+    "标记该模型是否支持返回思考摘要。",
+    "Marks whether this model supports returning reasoning summaries.",
+    "boolean"
+  ),
+  "models.<slug>.default_reasoning_summary": entry(
+    "models.<slug>.default_reasoning_summary",
+    "默认思考摘要",
+    "Default reasoning summary",
+    "请求未指定摘要模式时使用的默认思考摘要设置。",
+    "Default reasoning summary setting used when a request does not specify one.",
+    "string"
+  ),
+  "models.<slug>.input_modalities": entry(
+    "models.<slug>.input_modalities",
+    "输入模态",
+    "Input modalities",
+    "该模型支持的输入类型，例如 text 或 image。",
+    "Input types supported by this model, such as text or image.",
+    "array"
+  ),
+  "models.<slug>.supports_image_detail_original": entry(
+    "models.<slug>.supports_image_detail_original",
+    "支持原始图像细节",
+    "Supports original image detail",
+    "标记视觉请求是否可向该模型发送 original 图像细节。",
+    "Marks whether visual requests can send original image detail to this model.",
+    "boolean"
+  ),
+  "models.<slug>.web_search": entry(
+    "models.<slug>.web_search",
+    "模型联网搜索",
+    "Model web search",
+    "覆盖该模型的联网搜索行为。",
+    "Overrides web search behavior for this model.",
+    "object"
+  ),
+  "models.<slug>.extensions": entry(
+    "models.<slug>.extensions",
+    "模型扩展",
+    "Model extensions",
+    "覆盖该模型启用的扩展工具和配置。",
+    "Overrides extension tools and config enabled for this model.",
+    "object"
+  ),
+  "providers.<key>.key": entry(
+    "providers.<key>.key",
+    "Provider Key",
+    "Provider key",
+    "提供商的稳定标识，路由通过它选择此提供商。",
+    "Stable id routes use to pick this provider.",
+    "string"
+  ),
+  "providers.<key>.base_url": entry(
+    "providers.<key>.base_url",
+    "上游 Base URL",
+    "Upstream base URL",
+    "上游 Provider API 地址。",
+    "Upstream provider API URL.",
+    "url"
+  ),
+  "providers.<key>.api_key": entry(
+    "providers.<key>.api_key",
+    "上游 API Key",
+    "Upstream API key",
+    "此提供商的 API 密钥。显示为掩码；输入新值即可更新。",
+    "API key for this provider. Shown masked; enter a new value to update it.",
+    "string",
+    undefined,
+    true
+  ),
+  "providers.<key>.protocol": entry(
+    "providers.<key>.protocol",
+    "上游协议",
+    "Upstream protocol",
+    "选择上游接口格式：Anthropic Messages、OpenAI Responses、Google GenAI 或 OpenAI Chat。",
+    "Selects the upstream API format: Anthropic Messages, OpenAI Responses, Google GenAI, or OpenAI Chat.",
+    "anthropic | openai-response | google-genai | openai-chat",
+    "anthropic"
+  ),
+  "providers.<key>.version": entry(
+    "providers.<key>.version",
+    "协议版本",
+    "Protocol version",
+    "API 版本头（主要 Anthropic 使用），部分提供商可留空。",
+    "API version header (mainly for Anthropic). Optional for some providers.",
+    "string"
+  ),
+  "providers.<key>.user_agent": entry(
+    "providers.<key>.user_agent",
+    "User Agent",
+    "User agent",
+    "发送给提供商的 User-Agent 字符串。",
+    "User-Agent string sent to the provider.",
+    "string"
+  ),
+  "providers.<key>.web_search": entry(
+    "providers.<key>.web_search",
+    "提供商联网搜索",
+    "Provider web search",
+    "覆盖该 Provider 的联网搜索行为。",
+    "Overrides web search behavior for this provider.",
+    "object"
+  ),
+  "providers.<key>.extensions": entry(
+    "providers.<key>.extensions",
+    "提供商扩展",
+    "Provider extensions",
+    "覆盖该 Provider 启用的扩展工具和配置。",
+    "Overrides extension tools and config enabled for this provider.",
+    "object"
+  ),
+  "providers.<key>.offers[].model": entry(
+    "providers.<key>.offers[].model",
+    "提供商模型",
+    "Provider model",
+    "此绑定提供的模型。",
+    "Which model this binding serves.",
+    "string"
+  ),
+  "providers.<key>.offers[].upstream_name": entry(
+    "providers.<key>.offers[].upstream_name",
+    "上游模型名",
+    "Upstream model name",
+    "发送给提供商的真实模型名。留空则使用模型标识。",
+    "Real model name sent to the provider. Leave empty to use the model id.",
+    "string"
+  ),
+  "providers.<key>.offers[].priority": entry(
+    "providers.<key>.offers[].priority",
+    "提供商优先级",
+    "Provider priority",
+    "同一模型有多个提供商时的取舍权重，数值越小越优先。",
+    "Tie-breaker when several providers serve the same model; lower wins.",
+    "number"
+  ),
+  "providers.<key>.offers[].pricing": entry(
+    "providers.<key>.offers[].pricing",
+    "计费",
+    "Billing",
+    "可选的单价信息，用于费用统计。",
+    "Optional prices for cost tracking.",
+    "number"
+  ),
+  "providers.<key>.offers[].overrides": entry(
+    "providers.<key>.offers[].overrides",
+    "提供商覆盖配置",
+    "Provider overrides",
+    "该提供商绑定专用的模型能力覆盖项。",
+    "Model capability overrides specific to this provider binding.",
+    "object"
+  ),
+  "routes.<alias>.to": entry(
+    "routes.<alias>.to",
+    "路由目标",
+    "Route target",
+    "此路由指向的内部目标。",
+    "Internal target this route points to.",
+    "string"
+  ),
+  "routes.<alias>.model": entry(
+    "routes.<alias>.model",
+    "路由模型",
+    "Route model",
+    "此别名实际指向的模型。",
+    "Model this alias points to.",
+    "string"
+  ),
+  "routes.<alias>.alias": entry(
+    "routes.<alias>.alias",
+    "路由别名",
+    "Route alias",
+    "客户端在请求中使用的模型名。",
+    "The model name clients send in requests.",
+    "string"
+  ),
+  "routes.<alias>.provider": entry(
+    "routes.<alias>.provider",
+    "路由提供商",
+    "Route provider",
+    "处理该路由的 Provider key。",
+    "Provider key that handles this route.",
+    "string"
+  ),
+  "routes.<alias>.display_name": entry(
+    "routes.<alias>.display_name",
+    "路由显示名称",
+    "Route display name",
+    "控制台中展示的人类可读路由名称。",
+    "Human-readable route name shown in the console.",
+    "string"
+  ),
+  "routes.<alias>.description": entry(
+    "routes.<alias>.description",
+    "路由描述",
+    "Route description",
+    "描述该路由的用途或模型选择策略。",
+    "Describes this route's purpose or model selection policy.",
+    "string"
+  ),
+  "routes.<alias>.context_window": entry(
+    "routes.<alias>.context_window",
+    "路由上下文窗口",
+    "Route context window",
+    "该路由暴露给客户端的上下文窗口上限。",
+    "Context window limit exposed to clients for this route.",
+    "number"
+  ),
+  "routes.<alias>.web_search": entry(
+    "routes.<alias>.web_search",
+    "路由联网搜索",
+    "Route web search",
+    "覆盖该路由的联网搜索行为。",
+    "Overrides web search behavior for this route.",
+    "object"
+  ),
+  "routes.<alias>.extensions": entry(
+    "routes.<alias>.extensions",
+    "路由扩展",
+    "Route extensions",
+    "覆盖该路由启用的扩展工具和配置。",
+    "Overrides extension tools and config enabled for this route.",
+    "object"
+  ),
+  "web_search.support": entry(
+    "web_search.support",
+    "网页搜索模式",
+    "Web search mode",
+    "auto 优先使用 Provider 原生搜索并回退注入；enabled 强制原生；disabled 禁用；injected 使用 Tavily/Firecrawl 工具注入。",
+    "auto prefers provider-native search and falls back to injection; enabled forces native; disabled turns it off; injected uses Tavily/Firecrawl tools.",
+    "auto | enabled | disabled | injected",
+    "auto"
+  ),
+  "web_search.max_uses": entry(
+    "web_search.max_uses",
+    "最大使用次数",
+    "Max uses",
+    "限制单次请求可使用的网页搜索次数。",
+    "Limits how many web search calls one request may use.",
+    "number"
+  ),
+  "web_search.tavily_api_key": entry(
+    "web_search.tavily_api_key",
+    "Tavily API Key",
+    "Tavily API key",
+    "注入式网页搜索使用的 Tavily 密钥。",
+    "Tavily secret used by injected web search.",
+    "string",
+    undefined,
+    true
+  ),
+  "web_search.firecrawl_api_key": entry(
+    "web_search.firecrawl_api_key",
+    "Firecrawl API Key",
+    "Firecrawl API key",
+    "注入式网页搜索用于抓取页面内容的 Firecrawl 密钥。",
+    "Firecrawl secret used by injected web search to fetch page content.",
+    "string",
+    undefined,
+    true
+  ),
+  "web_search.search_max_rounds": entry(
+    "web_search.search_max_rounds",
+    "最大搜索轮次",
+    "Search max rounds",
+    "单次请求最多执行的搜索轮数。",
+    "Maximum number of search rounds per request.",
+    "number",
+    "3"
+  ),
+  "extensions.<name>.enabled": entry(
+    "extensions.<name>.enabled",
+    "启用扩展",
+    "Enable extension",
+    "开启或关闭此扩展。",
+    "Turn this extension on or off.",
+    "boolean"
+  ),
+  "extensions.<name>.config": entry(
+    "extensions.<name>.config",
+    "扩展配置",
+    "Extension config",
+    "此扩展的设置。",
+    "Settings for this extension.",
+    "object"
+  ),
+  "proxy.response": entry(
+    "proxy.response",
+    "OpenAI Capture 代理",
+    "OpenAI capture proxy",
+    "直通（Capture）模式下转发到 OpenAI 所需的地址、密钥和默认模型。",
+    "Address, key, and default model used when passing requests straight through to OpenAI.",
+    "object"
+  ),
+  "proxy.anthropic": entry(
+    "proxy.anthropic",
+    "Anthropic Capture 代理",
+    "Anthropic capture proxy",
+    "直通（Capture）模式下转发到 Anthropic 所需的地址、密钥、版本和模型。",
+    "Address, key, version, and model used when passing requests straight through to Anthropic.",
+    "object"
+  )
+};
+
+export function getConfigDescription(path: ConfigPath, locale: Locale) {
+  const entry = configDescriptions[path];
+  return {
+    ...entry,
+    title: entry.title[locale],
+    description: entry.description[locale],
+    apply: entry.apply[locale]
+  };
+}
+
+function entry(
+  path: ConfigPath,
+  zhTitle: string,
+  enTitle: string,
+  zhDescription: string,
+  enDescription: string,
+  type: string,
+  defaultValue?: string,
+  sensitive = false
+): ConfigDocEntry {
+  return {
+    path,
+    title: { "zh-CN": zhTitle, "en-US": enTitle },
+    description: { "zh-CN": zhDescription, "en-US": enDescription },
+    type,
+    defaultValue,
+    sensitive,
+    apply: {
+      "zh-CN": "即时保存；部分字段需重启后生效。",
+      "en-US": "Saved instantly; some fields need a restart to take effect."
+    }
+  };
+}
diff --git a/webui/src/e2e/console.test.tsx b/webui/src/e2e/console.test.tsx
new file mode 100644
index 00000000..3beb8e9a
--- /dev/null
+++ b/webui/src/e2e/console.test.tsx
@@ -0,0 +1,360 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { AppShell } from "../app/App";
+import { DefaultsPage } from "../features/defaults/DefaultsPage";
+import { LogsPage } from "../features/logs/LogsPage";
+import { ModelsProvidersPage } from "../features/modelProviders/ModelsProvidersPage";
+import { OverviewPage } from "../features/overview/OverviewPage";
+import { SecurityPage } from "../features/security/SecurityPage";
+import { CONSOLE_THEME_STORAGE_KEY } from "../theme/ThemeProvider";
+import { configGraphFixture } from "../test/configGraphFixtures";
+import { renderWithConsoleProviders } from "../test/renderWithConsoleProviders";
+import type { ConfigGraph, FieldError, PatchResponse } from "../rpc/types";
+
+type FetchCall = {
+  url: string;
+  init?: RequestInit;
+  body?: unknown;
+};
+
+describe("config graph console smoke flow", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    localStorage.clear();
+  });
+
+  test("primary navigation has no config file or apply entry points", () => {
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<div>Console content</div>} />
+      </MemoryRouter>
+    );
+
+    const nav = screen.getByRole("navigation", { name: /console sections/i });
+    expect(nav).toHaveTextContent("Overview");
+    expect(nav).toHaveTextContent("Models & Providers");
+    expect(nav).toHaveTextContent("Search & Tools");
+    expect(nav).not.toHaveTextContent("Logs");
+    expect(nav).not.toHaveTextContent("Config");
+    expect(nav).not.toHaveTextContent("YAML");
+    expect(nav).not.toHaveTextContent("Diagnostics");
+    expect(screen.getByRole("main", { name: "Console route content" })).toHaveTextContent("Console content");
+    expect(screen.queryByRole("button", { name: /^apply$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /apply changes/i })).not.toBeInTheDocument();
+  });
+
+  test("models and providers render shared resource cards", async () => {
+    mockFetch({
+      graph: configGraphFixture()
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Providers (1)" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 3, name: "anthropic" })).toBeInTheDocument();
+  });
+
+  test("overview loads model usage and embedded logs", async () => {
+    mockFetch({
+      graph: configGraphFixture(),
+      logs: [
+        {
+          timestamp: "2026-06-07T00:00:00Z",
+          level: "INFO",
+          message: "server started",
+          raw: "time=2026-06-07T00:00:00Z level=INFO msg=server-started"
+        }
+      ],
+      usage: usageFixture()
+    });
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    expect(document.documentElement.dataset.theme).toBe("dark");
+    expect(localStorage.getItem(CONSOLE_THEME_STORAGE_KEY)).toBe("dark");
+    expect(await screen.findByRole("heading", { name: "Usage Analytics" })).toBeInTheDocument();
+    const requestsLabel = (await screen.findAllByText("Requests")).find((el) =>
+      el.classList.contains("usage-metric__label")
+    );
+    expect(within(requestsLabel!.closest(".usage-metric") as HTMLElement).getByText("2")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Token split chart/ })).toBeInTheDocument();
+    expect(screen.getByRole("region", { name: "Backend logs" })).toBeInTheDocument();
+    expect(screen.getByText(/server started/)).toBeInTheDocument();
+    expect(screen.queryByText("Transform")).not.toBeInTheDocument();
+    expect(screen.queryByText("rev-1")).not.toBeInTheDocument();
+  });
+
+  test("editing a field patches the config graph directly", async () => {
+    const graph = configGraphFixture();
+    const { calls } = mockFetch({
+      graph,
+      patch: {
+        result: "committed",
+        revision: "rev-2",
+        graph: configGraphFixture({ revision: "rev-2" })
+      }
+    });
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    await screen.findByLabelText("Defaults main");
+    const modelField = getMaterialTextField(document, "Default model");
+    setMaterialTextFieldValue(modelField, "gpt-4o");
+    fireEvent.blur(modelField);
+
+    await waitFor(() => {
+      expect(findPatch(calls)?.body).toEqual({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "defaults",
+            id: "main",
+            field: "model",
+            value: "gpt-4o"
+          }
+        ]
+      });
+    });
+  });
+
+  test("draft rejection keeps the edited value and shows the field error", async () => {
+    const error = fieldError("defaults", "main", "model", "draftRejected", "Model is invalid");
+    mockFetch({
+      graph: configGraphFixture(),
+      patch: {
+        result: "draftRejected",
+        revision: "rev-1",
+        errors: [error]
+      }
+    });
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    await screen.findByLabelText("Defaults main");
+    const model = getMaterialTextField(document, "Default model");
+    setMaterialTextFieldValue(model, "invalid-model");
+    fireEvent.blur(model);
+
+    expect(model.value).toBe("invalid-model");
+    expect(await screen.findByRole("alert")).toHaveTextContent("Model is invalid");
+  });
+
+  test("runtime rejection rolls back a critical field", async () => {
+    const error = fieldError("server", "main", "addr", "runtimeRejected", "Runtime rejected");
+    mockFetch({
+      graph: configGraphFixture(),
+      patch: {
+        result: "runtimeRejected",
+        revision: "rev-1",
+        errors: [error],
+        rollbackValue: ":38440"
+      }
+    });
+
+    renderWithConsoleProviders(<SecurityPage />);
+
+    await screen.findByLabelText("Server main");
+    const address = getMaterialTextField(document, "Listen address");
+    setMaterialTextFieldValue(address, ":9999");
+    fireEvent.blur(address);
+
+    await waitFor(() => {
+      expect(address.value).toBe(":38440");
+    });
+    expect(await screen.findByRole("alert")).toHaveTextContent("Runtime rejected");
+  });
+
+  test("logs page renders recent backend log lines and level filters", async () => {
+    mockFetch({
+      graph: configGraphFixture(),
+      logs: [
+        {
+          timestamp: "2026-06-07T00:00:00Z",
+          level: "INFO",
+          message: "server started",
+          raw: "time=2026-06-07T00:00:00Z level=INFO msg=server-started"
+        },
+        {
+          timestamp: "2026-06-07T00:00:01Z",
+          level: "ERROR",
+          message: "database unavailable",
+          raw: "time=2026-06-07T00:00:01Z level=ERROR msg=database-unavailable"
+        }
+      ]
+    });
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+
+    fireEvent.click(getMaterialFilterChip(document, "ERROR"));
+
+    expect(screen.queryByText(/server started/)).not.toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+    expect(screen.getByText("1 of 2 logs")).toBeInTheDocument();
+  });
+});
+
+function mockFetch({
+  graph,
+  patch,
+  logs = [],
+  usage = emptyUsageFixture()
+}: {
+  graph: ConfigGraph;
+  patch?: PatchResponse;
+  logs?: unknown[];
+  usage?: unknown;
+}) {
+  const calls: FetchCall[] = [];
+  const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+    const method = init?.method ?? "GET";
+    const body = parseBody(init?.body);
+    calls.push({ url, init, body });
+
+    if (url === "/api/v1/config/graph" && method === "GET") {
+      return jsonResponse(graph);
+    }
+    if (url === "/api/v1/config/graph" && method === "PATCH") {
+      if (!patch) {
+        throw new Error("Unexpected config graph patch");
+      }
+      return jsonResponse(patch);
+    }
+    if (url.startsWith("/api/v1/logs/recent")) {
+      return jsonResponse(logs);
+    }
+    if (url === "/api/v1/logs/stream") {
+      return new Response(new ReadableStream<Uint8Array>(), { status: 200 });
+    }
+    if (url === "/api/v1/stats/usage") {
+      return jsonResponse(usage);
+    }
+    throw new Error(`Unexpected fetch: ${method} ${url}`);
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return { calls, fetchMock };
+}
+
+function jsonResponse(payload: unknown) {
+  return new Response(JSON.stringify(payload), {
+    status: 200,
+    headers: { "Content-Type": "application/json" }
+  });
+}
+
+function parseBody(body: BodyInit | null | undefined) {
+  return typeof body === "string" ? JSON.parse(body) as unknown : undefined;
+}
+
+function findPatch(calls: FetchCall[]) {
+  return calls.find((call) => call.url === "/api/v1/config/graph" && call.init?.method === "PATCH");
+}
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function setMaterialTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function getMaterialFilterChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filter-chip")).find(
+    (candidate) => candidate.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filter chip labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function fieldError(
+  resourceKind: FieldError["resourceKind"],
+  resourceId: string,
+  field: string,
+  code: string,
+  message: string
+): FieldError {
+  return { resourceKind, resourceId, field, code, message };
+}
+
+function usageFixture() {
+  return {
+    totals: {
+      requests: 2,
+      input_tokens: 300,
+      output_tokens: 80,
+      cache_creation: 40,
+      cache_read: 120,
+      cache_hit_rate: 40,
+      cache_write_rate: 13.3,
+      cache_rw_ratio: 3,
+      total_cost: 0.42,
+      duration: "1m"
+    },
+    by_model: [
+      {
+        model: "claude-sonnet",
+        actual_model: "claude-3-5-sonnet",
+        requests: 2,
+        input_tokens: 300,
+        output_tokens: 80,
+        cache_creation: 40,
+        cache_read: 120,
+        cache_hit_rate: 40,
+        cost: 0.42,
+        avg_cost_per_mtoken: 1105.26
+      }
+    ]
+  };
+}
+
+function emptyUsageFixture() {
+  return {
+    totals: {
+      requests: 0,
+      input_tokens: 0,
+      output_tokens: 0,
+      cache_creation: 0,
+      cache_read: 0,
+      cache_hit_rate: 0,
+      cache_write_rate: 0,
+      cache_rw_ratio: 0,
+      total_cost: 0,
+      duration: "0s"
+    },
+    by_model: []
+  };
+}
diff --git a/webui/src/features/configGraph/CreateResourcePanel.tsx b/webui/src/features/configGraph/CreateResourcePanel.tsx
new file mode 100644
index 00000000..404c4bba
--- /dev/null
+++ b/webui/src/features/configGraph/CreateResourcePanel.tsx
@@ -0,0 +1,931 @@
+import { useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { configDescriptions, type ConfigPath } from "../../configDocs/configDescriptions";
+import type { ConfigGraph } from "../../rpc/types";
+import { useI18n } from "../../i18n/I18nProvider";
+import { MaterialFilledButton, MaterialIconButton, MaterialOutlinedButton } from "../../components/MaterialButton";
+import { MaterialAssistChip, MaterialFilterChip } from "../../components/MaterialFilterChip";
+import { MaterialSelect, type MaterialSelectOption } from "../../components/MaterialSelect";
+import { MaterialOutlinedTextField } from "../../components/MaterialTextField";
+import type { MessageKey } from "../../i18n/messages";
+import { MaterialSwitch } from "../../components/MaterialSwitch";
+import { useCreateConfigResource } from "./useConfigGraph";
+import { useAnchoredTooltipPosition } from "./helpTooltipPosition";
+import { modelIconForName, modelSelectOptions, protocolIconForValue } from "./modelProviderIcons";
+import type { MdIconButton } from "@material/web/iconbutton/icon-button.js";
+
+type CreatableKind = "provider" | "model" | "provider_offer" | "route" | "extension";
+
+type CreateResourcePanelProps = {
+  availableExtensionIds?: string[];
+  graph: ConfigGraph;
+  kind: CreatableKind;
+  modelId?: string;
+  providerId?: string;
+};
+
+type FormValues = {
+  id: string;
+  baseUrl: string;
+  apiKey: string;
+  protocol: string;
+  displayName: string;
+  contextWindow: string;
+  model: string;
+  provider: string;
+  upstreamName: string;
+  priority: string;
+  inputPrice: string;
+  outputPrice: string;
+  cacheWritePrice: string;
+  cacheReadPrice: string;
+  billingEnabled: boolean;
+  enabled: boolean;
+};
+
+const initialValues: FormValues = {
+  id: "",
+  baseUrl: "",
+  apiKey: "",
+  protocol: "openai-response",
+  displayName: "",
+  contextWindow: "128000",
+  model: "",
+  provider: "",
+  upstreamName: "",
+  priority: "1",
+  inputPrice: "0",
+  outputPrice: "0",
+  cacheWritePrice: "0",
+  cacheReadPrice: "0",
+  billingEnabled: false,
+  enabled: true
+};
+
+const createTextKeys: Record<CreatableKind, { add: MessageKey; submit: MessageKey; title: MessageKey }> = {
+  extension: {
+    add: "create.extension.add",
+    submit: "create.extension.submit",
+    title: "create.extension.title"
+  },
+  model: {
+    add: "create.model.add",
+    submit: "create.model.submit",
+    title: "create.model.title"
+  },
+  provider: {
+    add: "create.provider.add",
+    submit: "create.provider.submit",
+    title: "create.provider.title"
+  },
+  provider_offer: {
+    add: "create.offer.add",
+    submit: "create.offer.submit",
+    title: "create.offer.title"
+  },
+  route: {
+    add: "create.route.add",
+    submit: "create.route.submit",
+    title: "create.route.title"
+  }
+};
+
+export function CreateResourcePanel({
+  availableExtensionIds,
+  graph,
+  kind,
+  modelId,
+  providerId
+}: CreateResourcePanelProps) {
+  const { t } = useI18n();
+  const create = useCreateConfigResource();
+  const extensionIds = availableExtensionIds ?? [];
+  const extensionCreateDisabled = kind === "extension" && extensionIds.length === 0;
+  const [open, setOpen] = useState(false);
+  const [values, setValues] = useState<FormValues>(() => defaultValues(kind, graph, providerId, modelId, extensionIds));
+  const [error, setError] = useState("");
+
+  const title = t(createTextKeys[kind].title);
+  const addLabel = t(createTextKeys[kind].add);
+  const submitLabel = t(createTextKeys[kind].submit);
+
+  function openPanel() {
+    setValues(defaultValues(kind, graph, providerId, modelId, extensionIds));
+    setError("");
+    setOpen(true);
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError("");
+    const draft = createResourceDraft(
+      kind,
+      values,
+      {
+        cacheReadPrice: t("create.offer.cacheReadPrice"),
+        cacheWritePrice: t("create.offer.cacheWritePrice"),
+        contextWindow: t("create.model.contextWindow"),
+        inputPrice: t("create.offer.inputPrice"),
+        outputPrice: t("create.offer.outputPrice"),
+        priority: t("create.offer.priority")
+      },
+      (field) => t("create.invalidNumber", { field }),
+      (field) => t("create.positiveNumber", { field })
+    );
+    if (!draft.ok) {
+      setError(draft.error);
+      return;
+    }
+    try {
+      await create.mutateAsync({
+        kind,
+        body: {
+          baseRevision: graph.revision,
+          id: draft.id,
+          value: draft.value
+        }
+      });
+      setOpen(false);
+      setValues(defaultValues(kind, graph, providerId, modelId, extensionIds));
+    } catch (cause) {
+      setError(errorMessage(cause, t("error.requestFailed")));
+    }
+  }
+
+  return (
+    <div className="create-resource">
+      <MaterialFilledButton
+        type="button"
+        className="create-resource__add"
+        disabled={extensionCreateDisabled}
+        onClick={openPanel}
+        icon="add"
+      >
+        {addLabel}
+      </MaterialFilledButton>
+      {open ? (
+        <form className="create-resource__panel" aria-label={title} onSubmit={submit}>
+          <div className="create-resource__header">
+            <h3>{title}</h3>
+            <MaterialIconButton
+              className="icon-button"
+              icon="close"
+              label={t("create.close")}
+              onClick={() => setOpen(false)}
+            />
+          </div>
+          {error ? (
+            <p className="field-error" role="alert">
+              {error}
+            </p>
+          ) : null}
+          <div className="form-grid create-resource__fields">
+            <CreateFields
+              graph={graph}
+              kind={kind}
+              availableExtensionIds={extensionIds}
+              values={values}
+              modelId={modelId}
+              providerId={providerId}
+              setValues={setValues}
+            />
+          </div>
+          <div className="form-actions">
+            <MaterialFilledButton type="submit" disabled={create.isPending}>
+              {submitLabel}
+            </MaterialFilledButton>
+            <MaterialOutlinedButton className="secondary-button" onClick={() => setOpen(false)}>
+              {t("create.cancel")}
+            </MaterialOutlinedButton>
+          </div>
+        </form>
+      ) : null}
+    </div>
+  );
+}
+
+function CreateFields({
+  availableExtensionIds = [],
+  graph,
+  kind,
+  modelId,
+  providerId,
+  values,
+  setValues
+}: {
+  availableExtensionIds?: string[];
+  graph: ConfigGraph;
+  kind: CreatableKind;
+  modelId?: string;
+  providerId?: string;
+  values: FormValues;
+  setValues: (values: FormValues) => void;
+}) {
+  const { locale, t } = useI18n();
+  const models = graph.resources.filter((resource) => resource.kind === "model");
+  const providers = graph.resources.filter((resource) => resource.kind === "provider");
+  const fieldHelp = (docPath: ConfigPath, fallbackKey: MessageKey) =>
+    configDescriptions[docPath]?.description[locale] ?? t(fallbackKey);
+
+  if (kind === "provider") {
+    return (
+      <>
+        <TextInput
+          helpText={fieldHelp("providers.<key>.key", "create.help.providerId")}
+          label={t("create.provider.id")}
+          path="key"
+          value={values.id}
+          onChange={(id) => setValues({ ...values, id })}
+        />
+        <TextInput
+          helpText={fieldHelp("providers.<key>.base_url", "create.help.providerBaseUrl")}
+          label={t("create.provider.baseUrl")}
+          path="base_url"
+          value={values.baseUrl}
+          onChange={(baseUrl) => setValues({ ...values, baseUrl })}
+        />
+        <TextInput
+          helpText={fieldHelp("providers.<key>.api_key", "create.help.providerApiKey")}
+          label={t("create.provider.apiKey")}
+          path="api_key"
+          value={values.apiKey}
+          onChange={(apiKey) => setValues({ ...values, apiKey })}
+          secret
+        />
+        <SelectInput
+          helpText={fieldHelp("providers.<key>.protocol", "create.help.providerProtocol")}
+          label={t("create.provider.protocol")}
+          options={protocolSelectOptions(t)}
+          value={values.protocol}
+          onChange={(protocol) => setValues({ ...values, protocol })}
+        />
+      </>
+    );
+  }
+
+  if (kind === "model") {
+    return (
+      <>
+        <TextInput
+          helpText={fieldHelp("models.<slug>.slug", "create.help.modelId")}
+          label={t("create.model.id")}
+          path="slug"
+          value={values.id}
+          onChange={(id) => setValues({ ...values, id })}
+        />
+        <TextInput
+          helpText={t("create.help.modelDisplayName")}
+          label={t("create.model.displayName")}
+          leadingIconNode={modelIconForName(values.displayName || values.id)}
+          path="display_name"
+          value={values.displayName}
+          onChange={(displayName) => setValues({ ...values, displayName })}
+        />
+        <ContextWindowInput
+          helpText={fieldHelp("models.<slug>.context_window", "create.help.modelContextWindow")}
+          label={t("create.model.contextWindow")}
+          value={values.contextWindow}
+          onChange={(contextWindow) => setValues({ ...values, contextWindow })}
+        />
+      </>
+    );
+  }
+
+  if (kind === "route") {
+    return (
+      <>
+        <TextInput
+          helpText={fieldHelp("routes.<alias>.alias", "create.help.routeId")}
+          label={t("create.route.id")}
+          path="alias"
+          value={values.id}
+          onChange={(id) => setValues({ ...values, id })}
+        />
+        <SelectInput
+          helpText={fieldHelp("routes.<alias>.model", "create.help.routeModel")}
+          label={t("create.route.model")}
+          options={modelSelectOptions(models)}
+          value={values.model}
+          onChange={(model) => setValues({ ...values, model })}
+        />
+        <SelectInput
+          helpText={fieldHelp("routes.<alias>.provider", "create.help.routeProvider")}
+          label={t("create.route.provider")}
+          options={toSelectOptions(providers.map((provider) => provider.id))}
+          value={values.provider}
+          onChange={(provider) => setValues({ ...values, provider })}
+        />
+      </>
+    );
+  }
+
+  if (kind === "provider_offer") {
+    return (
+      <>
+        <div className="schema-field form-field--create-track">
+          <CreateFieldLabel
+            helpText={fieldHelp("providers.<key>.offers[].model", "create.help.offerModel")}
+            label={t("create.offer.model")}
+          />
+          <MaterialAssistChip>{modelId ?? values.model}</MaterialAssistChip>
+        </div>
+        <SelectInput
+          helpText={fieldHelp("providers.<key>.key", "create.help.offerProvider")}
+          label={t("create.offer.provider")}
+          options={toSelectOptions(providers.map((provider) => provider.id))}
+          value={values.provider}
+          onChange={(provider) => setValues({ ...values, provider })}
+        />
+        <TextInput helpText={fieldHelp("providers.<key>.offers[].upstream_name", "create.help.offerUpstreamName")} label={t("create.offer.upstreamName")} path="upstream_name" value={values.upstreamName} onChange={(upstreamName) => setValues({ ...values, upstreamName })} />
+        <TextInput helpText={t("create.help.offerPriority")} label={t("create.offer.priority")} path="priority" value={values.priority} onChange={(priority) => setValues({ ...values, priority })} />
+        <SwitchInput
+          helpText={t("create.help.offerBilling")}
+          label={t("create.offer.billing")}
+          value={values.billingEnabled}
+          onChange={(billingEnabled) => setValues({ ...values, billingEnabled })}
+        />
+        {values.billingEnabled ? (
+          <>
+            <TextInput helpText={fieldHelp("providers.<key>.offers[].pricing", "create.help.offerInputPrice")} label={t("create.offer.inputPrice")} path="input_price" value={values.inputPrice} onChange={(inputPrice) => setValues({ ...values, inputPrice })} />
+            <TextInput helpText={fieldHelp("providers.<key>.offers[].pricing", "create.help.offerOutputPrice")} label={t("create.offer.outputPrice")} path="output_price" value={values.outputPrice} onChange={(outputPrice) => setValues({ ...values, outputPrice })} />
+            <TextInput helpText={fieldHelp("providers.<key>.offers[].pricing", "create.help.offerCacheWritePrice")} label={t("create.offer.cacheWritePrice")} path="cache_write_price" value={values.cacheWritePrice} onChange={(cacheWritePrice) => setValues({ ...values, cacheWritePrice })} />
+            <TextInput helpText={fieldHelp("providers.<key>.offers[].pricing", "create.help.offerCacheReadPrice")} label={t("create.offer.cacheReadPrice")} path="cache_read_price" value={values.cacheReadPrice} onChange={(cacheReadPrice) => setValues({ ...values, cacheReadPrice })} />
+          </>
+        ) : null}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <SelectInput
+        helpText={t("create.help.extensionId")}
+        label={t("create.extension.id")}
+        options={toSelectOptions(availableExtensionIds)}
+        value={values.id}
+        onChange={(id) => setValues({ ...values, id })}
+      />
+      <SwitchInput
+        helpText={fieldHelp("extensions.<name>.enabled", "create.help.extensionEnabled")}
+        label={t("create.extension.enabled")}
+        value={values.enabled}
+        onChange={(enabled) => setValues({ ...values, enabled })}
+      />
+    </>
+  );
+}
+
+function TextInput({
+  helpText,
+  label,
+  leadingIconNode,
+  onChange,
+  path,
+  secret,
+  value
+}: {
+  helpText: string;
+  label: string;
+  leadingIconNode?: ReactNode;
+  onChange: (value: string) => void;
+  path: string;
+  secret?: boolean;
+  value: string;
+}) {
+  const id = useStableCreateId(label);
+  const help = useCreateFieldHelp(label);
+  return (
+    <div className="mb-field form-field--create-track" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaDescribedBy={help.open ? help.helpId : undefined}
+          ariaLabel={label}
+          autoComplete={secret ? "new-password" : undefined}
+          id={id}
+          label={label}
+          leadingIcon={fieldLeadingIcon(path, secret)}
+          leadingIconNode={leadingIconNode}
+          trailingIcon={help.button("trailing-icon")}
+          type={secret ? "password" : "text"}
+          value={value}
+          onInput={onChange}
+        />
+        <CreateFieldHelpTooltip anchorRef={help.anchorRef} helpId={help.helpId} helpText={helpText} open={help.open} />
+      </div>
+    </div>
+  );
+}
+
+function SelectInput({
+  helpText,
+  label,
+  onChange,
+  options,
+  value
+}: {
+  helpText: string;
+  label: string;
+  onChange: (value: string) => void;
+  options: MaterialSelectOption[];
+  value: string;
+}) {
+  const help = useCreateFieldHelp(label);
+  return (
+    <div className="mb-field form-field--create-track" data-variant="select">
+      <div className="mb-field__select-actions">
+        {help.button(undefined, "mb-field__select-help")}
+      </div>
+      <div className="mb-field__control">
+        <MaterialSelect
+          describedBy={help.open ? help.helpId : undefined}
+          ariaLabel={label}
+          label={label}
+          leadingIcon={options.find((option) => option.value === value)?.leadingIcon}
+          onChange={onChange}
+          options={options}
+          value={value}
+        />
+      </div>
+      <CreateFieldHelpTooltip anchorRef={help.anchorRef} helpId={help.helpId} helpText={helpText} open={help.open} />
+    </div>
+  );
+}
+
+function ChipOptionGroup({
+  helpText,
+  label,
+  onChange,
+  optionLabel = (option) => option,
+  options,
+  value
+}: {
+  helpText: string;
+  label: string;
+  onChange: (value: string) => void;
+  optionLabel?: (option: string) => string;
+  options: string[];
+  value: string;
+}) {
+  return (
+    <div className="schema-field form-field--create-track">
+      <CreateFieldLabel helpText={helpText} label={label} />
+      <md-chip-set className="material-chip-group" role="group" aria-label={label}>
+        {options.map((option) => (
+          <MaterialFilterChip
+            key={option}
+            selected={option === value}
+            value={option}
+            onSelect={onChange}
+          >
+            {optionLabel(option)}
+          </MaterialFilterChip>
+        ))}
+      </md-chip-set>
+    </div>
+  );
+}
+
+function ContextWindowInput({
+  helpText,
+  label,
+  onChange,
+  value
+}: {
+  helpText: string;
+  label: string;
+  onChange: (value: string) => void;
+  value: string;
+}) {
+  const { t } = useI18n();
+  const id = useStableCreateId(label);
+  const help = useCreateFieldHelp(label);
+  const presets = [
+    [t("create.contextWindowPreset.128k"), "128000"],
+    [t("create.contextWindowPreset.400k"), "400000"],
+    [t("create.contextWindowPreset.1m"), "1000000"]
+  ] as const;
+
+  return (
+    <div
+      className="mb-field form-field--create-track form-grid__wide create-resource__context-window-row"
+      data-variant="input"
+    >
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaDescribedBy={help.open ? help.helpId : undefined}
+          ariaLabel={label}
+          id={id}
+          inputMode="numeric"
+          label={label}
+          leadingIcon="tag"
+          trailingIcon={help.button("trailing-icon")}
+          type="text"
+          value={value}
+          onInput={onChange}
+        />
+        <CreateFieldHelpTooltip anchorRef={help.anchorRef} helpId={help.helpId} helpText={helpText} open={help.open} />
+      </div>
+      <md-chip-set
+        className="material-chip-group create-resource__context-window-presets"
+        role="group"
+        aria-label={t("create.contextWindowPresets", { label })}
+      >
+        {presets.map(([presetLabel, presetValue]) => (
+          <MaterialFilterChip
+            key={presetValue}
+            selected={value === presetValue}
+            value={presetValue}
+            onSelect={onChange}
+          >
+            {presetLabel}
+          </MaterialFilterChip>
+        ))}
+      </md-chip-set>
+    </div>
+  );
+}
+
+function SwitchInput({
+  helpText,
+  label,
+  onChange,
+  value
+}: {
+  helpText: string;
+  label: string;
+  onChange: (value: boolean) => void;
+  value: boolean;
+}) {
+  return (
+    <div className="schema-field schema-field--inline form-field--create-track">
+      <div className="schema-field__switch-line">
+        <CreateFieldLabel helpText={helpText} label={label} />
+        <MaterialSwitch label={label} selected={value} onChange={onChange} />
+      </div>
+    </div>
+  );
+}
+
+function CreateFieldLabel({ helpText, label }: { helpText: string; label: string }) {
+  return (
+    <span className="schema-field__label-row">
+      <span className="schema-field__label">{label}</span>
+      <CreateFieldHelpButton helpText={helpText} label={label} />
+    </span>
+  );
+}
+
+function fieldLeadingIcon(path: string, secret = false): string | undefined {
+  if (secret) {
+    return "key";
+  }
+  const normalizedPath = path.toLowerCase();
+  if (normalizedPath.includes("url") || normalizedPath.includes("endpoint") || normalizedPath.includes("addr")) {
+    return "link";
+  }
+  if (normalizedPath.includes("model")) {
+    return "smart_toy";
+  }
+  if (normalizedPath.includes("agent")) {
+    return "badge";
+  }
+  if (normalizedPath.includes("price") || normalizedPath.includes("priority") || normalizedPath.includes("window")) {
+    return "tag";
+  }
+  return undefined;
+}
+
+function useCreateFieldHelp(label: string) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const openedByHover = useRef(false);
+  const anchorRef = useRef<MdIconButton>(null);
+  const helpId = `${useStableCreateId(label)}-help`;
+
+  return {
+    anchorRef,
+    button: (slot?: string, className = "schema-field__help") => (
+      <MaterialIconButton
+        className={className}
+        describedBy={open ? helpId : undefined}
+        icon="help"
+        label={t("field.helpFor", { label })}
+        onBlur={() => setOpen(false)}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (openedByHover.current) {
+            openedByHover.current = false;
+            setOpen(true);
+            return;
+          }
+          setOpen((current) => !current);
+        }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            setOpen(false);
+          }
+        }}
+        onMouseDown={(event) => event.preventDefault()}
+        onMouseEnter={() => {
+          openedByHover.current = true;
+          setOpen(true);
+        }}
+        onMouseLeave={() => {
+          openedByHover.current = false;
+          setOpen(false);
+        }}
+        ref={anchorRef}
+        slot={slot}
+      />
+    ),
+    helpId,
+    open
+  };
+}
+
+function CreateFieldHelpButton({ helpText, label }: { helpText: string; label: string }) {
+  const help = useCreateFieldHelp(label);
+  return (
+    <span className="schema-field__help-wrap">
+      {help.button()}
+      <CreateFieldHelpTooltip anchorRef={help.anchorRef} helpId={help.helpId} helpText={helpText} open={help.open} />
+    </span>
+  );
+}
+
+function CreateFieldHelpTooltip({
+  anchorRef,
+  helpId,
+  helpText,
+  open
+}: {
+  anchorRef: React.RefObject<HTMLElement | null>;
+  helpId: string;
+  helpText: string;
+  open: boolean;
+}) {
+  const position = useAnchoredTooltipPosition(anchorRef, open);
+  if (!open) {
+    return null;
+  }
+  return (
+    <span className="rich-tooltip" id={helpId} role="tooltip" style={tooltipPositionStyle(position)}>
+      {helpText}
+    </span>
+  );
+}
+
+function tooltipPositionStyle(position: { left: number; maxWidth: number; top: number } | undefined) {
+  if (!position) {
+    return undefined;
+  }
+  return {
+    left: `${position.left}px`,
+    maxWidth: `${position.maxWidth}px`,
+    position: "fixed" as const,
+    top: `${position.top}px`
+  };
+}
+
+function useStableCreateId(label: string) {
+  const id = useId();
+  return `create-resource-${id}-${label}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+function toSelectOptions(options: string[]): MaterialSelectOption[] {
+  return options.map((option) => ({ label: option, value: option }));
+}
+
+function protocolSelectOptions(t: (key: MessageKey) => string): MaterialSelectOption[] {
+  return ["openai-response", "openai-chat", "anthropic", "google-genai"].map((option) => ({
+    label: protocolOptionLabel(option, t),
+    leadingIcon: protocolIconForValue(option),
+    value: option
+  }));
+}
+
+function defaultValues(
+  kind: CreatableKind,
+  graph: ConfigGraph,
+  providerId?: string,
+  modelId?: string,
+  availableExtensionIds: string[] = []
+): FormValues {
+  const firstModel = graph.resources.find((resource) => resource.kind === "model")?.id ?? "";
+  const firstProvider = graph.resources.find((resource) => resource.kind === "provider")?.id ?? "";
+  return {
+    ...initialValues,
+    id: kind === "extension" ? availableExtensionIds[0] ?? "" : initialValues.id,
+    model: kind === "provider_offer" ? modelId ?? firstModel : kind === "route" ? firstModel : "",
+    provider: kind === "route" || kind === "provider_offer" ? providerId ?? firstProvider : ""
+  };
+}
+
+function createResourceId(kind: CreatableKind, values: FormValues) {
+  if (kind === "provider_offer") {
+    return `${values.provider}/${values.model}`;
+  }
+  return values.id;
+}
+
+type ResourceDraft =
+  | {
+      ok: true;
+      id: string;
+      value: Record<string, unknown>;
+    }
+  | {
+      ok: false;
+      error: string;
+    };
+
+function createResourceDraft(
+  kind: CreatableKind,
+  values: FormValues,
+  fieldLabels: NumberFieldLabels,
+  invalidNumberMessage: (field: string) => string,
+  positiveNumberMessage: (field: string) => string
+): ResourceDraft {
+  const value = createValue(kind, values, fieldLabels, invalidNumberMessage, positiveNumberMessage);
+  if (!value.ok) {
+    return value;
+  }
+  return {
+    ok: true,
+    id: createResourceId(kind, values),
+    value: value.value
+  };
+}
+
+function createValue(
+  kind: CreatableKind,
+  values: FormValues,
+  fieldLabels: NumberFieldLabels,
+  invalidNumberMessage: (field: string) => string,
+  positiveNumberMessage: (field: string) => string
+): { ok: true; value: Record<string, unknown> } | { ok: false; error: string } {
+  if (kind === "provider") {
+    return {
+      ok: true,
+      value: {
+        base_url: values.baseUrl,
+        api_key: values.apiKey,
+        protocol: values.protocol
+      }
+    };
+  }
+  if (kind === "model") {
+    const contextWindow = positiveNumericValue(
+      values.contextWindow,
+      fieldLabels.contextWindow,
+      invalidNumberMessage,
+      positiveNumberMessage
+    );
+    if (!contextWindow.ok) {
+      return contextWindow;
+    }
+    return {
+      ok: true,
+      value: {
+        display_name: values.displayName,
+        context_window: contextWindow.value
+      }
+    };
+  }
+  if (kind === "route") {
+    return {
+      ok: true,
+      value: {
+        model: values.model,
+        provider: values.provider
+      }
+    };
+  }
+  if (kind === "provider_offer") {
+    const priority = numericValue(values.priority, fieldLabels.priority, invalidNumberMessage);
+    if (!priority.ok) {
+      return priority;
+    }
+    const offerValue: Record<string, unknown> = {
+      model: values.model,
+      upstream_name: values.upstreamName,
+      priority: priority.value
+    };
+    if (!values.billingEnabled) {
+      return {
+        ok: true,
+        value: offerValue
+      };
+    }
+    const inputPrice = numericValue(values.inputPrice, fieldLabels.inputPrice, invalidNumberMessage);
+    const outputPrice = numericValue(values.outputPrice, fieldLabels.outputPrice, invalidNumberMessage);
+    const cacheWritePrice = numericValue(values.cacheWritePrice, fieldLabels.cacheWritePrice, invalidNumberMessage);
+    const cacheReadPrice = numericValue(values.cacheReadPrice, fieldLabels.cacheReadPrice, invalidNumberMessage);
+    if (!inputPrice.ok) {
+      return inputPrice;
+    }
+    if (!outputPrice.ok) {
+      return outputPrice;
+    }
+    if (!cacheWritePrice.ok) {
+      return cacheWritePrice;
+    }
+    if (!cacheReadPrice.ok) {
+      return cacheReadPrice;
+    }
+    return {
+      ok: true,
+      value: {
+        ...offerValue,
+        pricing: {
+          input_price: inputPrice.value,
+          output_price: outputPrice.value,
+          cache_write_price: cacheWritePrice.value,
+          cache_read_price: cacheReadPrice.value
+        }
+      }
+    };
+  }
+  return {
+    ok: true,
+    value: {
+      enabled: values.enabled
+    }
+  };
+}
+
+type NumberFieldLabels = {
+  cacheReadPrice: string;
+  cacheWritePrice: string;
+  contextWindow: string;
+  inputPrice: string;
+  outputPrice: string;
+  priority: string;
+};
+
+function numericValue(
+  value: string,
+  field: string,
+  invalidNumberMessage: (field: string) => string
+): { ok: true; value: number } | { ok: false; error: string } {
+  if (value.trim() === "") {
+    return { ok: true, value: 0 };
+  }
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return { ok: false, error: invalidNumberMessage(field) };
+  }
+  return { ok: true, value: parsed };
+}
+
+function positiveNumericValue(
+  value: string,
+  field: string,
+  invalidNumberMessage: (field: string) => string,
+  positiveNumberMessage: (field: string) => string
+): { ok: true; value: number } | { ok: false; error: string } {
+  const parsed = numericValue(value, field, invalidNumberMessage);
+  if (!parsed.ok) {
+    return parsed;
+  }
+  if (parsed.value <= 0) {
+    return { ok: false, error: positiveNumberMessage(field) };
+  }
+  return parsed;
+}
+
+function errorMessage(cause: unknown, fallback: string) {
+  const rawErrors = rawErrorsFrom(cause);
+  if (rawErrors.length > 0 && typeof rawErrors[0]?.message === "string") {
+    return rawErrors[0].message;
+  }
+  if (cause instanceof Error) {
+    return cause.message;
+  }
+  return fallback;
+}
+
+function rawErrorsFrom(cause: unknown): Array<{ message?: unknown }> {
+  if (!cause || typeof cause !== "object") {
+    return [];
+  }
+  const raw = "raw" in cause ? (cause as { raw?: unknown }).raw : undefined;
+  if (!raw || typeof raw !== "object" || !("errors" in raw)) {
+    return [];
+  }
+  const errors = (raw as { errors?: unknown }).errors;
+  return Array.isArray(errors) ? errors : [];
+}
+
+export type { CreatableKind };
+
+function protocolOptionLabel(option: string, t: (key: MessageKey) => string) {
+  const labels: Record<string, MessageKey> = {
+    anthropic: "provider.protocol.anthropic",
+    "openai-response": "provider.protocol.openaiResponses",
+    "openai-chat": "provider.protocol.openaiChat",
+    "google-genai": "provider.protocol.googleGenai"
+  };
+  const key = labels[option];
+  return key ? t(key) : option;
+}
diff --git a/webui/src/features/configGraph/FieldStatus.test.tsx b/webui/src/features/configGraph/FieldStatus.test.tsx
new file mode 100644
index 00000000..db556f18
--- /dev/null
+++ b/webui/src/features/configGraph/FieldStatus.test.tsx
@@ -0,0 +1,30 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { FieldStatus } from "./FieldStatus";
+
+describe("FieldStatus", () => {
+  test("renders compact save state labels", () => {
+    const { unmount } = renderWithConsoleProviders(<FieldStatus status="saving" />);
+
+    expect(screen.getByText("Saving")).toBeInTheDocument();
+
+    unmount();
+    renderWithConsoleProviders(<FieldStatus status="error" message="invalid value" />);
+
+    expect(screen.getByText("invalid value")).toBeInTheDocument();
+  });
+
+  test("exposes status metadata for icon-ready styling", () => {
+    renderWithConsoleProviders(<FieldStatus status="dirty" />);
+
+    expect(screen.getByRole("status")).toHaveAttribute("data-status", "dirty");
+    expect(screen.getByRole("status").querySelector(".field-status__dot")).toBeInTheDocument();
+  });
+
+  test("localizes save state labels in Chinese locale", () => {
+    renderWithConsoleProviders(<FieldStatus status="saving" />, { locale: "zh-CN" });
+
+    expect(screen.getByText("保存中")).toBeInTheDocument();
+  });
+});
diff --git a/webui/src/features/configGraph/FieldStatus.tsx b/webui/src/features/configGraph/FieldStatus.tsx
new file mode 100644
index 00000000..9e19ee52
--- /dev/null
+++ b/webui/src/features/configGraph/FieldStatus.tsx
@@ -0,0 +1,33 @@
+import { useI18n } from "../../i18n/I18nProvider";
+import type { MessageKey } from "../../i18n/messages";
+import type { AutosaveFieldStatus } from "./useAutosaveField";
+
+const statusLabelKeys: Record<AutosaveFieldStatus, MessageKey> = {
+  idle: "saveStatus.idle",
+  dirty: "saveStatus.dirty",
+  saving: "saveStatus.saving",
+  saved: "saveStatus.saved",
+  error: "saveStatus.error"
+};
+
+export function FieldStatus({
+  status,
+  message
+}: {
+  status: AutosaveFieldStatus;
+  message?: string;
+}) {
+  const { t } = useI18n();
+  const label = status === "error" && message ? message : t(statusLabelKeys[status]);
+  return (
+    <span
+      aria-live="polite"
+      className={`field-status field-status--${status}`}
+      data-status={status}
+      role={status === "error" ? "alert" : "status"}
+    >
+      <span className="field-status__dot" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
diff --git a/webui/src/features/configGraph/GraphResourceField.tsx b/webui/src/features/configGraph/GraphResourceField.tsx
new file mode 100644
index 00000000..6e151de4
--- /dev/null
+++ b/webui/src/features/configGraph/GraphResourceField.tsx
@@ -0,0 +1,92 @@
+import { useCallback } from "react";
+import type { ConfigResource, FieldSchema } from "../../rpc/types";
+import { useI18n } from "../../i18n/I18nProvider";
+import { SchemaField, type SchemaFieldProps } from "./SchemaField";
+import { configDocPathForResource } from "./configDocPath";
+import { useAutosaveField, type SaveFieldRequest } from "./useAutosaveField";
+import { useReportFieldStatus } from "./editorStatus";
+import { useConfigGraph, useGraphFieldSaver } from "./useConfigGraph";
+import { modelSelectOptions, providerSelectOptions, resourceFieldModelIcon } from "./modelProviderIcons";
+
+export function GraphResourceField({
+  resource,
+  field,
+  objectDisplay,
+  revision,
+  modelDisplayNames = {}
+}: {
+  modelDisplayNames?: Record<string, string>;
+  resource: ConfigResource;
+  field: FieldSchema;
+  objectDisplay?: "collapsible" | "expandedFixed";
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+  const saveGraphField = useGraphFieldSaver<unknown>();
+  const save = useCallback(
+    (request: SaveFieldRequest<unknown>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: field.path,
+    committedValue: resource.value[field.path],
+    revision,
+    save,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:${field.path}`, autosave.status);
+  const draftResource = {
+    ...resource,
+    value: {
+      ...resource.value,
+      [field.path]: autosave.value
+    }
+  };
+
+  const routeSelect = resource.kind === "route" && (field.path === "model" || field.path === "provider")
+    ? routeSelectProps(field.path, autosave.value, graph.data?.resources ?? [], t)
+    : undefined;
+
+  return (
+    <SchemaField
+      error={autosave.error?.message}
+      field={field}
+      idPrefix={`${resource.kind}-${resource.id}`}
+      leadingIconNode={resourceFieldModelIcon(draftResource, field, modelDisplayNames)}
+      docPath={configDocPathForResource(resource, field)}
+      objectDisplay={objectDisplay}
+      options={routeSelect?.options}
+      warning={routeSelect?.warning}
+      onChange={autosave.setValue}
+      onCommit={autosave.commit}
+      onCommitValue={autosave.commitValue}
+      clearSecretDraft={autosave.status === "saved"}
+      value={autosave.value}
+    />
+  );
+}
+
+/** Build select options + an invalid/missing warning for a route's model or provider field. */
+function routeSelectProps(
+  path: "model" | "provider",
+  value: unknown,
+  resources: ConfigResource[],
+  t: ReturnType<typeof useI18n>["t"]
+): Pick<SchemaFieldProps, "options" | "warning"> {
+  const options = path === "model" ? modelSelectOptions(resources) : providerSelectOptions(resources);
+  const text = typeof value === "string" ? value.trim() : "";
+  const known = options.some((option) => option.value === text);
+  let warning: string | undefined;
+  if (!text) {
+    warning = path === "model" ? t("route.warning.modelMissing") : t("route.warning.providerMissing");
+  } else if (!known) {
+    warning = path === "model"
+      ? t("route.warning.modelUnknown", { value: text })
+      : t("route.warning.providerUnknown", { value: text });
+  }
+  return { options, warning };
+}
diff --git a/webui/src/features/configGraph/ResourceEditorCard.test.tsx b/webui/src/features/configGraph/ResourceEditorCard.test.tsx
new file mode 100644
index 00000000..1b6d18ed
--- /dev/null
+++ b/webui/src/features/configGraph/ResourceEditorCard.test.tsx
@@ -0,0 +1,1534 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { AppShell } from "../../app/App";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { configGraphFixture, field, resource } from "../../test/configGraphFixtures";
+import {
+  expectPanelElementToBeFlat,
+  expectPanelRuleToAvoidEdges,
+  expectPanelStateRuleToStayFlat
+} from "../../test/panelStyleAssertions";
+import * as configGraph from "../../rpc/configGraph";
+import { ResourceEditorCard } from "./ResourceEditorCard";
+
+describe("ResourceEditorCard", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test("renders resource identity, status metadata, and editable fields", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      base_url: "https://api.anthropic.com",
+      api_key: "******",
+      protocol: "anthropic"
+    }, [
+      field("base_url", "Base URL"),
+      field("api_key", "API Key", "string", "secret", undefined, true),
+      field("protocol", "Protocol", "string", "select", ["anthropic", "openai-response"])
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />
+    );
+
+    expect(screen.getByRole("heading", { name: "anthropic" })).toBeInTheDocument();
+    expect(document.querySelector(".resource-kind-icon")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("anthropic status")).getByText("Saved")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "Upstream base URL")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "Upstream API key")).toHaveProperty("type", "password");
+  });
+
+  test("clears a saved provider API key draft after autosave commits with a masked graph value", async () => {
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      base_url: "https://api.anthropic.com",
+      api_key: "******",
+      protocol: "anthropic"
+    }, [
+      field("base_url", "Base URL"),
+      field("api_key", "API Key", "string", "secret", undefined, true),
+      field("protocol", "Protocol", "string", "select", ["anthropic", "openai-response"])
+    ]);
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({
+        revision: "rev-2",
+        resources: [provider]
+      })
+    });
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />
+    );
+
+    const apiKeyField = getMaterialTextField(document, "Upstream API key");
+    expect(apiKeyField.value).toBe("");
+
+    setMaterialTextFieldValue(apiKeyField, "sk-live-draft");
+
+    expect(apiKeyField.value).toBe("sk-live-draft");
+
+    fireEvent.blur(apiKeyField);
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "provider",
+            id: "anthropic",
+            field: "api_key",
+            value: "sk-live-draft"
+          }
+        ]
+      })
+    );
+    await waitFor(() => expect(apiKeyField.value).toBe(""));
+  });
+
+  test("keeps editor background panels tonal without borders, glow, or hover lift", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      display_name: "Claude Sonnet",
+      context_window: 200000,
+      supports_reasoning: true,
+      default_reasoning_level: "medium",
+      default_reasoning_summary: "auto",
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses" },
+        { effort: "medium", description: "Balanced" }
+      ],
+      web_search: { support: "auto" },
+      extensions: {}
+    }, [
+      field("display_name", "Display Name"),
+      field("context_window", "Context Window", "number", "number"),
+      field("supports_reasoning", "Supports Reasoning", "boolean", "switch"),
+      field("default_reasoning_level", "Default Reasoning Level"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("default_reasoning_summary", "Default Reasoning Summary"),
+      field("web_search", "Web Search", "object", "object"),
+      field("extensions", "Extensions", "object", "object")
+    ]);
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ResourceEditorCard resource={model} revision="rev-1" title="Model" />} />
+      </MemoryRouter>
+    );
+
+    const editorCard = container.querySelector(".resource-editor-card");
+    const fieldGroups = container.querySelectorAll(".resource-field-group");
+    const advancedPanels = container.querySelectorAll(".resource-field-group--advanced");
+    const identityPanel = screen.getByRole("group", { name: "Identity" });
+    const basicPanel = screen.getByRole("group", { name: "Basic" });
+    expect(editorCard).toBeInTheDocument();
+    expect(fieldGroups.length).toBeGreaterThan(0);
+    expect(advancedPanels.length).toBeGreaterThan(0);
+    const displayNameField = getMaterialTextField(identityPanel, "Model display name");
+    expect(identityPanel).toContainElement(displayNameField);
+    expectLobeLeadingIcon(displayNameField);
+    expect(within(identityPanel).queryByText(/fields?$/)).not.toBeInTheDocument();
+    expect(basicPanel).toContainElement(getMaterialTextField(basicPanel, "Context window"));
+    expectPanelElementToBeFlat(editorCard!);
+    for (const panel of fieldGroups) {
+      expectPanelElementToBeFlat(panel);
+    }
+    expectPanelRuleToAvoidEdges(".resource-editor-card");
+    expectPanelStateRuleToStayFlat(".resource-editor-card:hover");
+    expectPanelStateRuleToStayFlat(".resource-editor-card:focus-within");
+    expectPanelRuleToAvoidEdges(".resource-field-group");
+    expectPanelRuleToAvoidEdges(".resource-field-group--advanced");
+    expectFieldGroupHeadersToBeTitleOnly(fieldGroups);
+  });
+
+  test("lets single-line switch banks fill the available row", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const cache = resource("cache", "main", "Cache", {
+      prompt_caching: true,
+      automatic_prompt_cache: true,
+      explicit_cache_breakpoints: true,
+      allow_retention_downgrade: false
+    }, [
+      field("prompt_caching", "Prompt Caching", "boolean", "switch"),
+      field("automatic_prompt_cache", "Automatic Prompt Cache", "boolean", "switch"),
+      field("explicit_cache_breakpoints", "Explicit Cache Breakpoints", "boolean", "switch"),
+      field("allow_retention_downgrade", "Allow Retention Downgrade", "boolean", "switch")
+    ]);
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ResourceEditorCard resource={cache} revision="rev-1" title="Cache" />} />
+      </MemoryRouter>
+    );
+
+    const switchBank = container.querySelector(".switch-bank");
+    expect(switchBank).toBeInTheDocument();
+    expect(switchBank?.querySelectorAll("md-switch")).toHaveLength(4);
+    expect(getSwitchBankGridTemplateRule()).toContain("auto-fit");
+    expect(getSwitchBankGridTemplateRule()).not.toContain("auto-fill");
+  });
+
+  test("surfaces restart and critical runtime metadata", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "restartRequired",
+      revision: "rev-2"
+    });
+    const server = resource("server", "main", "Server", {
+      addr: "127.0.0.1:38440"
+    }, [
+      field("addr", "Address")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    });
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={server} revision="rev-1" />
+    );
+
+    expect(screen.getByRole("heading", { name: "main" })).toBeInTheDocument();
+    expect(screen.getByText("Restart required")).toBeInTheDocument();
+    expect(screen.getByText("Critical")).toBeInTheDocument();
+  });
+
+  test("renders status metadata pills with uniform icon structure and spacing", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "restartRequired",
+      revision: "rev-2"
+    });
+    const server = resource("server", "main", "Server", {
+      addr: "127.0.0.1:38440"
+    }, [
+      field("addr", "Address")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    });
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ResourceEditorCard resource={server} revision="rev-1" />} />
+      </MemoryRouter>
+    );
+
+    const metadataPills = Array.from(
+      container.querySelectorAll(".resource-editor-card__facts .resource-meta-pill")
+    );
+    const facts = container.querySelector(".resource-editor-card__facts");
+    const statusGroup = container.querySelector(".resource-editor-card__status-group");
+    expect(metadataPills).toHaveLength(4);
+    expect(metadataPills.map((pill) => pill.textContent?.trim())).toEqual([
+      "restart_altRestart required",
+      "priority_highCritical",
+      "list_alt1 field",
+      "restart_altRestart on change"
+    ]);
+    expect(getComputedStyle(statusGroup!).columnGap).toBe(getComputedStyle(facts!).columnGap);
+    for (const pill of metadataPills) {
+      expect(pill.querySelectorAll(".material-symbol[aria-hidden=\"true\"]")).toHaveLength(1);
+      expect(getComputedStyle(pill).padding).toBe("0px 12px");
+    }
+  });
+
+  test("uses low-emphasis error color for critical metadata pills in dark theme", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "restartRequired",
+      revision: "rev-2"
+    });
+    const server = resource("server", "main", "Server", {
+      addr: "127.0.0.1:38440"
+    }, [
+      field("addr", "Address")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    });
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ResourceEditorCard resource={server} revision="rev-1" />} />
+      </MemoryRouter>
+    );
+
+    const criticalPill = container.querySelector(".status-pill--critical");
+    expect(getComputedStyle(criticalPill!).getPropertyValue("--mb-status-danger-container").trim())
+      .toBe("color-mix(in srgb, var(--mb-color-error) 16%, var(--mb-color-surface-container-highest))");
+    expect(getComputedStyle(criticalPill!).getPropertyValue("--mb-status-danger-label").trim())
+      .toBe("color-mix(in srgb, var(--mb-color-error) 72%, var(--mb-color-on-surface))");
+    expect(getComputedStyle(criticalPill!).getPropertyValue("--mb-status-danger-container").trim())
+      .not.toBe("var(--mb-color-error-container)");
+  });
+
+  test("scopes metadata pill geometry to resource editor facts", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "restartRequired",
+      revision: "rev-2"
+    });
+    const server = resource("server", "main", "Server", {
+      addr: "127.0.0.1:38440"
+    }, [
+      field("addr", "Address")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    });
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell
+          content={(
+            <>
+              <span className="resource-meta-pill" data-testid="outside-meta-pill">
+                <span className="material-symbol" aria-hidden="true">info</span>
+                Outside
+              </span>
+              <ResourceEditorCard resource={server} revision="rev-1" />
+            </>
+          )}
+        />
+      </MemoryRouter>
+    );
+
+    const outsidePill = screen.getByTestId("outside-meta-pill");
+    const outsideStyle = getComputedStyle(outsidePill);
+    expect(outsideStyle.minHeight).not.toBe("30px");
+    expect(outsideStyle.paddingLeft).not.toBe("12px");
+    expect(outsideStyle.gap).not.toBe("6px");
+    expect(container.querySelectorAll(".resource-editor-card__facts .resource-meta-pill")).toHaveLength(4);
+  });
+
+  test("localizes resource metadata in Chinese locale", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const server = resource("server", "main", "Server", {
+      addr: "127.0.0.1:38440"
+    }, [
+      field("addr", "Address")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    });
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={server} revision="rev-1" title="Server" />,
+      { locale: "zh-CN" }
+    );
+
+    expect(screen.getByText("需要重启")).toBeInTheDocument();
+    expect(screen.getByText("关键运行时")).toBeInTheDocument();
+    expect(screen.getAllByText("1 个字段").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("变更后重启").length).toBeGreaterThan(0);
+    expect(within(screen.getByLabelText("main 状态")).getByText("需要重启")).toBeInTheDocument();
+  });
+
+  test("renders provider pricing and model overrides as structured panels", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const offer = resource("provider_offer", "anthropic/claude-sonnet", "Provider", {
+      model: "claude-sonnet",
+      upstream_name: "claude-3-5-sonnet",
+      priority: 1,
+      pricing: {
+        input_price: 3,
+        output_price: 15
+      },
+      overrides: {
+        context_window: 200000,
+        supports_reasoning: true,
+        input_modalities: ["text"]
+      }
+    }, [
+      field("model", "Model"),
+      field("upstream_name", "Upstream Name"),
+      field("priority", "Priority", "number", "number"),
+      field("pricing", "Pricing", "object", "object"),
+      field("overrides", "Overrides", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={offer} revision="rev-1" title="Provider" />
+    );
+
+    const identityGroup = screen.getByRole("group", { name: "Identity" });
+    const standardGroup = screen.getByRole("group", { name: "Basic" });
+    const billingGroup = screen.getByRole("group", { name: "Billing" });
+
+    expect(getMaterialTextField(identityGroup, "Provider model")).toBeInTheDocument();
+    expect(getMaterialTextField(identityGroup, "Upstream model name")).toBeInTheDocument();
+    expect(getMaterialTextField(standardGroup, "Provider priority")).toBeInTheDocument();
+    const overridesEditor = getProviderOverrideEditor(standardGroup);
+    expect(overridesEditor).toHaveTextContent("Provider overrides");
+    expect(getMaterialTextField(overridesEditor, "Override context window")).toHaveValue("200000");
+    expect(getMaterialSelectOptions(getMaterialSelect(overridesEditor, "Override supports reasoning"))
+      .find((option) => option.value === "true")?.selected).toBe(true);
+    expect(getEditableList(overridesEditor, "Override input modalities")).toBeInTheDocument();
+    expect(getEditableListItems(overridesEditor, "Override input modalities")).toEqual(["text"]);
+    expect(queryMaterialTextField(standardGroup, "Provider overrides JSON")).not.toBeInTheDocument();
+    expect(within(overridesEditor).queryByText("Readonly structured summary")).not.toBeInTheDocument();
+    expect(() => getStructuredObject(standardGroup, "Pricing")).toThrow("Missing structured object editor: Pricing");
+    expect(queryMaterialTextField(standardGroup, "Pricing JSON")).not.toBeInTheDocument();
+    expect(getMaterialSwitch(billingGroup, "Billing").selected).toBe(true);
+    expect(getMaterialTextField(billingGroup, "Input price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(billingGroup, "Output price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(billingGroup, "Cache write price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(billingGroup, "Cache read price")).toHaveAttribute("spellcheck", "false");
+    expect(screen.queryByRole("group", { name: "Advanced JSON" })).not.toBeInTheDocument();
+
+    setMaterialTextFieldValue(getMaterialTextField(overridesEditor, "Override max output tokens"), "4096");
+    fireEvent.blur(getMaterialTextField(overridesEditor, "Override max output tokens"));
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "provider_offer",
+            id: "anthropic/claude-sonnet",
+            field: "overrides",
+            value: {
+              context_window: 200000,
+              supports_reasoning: true,
+              input_modalities: ["text"],
+              max_output_tokens: 4096
+            }
+          }
+        ]
+      })
+    );
+
+    setMaterialSelectValue(getMaterialSelect(overridesEditor, "Override supports reasoning"), "false");
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-2",
+        changes: [
+          {
+            kind: "provider_offer",
+            id: "anthropic/claude-sonnet",
+            field: "overrides",
+            value: {
+              context_window: 200000,
+              supports_reasoning: false,
+              input_modalities: ["text"],
+              max_output_tokens: 4096
+            }
+          }
+        ]
+      })
+    );
+
+    setMaterialSwitchSelected(getMaterialSwitch(billingGroup, "Billing"), false);
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "provider_offer",
+            id: "anthropic/claude-sonnet",
+            field: "pricing",
+            value: null
+          }
+        ]
+      })
+    );
+    expect(patch).not.toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "provider_offer",
+          id: "anthropic/claude-sonnet",
+          field: "pricing",
+          value: {}
+        }
+      ]
+    });
+
+    await waitFor(() => expect(queryMaterialTextField(billingGroup, "Input price")).not.toBeInTheDocument());
+    setMaterialSwitchSelected(getMaterialSwitch(billingGroup, "Billing"), true);
+    expect(getMaterialTextField(billingGroup, "Input price")).toBeInTheDocument();
+    setMaterialTextFieldValue(getMaterialTextField(billingGroup, "Cache read price"), "0.3");
+    fireEvent.blur(getMaterialTextField(billingGroup, "Cache read price"));
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenLastCalledWith({
+        baseRevision: "rev-2",
+        changes: [
+          {
+            kind: "provider_offer",
+            id: "anthropic/claude-sonnet",
+            field: "pricing",
+            value: {
+              input_price: 0,
+              output_price: 0,
+              cache_write_price: 0,
+              cache_read_price: 0.3
+            }
+          }
+        ]
+      })
+    );
+  });
+
+  test("keeps plain long text fields in basic without a raw JSON editor group", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      display_name: "Claude Sonnet",
+      description: "Balanced model"
+    }, [
+      field("display_name", "Display Name"),
+      field("description", "Description", "string", "textarea")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const settingsGroup = screen.getByRole("group", { name: "Basic" });
+    expect(getMaterialTextField(settingsGroup, "Model description")).toBeInTheDocument();
+    expect(screen.queryByRole("group", { name: "Advanced JSON" })).not.toBeInTheDocument();
+  });
+
+  test("uses a compact four-column identity layout for route target fields", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const route = resource("route", "primary", "Primary Route", {
+      to: "primary",
+      model: "moonbridge-default",
+      provider: "anthropic",
+      display_name: "Primary Route"
+    }, [
+      field("to", "Route Target"),
+      field("model", "Model"),
+      field("provider", "Provider"),
+      field("display_name", "Display Name")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard
+        modelDisplayNames={{ "moonbridge-default": "GPT-4o" }}
+        resource={route}
+        revision="rev-1"
+        title="Route"
+      />
+    );
+
+    const identityGroup = screen.getByRole("group", { name: "Identity" });
+    expect(identityGroup).toHaveClass("resource-field-group--route-identity");
+    const identityGrid = identityGroup.querySelector(".form-grid");
+    expect(identityGrid).toHaveClass("form-grid--route-identity");
+    const targetField = getMaterialTextField(identityGroup, "Route target");
+    const modelField = getMaterialTextField(identityGroup, "Route model");
+    const providerField = getMaterialTextField(identityGroup, "Route provider");
+    const displayNameField = getMaterialTextField(identityGroup, "Route display name");
+    expect([
+      targetField,
+      modelField,
+      providerField,
+      displayNameField
+    ].map((fieldElement) => fieldElement.closest(".form-grid"))).toEqual([
+      identityGrid,
+      identityGrid,
+      identityGrid,
+      identityGrid
+    ]);
+    expectLobeLeadingIcon(targetField);
+    expectLobeLeadingIcon(modelField);
+    expectLobeLeadingIcon(displayNameField);
+  });
+
+  test("infers route target and display-name icons from their own visible text first", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const route = resource("route", "primary", "Primary Route", {
+      to: "claude-sonnet",
+      model: "moonbridge-default",
+      provider: "local",
+      display_name: "Gemini Flash"
+    }, [
+      field("to", "Route Target"),
+      field("model", "Model"),
+      field("provider", "Provider"),
+      field("display_name", "Display Name")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard
+        modelDisplayNames={{ "moonbridge-default": "GPT-4o" }}
+        resource={route}
+        revision="rev-1"
+        title="Route"
+      />
+    );
+
+    const identityGroup = screen.getByRole("group", { name: "Identity" });
+    expectLobeLeadingIcon(getMaterialTextField(identityGroup, "Route target"), "Claude");
+    expectLobeLeadingIcon(getMaterialTextField(identityGroup, "Route model"), "OpenAI");
+    expectLobeLeadingIcon(getMaterialTextField(identityGroup, "Route display name"), "Gemini");
+  });
+
+  test("updates model display-name icon from the draft field value", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      display_name: "Claude Sonnet"
+    }, [
+      field("display_name", "Display Name")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const displayNameField = getMaterialTextField(document, "Model display name");
+    expectLobeLeadingIcon(displayNameField, "Claude");
+    setMaterialTextFieldValue(displayNameField, "GPT-4o");
+    expectLobeLeadingIcon(displayNameField, "OpenAI");
+  });
+
+  test("groups model settings into basic, multimodal, advanced features, and reasoning panels", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      display_name: "Claude Sonnet",
+      context_window: 200000,
+      max_output_tokens: 8192,
+      supports_reasoning: true,
+      default_reasoning_level: "medium",
+      default_reasoning_summary: "auto",
+      description: "Balanced model",
+      base_instructions: "Stay concise.",
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses with lighter reasoning" },
+        { effort: "medium", description: "Balances speed and reasoning depth" },
+        { effort: "high", description: "Greater reasoning depth" }
+      ],
+      input_modalities: ["text", "image"],
+      supports_image_detail_original: true,
+      web_search: { support: "auto", max_uses: 4 },
+      extensions: {
+        visual: { enabled: true }
+      }
+    }, [
+      field("display_name", "Display Name"),
+      field("context_window", "Context Window", "number", "number"),
+      field("max_output_tokens", "Max Output Tokens", "number", "number"),
+      field("supports_reasoning", "Supports Reasoning", "boolean", "switch"),
+      field("default_reasoning_level", "Default Reasoning Level"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("default_reasoning_summary", "Default Reasoning Summary"),
+      field("description", "Description", "string", "textarea"),
+      field("base_instructions", "Base Instructions", "string", "textarea"),
+      field("input_modalities", "Input Modalities", "array", "array"),
+      field("supports_image_detail_original", "Supports Image Detail Original", "boolean", "switch"),
+      field("web_search", "Web Search", "object", "object"),
+      field("extensions", "Extensions", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const reasoningPanel = screen.getByRole("group", { name: "Reasoning" });
+    const basicPanel = screen.getByRole("group", { name: "Basic" });
+    const multimodalPanel = screen.getByRole("group", { name: "Multimodal" });
+    const advancedPanel = screen.getByRole("group", { name: "Advanced Features" });
+    expect(basicPanel).toContainElement(getMaterialTextField(document, "Context window"));
+    expect(basicPanel).toContainElement(getMaterialTextField(document, "Max output tokens"));
+    expect(basicPanel).toContainElement(getMaterialTextField(document, "Model description"));
+    expect(basicPanel).toContainElement(getMaterialTextField(document, "Base instructions"));
+    expect(Array.from(document.querySelectorAll(".resource-field-group")).map((group) => group.getAttribute("aria-label")))
+      .toEqual(["Identity", "Basic", "Reasoning", "Multimodal", "Advanced Features"]);
+    expect(multimodalPanel).toHaveClass("resource-field-group--multimodal");
+    expect(getMaterialIconButton(multimodalPanel, "Toggle Multimodal")).toHaveAttribute("aria-expanded", "false");
+    expect(getMaterialIconButton(advancedPanel, "Toggle Advanced Features")).toHaveAttribute("aria-expanded", "false");
+    expect(queryEditableList(multimodalPanel, "Input modalities")).not.toBeInTheDocument();
+    expect(queryMaterialSelect(advancedPanel, "Model web search mode")).not.toBeInTheDocument();
+
+    fireEvent.click(getMaterialIconButton(multimodalPanel, "Toggle Multimodal"));
+    fireEvent.click(getMaterialIconButton(advancedPanel, "Toggle Advanced Features"));
+
+    expect(getMaterialIconButton(multimodalPanel, "Toggle Multimodal")).toHaveAttribute("aria-expanded", "true");
+    expect(getMaterialIconButton(advancedPanel, "Toggle Advanced Features")).toHaveAttribute("aria-expanded", "true");
+    expect(getEditableList(multimodalPanel, "Input modalities")).toBeInTheDocument();
+    expect(getMaterialSwitch(multimodalPanel, "Supports original image detail")).toBeInTheDocument();
+    expect(advancedPanel).toHaveClass("resource-field-group--advanced");
+    expect(getMaterialSelect(advancedPanel, "Model web search mode")).toBeInTheDocument();
+    expect(getMaterialTextField(advancedPanel, "Model web search max uses")).toBeInTheDocument();
+    expect(getExtensionFeatureRow(advancedPanel, "visual")).toBeInTheDocument();
+    expect(getMaterialSwitch(advancedPanel, "Enable visual extension")).toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Model web search JSON")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Model extensions JSON")).not.toBeInTheDocument();
+    expect(reasoningPanel).toHaveClass("resource-field-group--reasoning");
+    const reasoningSwitch = getMaterialSwitch(reasoningPanel, "Supports reasoning");
+    expect(reasoningSwitch.selected).toBe(true);
+    expect(within(reasoningPanel).queryByText("4 fields")).not.toBeInTheDocument();
+    const defaultLevelCell = getMaterialSelect(reasoningPanel, "Default reasoning level").closest(".form-grid__compact");
+    const defaultSummaryCell = getMaterialTextField(document, "Default reasoning summary").closest(".form-grid__compact");
+    expect(defaultLevelCell).toBeInTheDocument();
+    expect(defaultSummaryCell).toBeInTheDocument();
+    expect(defaultLevelCell?.parentElement).toBe(defaultSummaryCell?.parentElement);
+    expect(defaultLevelCell?.nextElementSibling).toBe(defaultSummaryCell);
+    const reasoningDefaultsRow = getMaterialSelect(document, "Default reasoning level")
+      .closest(".form-grid__reasoning-defaults");
+    expect(reasoningDefaultsRow).toBeInTheDocument();
+    expect(reasoningDefaultsRow).toHaveClass("form-grid__wide");
+    expect(reasoningDefaultsRow).toContainElement(getMaterialTextField(document, "Default reasoning summary"));
+    expect(Array.from(reasoningDefaultsRow!.children).map((child) => child.className)).toEqual([
+      "form-grid__compact",
+      "form-grid__compact"
+    ]);
+    expect(getMaterialSelectOptions(getMaterialSelect(document, "Default reasoning level")).map((option) => option.value))
+      .toEqual(["low", "medium", "high"]);
+    expect(queryMaterialTextField(document, "Default reasoning level")).not.toBeInTheDocument();
+    expect(getMaterialTextField(document, "Model display name").closest(".form-grid__medium")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "Context window").closest(".form-grid__compact")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "Model description").closest(".form-grid__wide")).toBeInTheDocument();
+    expect(getEditableList(reasoningPanel, "Supported reasoning levels")).toBeInTheDocument();
+    expect(getEditableList(multimodalPanel, "Input modalities")).toBeInTheDocument();
+    expect(getEditableListItems(document, "Supported reasoning levels")).toEqual(["low", "medium", "high"]);
+    expect(getEditableListItems(document, "Input modalities")).toEqual(["text", "image"]);
+    expect(getEditableList(document, "Supported reasoning levels").querySelector("md-chip-set")).toBeInTheDocument();
+    expect(getEditableList(document, "Supported reasoning levels").querySelectorAll("md-input-chip")).toHaveLength(3);
+    expect(getMaterialTextField(getEditableList(document, "Supported reasoning levels"), "Add Supported reasoning levels"))
+      .toHaveAttribute("spellcheck", "false");
+    expect(getMaterialButton(getEditableList(document, "Supported reasoning levels"), "Add Supported reasoning levels item", "filled"))
+      .toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Supported reasoning levels JSON")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Input modalities JSON")).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(document, /Supported reasoning levels.*3 items/)).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(document, /Input modalities.*2 items/)).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(document, /Model web search.*1 key/)).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(document, /Model extensions.*1 key/)).not.toBeInTheDocument();
+  });
+
+  test("autosaves model web search through structured Material controls while preserving existing keys", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      web_search: {
+        support: "auto",
+        max_uses: 4,
+        search_max_rounds: 2,
+        tavily_api_key: "******",
+        custom_flag: "keep"
+      }
+    }, [
+      field("web_search", "Web Search", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const advancedPanel = screen.getByRole("group", { name: "Advanced Features" });
+    fireEvent.click(getMaterialIconButton(advancedPanel, "Toggle Advanced Features"));
+    const supportSelect = getMaterialSelect(advancedPanel, "Model web search mode");
+    expect(getMaterialSelectOptions(supportSelect).map((option) => option.value)).toEqual([
+      "auto",
+      "enabled",
+      "disabled",
+      "injected"
+    ]);
+    expect(getMaterialTextField(advancedPanel, "Model web search max uses")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(advancedPanel, "Model web search Tavily API key")).toHaveProperty("type", "password");
+    expect(getMaterialTextField(advancedPanel, "Model web search Firecrawl API key")).toHaveProperty("type", "password");
+    expectWebSearchFieldHelp(advancedPanel, "Model web search max uses", "Limits how many web search calls one request may use.");
+    expectWebSearchFieldHelp(advancedPanel, "Model web search search max rounds", "Maximum number of search rounds per request.");
+    expectWebSearchFieldHelp(advancedPanel, "Model web search Tavily API key", "Tavily secret used by injected web search.");
+    expectWebSearchFieldHelp(advancedPanel, "Model web search Firecrawl API key", "Firecrawl secret used by injected web search to fetch page content.");
+    expect(queryMaterialTextField(advancedPanel, "Model web search JSON")).not.toBeInTheDocument();
+
+    fireEvent.blur(getMaterialTextField(advancedPanel, "Model web search Tavily API key"));
+    expect(patch).not.toHaveBeenCalled();
+
+    setMaterialSelectValueBySelectedOption(supportSelect, "disabled");
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "model",
+            id: "claude-sonnet",
+            field: "web_search",
+            value: {
+              support: "disabled",
+              max_uses: 4,
+              search_max_rounds: 2,
+              tavily_api_key: "******",
+              custom_flag: "keep"
+            }
+          }
+        ]
+      })
+    );
+  });
+
+  test("autosaves provider and route web search through structured Material controls", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      web_search: {
+        support: "injected",
+        tavily_api_key: "******",
+        firecrawl_api_key: "******",
+        search_max_rounds: 2
+      }
+    }, [
+      field("web_search", "Web Search", "object", "object")
+    ]);
+    const { unmount } = renderWithConsoleProviders(
+      <ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />
+    );
+
+    setMaterialTextFieldValue(getMaterialTextField(document, "Provider web search Tavily API key"), "tv-new");
+    fireEvent.blur(getMaterialTextField(document, "Provider web search Tavily API key"));
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "provider",
+            id: "anthropic",
+            field: "web_search",
+            value: {
+              support: "injected",
+              tavily_api_key: "tv-new",
+              firecrawl_api_key: "******",
+              search_max_rounds: 2
+            }
+          }
+        ]
+      })
+    );
+
+    unmount();
+    patch.mockClear();
+    const route = resource("route", "primary", "Primary", {
+      web_search: {
+        support: "auto",
+        max_uses: 3
+      }
+    }, [
+      field("web_search", "Web Search", "object", "object")
+    ]);
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={route} revision="rev-1" title="Route" />
+    );
+
+    setMaterialSelectValueBySelectedOption(getMaterialSelect(document, "Route web search mode"), "enabled");
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "route",
+            id: "primary",
+            field: "web_search",
+            value: {
+              support: "enabled",
+              max_uses: 3
+            }
+          }
+        ]
+      })
+    );
+  });
+
+  test("autosaves model extensions through structured Material controls while preserving extension config", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      extensions: {
+        visual: {
+          enabled: true,
+          config: { provider: "openai", model: "gpt-4.1" },
+          custom_flag: "keep"
+        }
+      }
+    }, [
+      field("extensions", "Extensions", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const advancedPanel = screen.getByRole("group", { name: "Advanced Features" });
+    fireEvent.click(getMaterialIconButton(advancedPanel, "Toggle Advanced Features"));
+    expect(getExtensionFeatureRow(advancedPanel, "visual")).toBeInTheDocument();
+    expect(queryMaterialTextField(advancedPanel, "Model extensions JSON")).not.toBeInTheDocument();
+    expect(getMaterialTextField(advancedPanel, "visual provider")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(advancedPanel, "visual model")).toHaveAttribute("spellcheck", "false");
+
+    setMaterialSwitchSelected(getMaterialSwitch(advancedPanel, "Enable visual extension"), false);
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "model",
+            id: "claude-sonnet",
+            field: "extensions",
+            value: {
+              visual: {
+                enabled: false,
+                config: { provider: "openai", model: "gpt-4.1" },
+                custom_flag: "keep"
+              }
+            }
+          }
+        ]
+      })
+    );
+
+    patch.mockClear();
+    setMaterialTextFieldValue(getMaterialTextField(advancedPanel, "visual model"), "gpt-4.2");
+    fireEvent.blur(getMaterialTextField(advancedPanel, "visual model"));
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-2",
+        changes: [
+          {
+            kind: "model",
+            id: "claude-sonnet",
+            field: "extensions",
+            value: {
+              visual: {
+                enabled: false,
+                config: { provider: "openai", model: "gpt-4.2" },
+                custom_flag: "keep"
+              }
+            }
+          }
+        ]
+      })
+    );
+  });
+
+  test("keeps structured web search help tooltip ids scoped per resource", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      web_search: { support: "auto" }
+    }, [
+      field("web_search", "Web Search", "object", "object")
+    ]);
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      web_search: { support: "auto" }
+    }, [
+      field("web_search", "Web Search", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <>
+        <ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />
+        <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+      </>
+    );
+
+    const providerHelp = getMaterialIconButton(document, "Help for Provider web search max uses");
+    fireEvent.click(getMaterialIconButton(screen.getAllByRole("group", { name: "Advanced Features" })[1], "Toggle Advanced Features"));
+    const modelHelp = getMaterialIconButton(document, "Help for Model web search max uses");
+    fireEvent.focus(providerHelp);
+    fireEvent.focus(modelHelp);
+
+    const describedIds = [
+      providerHelp.getAttribute("aria-describedby"),
+      modelHelp.getAttribute("aria-describedby")
+    ];
+    expect(describedIds.every(Boolean)).toBe(true);
+    expect(new Set(describedIds).size).toBe(2);
+  });
+
+  test("hides model reasoning options when the model does not support reasoning", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "plain-model", "Plain Model", {
+      supports_reasoning: false,
+      default_reasoning_level: "medium",
+      default_reasoning_summary: "auto",
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses" },
+        { effort: "medium", description: "Balanced" }
+      ]
+    }, [
+      field("supports_reasoning", "Supports Reasoning", "boolean", "switch"),
+      field("default_reasoning_level", "Default Reasoning Level"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("supports_reasoning_summaries", "Supports Reasoning Summaries", "boolean", "switch"),
+      field("default_reasoning_summary", "Default Reasoning Summary")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const reasoningPanel = screen.getByRole("group", { name: "Reasoning" });
+    expect(reasoningPanel).toHaveClass("resource-field-group--reasoning");
+    const reasoningSwitch = getMaterialSwitch(reasoningPanel, "Supports reasoning");
+    expect(reasoningSwitch.selected).toBe(false);
+    expect(queryMaterialTextField(reasoningPanel, "Default reasoning summary")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(reasoningPanel, "Supported reasoning levels JSON")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(reasoningPanel, "Default reasoning level")).not.toBeInTheDocument();
+    expect(reasoningPanel.querySelector(".editable-list-field")).not.toBeInTheDocument();
+    expect(reasoningPanel.querySelectorAll("md-switch")).toHaveLength(1);
+
+    setMaterialSwitchSelected(reasoningSwitch, true);
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "model",
+            id: "plain-model",
+            field: "supports_reasoning",
+            value: true
+          }
+        ]
+      })
+    );
+  });
+
+  test("skips model reasoning controls when the support switch is absent from schema", () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "legacy-model", "Legacy Model", {
+      default_reasoning_level: "medium",
+      default_reasoning_summary: "auto",
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses" },
+        { effort: "medium", description: "Balanced" }
+      ],
+      display_name: "Legacy Model"
+    }, [
+      field("default_reasoning_level", "Default Reasoning Level"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("default_reasoning_summary", "Default Reasoning Summary"),
+      field("display_name", "Display Name")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    expect(screen.getByRole("heading", { name: "legacy-model" })).toBeInTheDocument();
+    expect(screen.queryByRole("group", { name: "Reasoning" })).not.toBeInTheDocument();
+    expect(document.querySelector("md-switch[aria-label=\"Supports reasoning\"]")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Default reasoning summary")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Default reasoning level")).not.toBeInTheDocument();
+    expect(document.querySelector(".editable-list-field[aria-label=\"Supported reasoning levels\"]")).not.toBeInTheDocument();
+    expect(getMaterialTextField(document, "Model display name")).toBeInTheDocument();
+  });
+
+  test("autosaves editable model array lists through graph patches", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      supports_reasoning: true,
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses with lighter reasoning" },
+        { effort: "medium", description: "Balances speed and reasoning depth" }
+      ],
+      extensions: {}
+    }, [
+      field("supports_reasoning", "Supports Reasoning", "boolean", "switch"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("extensions", "Extensions", "object", "object")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    setMaterialTextFieldValue(getMaterialTextField(document, "Add Supported reasoning levels"), "high");
+    await userEvent.click(getMaterialButton(document, "Add Supported reasoning levels item", "filled"));
+
+    expect(patch).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "model",
+          id: "claude-sonnet",
+          field: "supported_reasoning_levels",
+          value: [
+            { effort: "low", description: "Fast responses with lighter reasoning" },
+            { effort: "medium", description: "Balances speed and reasoning depth" },
+            { effort: "high" }
+          ]
+        }
+      ]
+    });
+
+    await waitFor(() =>
+      expect(getMaterialInputChip(document, "Remove high from Supported reasoning levels")).toBeInTheDocument()
+    );
+    act(() => {
+      getMaterialInputChip(document, "Remove high from Supported reasoning levels")
+        .dispatchEvent(new Event("remove"));
+    });
+
+    await waitFor(() => expect(patch).toHaveBeenCalledTimes(2));
+    expect(patch).toHaveBeenLastCalledWith({
+      baseRevision: "rev-2",
+      changes: [
+        {
+          kind: "model",
+          id: "claude-sonnet",
+          field: "supported_reasoning_levels",
+          value: [
+            { effort: "low", description: "Fast responses with lighter reasoning" },
+            { effort: "medium", description: "Balances speed and reasoning depth" }
+          ]
+        }
+      ]
+    });
+  });
+
+  test("selects the default reasoning level from supported reasoning levels", async () => {
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const model = resource("model", "claude-sonnet", "Claude Sonnet", {
+      supports_reasoning: true,
+      default_reasoning_level: "medium",
+      default_reasoning_summary: "auto",
+      supported_reasoning_levels: [
+        { effort: "low", description: "Fast responses with lighter reasoning" },
+        { effort: "medium", description: "Balances speed and reasoning depth" },
+        { effort: "high", description: "Greater reasoning depth" }
+      ]
+    }, [
+      field("supports_reasoning", "Supports Reasoning", "boolean", "switch"),
+      field("default_reasoning_level", "Default Reasoning Level"),
+      field("supported_reasoning_levels", "Supported Reasoning Levels", "array", "array"),
+      field("default_reasoning_summary", "Default Reasoning Summary")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={model} revision="rev-1" title="Model" />
+    );
+
+    const defaultLevel = getMaterialSelect(document, "Default reasoning level");
+    await waitFor(() => expect(defaultLevel.value).toBe("medium"));
+    expect(getMaterialSelectOptions(defaultLevel).map((option) => option.value)).toEqual([
+      "low",
+      "medium",
+      "high"
+    ]);
+    expect(queryMaterialTextField(document, "Default reasoning level")).not.toBeInTheDocument();
+
+    setMaterialTextFieldValue(getMaterialTextField(document, "Add Supported reasoning levels"), "xhigh");
+    await userEvent.click(getMaterialButton(document, "Add Supported reasoning levels item", "filled"));
+    await waitFor(() =>
+      expect(getMaterialSelectOptions(defaultLevel).map((option) => option.value)).toEqual([
+        "low",
+        "medium",
+        "high",
+        "xhigh"
+      ])
+    );
+    await waitFor(() => {
+      expect(defaultLevel.options?.map((option) => option.value)).toContain("xhigh");
+    });
+
+    setMaterialSelectValue(defaultLevel, "xhigh");
+
+    await waitFor(() =>
+      expect(patch).toHaveBeenLastCalledWith({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "model",
+            id: "claude-sonnet",
+            field: "default_reasoning_level",
+            value: "xhigh"
+          }
+        ]
+      })
+    );
+  });
+
+  test("uses Material Web buttons for delete confirmation state changes", async () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const remove = vi.spyOn(configGraph, "deleteConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      base_url: "https://api.anthropic.com"
+    }, [
+      field("base_url", "Base URL")
+    ]);
+
+    renderWithConsoleProviders(
+      <ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />
+    );
+
+    const deleteButton = getMaterialButton(document, "Delete Provider anthropic", "filled");
+    expect(deleteButton).toHaveTextContent("Delete");
+
+    await userEvent.click(deleteButton);
+
+    expect(screen.getByText("Delete anthropic? This takes effect after saving."))
+      .toBeInTheDocument();
+    expect(getMaterialButton(document, "Confirm delete anthropic", "filled")).toBeInTheDocument();
+    const cancelButton = getMaterialButton(document, "Cancel", "outlined");
+
+    await userEvent.click(cancelButton);
+
+    expect(screen.queryByText("Delete anthropic? This takes effect after saving."))
+      .not.toBeInTheDocument();
+    expect(remove).not.toHaveBeenCalled();
+
+    await userEvent.click(getMaterialButton(document, "Delete Provider anthropic", "filled"));
+    await userEvent.click(getMaterialButton(document, "Confirm delete anthropic", "filled"));
+
+    await waitFor(() => expect(remove).toHaveBeenCalledWith("provider", "anthropic", "rev-1"));
+  });
+
+  test("keeps delete button icon colors aligned with error-container labels", async () => {
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+    const provider = resource("provider", "anthropic", "Anthropic", {
+      base_url: "https://api.anthropic.com"
+    }, [
+      field("base_url", "Base URL")
+    ]);
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ResourceEditorCard resource={provider} revision="rev-1" title="Provider" />} />
+      </MemoryRouter>
+    );
+
+    const deleteButton = getMaterialButton(container, "Delete Provider anthropic", "filled");
+    expectMaterialFilledButtonContentColors(deleteButton, "var(--mb-color-on-error-container)");
+
+    await userEvent.click(deleteButton);
+
+    const confirmButton = getMaterialButton(container, "Confirm delete anthropic", "filled");
+    expectMaterialFilledButtonContentColors(confirmButton, "var(--mb-color-on-error)");
+  });
+});
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => materialElementLabel(textField as HTMLElement & { label?: string }) === label
+  );
+  if (!element) {
+    throw new Error(`Missing md-outlined-text-field: ${label}`);
+  }
+  return element as HTMLElement & { label: string; type: string; value: string };
+}
+
+function expectLobeLeadingIcon(fieldElement: HTMLElement, title?: string) {
+  const leadingIcon = fieldElement.querySelector("[slot='leading-icon']");
+  expect(leadingIcon).toBeInTheDocument();
+  expect(leadingIcon?.querySelector("svg")).toBeInTheDocument();
+  if (title) {
+    expect(leadingIcon?.querySelector("title")).toHaveTextContent(title);
+  }
+}
+
+function expectFieldGroupHeadersToBeTitleOnly(fieldGroups: NodeListOf<Element>) {
+  for (const group of Array.from(fieldGroups)) {
+    const header = group.querySelector(".resource-field-group__header");
+    expect(header).toBeInTheDocument();
+    expect(header?.querySelector("h4")).toBeInTheDocument();
+    expect(header?.querySelector("h4")?.textContent?.trim()).not.toBe("");
+    const directSpanChildren = Array.from(header?.children ?? []).filter((child) =>
+      child.tagName.toLowerCase() === "span" && !child.classList.contains("resource-field-group__switch")
+    );
+    expect(directSpanChildren).toHaveLength(0);
+  }
+}
+
+function getSwitchBankGridTemplateRule() {
+  for (const styleElement of Array.from(document.querySelectorAll("style"))) {
+    const css = styleElement.textContent ?? "";
+    const match = css.match(/\.switch-bank\s*\{[^}]*grid-template-columns\s*:\s*([^;]+);/);
+    if (match) {
+      return match[1].trim();
+    }
+  }
+  throw new Error("Missing .switch-bank grid-template-columns rule.");
+}
+
+function expectWebSearchFieldHelp(container: ParentNode, fieldLabel: string, bodyText: string) {
+  const textField = getMaterialTextField(container, fieldLabel);
+  const helpButton = getMaterialIconButton(textField, `Help for ${fieldLabel}`);
+  expect(helpButton).toHaveAttribute("slot", "trailing-icon");
+
+  fireEvent.focus(helpButton);
+
+  const tooltip = screen.getByText(bodyText).closest("[role='tooltip']");
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toHaveTextContent(fieldLabel);
+}
+
+function queryMaterialTextField(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => materialElementLabel(textField as HTMLElement & { label?: string }) === label
+  ) ?? null;
+}
+
+function getEditableList(container: ParentNode, label: string) {
+  const element = queryEditableList(container, label);
+  if (!element) {
+    throw new Error(`Missing editable list: ${label}`);
+  }
+  return element;
+}
+
+function queryEditableList(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll<HTMLElement>(".editable-list-field")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  ) ?? null;
+}
+
+function getEditableListItems(container: ParentNode, label: string) {
+  return Array.from(getEditableList(container, label).querySelectorAll("md-input-chip"))
+    .map((item) => item.textContent?.trim() ?? "");
+}
+
+function getExtensionFeatureRow(container: ParentNode, name: string) {
+  const element = Array.from(container.querySelectorAll<HTMLElement>(".extension-feature-row")).find(
+    (candidate) => candidate.getAttribute("data-extension-name") === name
+  );
+  if (!element) {
+    throw new Error(`Missing extension feature row: ${name}`);
+  }
+  return element;
+}
+
+function getMaterialInputChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-input-chip")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Missing md-input-chip: ${label}`);
+  }
+  return element;
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = queryMaterialSelect(container, label);
+  if (!element) {
+    throw new Error(`Missing md-outlined-select: ${label}`);
+  }
+  return element as HTMLElement & {
+    options?: Array<{ value: string }>;
+    select: (value: string) => void;
+    value: string;
+  };
+}
+
+function queryMaterialSelect(container: ParentNode, label: string) {
+  return (Array.from(container.querySelectorAll("md-outlined-select")).find(
+    (selectElement) => materialElementLabel(selectElement as HTMLElement & { label?: string }) === label
+  ) ?? null) as HTMLElement & {
+    options?: Array<{ value: string }>;
+    select: (value: string) => void;
+    value: string;
+  } | null;
+}
+
+type MaterialSelectOptionElement = HTMLElement & {
+  displayText: string;
+  selected: boolean;
+  value: string;
+};
+
+function getMaterialSelectOptions(select: ParentNode) {
+  const options = Array.from(select.querySelectorAll<MaterialSelectOptionElement>("md-select-option"));
+  if (options.length === 0) {
+    throw new Error("Expected Material Web select options to be rendered.");
+  }
+  return options;
+}
+
+function getMaterialSwitch(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-switch")).find(
+    (switchElement) => switchElement.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Missing md-switch: ${label}`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function getMaterialButton(
+  container: ParentNode,
+  label: string | RegExp,
+  variant: "filled" | "outlined"
+) {
+  const tagName = variant === "filled" ? "md-filled-button" : "md-outlined-button";
+  const element = Array.from(container.querySelectorAll(tagName)).find(
+    (button) => {
+      const accessibleLabel = button.getAttribute("aria-label") ?? button.textContent ?? "";
+      return typeof label === "string" ? accessibleLabel.trim() === label : label.test(accessibleLabel);
+    }
+  );
+  if (!element) {
+    throw new Error(`Missing ${tagName} button: ${label}`);
+  }
+  expect(element.tagName.toLowerCase()).toBe(tagName);
+  return element;
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Missing md-icon-button: ${label}`);
+  }
+  return element as HTMLElement;
+}
+
+function queryMaterialOutlinedButton(container: ParentNode, label: string | RegExp) {
+  return Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (button) => {
+      const accessibleLabel = button.getAttribute("aria-label") ?? button.textContent ?? "";
+      return typeof label === "string" ? accessibleLabel.trim() === label : label.test(accessibleLabel);
+    }
+  ) ?? null;
+}
+
+function getStructuredObject(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll(".schema-structured-object")).find(
+    (summary) => summary.getAttribute("aria-label")?.startsWith(`${label},`)
+  );
+  if (!element) {
+    throw new Error(`Missing structured object editor: ${label}`);
+  }
+  return element as HTMLElement;
+}
+
+function getProviderOverrideEditor(container: ParentNode) {
+  const element = container.querySelector<HTMLElement>(".provider-overrides-editor");
+  if (!element) {
+    throw new Error("Missing provider overrides editor.");
+  }
+  return element;
+}
+
+function expectMaterialFilledButtonContentColors(button: Element, colorToken: string) {
+  expect(button.tagName.toLowerCase()).toBe("md-filled-button");
+  for (const property of [
+    "--md-filled-button-label-text-color",
+    "--md-filled-button-hover-label-text-color",
+    "--md-filled-button-focus-label-text-color",
+    "--md-filled-button-pressed-label-text-color",
+    "--md-filled-button-icon-color",
+    "--md-filled-button-hover-icon-color",
+    "--md-filled-button-focus-icon-color",
+    "--md-filled-button-pressed-icon-color"
+  ]) {
+    expect(getComputedStyle(button).getPropertyValue(property).trim()).toBe(colorToken);
+  }
+}
+
+function setMaterialTextFieldValue(
+  element: HTMLElement & { value: string },
+  value: string
+) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function setMaterialSelectValue(element: HTMLElement & { select: (value: string) => void; value: string }, value: string) {
+  act(() => {
+    element.select(value);
+    element.value = value;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function setMaterialSelectValueBySelectedOption(
+  element: HTMLElement & { value: string },
+  value: string
+) {
+  act(() => {
+    for (const option of Array.from(element.querySelectorAll<MaterialSelectOptionElement>("md-select-option"))) {
+      const optionValue = option.value || option.getAttribute("value") || option.displayText;
+      option.selected = optionValue === value;
+    }
+    element.value = "";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function setMaterialSwitchSelected(element: HTMLElement & { selected: boolean }, selected: boolean) {
+  act(() => {
+    element.selected = selected;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
diff --git a/webui/src/features/configGraph/ResourceEditorCard.tsx b/webui/src/features/configGraph/ResourceEditorCard.tsx
new file mode 100644
index 00000000..f25282fa
--- /dev/null
+++ b/webui/src/features/configGraph/ResourceEditorCard.tsx
@@ -0,0 +1,2882 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from "react";
+import { motion } from "motion/react";
+import type { ConfigResource, FieldError, FieldSchema, ResourceKind, ResourceStatus, RuntimeImpact } from "../../rpc/types";
+import { configDescriptions, type ConfigPath } from "../../configDocs/configDescriptions";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { MessageKey } from "../../i18n/messages";
+import { springs } from "../../theme/motion";
+import { MaterialFilledButton, MaterialIconButton, MaterialOutlinedButton } from "../../components/MaterialButton";
+import { MaterialInputChip } from "../../components/MaterialInputChip";
+import { MaterialSelect, type MaterialSelectOption } from "../../components/MaterialSelect";
+import { MaterialSwitch } from "../../components/MaterialSwitch";
+import { MaterialOutlinedTextField } from "../../components/MaterialTextField";
+import { EditorStatusProvider, useReportFieldStatus, type FieldStatusReporter } from "./editorStatus";
+import { GraphResourceField } from "./GraphResourceField";
+import { modelIconForName } from "./modelProviderIcons";
+import { type TooltipPosition, useAnchoredTooltipPosition } from "./helpTooltipPosition";
+import { useAutosaveField, type AutosaveFieldStatus, type SaveFieldRequest } from "./useAutosaveField";
+import { useDeleteConfigResource, useGraphFieldSaver } from "./useConfigGraph";
+import { configDocPathForResource } from "./configDocPath";
+import type { MdIconButton } from "@material/web/iconbutton/icon-button.js";
+
+const statusLabelKeys: Record<ResourceStatus, MessageKey> = {
+  saved: "resource.status.saved",
+  needsAttention: "resource.status.needsAttention",
+  restartRequired: "resource.status.restartRequired"
+};
+
+const impactLabelKeys: Record<RuntimeImpact, MessageKey> = {
+  normal: "resource.impact.normal",
+  critical: "resource.impact.critical"
+};
+
+const statusIcons: Record<ResourceStatus, string> = {
+  saved: "check_circle",
+  needsAttention: "report",
+  restartRequired: "restart_alt"
+};
+
+const impactIcons: Record<RuntimeImpact, string> = {
+  normal: "info",
+  critical: "priority_high"
+};
+
+const deletableKinds = new Set<ResourceKind>([
+  "extension",
+  "model",
+  "provider",
+  "provider_offer",
+  "route"
+]);
+
+export function ResourceEditorCard({
+  ariaLabel,
+  children,
+  embedded = false,
+  modelDisplayNames = {},
+  onOpenEditor,
+  resource,
+  revision,
+  title,
+  variant = "full"
+}: {
+  ariaLabel?: string;
+  children?: ReactNode;
+  embedded?: boolean;
+  modelDisplayNames?: Record<string, string>;
+  onOpenEditor?: () => void;
+  resource: ConfigResource;
+  revision: string;
+  title?: string;
+  variant?: "full" | "summary";
+}) {
+  const { t } = useI18n();
+  const deleteResource = useDeleteConfigResource();
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const [deleteError, setDeleteError] = useState("");
+  const [fieldStatuses, setFieldStatuses] = useState<Record<string, AutosaveFieldStatus>>({});
+  const reportFieldStatus = useCallback<FieldStatusReporter>((id, status) => {
+    setFieldStatuses((current) => (current[id] === status ? current : { ...current, [id]: status }));
+  }, []);
+  const liveStatus = useMemo(() => deriveLiveStatus(fieldStatuses), [fieldStatuses]);
+  const fieldCount = resource.schema.fields.length;
+  const reloadText = resource.hotReloadable
+    ? t("resource.reload.hot")
+    : t("resource.reload.restart");
+  const label = ariaLabel ?? resource.id;
+  const fieldGroups = groupFields(resource.kind, resource.schema.fields);
+  const resourceTitle = title ?? resource.label;
+  const canDelete = deletableKinds.has(resource.kind);
+  const summary = variant === "summary";
+
+  async function confirmDelete() {
+    setDeleteError("");
+    try {
+      await deleteResource.mutateAsync({
+        kind: resource.kind,
+        id: resource.id,
+        baseRevision: revision
+      });
+    } catch (cause) {
+      setDeleteError(errorMessage(cause, t("error.requestFailed")));
+    }
+  }
+
+  const cardClassName = [
+    "resource-editor-card",
+    summary ? "resource-editor-card--summary" : "",
+    embedded ? "resource-editor-card--embedded" : ""
+  ].filter(Boolean).join(" ");
+
+  // In summary rows we hide the operational markers (live save state, runtime impact,
+  // hot-reload) and only surface a status pill when something actually needs attention,
+  // so the list stays scannable and the freed room shows key field details instead.
+  const showStatusInSummary = resource.status !== "saved";
+  const statusGroup = (!summary || showStatusInSummary) ? (
+    <span className="resource-editor-card__status-group" aria-label={t("resource.statusGroupLabel", { label })}>
+      <span className={`resource-meta-pill status-pill status-pill--${resource.status}`}>
+        <span className="material-symbol" aria-hidden="true">
+          {statusIcon(resource.status)}
+        </span>
+        {t(statusLabelKeys[resource.status])}
+      </span>
+      {!summary && resource.runtimeImpact === "critical" ? (
+        <span className="resource-meta-pill status-pill status-pill--critical">
+          <span className="material-symbol" aria-hidden="true">
+            {impactIcon(resource.runtimeImpact)}
+          </span>
+          {t(impactLabelKeys[resource.runtimeImpact])}
+        </span>
+      ) : null}
+      {!summary && liveStatus ? (
+        <motion.span
+          key={liveStatus}
+          className={`resource-meta-pill editor-live-status editor-live-status--${liveStatus}`}
+          initial={{ opacity: 0, scale: 0.85, y: -2 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={springs.spatialFast}
+        >
+          <span className="material-symbol" aria-hidden="true">
+            {liveStatusIcon(liveStatus)}
+          </span>
+          {t(liveStatusKeys[liveStatus])}
+        </motion.span>
+      ) : null}
+    </span>
+  ) : null;
+
+  return (
+    <motion.section
+      aria-label={label}
+      className={cardClassName}
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={springs.spatial}
+    >
+      <div className={`resource-editor-card__header${summary ? " resource-editor-card__header--summary" : ""}`}>
+        <div className="resource-editor-card__identity">
+          <div className="resource-editor-card__identity-line">
+            <span className="resource-kind-icon material-symbol" aria-hidden="true">
+              {kindIcon(resource.kind)}
+            </span>
+            {summary ? summaryIdentityBadge(resource) : null}
+            <h3>{resource.id}</h3>
+          </div>
+          <div className="resource-editor-card__facts">
+            {statusGroup}
+            {summary
+              ? summaryValueFacts(resource, t).map((fact) => (
+                  <span className="resource-meta-pill resource-fact" key={fact.key}>
+                    <span className="material-symbol" aria-hidden="true">{fact.icon}</span>
+                    {fact.text}
+                  </span>
+                ))
+              : (
+                <span className="resource-meta-pill resource-fact">
+                  <span className="material-symbol" aria-hidden="true">list_alt</span>
+                  {t(fieldCount === 1 ? "resource.fieldCount.one" : "resource.fieldCount.many", { count: fieldCount })}
+                </span>
+              )}
+            {!summary ? (
+              <span className={`resource-meta-pill resource-fact resource-fact--${resource.hotReloadable ? "hot" : "restart"}`}>
+                <span className="material-symbol" aria-hidden="true">
+                  {resource.hotReloadable ? "bolt" : "restart_alt"}
+                </span>
+                {reloadText}
+              </span>
+            ) : null}
+          </div>
+        </div>
+        <div className="resource-editor-card__meta">
+          {summary && onOpenEditor ? (
+            <MaterialOutlinedButton
+              ariaLabel={t("resource.openEditor", { title: resourceTitle, id: resource.id })}
+              icon="tune"
+              onClick={() => onOpenEditor()}
+            >
+              {t("resource.editShort")}
+            </MaterialOutlinedButton>
+          ) : null}
+          {canDelete ? (
+            <MaterialFilledButton
+              ariaLabel={t("resource.delete", { title: resourceTitle, id: resource.id })}
+              className="fab-button fab-button--danger"
+              icon="delete"
+              onClick={() => {
+                setConfirmingDelete(true);
+                setDeleteError("");
+              }}
+            >
+              {t("resource.deleteShort")}
+            </MaterialFilledButton>
+          ) : null}
+        </div>
+      </div>
+
+      {confirmingDelete ? (
+        <motion.div
+          className="resource-delete-confirmation"
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={springs.spatial}
+        >
+          <p>{t("resource.deletePrompt", { id: resource.id })}</p>
+          {deleteError ? (
+            <p className="field-error" role="alert">
+              {deleteError}
+            </p>
+          ) : null}
+          <div className="resource-delete-confirmation__actions">
+            <MaterialFilledButton
+              ariaLabel={t("resource.confirmDelete", { id: resource.id })}
+              className="resource-delete-confirmation__confirm"
+              disabled={deleteResource.isPending}
+              onClick={confirmDelete}
+            >
+              {t("resource.confirmDeleteShort")}
+            </MaterialFilledButton>
+            <MaterialOutlinedButton
+              ariaLabel={t("resource.cancelDelete")}
+              className="secondary-button"
+              onClick={() => {
+                setConfirmingDelete(false);
+                setDeleteError("");
+              }}
+            >
+              {t("resource.cancelDelete")}
+            </MaterialOutlinedButton>
+          </div>
+        </motion.div>
+      ) : null}
+
+      {summary ? null : (
+        <EditorStatusProvider report={reportFieldStatus}>
+          <ResourceFieldGroups
+            alwaysExpanded={embedded}
+            fieldGroups={fieldGroups}
+            modelDisplayNames={modelDisplayNames}
+            resource={resource}
+            revision={revision}
+          >
+            {children}
+          </ResourceFieldGroups>
+        </EditorStatusProvider>
+      )}
+    </motion.section>
+  );
+}
+
+/** Brand/icon badge shown next to a resource id in summary rows (e.g. model/route). */
+function summaryIdentityBadge(resource: ConfigResource) {
+  const candidate =
+    resource.kind === "route"
+      ? stringValue(resource.value.model) || resource.id
+      : resource.kind === "model"
+        ? stringValue(resource.value.display_name) || resource.id
+        : resource.id;
+  return modelIconForName(candidate) ?? null;
+}
+
+type SummaryFact = { key: string; icon: string; text: string };
+
+/**
+ * A few value-derived facts shown in summary rows so users can tell entries apart
+ * without opening the editor. Kept defensive: missing values simply yield no pill.
+ */
+function summaryValueFacts(resource: ConfigResource, t: ReturnType<typeof useI18n>["t"]): SummaryFact[] {
+  const value = resource.value ?? {};
+  const facts: SummaryFact[] = [];
+  const push = (key: string, icon: string, text: string) => {
+    if (text) facts.push({ key, icon, text });
+  };
+
+  if (resource.kind === "provider") {
+    const protocol = stringValue(value.protocol);
+    push("protocol", "swap_horiz", protocolLabel(protocol, t));
+    push("host", "link", hostFromUrl(stringValue(value.base_url)));
+    if (stringValue(value.api_key)) {
+      push("key", "vpn_key", t("resource.fact.keySet"));
+    }
+    const version = stringValue(value.version);
+    if (version) {
+      push("version", "history", version);
+    }
+  } else if (resource.kind === "model") {
+    const displayName = stringValue(value.display_name);
+    if (displayName && displayName !== resource.id) {
+      push("displayName", "label", displayName);
+    }
+    const ctx = numberValue(value.context_window);
+    if (typeof ctx === "number") {
+      push("context", "memory", formatContextWindow(ctx));
+    }
+    const maxOutput = numberValue(value.max_output_tokens);
+    if (typeof maxOutput === "number") {
+      push("maxout", "output", formatContextWindow(maxOutput));
+    }
+  } else if (resource.kind === "route") {
+    const model = stringValue(value.model);
+    const provider = stringValue(value.provider);
+    if (model) {
+      push("model", "smart_toy", model);
+    }
+    if (provider) {
+      push("provider", "cloud", provider);
+    }
+    const ctx = numberValue(value.context_window);
+    if (typeof ctx === "number") {
+      push("context", "memory", formatContextWindow(ctx));
+    }
+  } else if (resource.kind === "provider_offer") {
+    const priority = numberValue(value.priority);
+    if (typeof priority === "number") {
+      push("priority", "format_list_numbered", `#${priority}`);
+    }
+    const upstream = stringValue(value.upstream_name);
+    if (upstream) {
+      push("upstream", "arrow_forward", upstream);
+    }
+  }
+
+  return facts;
+}
+
+function protocolLabel(protocol: string, t: ReturnType<typeof useI18n>["t"]): string {
+  switch (protocol) {
+    case "anthropic":
+      return t("provider.protocol.anthropic");
+    case "google-genai":
+    case "googleGenai":
+      return t("provider.protocol.googleGenai");
+    case "openai-chat":
+    case "openaiChat":
+      return t("provider.protocol.openaiChat");
+    case "openai-response":
+    case "openaiResponses":
+      return t("provider.protocol.openaiResponses");
+    default:
+      return protocol;
+  }
+}
+
+function hostFromUrl(url: string): string {
+  if (!url) {
+    return "";
+  }
+  try {
+    return new URL(url).host;
+  } catch {
+    return url.replace(/^https?:\/\//, "").split("/")[0];
+  }
+}
+
+function formatContextWindow(tokens: number): string {
+  if (tokens >= 1000) {
+    return `${Math.round(tokens / 1000)}k ctx`;
+  }
+  return `${tokens} ctx`;
+}
+
+function stringValue(value: unknown): string {
+  return typeof value === "string" ? value : "";
+}
+
+function numberValue(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+type FieldGroup = {
+  key: "identity" | "basic" | "billing" | "multimodal" | "reasoning" | "advancedFeatures";
+  labelKey: MessageKey;
+  fields: FieldSchema[];
+};
+
+function ResourceFieldGroups({
+  alwaysExpanded,
+  children,
+  fieldGroups,
+  modelDisplayNames,
+  resource,
+  revision
+}: {
+  alwaysExpanded?: boolean;
+  children?: ReactNode;
+  fieldGroups: FieldGroup[];
+  modelDisplayNames: Record<string, string>;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const hasReasoningSupportField = resource.kind === "model" &&
+    resource.schema.fields.some((field) => field.path === "supports_reasoning");
+  const reasoningLevelsField = hasReasoningSupportField
+    ? resource.schema.fields.find((field) => field.path === "supported_reasoning_levels")
+    : undefined;
+  const modelReasoningLevels = useModelReasoningLevels(resource, revision, reasoningLevelsField);
+
+  return (
+    <div className="resource-field-groups">
+      {fieldGroups.map((group) => (
+        <ResourceFieldGroup
+          alwaysExpanded={alwaysExpanded}
+          group={group}
+          key={group.key}
+          modelDisplayNames={modelDisplayNames}
+          modelReasoningLevels={modelReasoningLevels}
+          resource={resource}
+          revision={revision}
+        />
+      ))}
+      {children}
+    </div>
+  );
+}
+
+function ResourceFieldGroup({
+  alwaysExpanded,
+  group,
+  modelDisplayNames,
+  modelReasoningLevels,
+  resource,
+  revision
+}: {
+  alwaysExpanded?: boolean;
+  group: FieldGroup;
+  modelDisplayNames: Record<string, string>;
+  modelReasoningLevels: ModelReasoningLevelsState | undefined;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const collapsible = !alwaysExpanded && isCollapsibleResourceFieldGroup(resource.kind, group);
+  const [open, setOpen] = useState(!collapsible);
+  if (group.key === "reasoning") {
+    return (
+      <ReasoningFieldGroup
+        group={group}
+        modelReasoningLevels={modelReasoningLevels}
+        resource={resource}
+        revision={revision}
+      />
+    );
+  }
+  if (group.key === "billing") {
+    return (
+      <ProviderOfferBillingGroup
+        group={group}
+        resource={resource}
+        revision={revision}
+      />
+    );
+  }
+  const toggleFields = group.fields.filter(isToggleField);
+  const inputFields = group.fields.filter((field) => !isToggleField(field));
+  const bodyId = `${resource.kind}-${resource.id}-${group.key}-fields`.replace(/[^a-zA-Z0-9_-]/g, "-");
+  const label = t(group.labelKey);
+
+  return (
+    <div
+      aria-label={label}
+      className={fieldGroupClass(resource.kind, group, collapsible && !open)}
+      role="group"
+    >
+      <div className="resource-field-group__header">
+        <h4>
+          <span className="material-symbol" aria-hidden="true">
+            {fieldGroupIcon(group)}
+          </span>
+          {label}
+        </h4>
+        {collapsible ? (
+          <MaterialIconButton
+            ariaExpanded={open}
+            className="resource-field-group__toggle"
+            controls={bodyId}
+            icon="chevron_right"
+            label={t("resource.group.toggle", { label })}
+            onClick={() => setOpen((current) => !current)}
+          />
+        ) : null}
+      </div>
+      {open ? (
+        <div className="resource-field-group__body" id={bodyId}>
+          {inputFields.length ? (
+            <div className={fieldGridContainerClass(resource.kind, group)}>
+              {renderInputFields(resource, revision, group, inputFields, modelDisplayNames, modelReasoningLevels)}
+            </div>
+          ) : null}
+          {toggleFields.length ? (
+            <div className="switch-bank">
+              {toggleFields.map((field) => (
+                <GraphResourceField
+                  field={field}
+                  modelDisplayNames={modelDisplayNames}
+                  objectDisplay={fieldObjectDisplay(resource.kind, field, group)}
+                  resource={resource}
+                  revision={revision}
+                  key={`${resource.kind}-${resource.id}-${field.path}`}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ReasoningFieldGroup({
+  group,
+  modelReasoningLevels,
+  resource,
+  revision
+}: {
+  group: FieldGroup;
+  modelReasoningLevels: ModelReasoningLevelsState | undefined;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const reasoningSupportField = group.key === "reasoning"
+    ? group.fields.find((field) => field.path === "supports_reasoning")
+    : undefined;
+  const reasoningSupport = useModelReasoningSupport(resource, revision, reasoningSupportField);
+  const supportsReasoning = requiredModelReasoningSupport(reasoningSupport).value;
+  const visibleFields = group.fields.filter((field) => field.path !== "supports_reasoning");
+  const toggleFields = visibleFields.filter(isToggleField);
+  const inputFields = visibleFields.filter((field) => !isToggleField(field));
+
+  return (
+    <div
+      aria-label={t(group.labelKey)}
+      className={fieldGroupClass(resource.kind, group)}
+      role="group"
+    >
+      <div className="resource-field-group__header">
+        <h4>
+          <span className="material-symbol" aria-hidden="true">
+            {fieldGroupIcon(group)}
+          </span>
+          {t(group.labelKey)}
+        </h4>
+        {reasoningSupportField ? (
+          <ReasoningSupportSwitch
+            autosave={requiredModelReasoningSupport(reasoningSupport)}
+            field={reasoningSupportField}
+            resource={resource}
+          />
+        ) : null}
+      </div>
+      {supportsReasoning && inputFields.length ? (
+        <div className={fieldGridContainerClass(resource.kind, group)}>
+          {renderInputFields(resource, revision, group, inputFields, {}, modelReasoningLevels)}
+        </div>
+      ) : null}
+      {supportsReasoning && toggleFields.length ? (
+        <div className="switch-bank">
+          {toggleFields.map((field) => (
+            <GraphResourceField
+              field={field}
+              objectDisplay={fieldObjectDisplay(resource.kind, field, group)}
+              resource={resource}
+              revision={revision}
+              key={`${resource.kind}-${resource.id}-${field.path}`}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const advancedFeaturePaths = new Set(["web_search", "extensions"]);
+const modelMultimodalPaths = new Set([
+  "input_modalities",
+  "supports_image_detail_original"
+]);
+const modelReasoningPaths = new Set([
+  "supports_reasoning",
+  "default_reasoning_level",
+  "supported_reasoning_levels",
+  "supports_reasoning_summaries",
+  "default_reasoning_summary"
+]);
+const modelReasoningDefaultsPaths = [
+  "default_reasoning_level",
+  "default_reasoning_summary"
+] as const;
+const modelEditableListPaths = new Set(["input_modalities"]);
+const structuredFeatureKinds = new Set<ResourceKind>(["model", "provider", "route"]);
+const providerOfferBillingPaths = new Set(["pricing"]);
+
+const kindIcons: Record<string, string> = {
+  provider: "dns",
+  offer: "smart_toy",
+  model: "smart_toy",
+  route: "alt_route",
+  defaults: "tune",
+  server: "lan",
+  cache: "database",
+  persistence: "save",
+  store: "database",
+  proxy: "swap_horiz",
+  plugin: "extension",
+  extension: "extension"
+};
+
+function kindIcon(kind: string): string {
+  return kindIcons[kind] ?? "tune";
+}
+
+function statusIcon(status: ResourceStatus): string {
+  return statusIcons[status];
+}
+
+function impactIcon(impact: RuntimeImpact): string {
+  return impactIcons[impact];
+}
+
+function isToggleField(field: FieldSchema): boolean {
+  return field.type === "boolean" || field.control === "switch";
+}
+
+function deriveLiveStatus(
+  statuses: Record<string, AutosaveFieldStatus>
+): "saving" | "error" | "dirty" | null {
+  const values = Object.values(statuses);
+  if (values.includes("saving")) {
+    return "saving";
+  }
+  if (values.includes("error")) {
+    return "error";
+  }
+  if (values.includes("dirty")) {
+    return "dirty";
+  }
+  return null;
+}
+
+const liveStatusKeys: Record<"saving" | "error" | "dirty", MessageKey> = {
+  saving: "editor.liveSaving",
+  error: "editor.liveError",
+  dirty: "editor.liveUnsaved"
+};
+
+function liveStatusIcon(status: "saving" | "error" | "dirty") {
+  if (status === "saving") {
+    return "progress_activity";
+  }
+  if (status === "error") {
+    return "error";
+  }
+  return "edit";
+}
+
+function groupFields(kind: ResourceKind, fields: FieldSchema[]): FieldGroup[] {
+  const canRenderModelReasoning = kind === "model" &&
+    fields.some((field) => field.path === "supports_reasoning");
+  const groups: Record<FieldGroup["key"], FieldGroup> = {
+    identity: { key: "identity", labelKey: "resource.group.identity", fields: [] },
+    basic: { key: "basic", labelKey: "resource.group.basic", fields: [] },
+    billing: { key: "billing", labelKey: "resource.group.billing", fields: [] },
+    multimodal: { key: "multimodal", labelKey: "resource.group.multimodal", fields: [] },
+    reasoning: { key: "reasoning", labelKey: "resource.group.reasoning", fields: [] },
+    advancedFeatures: { key: "advancedFeatures", labelKey: "resource.group.advancedFeatures", fields: [] }
+  };
+
+  const order: FieldGroup["key"][] = kind === "model"
+    ? ["identity", "basic", "reasoning", "multimodal", "advancedFeatures", "billing"]
+    : ["identity", "basic", "billing", "multimodal", "advancedFeatures", "reasoning"];
+
+  for (const field of fields) {
+    if (isIdentityField(field)) {
+      groups.identity.fields.push(field);
+    } else if (isProviderOfferBillingField(kind, field)) {
+      groups.billing.fields.push(field);
+    } else if (isModelMultimodalField(kind, field)) {
+      groups.multimodal.fields.push(field);
+    } else if (isModelReasoningField(kind, field) && canRenderModelReasoning) {
+      groups.reasoning.fields.push(field);
+    } else if (isAdvancedFeatureField(kind, field)) {
+      groups.advancedFeatures.fields.push(field);
+    } else if (isModelReasoningField(kind, field)) {
+      continue;
+    } else {
+      groups.basic.fields.push(field);
+    }
+  }
+
+  if (kind === "model") {
+    groups.basic.fields = orderModelBasicFields(groups.basic.fields);
+    groups.reasoning.fields = orderModelReasoningFields(groups.reasoning.fields);
+  }
+
+  return order.map((key) => groups[key]).filter((group) => group.fields.length > 0);
+}
+
+function isIdentityField(field: FieldSchema) {
+  return [
+    "addr",
+    "base_url",
+    "display_name",
+    "model",
+    "mode",
+    "provider",
+    "protocol",
+    "to",
+    "upstream_name"
+  ].includes(field.path);
+}
+
+function isAdvancedFeatureField(kind: ResourceKind, field: FieldSchema) {
+  return structuredFeatureKinds.has(kind) && advancedFeaturePaths.has(field.path);
+}
+
+function isModelReasoningField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "model" && modelReasoningPaths.has(field.path);
+}
+
+function isModelMultimodalField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "model" && modelMultimodalPaths.has(field.path);
+}
+
+function isProviderOfferBillingField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "provider_offer" && providerOfferBillingPaths.has(field.path);
+}
+
+function isProviderOfferOverridesField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "provider_offer" && field.path === "overrides";
+}
+
+function fieldGroupClass(kind: ResourceKind, group: FieldGroup, collapsed = false) {
+  const base = `resource-field-group resource-field-group--${group.key}`;
+  const classes = [base];
+  if (group.key === "advancedFeatures" || group.key === "billing" || group.key === "multimodal" || group.key === "reasoning") {
+    classes.push("resource-field-group--advanced");
+  }
+  if (group.key === "multimodal") {
+    classes.push("resource-field-group--multimodal");
+  }
+  if (group.key === "reasoning") {
+    classes.push("resource-field-group--reasoning");
+  }
+  if (kind === "route" && group.key === "identity") {
+    classes.push("resource-field-group--route-identity");
+  }
+  if (collapsed) {
+    classes.push("resource-field-group--collapsed");
+  }
+  return classes.join(" ");
+}
+
+function isCollapsibleResourceFieldGroup(kind: ResourceKind, group: FieldGroup) {
+  return kind === "model" && (group.key === "multimodal" || group.key === "advancedFeatures");
+}
+
+function fieldGridContainerClass(kind: ResourceKind, group: FieldGroup) {
+  if (kind === "route" && group.key === "identity") {
+    return "form-grid form-grid--route-identity";
+  }
+  return "form-grid";
+}
+
+function fieldGroupIcon(group: FieldGroup) {
+  if (group.key === "identity") {
+    return "badge";
+  }
+  if (group.key === "advancedFeatures") {
+    return "extension";
+  }
+  if (group.key === "multimodal") {
+    return "image";
+  }
+  if (group.key === "reasoning") {
+    return "psychology";
+  }
+  if (group.key === "billing") {
+    return "payments";
+  }
+  return "tune";
+}
+
+function renderInputFields(
+  resource: ConfigResource,
+  revision: string,
+  group: FieldGroup,
+  fields: FieldSchema[],
+  modelDisplayNames: Record<string, string>,
+  modelReasoningLevels: ModelReasoningLevelsState | undefined
+) {
+  const rendered: ReactNode[] = [];
+  let index = 0;
+  while (index < fields.length) {
+    if (isModelReasoningDefaultsGroup(resource.kind, fields, index)) {
+      const pair = fields.slice(index, index + modelReasoningDefaultsPaths.length);
+      rendered.push(
+        <div
+          className="form-grid__wide form-grid__reasoning-defaults"
+          key={`${resource.kind}-${resource.id}-reasoning-defaults`}
+        >
+          {pair.map((field) => renderInputField(resource, revision, group, field, modelDisplayNames, modelReasoningLevels))}
+        </div>
+      );
+      index += pair.length;
+      continue;
+    }
+    rendered.push(renderInputField(resource, revision, group, fields[index], modelDisplayNames, modelReasoningLevels));
+    index += 1;
+  }
+  return rendered;
+}
+
+function renderInputField(
+  resource: ConfigResource,
+  revision: string,
+  group: FieldGroup,
+  field: FieldSchema,
+  modelDisplayNames: Record<string, string>,
+  modelReasoningLevels: ModelReasoningLevelsState | undefined
+) {
+  if (isModelReasoningLevelsField(resource.kind, field)) {
+    return (
+      <div
+        className="form-grid__wide"
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <EditableListResourceField
+          field={field}
+          autosave={requiredModelReasoningLevels(modelReasoningLevels)}
+          valueFromDraft={reasoningLevelEffort}
+          valueFromInput={newReasoningLevel}
+        />
+      </div>
+    );
+  }
+  if (isModelEditableListField(resource.kind, field)) {
+    return (
+      <div
+        className="form-grid__wide"
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <GenericEditableListResourceField
+          field={field}
+          resource={resource}
+          revision={revision}
+        />
+      </div>
+    );
+  }
+  if (isProviderOfferOverridesField(resource.kind, field)) {
+    return (
+      <div
+        className="form-grid__wide"
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <ProviderOfferOverridesField
+          field={field}
+          resource={resource}
+          revision={revision}
+        />
+      </div>
+    );
+  }
+  if (isDefaultReasoningLevelField(resource.kind, field)) {
+    return (
+      <div
+        className={fieldGridClass(field)}
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <DefaultReasoningLevelField
+          field={field}
+          levels={requiredModelReasoningLevels(modelReasoningLevels).value}
+          resource={resource}
+          revision={revision}
+        />
+      </div>
+    );
+  }
+  if (isStructuredWebSearchField(resource.kind, field)) {
+    return (
+      <div
+        className="form-grid__wide"
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <WebSearchFeatureField
+          field={field}
+          resource={resource}
+          revision={revision}
+        />
+      </div>
+    );
+  }
+  if (isStructuredExtensionsField(resource.kind, field)) {
+    return (
+      <div
+        className="form-grid__wide"
+        key={`${resource.kind}-${resource.id}-${field.path}`}
+      >
+        <ExtensionsFeatureField
+          field={field}
+          resource={resource}
+          revision={revision}
+        />
+      </div>
+    );
+  }
+  return (
+    <div
+      className={fieldGridClass(field)}
+      key={`${resource.kind}-${resource.id}-${field.path}`}
+    >
+      <GraphResourceField
+        field={field}
+        modelDisplayNames={modelDisplayNames}
+        objectDisplay={fieldObjectDisplay(resource.kind, field, group)}
+        resource={resource}
+        revision={revision}
+      />
+    </div>
+  );
+}
+
+function isModelEditableListField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "model" && modelEditableListPaths.has(field.path);
+}
+
+function isModelReasoningLevelsField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "model" && field.path === "supported_reasoning_levels";
+}
+
+function isDefaultReasoningLevelField(kind: ResourceKind, field: FieldSchema) {
+  return kind === "model" && field.path === "default_reasoning_level";
+}
+
+function isStructuredWebSearchField(kind: ResourceKind, field: FieldSchema) {
+  return structuredFeatureKinds.has(kind) && field.path === "web_search";
+}
+
+function isStructuredExtensionsField(kind: ResourceKind, field: FieldSchema) {
+  return structuredFeatureKinds.has(kind) && field.path === "extensions";
+}
+
+function isModelReasoningDefaultsGroup(kind: ResourceKind, fields: FieldSchema[], index: number) {
+  return (
+    kind === "model" &&
+    modelReasoningDefaultsPaths.every((path, offset) => fields[index + offset]?.path === path)
+  );
+}
+
+function fieldObjectDisplay(kind: ResourceKind, field: FieldSchema, group: FieldGroup) {
+  if (group.key === "advancedFeatures") {
+    return "expandedFixed";
+  }
+  return undefined;
+}
+
+function ReasoningSupportSwitch({
+  autosave,
+  field,
+  resource
+}: {
+  autosave: BooleanFieldState;
+  field: FieldSchema;
+  resource: ConfigResource;
+}) {
+  const { locale } = useI18n();
+  const docPath = configDocPathForResource(resource, field);
+  const label = docPath ? configDescriptions[docPath].title[locale] : field.label;
+
+  return (
+    <span className="resource-field-group__switch" aria-label={label}>
+      <MaterialSwitch
+        disabled={autosave.status === "saving"}
+        label={label}
+        selected={autosave.value}
+        onChange={autosave.commitValue}
+      />
+    </span>
+  );
+}
+
+const providerOfferPriceKeys = [
+  "input_price",
+  "output_price",
+  "cache_write_price",
+  "cache_read_price"
+] as const;
+
+type ProviderOfferPriceKey = typeof providerOfferPriceKeys[number];
+
+function ProviderOfferBillingGroup({
+  group,
+  resource,
+  revision
+}: {
+  group: FieldGroup;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const pricingField = group.fields.find((field) => field.path === "pricing");
+  if (!pricingField) {
+    throw new Error("Provider offer billing group requires a pricing field.");
+  }
+  const autosave = useObjectFieldState(resource, revision, pricingField);
+  const [enabled, setEnabled] = useState(() => hasProviderOfferPricing(autosave.value));
+  const manuallyEnabled = useRef(false);
+
+  useEffect(() => {
+    if (hasProviderOfferPricing(autosave.value)) {
+      setEnabled(true);
+      return;
+    }
+    if (!manuallyEnabled.current && autosave.status !== "dirty") {
+      setEnabled(false);
+    }
+  }, [autosave.status, autosave.value]);
+
+  function setBillingEnabled(nextEnabled: boolean) {
+    manuallyEnabled.current = nextEnabled;
+    setEnabled(nextEnabled);
+    if (!nextEnabled) {
+      autosave.commitSerializedValue({}, null);
+    }
+  }
+
+  return (
+    <div
+      aria-label={t(group.labelKey)}
+      className={fieldGroupClass(resource.kind, group)}
+      role="group"
+    >
+      <div className="resource-field-group__header">
+        <h4>
+          <span className="material-symbol" aria-hidden="true">
+            {fieldGroupIcon(group)}
+          </span>
+          {t(group.labelKey)}
+        </h4>
+        <span className="resource-field-group__switch" aria-label={t(group.labelKey)}>
+          <MaterialSwitch
+            disabled={autosave.status === "saving"}
+            label={t(group.labelKey)}
+            selected={enabled}
+            onChange={setBillingEnabled}
+          />
+        </span>
+      </div>
+      {enabled ? (
+        <div className="structured-feature-field structured-feature-field--billing" aria-label={t(group.labelKey)}>
+          <div className="structured-feature-field__grid">
+            {providerOfferPriceKeys.map((fieldKey) => (
+              <ProviderOfferPriceField
+                autosave={autosave}
+                fieldKey={fieldKey}
+                key={fieldKey}
+                label={providerOfferPriceLabel(fieldKey, t)}
+              />
+            ))}
+          </div>
+          {autosave.error ? (
+            <p className="field-error" role="alert">
+              {autosave.error.message}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ProviderOfferPriceField({
+  autosave,
+  fieldKey,
+  label
+}: {
+  autosave: ObjectFieldState;
+  fieldKey: ProviderOfferPriceKey;
+  label: string;
+}) {
+  const { t } = useI18n();
+  const committedDraft = providerOfferPriceDraft(autosave.value[fieldKey]);
+  const [draft, setDraft] = useState(committedDraft);
+  const [localError, setLocalError] = useState("");
+
+  useEffect(() => {
+    setDraft(committedDraft);
+    setLocalError("");
+  }, [committedDraft]);
+
+  function commit() {
+    const trimmed = draft.trim();
+    if (trimmed === committedDraft) {
+      setLocalError("");
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      setLocalError(t("field.invalidNumber"));
+      return;
+    }
+    setLocalError("");
+    autosave.commitValue({
+      ...providerOfferPricingValue(autosave.value),
+      [fieldKey]: parsed
+    });
+  }
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaInvalid={Boolean(localError)}
+          className="structured-feature-field__number"
+          disabled={autosave.status === "saving"}
+          error={Boolean(localError)}
+          errorText={localError}
+          inputMode="decimal"
+          label={label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={commit}
+          onInput={(next) => {
+            setDraft(next);
+            if (localError && next.trim() === committedDraft) {
+              setLocalError("");
+            }
+          }}
+        />
+      </div>
+      {localError ? (
+        <p className="field-error field-error--sr" role="alert">
+          {localError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function providerOfferPriceLabel(key: ProviderOfferPriceKey, t: ReturnType<typeof useI18n>["t"]) {
+  const labels: Record<ProviderOfferPriceKey, MessageKey> = {
+    input_price: "create.offer.inputPrice",
+    output_price: "create.offer.outputPrice",
+    cache_write_price: "create.offer.cacheWritePrice",
+    cache_read_price: "create.offer.cacheReadPrice"
+  };
+  return t(labels[key]);
+}
+
+function hasProviderOfferPricing(value: Record<string, unknown>) {
+  return providerOfferPriceKeys.some((key) => value[key] !== undefined);
+}
+
+function providerOfferPricingValue(value: Record<string, unknown>): Record<ProviderOfferPriceKey, number> {
+  return {
+    input_price: providerOfferPriceNumber(value.input_price),
+    output_price: providerOfferPriceNumber(value.output_price),
+    cache_write_price: providerOfferPriceNumber(value.cache_write_price),
+    cache_read_price: providerOfferPriceNumber(value.cache_read_price)
+  };
+}
+
+function providerOfferPriceDraft(value: unknown) {
+  return String(providerOfferPriceNumber(value));
+}
+
+function providerOfferPriceNumber(value: unknown) {
+  if (value === undefined || value === null || value === "") {
+    return 0;
+  }
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new Error("Provider offer price requires a finite number.");
+  }
+  return value;
+}
+
+const providerOverrideNumberKeys = [
+  "context_window",
+  "max_output_tokens"
+] as const;
+
+const providerOverrideTextKeys = [
+  "display_name",
+  "default_reasoning_level",
+  "default_reasoning_summary"
+] as const;
+
+const providerOverrideLongTextKeys = [
+  "description",
+  "base_instructions"
+] as const;
+
+const providerOverrideBooleanKeys = [
+  "supports_reasoning",
+  "supports_reasoning_summaries",
+  "supports_image_detail_original"
+] as const;
+
+type ProviderOverrideNumberKey = typeof providerOverrideNumberKeys[number];
+type ProviderOverrideTextKey = typeof providerOverrideTextKeys[number];
+type ProviderOverrideLongTextKey = typeof providerOverrideLongTextKeys[number];
+type ProviderOverrideBooleanKey = typeof providerOverrideBooleanKeys[number];
+
+function ProviderOfferOverridesField({
+  field,
+  resource,
+  revision
+}: {
+  field: FieldSchema;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const autosave = useObjectFieldState(resource, revision, field);
+
+  function commitKey(key: string, value: unknown) {
+    const next = value === undefined ? omitObjectKey(autosave.value, key) : { ...autosave.value, [key]: value };
+    commitProviderOverrides(autosave, next);
+  }
+
+  const inputModalities = stringArrayValue(autosave.value.input_modalities);
+  const reasoningLevels = toReasoningLevelPresets(autosave.value.supported_reasoning_levels);
+
+  return (
+    <div className="provider-overrides-editor structured-feature-field" aria-label={t("field.providerOverrides.title")}>
+      <div className="schema-structured-object__header">
+        <span>{t("field.providerOverrides.title")}</span>
+      </div>
+      <div className="structured-feature-field__grid">
+        {providerOverrideNumberKeys.map((key) => (
+          <ProviderOverrideNumberField
+            disabled={autosave.status === "saving"}
+            key={key}
+            label={providerOverrideLabel(key, t)}
+            value={autosave.value[key]}
+            onCommit={(value) => commitKey(key, value)}
+          />
+        ))}
+        {providerOverrideTextKeys.map((key) => (
+          <ProviderOverrideTextField
+            disabled={autosave.status === "saving"}
+            key={key}
+            label={providerOverrideLabel(key, t)}
+            value={autosave.value[key]}
+            onCommit={(value) => commitKey(key, value)}
+          />
+        ))}
+        {providerOverrideBooleanKeys.map((key) => (
+          <ProviderOverrideBooleanField
+            disabled={autosave.status === "saving"}
+            key={key}
+            label={providerOverrideLabel(key, t)}
+            value={autosave.value[key]}
+            onCommit={(value) => commitKey(key, value)}
+          />
+        ))}
+      </div>
+      <div className="structured-feature-field__grid structured-feature-field__grid--wide">
+        {providerOverrideLongTextKeys.map((key) => (
+          <ProviderOverrideTextField
+            disabled={autosave.status === "saving"}
+            key={key}
+            label={providerOverrideLabel(key, t)}
+            multiline
+            value={autosave.value[key]}
+            onCommit={(value) => commitKey(key, value)}
+          />
+        ))}
+      </div>
+      <EditableListResourceField
+        autosave={{
+          commitValue: (items) => commitKey("input_modalities", items.length ? items : undefined),
+          error: autosave.error,
+          label: localizedStaticLabel(t("field.providerOverrides.inputModalities")),
+          status: autosave.status,
+          value: inputModalities
+        }}
+        field={field}
+        valueFromDraft={stringListItemLabel}
+        valueFromInput={(input) => input}
+      />
+      <EditableListResourceField
+        autosave={{
+          commitValue: (items) => commitKey("supported_reasoning_levels", items.length ? items : undefined),
+          error: autosave.error,
+          label: localizedStaticLabel(t("field.providerOverrides.supportedReasoningLevels")),
+          status: autosave.status,
+          value: reasoningLevels
+        }}
+        field={field}
+        valueFromDraft={reasoningLevelEffort}
+        valueFromInput={newReasoningLevel}
+      />
+      {autosave.error ? (
+        <p className="field-error" role="alert">
+          {autosave.error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function ProviderOverrideNumberField({
+  disabled,
+  label,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  onCommit: (value: number | undefined) => void;
+  value: unknown;
+}) {
+  const { t } = useI18n();
+  const committedDraft = objectNumberDraft(value);
+  const [draft, setDraft] = useState(committedDraft);
+  const [localError, setLocalError] = useState("");
+
+  useEffect(() => {
+    setDraft(committedDraft);
+    setLocalError("");
+  }, [committedDraft]);
+
+  function commit() {
+    const trimmed = draft.trim();
+    if (trimmed === committedDraft) {
+      setLocalError("");
+      return;
+    }
+    if (trimmed === "") {
+      setLocalError("");
+      onCommit(undefined);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      setLocalError(t("field.invalidNumber"));
+      return;
+    }
+    setLocalError("");
+    onCommit(parsed);
+  }
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaInvalid={Boolean(localError)}
+          disabled={disabled}
+          error={Boolean(localError)}
+          errorText={localError}
+          inputMode="numeric"
+          label={label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={commit}
+          onInput={(next) => {
+            setDraft(next);
+            if (localError && next.trim() === committedDraft) {
+              setLocalError("");
+            }
+          }}
+        />
+      </div>
+      {localError ? (
+        <p className="field-error field-error--sr" role="alert">
+          {localError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function ProviderOverrideTextField({
+  disabled,
+  label,
+  multiline = false,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  multiline?: boolean;
+  onCommit: (value: string | undefined) => void;
+  value: unknown;
+}) {
+  const committedDraft = objectStringDraft(value, false);
+  const [draft, setDraft] = useState(committedDraft);
+
+  useEffect(() => {
+    setDraft(committedDraft);
+  }, [committedDraft]);
+
+  function commit() {
+    if (draft === committedDraft) {
+      return;
+    }
+    onCommit(draft.trim() === "" ? undefined : draft);
+  }
+
+  return (
+    <div className="mb-field" data-variant={multiline ? "textarea" : "input"}>
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          disabled={disabled}
+          label={label}
+          rows={multiline ? 4 : undefined}
+          spellCheck={multiline}
+          type={multiline ? "textarea" : "text"}
+          value={draft}
+          onBlur={commit}
+          onInput={setDraft}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ProviderOverrideBooleanField({
+  disabled,
+  label,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  onCommit: (value: boolean | undefined) => void;
+  value: unknown;
+}) {
+  const { t } = useI18n();
+  const selected = typeof value === "boolean" ? String(value) : "inherit";
+  return (
+    <div className="mb-field" data-variant="select">
+      <div className="mb-field__control">
+        <MaterialSelect
+          ariaLabel={label}
+          disabled={disabled}
+          label={label}
+          options={[
+            { value: "inherit", label: t("field.providerOverrides.inherit") },
+            { value: "true", label: t("field.providerOverrides.enabled") },
+            { value: "false", label: t("field.providerOverrides.disabled") }
+          ]}
+          value={selected}
+          onChange={(next) => {
+            if (next === "inherit") {
+              onCommit(undefined);
+              return;
+            }
+            onCommit(next === "true");
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function providerOverrideLabel(
+  key: ProviderOverrideNumberKey | ProviderOverrideTextKey | ProviderOverrideLongTextKey | ProviderOverrideBooleanKey,
+  t: ReturnType<typeof useI18n>["t"]
+) {
+  const labels: Record<
+    ProviderOverrideNumberKey | ProviderOverrideTextKey | ProviderOverrideLongTextKey | ProviderOverrideBooleanKey,
+    MessageKey
+  > = {
+    base_instructions: "field.providerOverrides.baseInstructions",
+    context_window: "field.providerOverrides.contextWindow",
+    default_reasoning_level: "field.providerOverrides.defaultReasoningLevel",
+    default_reasoning_summary: "field.providerOverrides.defaultReasoningSummary",
+    description: "field.providerOverrides.description",
+    display_name: "field.providerOverrides.displayName",
+    max_output_tokens: "field.providerOverrides.maxOutputTokens",
+    supports_image_detail_original: "field.providerOverrides.supportsImageDetailOriginal",
+    supports_reasoning: "field.providerOverrides.supportsReasoning",
+    supports_reasoning_summaries: "field.providerOverrides.supportsReasoningSummaries"
+  };
+  return t(labels[key]);
+}
+
+function commitProviderOverrides(autosave: ObjectFieldState, next: Record<string, unknown>) {
+  const cleaned = cleanProviderOverrides(next);
+  autosave.commitSerializedValue(cleaned, Object.keys(cleaned).length ? cleaned : null);
+}
+
+function cleanProviderOverrides(value: Record<string, unknown>) {
+  const next: Record<string, unknown> = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (entry === undefined || entry === null || entry === "") {
+      continue;
+    }
+    if (Array.isArray(entry) && entry.length === 0) {
+      continue;
+    }
+    if (typeof entry === "object" && !Array.isArray(entry) && Object.keys(entry).length === 0) {
+      continue;
+    }
+    next[key] = entry;
+  }
+  return next;
+}
+
+function stringArrayValue(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((item): item is string => typeof item === "string");
+}
+
+function localizedStaticLabel(label: string): LocalizedLabel {
+  return {
+    "en-US": label,
+    "zh-CN": label
+  };
+}
+
+type WebSearchStructuredFieldKey = "max_uses" | "search_max_rounds" | "tavily_api_key" | "firecrawl_api_key";
+
+const webSearchConfigPaths: Record<WebSearchStructuredFieldKey, ConfigPath> = {
+  max_uses: "web_search.max_uses",
+  search_max_rounds: "web_search.search_max_rounds",
+  tavily_api_key: "web_search.tavily_api_key",
+  firecrawl_api_key: "web_search.firecrawl_api_key"
+};
+
+function WebSearchFeatureField({
+  field,
+  resource,
+  revision
+}: {
+  field: FieldSchema;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { locale, t } = useI18n();
+  const autosave = useObjectFieldState(resource, revision, field);
+  const config = autosave.value;
+  const docPath = configDocPathForResource(resource, field);
+  const title = docPath ? configDescriptions[docPath].title[locale] : field.label;
+  const supportLabel = t("field.webSearch.support", { label: title });
+  const helpScope = `${resource.kind}-${resource.id}-${field.path}`;
+  const maxUsesLabel = t("field.webSearch.maxUses", { label: title });
+  const tavilyAPIKeyLabel = t("field.webSearch.tavilyAPIKey", { label: title });
+  const firecrawlAPIKeyLabel = t("field.webSearch.firecrawlAPIKey", { label: title });
+  const searchMaxRoundsLabel = t("field.webSearch.searchMaxRounds", { label: title });
+
+  function commitKey(key: string, value: unknown) {
+    autosave.commitValue(value === undefined ? omitObjectKey(config, key) : { ...config, [key]: value });
+  }
+
+  return (
+    <div className="structured-feature-field structured-feature-field--web-search" aria-label={title}>
+      <div className="structured-feature-field__grid">
+        <div className="mb-field" data-variant="select">
+          <div className="mb-field__control">
+            <MaterialSelect
+              ariaLabel={supportLabel}
+              disabled={autosave.status === "saving"}
+              label={supportLabel}
+              options={webSearchSupportOptions}
+              value={webSearchSupportValue(config.support)}
+              onChange={(value) => commitKey("support", value)}
+            />
+          </div>
+        </div>
+        <IntegerObjectField
+          autosave={autosave}
+          fieldKey="max_uses"
+          helpScope={helpScope}
+          label={maxUsesLabel}
+        />
+        <IntegerObjectField
+          autosave={autosave}
+          fieldKey="search_max_rounds"
+          helpScope={helpScope}
+          label={searchMaxRoundsLabel}
+        />
+        <SecretObjectField
+          autosave={autosave}
+          fieldKey="tavily_api_key"
+          helpScope={helpScope}
+          label={tavilyAPIKeyLabel}
+        />
+        <SecretObjectField
+          autosave={autosave}
+          fieldKey="firecrawl_api_key"
+          helpScope={helpScope}
+          label={firecrawlAPIKeyLabel}
+        />
+      </div>
+      {autosave.error ? (
+        <p className="field-error" role="alert">
+          {autosave.error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+type StructuredFeatureFieldHelp = {
+  button: ReactNode;
+  tooltip: ReactNode;
+};
+
+function useStructuredFeatureFieldHelp(
+  fieldKey: WebSearchStructuredFieldKey,
+  helpScope: string,
+  label: string
+): StructuredFeatureFieldHelp {
+  const i18n = useI18n();
+  const anchorRef = useRef<MdIconButton | null>(null);
+  const openedByHover = useRef(false);
+  const [open, setOpen] = useState(false);
+  const docPath = webSearchConfigPaths[fieldKey];
+  const helpId = `structured-help-${helpScope}-${docPath}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+  const position = useAnchoredTooltipPosition(anchorRef, open);
+  const helpParts = structuredFeatureHelpParts(docPath, label, i18n);
+
+  return {
+    button: (
+      <MaterialIconButton
+        className="schema-field__help"
+        describedBy={open ? helpId : undefined}
+        icon="help"
+        label={i18n.t("field.helpFor", { label })}
+        onBlur={() => setOpen(false)}
+        onClick={() => {
+          if (openedByHover.current) {
+            openedByHover.current = false;
+            setOpen(true);
+            return;
+          }
+          setOpen((current) => !current);
+        }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={(event: KeyboardEvent<HTMLElement>) => {
+          if (event.key === "Escape") {
+            setOpen(false);
+          }
+        }}
+        onMouseDown={(event) => event.preventDefault()}
+        onMouseEnter={() => {
+          openedByHover.current = true;
+          setOpen(true);
+        }}
+        onMouseLeave={() => {
+          openedByHover.current = false;
+          setOpen(false);
+        }}
+        ref={anchorRef}
+        slot="trailing-icon"
+      />
+    ),
+    tooltip: open ? (
+        <StructuredFeatureTooltip
+          helpId={helpId}
+          helpParts={helpParts}
+          position={position}
+        />
+      ) : null
+  };
+}
+
+function StructuredFeatureTooltip({
+  helpId,
+  helpParts,
+  position
+}: {
+  helpId: string;
+  helpParts: StructuredFeatureHelpParts;
+  position: TooltipPosition | undefined;
+}) {
+  return (
+    <span className="rich-tooltip" id={helpId} role="tooltip" style={tooltipPositionStyle(position)}>
+      <span className="rich-tooltip__subhead">{helpParts.subhead}</span>
+      <span className="rich-tooltip__body">{helpParts.body}</span>
+      <span className="rich-tooltip__metas">
+        {helpParts.metas.map((meta, index) => (
+          <span className="rich-tooltip__chip" key={index}>
+            {meta.label ? `${meta.label}: ${meta.value}` : meta.value}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+type StructuredFeatureHelpParts = {
+  subhead: string;
+  body: string;
+  metas: { label?: string; value: string }[];
+};
+
+function structuredFeatureHelpParts(
+  docPath: ConfigPath,
+  label: string,
+  { locale, t }: ReturnType<typeof useI18n>
+): StructuredFeatureHelpParts {
+  const entry = configDescriptions[docPath];
+  const metas: { label?: string; value: string }[] = [
+    { label: t("configDoc.type"), value: localizedConfigMetaValue(entry.type, t) }
+  ];
+  if (entry.defaultValue) {
+    metas.push({ label: t("configDoc.default"), value: localizedConfigMetaValue(String(entry.defaultValue), t) });
+  }
+  if (entry.sensitive) {
+    metas.push({ value: t("configDoc.sensitive") });
+  }
+  return {
+    subhead: label,
+    body: entry.description[locale],
+    metas
+  };
+}
+
+function localizedConfigMetaValue(value: string, t: ReturnType<typeof useI18n>["t"]) {
+  const normalized = value.trim().toLowerCase();
+  const localized: Partial<Record<string, MessageKey>> = {
+    array: "configDoc.type.array",
+    boolean: "configDoc.type.boolean",
+    empty: "configDoc.default.empty",
+    "host:port": "configDoc.type.hostPort",
+    number: "configDoc.type.number",
+    object: "configDoc.type.object",
+    string: "configDoc.type.string",
+    url: "configDoc.type.url"
+  };
+  return localized[normalized] ? t(localized[normalized]) : value;
+}
+
+function tooltipPositionStyle(position: TooltipPosition | undefined): CSSProperties | undefined {
+  if (!position) {
+    return undefined;
+  }
+  return {
+    left: `${position.left}px`,
+    maxWidth: `${position.maxWidth}px`,
+    position: "fixed",
+    top: `${position.top}px`
+  };
+}
+
+function SecretObjectField({
+  autosave,
+  fieldKey,
+  helpScope,
+  label
+}: {
+  autosave: ObjectFieldState;
+  fieldKey: WebSearchStructuredFieldKey;
+  helpScope: string;
+  label: string;
+}) {
+  const help = useStructuredFeatureFieldHelp(fieldKey, helpScope, label);
+  const [draft, setDraft] = useState(() => objectStringDraft(autosave.value[fieldKey], true));
+  const committedDraft = objectStringDraft(autosave.value[fieldKey], true);
+
+  useEffect(() => {
+    setDraft(committedDraft);
+  }, [committedDraft]);
+
+  const commit = useCallback(() => {
+    if (draft === committedDraft) {
+      return;
+    }
+    autosave.commitValue({ ...autosave.value, [fieldKey]: draft });
+  }, [autosave, committedDraft, draft, fieldKey]);
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          autoComplete="new-password"
+          className="structured-feature-field__secret"
+          disabled={autosave.status === "saving"}
+          label={label}
+          spellCheck={false}
+          trailingIcon={help.button}
+          type="password"
+          value={draft}
+          onBlur={commit}
+          onInput={setDraft}
+        />
+      </div>
+      {help.tooltip}
+    </div>
+  );
+}
+
+function IntegerObjectField({
+  autosave,
+  fieldKey,
+  helpScope,
+  label
+}: {
+  autosave: ObjectFieldState;
+  fieldKey: WebSearchStructuredFieldKey;
+  helpScope: string;
+  label: string;
+}) {
+  const { t } = useI18n();
+  const help = useStructuredFeatureFieldHelp(fieldKey, helpScope, label);
+  const [draft, setDraft] = useState(() => objectIntegerDraft(autosave.value[fieldKey]));
+  const [localError, setLocalError] = useState("");
+  const committedDraft = objectIntegerDraft(autosave.value[fieldKey]);
+
+  useEffect(() => {
+    setDraft(committedDraft);
+    setLocalError("");
+  }, [committedDraft]);
+
+  const commit = useCallback(() => {
+    const trimmed = draft.trim();
+    if (trimmed === "") {
+      setLocalError("");
+      autosave.commitValue(omitObjectKey(autosave.value, fieldKey));
+      return;
+    }
+    if (!/^\d+$/.test(trimmed)) {
+      setLocalError(t("field.invalidNumber"));
+      return;
+    }
+    const parsed = Number.parseInt(trimmed, 10);
+    setLocalError("");
+    autosave.commitValue({ ...autosave.value, [fieldKey]: parsed });
+  }, [autosave, draft, fieldKey, t]);
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaInvalid={Boolean(localError)}
+          className="structured-feature-field__number"
+          disabled={autosave.status === "saving"}
+          error={Boolean(localError)}
+          errorText={localError}
+          inputMode="numeric"
+          label={label}
+          spellCheck={false}
+          trailingIcon={help.button}
+          type="text"
+          value={draft}
+          onBlur={commit}
+          onInput={(value) => {
+            setDraft(value);
+            if (localError && value.trim() === committedDraft) {
+              setLocalError("");
+            }
+          }}
+        />
+      </div>
+      {help.tooltip}
+      {localError ? (
+        <p className="field-error field-error--sr" role="alert">
+          {localError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function ExtensionsFeatureField({
+  field,
+  resource,
+  revision
+}: {
+  field: FieldSchema;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { locale, t } = useI18n();
+  const [draft, setDraft] = useState("");
+  const autosave = useObjectFieldState(resource, revision, field);
+  const docPath = configDocPathForResource(resource, field);
+  const title = docPath ? configDescriptions[docPath].title[locale] : field.label;
+  const extensions = extensionEntries(autosave.value);
+  const extensionNames = extensions.map((entry) => entry.name);
+  const trimmedDraft = draft.trim();
+  const duplicateDraft = extensionNames.includes(trimmedDraft);
+  const addDisabled = !trimmedDraft || duplicateDraft || autosave.status === "saving";
+
+  function addExtension() {
+    if (addDisabled) {
+      return;
+    }
+    setDraft("");
+    autosave.commitValue({
+      ...autosave.value,
+      [trimmedDraft]: { enabled: true }
+    });
+  }
+
+  function removeExtension(name: string) {
+    autosave.commitValue(omitObjectKey(autosave.value, name));
+  }
+
+  function setExtensionEnabled(name: string, enabled: boolean) {
+    autosave.commitValue({
+      ...autosave.value,
+      [name]: {
+        ...extensionObjectValue(autosave.value[name]),
+        enabled
+      }
+    });
+  }
+
+  function setExtensionConfigValue(name: string, key: string, value: unknown) {
+    const extension = extensionObjectValue(autosave.value[name]);
+    const config = objectRecordOrEmpty(extension.config);
+    autosave.commitValue({
+      ...autosave.value,
+      [name]: {
+        ...extension,
+        config: value === undefined
+          ? omitObjectKey(config, key)
+          : { ...config, [key]: value }
+      }
+    });
+  }
+
+  return (
+    <div className="structured-feature-field structured-feature-field--extensions" aria-label={title}>
+      <div className="extension-feature-list" role="list" aria-label={title}>
+        {extensions.map((entry) => (
+          <div
+            className="extension-feature-row"
+            data-extension-name={entry.name}
+            key={entry.name}
+            role="listitem"
+          >
+            <MaterialInputChip
+              className="extension-feature-row__chip"
+              disabled={autosave.status === "saving"}
+              label={t("field.extensions.remove", { name: entry.name })}
+              onRemove={() => removeExtension(entry.name)}
+            >
+              {entry.name}
+            </MaterialInputChip>
+            <span className="extension-feature-row__switch" aria-label={t("field.extensions.enable", { name: entry.name })}>
+              <MaterialSwitch
+                disabled={autosave.status === "saving"}
+                label={t("field.extensions.enable", { name: entry.name })}
+                selected={entry.enabled}
+                onChange={(enabled) => setExtensionEnabled(entry.name, enabled)}
+              />
+            </span>
+            <ExtensionConfigFields
+              disabled={autosave.status === "saving"}
+              entry={entry}
+              onCommit={(key, value) => setExtensionConfigValue(entry.name, key, value)}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="editable-list-field__composer">
+        <MaterialOutlinedTextField
+          ariaLabel={t("field.extensions.addInput", { label: title })}
+          className="editable-list-field__input"
+          label={t("field.extensions.addInput", { label: title })}
+          spellCheck={false}
+          value={draft}
+          onInput={setDraft}
+          onBlur={() => undefined}
+        />
+        <MaterialFilledButton
+          ariaLabel={t("field.extensions.addAction", { label: title })}
+          className="editable-list-field__add"
+          disabled={addDisabled}
+          icon="add"
+          onClick={addExtension}
+        >
+          {t("field.editableList.add")}
+        </MaterialFilledButton>
+      </div>
+      {autosave.error ? (
+        <p className="field-error" role="alert">
+          {autosave.error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function ExtensionConfigFields({
+  disabled,
+  entry,
+  onCommit
+}: {
+  disabled: boolean;
+  entry: ExtensionEntry;
+  onCommit: (key: string, value: unknown) => void;
+}) {
+  const fields = extensionConfigFields(entry);
+  if (fields.length === 0) {
+    return null;
+  }
+  return (
+    <div className="extension-config-grid">
+      {fields.map((field) => (
+        <ExtensionConfigField
+          disabled={disabled}
+          field={field}
+          key={field.key}
+          value={entry.config[field.key]}
+          onCommit={(value) => onCommit(field.key, value)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ExtensionConfigField({
+  disabled,
+  field,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  field: ExtensionConfigFieldDef;
+  onCommit: (value: unknown) => void;
+  value: unknown;
+}) {
+  if (field.type === "boolean") {
+    return (
+      <div className="schema-field schema-field--inline">
+        <div className="schema-field__switch-line">
+          <span className="schema-field__label-row">
+            <span className="schema-field__label">{field.label}</span>
+          </span>
+          <MaterialSwitch
+            disabled={disabled}
+            label={field.label}
+            selected={value === true}
+            onChange={onCommit}
+          />
+        </div>
+      </div>
+    );
+  }
+  if (field.type === "number") {
+    return (
+      <ExtensionConfigNumberField
+        disabled={disabled}
+        field={field}
+        value={value}
+        onCommit={onCommit}
+      />
+    );
+  }
+  return (
+    <ExtensionConfigTextField
+      disabled={disabled}
+      field={field}
+      value={value}
+      onCommit={onCommit}
+    />
+  );
+}
+
+function ExtensionConfigTextField({
+  disabled,
+  field,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  field: ExtensionConfigFieldDef;
+  onCommit: (value: unknown) => void;
+  value: unknown;
+}) {
+  const [draft, setDraft] = useState(() => objectStringDraft(value, false));
+  const committedDraft = objectStringDraft(value, false);
+
+  useEffect(() => {
+    setDraft(committedDraft);
+  }, [committedDraft]);
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          disabled={disabled}
+          label={field.label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={() => onCommit(draft.trim() === "" ? undefined : draft)}
+          onInput={setDraft}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ExtensionConfigNumberField({
+  disabled,
+  field,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  field: ExtensionConfigFieldDef;
+  onCommit: (value: unknown) => void;
+  value: unknown;
+}) {
+  const { t } = useI18n();
+  const [draft, setDraft] = useState(() => objectNumberDraft(value));
+  const [localError, setLocalError] = useState("");
+  const committedDraft = objectNumberDraft(value);
+
+  useEffect(() => {
+    setDraft(committedDraft);
+    setLocalError("");
+  }, [committedDraft]);
+
+  function commit() {
+    const trimmed = draft.trim();
+    if (trimmed === "") {
+      setLocalError("");
+      onCommit(undefined);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      setLocalError(t("field.invalidNumber"));
+      return;
+    }
+    setLocalError("");
+    onCommit(parsed);
+  }
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaInvalid={Boolean(localError)}
+          disabled={disabled}
+          error={Boolean(localError)}
+          errorText={localError}
+          inputMode="numeric"
+          label={field.label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={commit}
+          onInput={(next) => {
+            setDraft(next);
+            if (localError && next.trim() === committedDraft) {
+              setLocalError("");
+            }
+          }}
+        />
+      </div>
+      {localError ? (
+        <p className="field-error field-error--sr" role="alert">
+          {localError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function GenericEditableListResourceField({
+  field,
+  resource,
+  revision
+}: {
+  field: FieldSchema;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const autosave = useGenericEditableListState(resource, revision, field);
+  return (
+    <EditableListResourceField
+      autosave={autosave}
+      field={field}
+      valueFromDraft={stringListItemLabel}
+      valueFromInput={(input) => input}
+    />
+  );
+}
+
+function EditableListResourceField<T>({
+  autosave,
+  field,
+  valueFromDraft,
+  valueFromInput
+}: {
+  autosave: EditableListState<T>;
+  field: FieldSchema;
+  valueFromDraft: (item: T) => string;
+  valueFromInput: (input: string) => T;
+}) {
+  const { locale, t } = useI18n();
+  const [draft, setDraft] = useState("");
+  const label = autosave.label[locale];
+  const items = autosave.value;
+  const trimmedDraft = draft.trim();
+  const itemLabels = useMemo(
+    () => items.map((item) => valueFromDraft(item)),
+    [items, valueFromDraft]
+  );
+  const duplicateDraft = trimmedDraft ? itemLabels.includes(trimmedDraft) : false;
+  const addDisabled = !trimmedDraft || duplicateDraft || autosave.status === "saving";
+
+  function commitItems(nextItems: T[]) {
+    autosave.commitValue(nextItems);
+  }
+
+  function addDraft() {
+    if (!trimmedDraft || duplicateDraft) {
+      return;
+    }
+    setDraft("");
+    commitItems([...items, valueFromInput(trimmedDraft)]);
+  }
+
+  function removeItem(removed: T) {
+    const removedLabel = valueFromDraft(removed);
+    commitItems(items.filter((item) => valueFromDraft(item) !== removedLabel));
+  }
+
+  return (
+    <div className="editable-list-field" aria-label={label}>
+      <div className="editable-list-field__header">
+        <span className="editable-list-field__title">{label}</span>
+      </div>
+      <md-chip-set className="editable-list-field__items" role="list" aria-label={label}>
+        {items.map((item) => {
+          const itemLabel = valueFromDraft(item);
+          return (
+            <MaterialInputChip
+              className="editable-list-field__chip"
+              disabled={autosave.status === "saving"}
+              key={itemLabel}
+              label={t("field.editableList.remove", { item: itemLabel, label })}
+              onRemove={() => removeItem(item)}
+            >
+              {itemLabel}
+            </MaterialInputChip>
+          );
+        })}
+      </md-chip-set>
+      <div className="editable-list-field__composer">
+        <MaterialOutlinedTextField
+          ariaLabel={t("field.editableList.addInput", { label })}
+          className="editable-list-field__input"
+          label={t("field.editableList.addInput", { label })}
+          spellCheck={false}
+          value={draft}
+          onInput={setDraft}
+          onBlur={() => undefined}
+        />
+        <MaterialFilledButton
+          ariaLabel={t("field.editableList.addAction", { label })}
+          className="editable-list-field__add"
+          disabled={addDisabled}
+          icon="add"
+          onClick={addDraft}
+        >
+          {t("field.editableList.add")}
+        </MaterialFilledButton>
+      </div>
+      {autosave.error ? (
+        <p className="field-error" role="alert">
+          {autosave.error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+type ReasoningLevelPreset = {
+  effort: string;
+  description?: string;
+};
+
+type LocalizedLabel = Record<"en-US" | "zh-CN", string>;
+
+type BooleanFieldState = {
+  commitValue: (value: boolean) => void;
+  status: AutosaveFieldStatus;
+  value: boolean;
+};
+
+type ObjectFieldState = {
+  commitValue: (value: Record<string, unknown>) => void;
+  commitSerializedValue: (value: Record<string, unknown>, serialized: Record<string, unknown> | null) => void;
+  error?: FieldError;
+  status: AutosaveFieldStatus;
+  value: Record<string, unknown>;
+};
+
+type EditableListState<T> = {
+  commitValue: (value: T[]) => void;
+  error?: FieldError;
+  label: LocalizedLabel;
+  status: AutosaveFieldStatus;
+  value: T[];
+};
+
+type ModelReasoningLevelsState = EditableListState<ReasoningLevelPreset>;
+
+const webSearchSupportOptions: MaterialSelectOption[] = [
+  { value: "auto", label: "auto" },
+  { value: "enabled", label: "enabled" },
+  { value: "disabled", label: "disabled" },
+  { value: "injected", label: "injected" }
+];
+
+function useObjectFieldState(
+  resource: ConfigResource,
+  revision: string,
+  field: FieldSchema
+): ObjectFieldState {
+  const { t } = useI18n();
+  const value = resource.value[field.path];
+  const committedObjectKey = JSON.stringify(objectRecord(value));
+  const committedObject = useMemo(
+    () => JSON.parse(committedObjectKey) as Record<string, unknown>,
+    [committedObjectKey]
+  );
+  const saveGraphField = useGraphFieldSaver<Record<string, unknown> | null>();
+  const save = useCallback(
+    (request: SaveFieldRequest<Record<string, unknown> | null>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField<Record<string, unknown>, Record<string, unknown> | null>({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: field.path,
+    committedValue: committedObject,
+    revision,
+    save,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:${field.path}`, autosave.status);
+  return {
+    commitValue: autosave.commitValue,
+    commitSerializedValue: autosave.commitSerializedValue,
+    error: autosave.error,
+    status: autosave.status,
+    value: autosave.value
+  };
+}
+
+function useModelReasoningSupport(
+  resource: ConfigResource,
+  revision: string,
+  field: FieldSchema | undefined
+): BooleanFieldState | undefined {
+  const { t } = useI18n();
+  const selected = field ? resource.value[field.path] === true : false;
+  const saveGraphField = useGraphFieldSaver<boolean>();
+  const save = useCallback(
+    (request: SaveFieldRequest<boolean>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: "supports_reasoning",
+    committedValue: selected,
+    revision,
+    save,
+    disabled: !field,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:supports_reasoning`, autosave.status);
+  if (!field) {
+    return undefined;
+  }
+  return {
+    commitValue: autosave.commitValue,
+    status: autosave.status,
+    value: autosave.value
+  };
+}
+
+function requiredModelReasoningSupport(state: BooleanFieldState | undefined) {
+  if (!state) {
+    throw new Error("Model reasoning support field is required to render model reasoning controls.");
+  }
+  return state;
+}
+
+function useGenericEditableListState(
+  resource: ConfigResource,
+  revision: string,
+  field: FieldSchema
+): EditableListState<string> {
+  const { t } = useI18n();
+  const value = resource.value[field.path];
+  const committedItemsKey = Array.isArray(value)
+    ? JSON.stringify(value.map((item) => String(item)))
+    : "[]";
+  const committedItems = useMemo(
+    () => JSON.parse(committedItemsKey) as string[],
+    [committedItemsKey]
+  );
+  const saveGraphField = useGraphFieldSaver<string[]>();
+  const save = useCallback(
+    (request: SaveFieldRequest<string[]>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: field.path,
+    committedValue: committedItems,
+    revision,
+    save,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:${field.path}`, autosave.status);
+  const docPath = configDocPathForResource(resource, field);
+  const label = docPath ? configDescriptions[docPath].title : localizedFallback(field.label);
+  return {
+    commitValue: autosave.commitValue,
+    error: autosave.error,
+    label,
+    status: autosave.status,
+    value: autosave.value
+  };
+}
+
+function useModelReasoningLevels(
+  resource: ConfigResource,
+  revision: string,
+  field: FieldSchema | undefined
+): ModelReasoningLevelsState | undefined {
+  const { t } = useI18n();
+  const value = field ? resource.value[field.path] : undefined;
+  const committedItemsKey = JSON.stringify(toReasoningLevelPresets(value));
+  const committedItems = useMemo(
+    () => JSON.parse(committedItemsKey) as ReasoningLevelPreset[],
+    [committedItemsKey]
+  );
+  const saveGraphField = useGraphFieldSaver<ReasoningLevelPreset[]>();
+  const save = useCallback(
+    (request: SaveFieldRequest<ReasoningLevelPreset[]>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: "supported_reasoning_levels",
+    committedValue: committedItems,
+    revision,
+    save,
+    disabled: !field,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:supported_reasoning_levels`, autosave.status);
+  if (!field) {
+    return undefined;
+  }
+  const docPath = configDocPathForResource(resource, field);
+  return {
+    commitValue: autosave.commitValue,
+    error: autosave.error,
+    label: docPath ? configDescriptions[docPath].title : localizedFallback(field.label),
+    status: autosave.status,
+    value: autosave.value
+  };
+}
+
+function requiredModelReasoningLevels(state: ModelReasoningLevelsState | undefined) {
+  if (!state) {
+    throw new Error("Model reasoning levels field is required to render model reasoning controls.");
+  }
+  return state;
+}
+
+function DefaultReasoningLevelField({
+  field,
+  levels,
+  resource,
+  revision
+}: {
+  field: FieldSchema;
+  levels: ReasoningLevelPreset[];
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { locale, t } = useI18n();
+  const value = resource.value[field.path];
+  const selected = typeof value === "string" ? value : "";
+  const saveGraphField = useGraphFieldSaver<string>();
+  const save = useCallback(
+    (request: SaveFieldRequest<string>) => saveGraphField(request),
+    [saveGraphField]
+  );
+  const autosave = useAutosaveField({
+    resourceKind: resource.kind,
+    resourceId: resource.id,
+    field: field.path,
+    committedValue: selected,
+    revision,
+    save,
+    configUpdateFailedMessage: (result) => t("field.configUpdateFailed", { result }),
+    requestFailedMessage: t("error.requestFailed")
+  });
+  useReportFieldStatus(`${resource.kind}:${resource.id}:${field.path}`, autosave.status);
+  const docPath = configDocPathForResource(resource, field);
+  const label = docPath ? configDescriptions[docPath].title[locale] : field.label;
+  const options = useMemo(
+    () => reasoningLevelOptions(levels, autosave.value),
+    [autosave.value, levels]
+  );
+
+  return (
+    <div className="mb-field" data-variant="select">
+      <div className="mb-field__control">
+        <MaterialSelect
+          ariaLabel={label}
+          disabled={autosave.status === "saving"}
+          error={Boolean(autosave.error)}
+          errorText={autosave.error?.message}
+          label={label}
+          options={options}
+          required={field.required}
+          value={autosave.value}
+          onChange={autosave.commitValue}
+        />
+      </div>
+      {autosave.error ? (
+        <p className="field-error" role="alert">
+          {autosave.error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function toReasoningLevelPresets(value: unknown): ReasoningLevelPreset[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((item) => {
+      if (typeof item === "string") {
+        return { effort: item };
+      }
+      if (!item || typeof item !== "object") {
+        return undefined;
+      }
+      const effort = "effort" in item ? (item as { effort?: unknown }).effort : undefined;
+      if (typeof effort !== "string" || effort.trim() === "") {
+        return undefined;
+      }
+      const description = "description" in item ? (item as { description?: unknown }).description : undefined;
+      return typeof description === "string" && description.trim()
+        ? { effort, description }
+        : { effort };
+    })
+    .filter((item): item is ReasoningLevelPreset => item !== undefined);
+}
+
+function reasoningLevelOptions(levels: ReasoningLevelPreset[], selected: string): MaterialSelectOption[] {
+  const options = levels.map((level) => ({
+    value: level.effort,
+    label: level.effort
+  }));
+  if (selected && !options.some((option) => option.value === selected)) {
+    return [{ value: selected, label: selected }, ...options];
+  }
+  return options;
+}
+
+function reasoningLevelEffort(item: unknown) {
+  if (!item || typeof item !== "object" || !("effort" in item) || typeof item.effort !== "string") {
+    throw new Error("Reasoning level preset requires a string effort.");
+  }
+  return item.effort;
+}
+
+function newReasoningLevel(effort: string): ReasoningLevelPreset {
+  return { effort };
+}
+
+function objectRecord(value: unknown): Record<string, unknown> {
+  if (value === undefined || value === null) {
+    return {};
+  }
+  if (typeof value !== "object" || Array.isArray(value)) {
+    throw new Error("Structured feature field requires an object value.");
+  }
+  return value as Record<string, unknown>;
+}
+
+function omitObjectKey(source: Record<string, unknown>, key: string): Record<string, unknown> {
+  const next = { ...source };
+  delete next[key];
+  return next;
+}
+
+function webSearchSupportValue(value: unknown) {
+  if (typeof value !== "string" || value.trim() === "") {
+    return "auto";
+  }
+  if (!webSearchSupportOptions.some((option) => option.value === value)) {
+    throw new Error(`Unknown web search support mode: ${value}`);
+  }
+  return value;
+}
+
+function objectIntegerDraft(value: unknown) {
+  if (value === undefined || value === null || value === "") {
+    return "";
+  }
+  if (typeof value !== "number" || !Number.isInteger(value)) {
+    throw new Error("Structured integer field requires an integer value.");
+  }
+  return String(value);
+}
+
+type ExtensionEntry = {
+  config: Record<string, unknown>;
+  enabled: boolean;
+  name: string;
+};
+
+type ExtensionConfigFieldDef = {
+  key: string;
+  label: string;
+  type: "string" | "number" | "boolean";
+};
+
+const knownExtensionConfigFields: Record<string, ExtensionConfigFieldDef[]> = {
+  deepseek_v4: [
+    { key: "reinforce_instructions", label: "deepseek_v4 reinforce instructions", type: "boolean" },
+    { key: "reinforce_prompt", label: "deepseek_v4 reinforce prompt", type: "string" }
+  ],
+  db_d1: [
+    { key: "binding", label: "db_d1 binding", type: "string" }
+  ],
+  db_sqlite: [
+    { key: "path", label: "db_sqlite path", type: "string" },
+    { key: "wal", label: "db_sqlite WAL", type: "boolean" },
+    { key: "busy_timeout_ms", label: "db_sqlite busy timeout ms", type: "number" },
+    { key: "max_open_conns", label: "db_sqlite max open conns", type: "number" }
+  ],
+  kimi_workaround: [
+    { key: "max_tool_rounds", label: "kimi_workaround max tool rounds", type: "number" },
+    { key: "convergence_margin", label: "kimi_workaround convergence margin", type: "number" }
+  ],
+  metrics: [
+    { key: "default_limit", label: "metrics default limit", type: "number" },
+    { key: "max_limit", label: "metrics max limit", type: "number" }
+  ],
+  visual: [
+    { key: "provider", label: "visual provider", type: "string" },
+    { key: "model", label: "visual model", type: "string" },
+    { key: "max_rounds", label: "visual max rounds", type: "number" },
+    { key: "max_tokens", label: "visual max tokens", type: "number" }
+  ]
+};
+
+function extensionEntries(value: Record<string, unknown>): ExtensionEntry[] {
+  return Object.keys(value)
+    .sort((left, right) => left.localeCompare(right))
+    .map((name) => {
+      const objectValue = extensionObjectValue(value[name]);
+      return {
+        name,
+        config: objectRecordOrEmpty(objectValue.config),
+        enabled: extensionEnabledValue(value[name])
+      };
+    });
+}
+
+function extensionConfigFields(entry: ExtensionEntry) {
+  const knownFields = knownExtensionConfigFields[entry.name] ?? [];
+  const knownKeys = new Set(knownFields.map((field) => field.key));
+  const extraFields = Object.keys(entry.config)
+    .filter((key) => !knownKeys.has(key))
+    .sort((left, right) => left.localeCompare(right))
+    .flatMap((key) => {
+      const fieldType = extensionConfigFieldType(entry.config[key]);
+      return fieldType ? [{ key, label: `${entry.name} ${key}`, type: fieldType }] : [];
+    });
+  return knownFields.concat(extraFields);
+}
+
+function extensionConfigFieldType(value: unknown): ExtensionConfigFieldDef["type"] | undefined {
+  if (value === undefined || value === null) {
+    return "string";
+  }
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  if (typeof value === "number") {
+    return "number";
+  }
+  if (typeof value === "string") {
+    return "string";
+  }
+  return undefined;
+}
+
+function extensionEnabledValue(value: unknown) {
+  const objectValue = extensionObjectValue(value);
+  if (!("enabled" in objectValue)) {
+    return true;
+  }
+  if (typeof objectValue.enabled !== "boolean") {
+    throw new Error("Extension enabled value must be boolean when present.");
+  }
+  return objectValue.enabled;
+}
+
+function extensionObjectValue(value: unknown): Record<string, unknown> {
+  if (value === undefined || value === null) {
+    return {};
+  }
+  if (typeof value !== "object" || Array.isArray(value)) {
+    throw new Error("Extension entry must be an object.");
+  }
+  return value as Record<string, unknown>;
+}
+
+function objectRecordOrEmpty(value: unknown): Record<string, unknown> {
+  if (value === undefined || value === null) {
+    return {};
+  }
+  return objectRecord(value);
+}
+
+function objectStringDraft(value: unknown, secret: boolean) {
+  if (secret && value === "******") {
+    return "";
+  }
+  if (value === undefined || value === null) {
+    return "";
+  }
+  if (typeof value !== "string") {
+    throw new Error("Structured string field requires a string value.");
+  }
+  return value;
+}
+
+function objectNumberDraft(value: unknown) {
+  if (value === undefined || value === null || value === "") {
+    return "";
+  }
+  if (typeof value !== "number") {
+    throw new Error("Structured number field requires a number value.");
+  }
+  return String(value);
+}
+
+function stringListItemLabel(item: unknown) {
+  if (typeof item !== "string") {
+    throw new Error("Editable string list item must be a string.");
+  }
+  return item;
+}
+
+function localizedFallback(label: string): LocalizedLabel {
+  return {
+    "en-US": label,
+    "zh-CN": label
+  };
+}
+
+function orderModelBasicFields(fields: FieldSchema[]) {
+  return [
+    "context_window",
+    "max_output_tokens",
+    "description",
+    "base_instructions"
+  ].flatMap((path) => fields.filter((field) => field.path === path))
+    .concat(fields.filter((field) => !modelBasicPreferredOrder.has(field.path)));
+}
+
+const modelBasicPreferredOrder = new Set([
+  "context_window",
+  "max_output_tokens",
+  "description",
+  "base_instructions"
+]);
+
+function orderModelReasoningFields(fields: FieldSchema[]) {
+  return [
+    "supports_reasoning",
+    "default_reasoning_level",
+    "default_reasoning_summary",
+    "supported_reasoning_levels",
+    "supports_reasoning_summaries"
+  ].flatMap((path) => fields.filter((field) => field.path === path))
+    .concat(fields.filter((field) => !modelReasoningPaths.has(field.path)));
+}
+
+function isWideField(field: FieldSchema) {
+  return (
+    field.control === "textarea" ||
+    field.control === "object" ||
+    field.control === "array" ||
+    field.type === "object" ||
+    field.type === "array"
+  );
+}
+
+function fieldGridClass(field: FieldSchema) {
+  if (isWideField(field)) {
+    return "form-grid__wide";
+  }
+  if (
+    field.type === "number" ||
+    field.type === "boolean" ||
+    field.control === "number" ||
+    field.control === "switch" ||
+    compactFieldPaths.has(field.path)
+  ) {
+    return "form-grid__compact";
+  }
+  return "form-grid__medium";
+}
+
+const compactFieldPaths = new Set([
+  "active_provider",
+  "addr",
+  "default_reasoning_level",
+  "default_reasoning_summary",
+  "format",
+  "level",
+  "max_sessions",
+  "mode",
+  "priority",
+  "search_max_rounds",
+  "session_ttl",
+  "support",
+  "ttl",
+  "version"
+]);
+
+function errorMessage(cause: unknown, fallback: string) {
+  const rawErrors = rawErrorsFrom(cause);
+  if (rawErrors.length > 0 && typeof rawErrors[0]?.message === "string") {
+    return rawErrors[0].message;
+  }
+  if (cause instanceof Error) {
+    return cause.message;
+  }
+  return fallback;
+}
+
+function rawErrorsFrom(cause: unknown): Array<{ message?: unknown }> {
+  if (!cause || typeof cause !== "object") {
+    return [];
+  }
+  const raw = "raw" in cause ? (cause as { raw?: unknown }).raw : undefined;
+  if (!raw || typeof raw !== "object" || !("errors" in raw)) {
+    return [];
+  }
+  const errors = (raw as { errors?: unknown }).errors;
+  return Array.isArray(errors) ? errors : [];
+}
diff --git a/webui/src/features/configGraph/ResourceEditorDialog.tsx b/webui/src/features/configGraph/ResourceEditorDialog.tsx
new file mode 100644
index 00000000..fcccb48e
--- /dev/null
+++ b/webui/src/features/configGraph/ResourceEditorDialog.tsx
@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import { MaterialDialog } from "../../components/MaterialDialog";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { ConfigResource } from "../../rpc/types";
+import { ResourceEditorCard } from "./ResourceEditorCard";
+
+/**
+ * Modal editor for a single config resource. Wraps the full (embedded)
+ * ResourceEditorCard inside an official md-dialog so a long list of models,
+ * providers or routes stays scannable: the page shows compact summary rows and
+ * the full field surface only mounts when one entry is opened.
+ */
+export function ResourceEditorDialog({
+  onClose,
+  open,
+  resource,
+  revision,
+  modelDisplayNames,
+  title,
+  children
+}: {
+  onClose: () => void;
+  open: boolean;
+  resource: ConfigResource;
+  revision: string;
+  modelDisplayNames?: Record<string, string>;
+  title?: string;
+  children?: ReactNode;
+}) {
+  const { t } = useI18n();
+  const resourceTitle = title ?? resource.label;
+
+  return (
+    <MaterialDialog
+      open={open}
+      onClose={onClose}
+      ariaLabel={t("resource.editorAriaLabel", { title: resourceTitle, id: resource.id })}
+      headline={t("resource.editorHeading", { title: resourceTitle })}
+      className="resource-editor-dialog"
+    >
+      <ResourceEditorCard
+        embedded
+        resource={resource}
+        revision={revision}
+        modelDisplayNames={modelDisplayNames}
+        title={title}
+      >
+        {children}
+      </ResourceEditorCard>
+    </MaterialDialog>
+  );
+}
diff --git a/webui/src/features/configGraph/SchemaField.test.tsx b/webui/src/features/configGraph/SchemaField.test.tsx
new file mode 100644
index 00000000..a4e8b5f7
--- /dev/null
+++ b/webui/src/features/configGraph/SchemaField.test.tsx
@@ -0,0 +1,738 @@
+import { act, fireEvent, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { useState } from "react";
+import { AppShell } from "../../app/App";
+import type { FieldSchema } from "../../rpc/types";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { SchemaField } from "./SchemaField";
+
+describe("SchemaField", () => {
+  test("renders enum fields with the Material Web select", async () => {
+    const field: FieldSchema = {
+      path: "protocol",
+      type: "string",
+      label: "Protocol",
+      control: "select",
+      enum: ["anthropic", "openai-response", "openai-chat", "google-genai"],
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value="anthropic"
+        onChange={onChange}
+        docPath="providers.<key>.protocol"
+      />
+    );
+
+    expect(document.querySelector(".schema-field select")).not.toBeInTheDocument();
+    const materialSelect = await findMaterialSelect(document, "Upstream protocol");
+    expect(document.querySelector(".select-menu")).not.toBeInTheDocument();
+    expect(materialSelect.value).toBe("anthropic");
+    const options = getMaterialSelectOptions(materialSelect);
+    expect(options.map((option) => option.value)).toEqual([
+      "anthropic",
+      "openai-response",
+      "openai-chat",
+      "google-genai"
+    ]);
+    expect(options.map((option) => option.displayText)).toEqual([
+      "Anthropic",
+      "OpenAI Responses",
+      "OpenAI Chat",
+      "Gemini"
+    ]);
+    for (const option of options) {
+      const optionIcon = option.querySelector("[slot='start']");
+      expect(optionIcon).toBeInTheDocument();
+      expect(optionIcon?.querySelector("svg")).toBeInTheDocument();
+    }
+    expect(options[0].selected).toBe(true);
+    expect(materialSelect.label).toBe("Upstream protocol");
+    expect(materialSelect.supportingText).toBe("");
+    expect(materialSelect.closest(".mb-field__select-shell")).not.toBeInTheDocument();
+    expect(getOptionalMaterialIconButton(document, "Help for Upstream protocol")).not.toBeInTheDocument();
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+
+    setMaterialSelectValue(materialSelect, "openai-response");
+
+    expect(onChange).toHaveBeenCalledWith("openai-response");
+  });
+
+  test("shows field help from config docs on demand", async () => {
+    const field: FieldSchema = {
+      path: "base_url",
+      type: "string",
+      label: "Base URL",
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value="https://api.anthropic.com"
+        onChange={() => undefined}
+        docPath="providers.<key>.base_url"
+      />
+    );
+
+    const helpButton = getMaterialIconButton(document, "Help for Upstream base URL");
+    expect(helpButton.tagName.toLowerCase()).toBe("md-icon-button");
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+
+    await userEvent.click(helpButton);
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Upstream provider API URL");
+    expect(helpButton).toHaveAttribute("aria-describedby");
+  });
+
+  test("localizes fallback field help metadata in Chinese locale", async () => {
+    const field: FieldSchema = {
+      path: "custom_limit",
+      type: "number",
+      label: "Custom limit",
+      required: true,
+      hotReloadable: false
+    };
+
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value={10}
+        onChange={() => undefined}
+      />,
+      { locale: "zh-CN" }
+    );
+
+    await userEvent.click(getMaterialIconButton(document, "Custom limit 帮助"));
+
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip).toHaveTextContent("类型: number");
+    expect(tooltip).toHaveTextContent("必填");
+    expect(tooltip).toHaveTextContent("可能需要重启");
+  });
+
+  test("localizes provider protocol option labels in Chinese locale", async () => {
+    const field: FieldSchema = {
+      path: "protocol",
+      type: "string",
+      label: "Protocol",
+      control: "select",
+      enum: ["anthropic", "openai-response", "openai-chat", "google-genai"],
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value="openai-response"
+        onChange={() => undefined}
+        docPath="providers.<key>.protocol"
+      />,
+      { locale: "zh-CN" }
+    );
+
+    const materialSelect = await findMaterialSelect(document, "上游协议");
+    expect(getMaterialSelectOptions(materialSelect).map((option) => option.displayText)).toEqual([
+      "Anthropic",
+      "OpenAI Responses",
+      "OpenAI Chat",
+      "Gemini"
+    ]);
+  });
+
+  test("keeps trailing field help tooltip inside the viewport", async () => {
+    const field: FieldSchema = {
+      path: "config",
+      type: "string",
+      label: "Config",
+      control: "text",
+      hotReloadable: true
+    };
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: 360 });
+
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value="{}"
+        onChange={() => undefined}
+        docPath="extensions.<name>.config"
+      />
+    );
+
+    const helpButton = getMaterialIconButton(document, "Help for Extension config");
+    vi.spyOn(helpButton, "getBoundingClientRect").mockReturnValue({
+      x: 4,
+      y: 64,
+      width: 20,
+      height: 20,
+      top: 64,
+      right: 24,
+      bottom: 84,
+      left: 4,
+      toJSON: () => ({})
+    } as DOMRect);
+
+    await userEvent.click(helpButton);
+
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip).toHaveStyle({
+      left: "12px",
+      maxWidth: "336px",
+      position: "fixed",
+      top: "92px"
+    });
+  });
+
+  test("uses balanced spacing inside rich field help tooltips", async () => {
+    const field: FieldSchema = {
+      path: "api_key",
+      type: "string",
+      label: "API Key",
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell
+          content={(
+            <SchemaField
+              field={field}
+              value=""
+              onChange={() => undefined}
+              docPath="providers.<key>.api_key"
+            />
+          )}
+        />
+      </MemoryRouter>
+    );
+
+    await userEvent.click(getMaterialIconButton(document, "Help for Upstream API key"));
+
+    const tooltip = screen.getByRole("tooltip");
+    expect(getComputedStyle(tooltip).paddingTop).toBe("16px");
+    expect(getComputedStyle(tooltip).paddingRight).toBe("16px");
+    expect(getComputedStyle(tooltip).paddingBottom).toBe("16px");
+    expect(getComputedStyle(tooltip).paddingLeft).toBe("16px");
+    expect(getComputedStyle(tooltip.querySelector(".rich-tooltip__metas")!)).toHaveProperty("marginTop", "0px");
+  });
+
+  test("renders secret fields without exposing the value", () => {
+    const field: FieldSchema = {
+      path: "api_key",
+      type: "string",
+      label: "API key",
+      secret: true,
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(<SchemaField field={field} value="sk-secret" onChange={() => undefined} />);
+
+    const fieldElement = getMaterialTextField(document, "API key");
+    expect(document.querySelector(".mb-field__control input")).not.toBeInTheDocument();
+    expect(fieldElement.type).toBe("password");
+    expect(fieldElement.value).toBe("");
+  });
+
+  test("reveals a secret field value through the trailing visibility toggle", async () => {
+    const field: FieldSchema = {
+      path: "api_key",
+      type: "string",
+      label: "API key",
+      secret: true,
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(<SchemaField field={field} value="sk-secret" onChange={() => undefined} />);
+
+    const fieldElement = getMaterialTextField(document, "API key");
+    expect(fieldElement.type).toBe("password");
+
+    await userEvent.click(getMaterialIconButton(document, "Show token"));
+
+    expect(fieldElement.type).toBe("text");
+  });
+
+  test("keeps a newly entered secret draft visible after the controlled parent rerenders", () => {
+    const field: FieldSchema = {
+      path: "api_key",
+      type: "string",
+      label: "API key",
+      secret: true,
+      hotReloadable: true
+    };
+    const onParentChange = vi.fn();
+
+    function ControlledSecretField() {
+      const [value, setValue] = useState<unknown>("sk-saved");
+      return (
+        <SchemaField
+          field={field}
+          value={value}
+          onChange={(next) => {
+            setValue(next);
+            onParentChange(next);
+          }}
+        />
+      );
+    }
+
+    renderWithConsoleProviders(<ControlledSecretField />);
+
+    const fieldElement = getMaterialTextField(document, "API key");
+    expect(fieldElement.type).toBe("password");
+    expect(fieldElement.value).toBe("");
+
+    setMaterialTextFieldValue(fieldElement, "sk-live-draft");
+
+    expect(onParentChange).toHaveBeenCalledWith("sk-live-draft");
+    expect(fieldElement.value).toBe("sk-live-draft");
+  });
+
+  test("renders text fields with Material label and icon slots instead of an outer outlined field", () => {
+    const field: FieldSchema = {
+      path: "base_url",
+      type: "string",
+      label: "Base URL",
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value="https://api.example.invalid"
+        onChange={() => undefined}
+        docPath="providers.<key>.base_url"
+      />
+    );
+
+    const fieldElement = getMaterialTextField(document, "Upstream base URL");
+
+    expect(fieldElement.label).toBe("Upstream base URL");
+    expect(fieldElement).toHaveClass("material-text-field--single-line");
+    expect(fieldElement.getAttribute("spellcheck")).toBe("false");
+    expect(fieldElement.closest(".mb-field")?.querySelector(".mb-field__label")).not.toBeInTheDocument();
+    expect(fieldElement.querySelector("[slot='leading-icon']")).toHaveTextContent("link");
+    const trailing = fieldElement.querySelector("[slot='trailing-icon']");
+    expect(trailing?.tagName.toLowerCase()).toBe("md-icon-button");
+    expect(trailing).toHaveAttribute("aria-label", "Help for Upstream base URL");
+  });
+
+  test("keeps Material selects aligned with single-line text field density", async () => {
+    const selectField: FieldSchema = {
+      path: "protocol",
+      type: "string",
+      label: "Protocol",
+      control: "select",
+      enum: ["anthropic", "openai-response"],
+      hotReloadable: true
+    };
+    const textField: FieldSchema = {
+      path: "base_url",
+      type: "string",
+      label: "Base URL",
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell
+          content={(
+            <div>
+              <SchemaField
+                field={selectField}
+                value="anthropic"
+                onChange={() => undefined}
+                docPath="providers.<key>.protocol"
+              />
+              <SchemaField
+                field={textField}
+                value="https://api.example.invalid"
+                onChange={() => undefined}
+                docPath="providers.<key>.base_url"
+              />
+            </div>
+          )}
+        />
+      </MemoryRouter>
+    );
+
+    const materialSelect = await findMaterialSelect(document, "Upstream protocol");
+    const materialTextField = getMaterialTextField(document, "Upstream base URL");
+    const selectStyle = getComputedStyle(materialSelect);
+    const textFieldStyle = getComputedStyle(materialTextField);
+
+    expect(selectStyle.getPropertyValue("--md-outlined-field-top-space").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-top-space").trim()
+    );
+    expect(selectStyle.getPropertyValue("--md-outlined-field-bottom-space").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-bottom-space").trim()
+    );
+    expect(selectStyle.getPropertyValue("--md-outlined-select-text-field-input-text-line-height").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-input-text-line-height").trim()
+    );
+  });
+
+  test("keeps select fields on the official Material select surface", async () => {
+    const field: FieldSchema = {
+      path: "protocol",
+      type: "string",
+      label: "Protocol",
+      control: "select",
+      enum: ["anthropic", "openai-response"],
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell
+          content={(
+            <SchemaField
+              field={field}
+              value="anthropic"
+              onChange={() => undefined}
+              docPath="providers.<key>.protocol"
+            />
+          )}
+        />
+      </MemoryRouter>
+    );
+
+    const materialSelect = await findMaterialSelect(document, "Upstream protocol");
+
+    expect(materialSelect.label).toBe("Upstream protocol");
+    expect(materialSelect.closest(".mb-field__select-shell")).not.toBeInTheDocument();
+    expect(getOptionalMaterialIconButton(document, "Help for Upstream protocol")).not.toBeInTheDocument();
+    expect(Array.from(materialSelect.children).map((child) => [
+      child.tagName.toLowerCase(),
+      child.getAttribute("slot")
+    ])).toEqual([
+      ["span", "leading-icon"],
+      ["md-select-option", null],
+      ["md-select-option", null]
+    ]);
+    expect(Array.from(materialSelect.querySelectorAll("md-select-option")).map((child) => child.tagName.toLowerCase())).toEqual([
+      "md-select-option",
+      "md-select-option"
+    ]);
+  });
+
+  test("guides secret replacement without exposing the committed value", () => {
+    const field: FieldSchema = {
+      path: "api_key",
+      type: "string",
+      label: "API key",
+      secret: true,
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(<SchemaField field={field} value="sk-secret" onChange={() => undefined} />);
+
+    expect(getMaterialTextField(document, "API key").supportingText).toBe("Enter a new value to replace the saved secret.");
+    expect(screen.queryByDisplayValue("sk-secret")).not.toBeInTheDocument();
+  });
+
+  test("coerces numeric input before emitting changes", async () => {
+    const field: FieldSchema = {
+      path: "max_tokens",
+      type: "number",
+      label: "Max tokens",
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+    renderWithConsoleProviders(<SchemaField field={field} value={1024} onChange={onChange} />);
+
+    const input = getMaterialTextField(document, "Max tokens");
+    expect(document.querySelector(".mb-field__control input")).not.toBeInTheDocument();
+    expect(input.type).toBe("text");
+
+    setMaterialTextFieldValue(input, "2048");
+
+    expect(onChange).toHaveBeenLastCalledWith(2048);
+  });
+
+  test("rejects invalid numeric input without emitting autosave changes", async () => {
+    const field: FieldSchema = {
+      path: "max_tokens",
+      type: "number",
+      label: "Max tokens",
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+    renderWithConsoleProviders(<SchemaField field={field} value={1024} onChange={onChange} />);
+
+    const input = getMaterialTextField(document, "Max tokens");
+    onChange.mockClear();
+    setMaterialTextFieldValue(input, "abc");
+
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(screen.getByRole("alert")).toHaveTextContent("Invalid number");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("edits object scalar fields through structured Material controls without raw JSON editing", async () => {
+    const field: FieldSchema = {
+      path: "pricing",
+      type: "object",
+      label: "Pricing",
+      control: "object",
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+    const onCommitValue = vi.fn();
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        value={{
+          input_price: 3,
+          cache_enabled: true,
+          note: "default",
+          nested: { keep: true }
+        }}
+        onChange={onChange}
+        onCommitValue={onCommitValue}
+      />
+    );
+
+    expect(screen.queryByLabelText("Pricing JSON")).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-json-editor")).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-structured-summary")).toHaveTextContent("nested");
+    expect(document.querySelector(".schema-structured-summary")).toHaveTextContent("1 key");
+    expect(document.querySelector(".schema-structured-object")).toHaveAttribute("aria-label", "Pricing, structured editor");
+    expect(getMaterialTextField(document, "input_price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(document, "note")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialSwitch(document, "cache_enabled").selected).toBe(true);
+
+    setMaterialTextFieldValue(getMaterialTextField(document, "input_price"), "4.5");
+    fireEvent.blur(getMaterialTextField(document, "input_price"));
+
+    expect(onCommitValue).toHaveBeenCalledWith({
+      input_price: 4.5,
+      cache_enabled: true,
+      note: "default",
+      nested: { keep: true }
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("renders fixed object fields as structured editors without raw JSON text areas", () => {
+    const field: FieldSchema = {
+      path: "web_search",
+      type: "object",
+      label: "Web Search",
+      control: "object",
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+    renderWithConsoleProviders(
+      <SchemaField
+        field={field}
+        objectDisplay="expandedFixed"
+        value={{ support: "auto" }}
+        onChange={onChange}
+      />
+    );
+
+    expect(screen.queryByRole("button", { name: /Web Search.*1 key/ })).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-field__topline")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Web Search JSON")).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-json-editor")).not.toBeInTheDocument();
+    expect(getMaterialTextField(document, "support")).toBeInTheDocument();
+    expect(document.querySelector(".schema-structured-object")).toHaveTextContent("Web Search");
+    expect(document.querySelector(".schema-structured-object")).not.toHaveTextContent("Structured editor");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("localizes structured object editors in Chinese locale", () => {
+    const field: FieldSchema = {
+      path: "pricing",
+      type: "object",
+      label: "Pricing",
+      control: "object",
+      hotReloadable: true
+    };
+
+    renderWithConsoleProviders(
+      <SchemaField field={field} value={{ input_price: 3 }} onChange={() => undefined} />,
+      { locale: "zh-CN" }
+    );
+
+    const editor = document.querySelector(".schema-structured-object");
+    expect(editor).toHaveAttribute("aria-label", "Pricing，结构化编辑器");
+    expect(editor).not.toHaveTextContent("结构化编辑器");
+    expect(getMaterialTextField(document, "input_price")).toBeInTheDocument();
+    expect(queryMaterialTextField(document, "Pricing JSON")).not.toBeInTheDocument();
+  });
+
+  test("toggles boolean fields with the Material Web switch", async () => {
+    const field: FieldSchema = {
+      path: "enabled",
+      type: "boolean",
+      label: "Enabled",
+      control: "switch",
+      hotReloadable: true
+    };
+    const onChange = vi.fn();
+
+    renderWithConsoleProviders(<SchemaField field={field} value={false} onChange={onChange} />);
+
+    const materialSwitch = getMaterialSwitch(document, "Enabled");
+    expect(document.querySelector(".schema-switch")).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-field input[type='checkbox']")).not.toBeInTheDocument();
+    expect(materialSwitch.selected).toBe(false);
+
+    setMaterialSwitchSelected(materialSwitch, true);
+
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  test("marks textarea and object controls as wide layout fields", () => {
+    const field: FieldSchema = {
+      path: "system_prompt",
+      type: "string",
+      label: "System prompt",
+      control: "textarea",
+      hotReloadable: true
+    };
+
+    const { unmount } = renderWithConsoleProviders(
+      <SchemaField field={field} value="Be concise." onChange={() => undefined} />
+    );
+
+    expect(getMaterialTextField(document, "System prompt").closest(".mb-field")).toHaveClass("mb-field--wide");
+    expect(getMaterialTextField(document, "System prompt")).not.toHaveClass("material-text-field--single-line");
+
+    unmount();
+    renderWithConsoleProviders(
+      <SchemaField
+        field={{ ...field, path: "extensions", type: "object", label: "Extensions", control: "object" }}
+        value={{}}
+        onChange={() => undefined}
+      />
+    );
+
+    expect(document.querySelector(".schema-structured-object")?.closest(".schema-field")).toHaveClass("schema-field--wide");
+  });
+});
+
+function getMaterialSwitch(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-switch")).find(
+    (switchElement) => switchElement.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web switch labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-select")).find(
+    (selectElement) => materialElementLabel(selectElement as HTMLElement & { label?: string }) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element as HTMLElement & { supportingText: string; value: string };
+}
+
+type MaterialSelectOptionElement = HTMLElement & {
+  displayText: string;
+  selected: boolean;
+  value: string;
+};
+
+function getMaterialSelectOptions(select: ParentNode) {
+  const options = Array.from(select.querySelectorAll<MaterialSelectOptionElement>("md-select-option"));
+  if (options.length === 0) {
+    throw new Error("Expected Material Web select options to be rendered.");
+  }
+  return options;
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => materialElementLabel(textField as HTMLElement & { label?: string }) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web text field labelled "${label}".`);
+  }
+  return element as HTMLElement & { label: string; supportingText: string; type: string; value: string };
+}
+
+function queryMaterialTextField(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => materialElementLabel(textField as HTMLElement & { label?: string }) === label
+  ) ?? null;
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = getOptionalMaterialIconButton(container, label);
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getOptionalMaterialIconButton(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-icon-button")).find(
+    (button) => button.getAttribute("aria-label") === label
+  ) ?? null;
+}
+
+function getMaterialButton(container: ParentNode, label: RegExp) {
+  const element = Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (button) => label.test(button.getAttribute("aria-label") ?? button.textContent ?? "")
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+async function findMaterialSelect(container: ParentNode, label: string) {
+  const element = getMaterialSelect(container, label) as HTMLElement & {
+    label: string;
+    select: (value: string) => void;
+    supportingText: string;
+    updateComplete?: Promise<boolean>;
+    value: string;
+  };
+  await element.updateComplete;
+  return element;
+}
+
+function setMaterialTextFieldValue(element: HTMLElement & { value: string }, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function setMaterialSelectValue(element: HTMLElement & { select: (value: string) => void; value: string }, value: string) {
+  act(() => {
+    element.select(value);
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function setMaterialSwitchSelected(element: HTMLElement & { selected: boolean }, selected: boolean) {
+  act(() => {
+    element.selected = selected;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
diff --git a/webui/src/features/configGraph/SchemaField.tsx b/webui/src/features/configGraph/SchemaField.tsx
new file mode 100644
index 00000000..168a8c02
--- /dev/null
+++ b/webui/src/features/configGraph/SchemaField.tsx
@@ -0,0 +1,1145 @@
+import {
+  type CSSProperties,
+  type KeyboardEvent,
+  type RefObject,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { configDescriptions, type ConfigPath } from "../../configDocs/configDescriptions";
+import type { FieldSchema } from "../../rpc/types";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { MessageKey } from "../../i18n/messages";
+import { MaterialIconButton } from "../../components/MaterialButton";
+import { MaterialOutlinedTextField, type MaterialTextFieldElement } from "../../components/MaterialTextField";
+import { MaterialSwitch } from "../../components/MaterialSwitch";
+import { SelectMenu, type SelectMenuOption } from "./SelectMenu";
+import type { MdIconButton } from "@material/web/iconbutton/icon-button.js";
+import { type TooltipPosition, useAnchoredTooltipPosition } from "./helpTooltipPosition";
+import { protocolIconForValue } from "./modelProviderIcons";
+
+export type SchemaFieldProps = {
+  field: FieldSchema;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onCommit?: () => void;
+  onCommitValue?: (value: unknown) => void;
+  clearSecretDraft?: boolean;
+  disabled?: boolean;
+  idPrefix?: string;
+  docPath?: ConfigPath;
+  error?: string;
+  /** Explicit select options (e.g. route model/provider picked from existing resources).
+   *  When provided, the field renders as a select regardless of enum/control. */
+  options?: SelectMenuOption[];
+  /** Soft warning shown beneath the field (e.g. a route references a missing model). */
+  warning?: string;
+  leadingIconNode?: ReactNode;
+  objectDisplay?: "collapsible" | "expandedFixed";
+};
+
+export function SchemaField({
+  field,
+  value,
+  onChange,
+  onCommit,
+  onCommitValue,
+  clearSecretDraft = false,
+  disabled = false,
+  idPrefix,
+  docPath,
+  error,
+  options,
+  warning,
+  leadingIconNode,
+  objectDisplay = "collapsible"
+}: SchemaFieldProps) {
+  const { locale, t } = useI18n();
+  const id = useMemo(() => {
+    const prefix = idPrefix ? `${idPrefix}-` : "";
+    return `schema-field-${prefix}${field.path}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+  }, [field.path, idPrefix]);
+  const [text, setText] = useState(displayValue(field, value));
+  const [parseError, setParseError] = useState("");
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const emittedSecretDraftRef = useRef<string | undefined>(undefined);
+  const trailingHelpAnchorRef = useRef<MdIconButton>(null);
+  const displayLabel = fieldLabel(field, docPath, locale);
+
+  useEffect(() => {
+    if (isSecretField(field)) {
+      if (typeof value === "string" && value === emittedSecretDraftRef.current) {
+        setText(value);
+      } else {
+        emittedSecretDraftRef.current = undefined;
+        setText("");
+      }
+      setParseError("");
+      return;
+    }
+    setText(displayValue(field, value));
+    setParseError("");
+  }, [field, value]);
+
+  useEffect(() => {
+    if (!clearSecretDraft || !isSecretField(field)) {
+      return;
+    }
+    emittedSecretDraftRef.current = undefined;
+    setText("");
+    setParseError("");
+  }, [clearSecretDraft, field]);
+
+  const wide = isWideField(field);
+  const errorId = `${id}-error`;
+  const warnId = `${id}-warning`;
+  const helpId = `${id}-help`;
+  const helpParts = fieldHelpParts(field, displayLabel, docPath, locale, {
+    default: t("configDoc.default"),
+    defaultEmpty: t("configDoc.default.empty"),
+    optional: t("configDoc.optional"),
+    required: t("configDoc.required"),
+    restartMayBeRequired: t("configDoc.restartMayBeRequired"),
+    savedRealtime: t("configDoc.savedRealtime"),
+    sensitive: t("configDoc.sensitive"),
+    type: t("configDoc.type"),
+    typeArray: t("configDoc.type.array"),
+    typeBoolean: t("configDoc.type.boolean"),
+    typeHostPort: t("configDoc.type.hostPort"),
+    typeNumber: t("configDoc.type.number"),
+    typeObject: t("configDoc.type.object"),
+    typeString: t("configDoc.type.string"),
+    typeUrl: t("configDoc.type.url")
+  });
+  const fieldError = error || parseError;
+  const fieldDescribedBy = [
+    helpOpen ? helpId : undefined,
+    fieldError ? errorId : undefined
+  ].filter(Boolean).join(" ") || undefined;
+  const commitOnBlur = onCommit ? () => onCommit() : undefined;
+  const commit = onCommitValue ?? onChange;
+
+  if (field.control === "select" || (field.enum?.length ?? 0) > 0 || (options?.length ?? 0) > 0) {
+    const selected = typeof value === "string" ? value : "";
+    const useProtocolIcons = isProviderProtocolField(field, docPath);
+    const resolvedOptions: SelectMenuOption[] = options && options.length > 0
+      ? options
+      : (field.enum ?? []).map((option) => ({
+          value: option,
+          label: optionLabel(option, t),
+          leadingIcon: useProtocolIcons ? protocolIconForValue(option) : undefined
+        }));
+    const selectedOption = resolvedOptions.find((option) => option.value === selected);
+    return (
+      <div className={wide ? "mb-field mb-field--wide" : "mb-field"} data-variant="select">
+        <div className="mb-field__control">
+          <SelectMenu
+            id={id}
+            options={resolvedOptions}
+            value={selected}
+            onChange={(next) => commit(next)}
+            disabled={disabled}
+            ariaLabel={displayLabel}
+            describedBy={fieldError ? errorId : warning ? warnId : undefined}
+            error={Boolean(fieldError)}
+            errorText={fieldError}
+            leadingIcon={useProtocolIcons ? protocolIconForValue(selected) : selectedOption?.leadingIcon}
+            required={field.required}
+          />
+        </div>
+        <FieldA11yMessages errorId={errorId} error={fieldError} />
+        {warning && !fieldError ? (
+          <p className="field-warning" id={warnId} role="note">
+            {warning}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (field.type === "boolean" || field.control === "switch") {
+    return (
+      <div className="schema-field schema-field--inline">
+        <div className="schema-field__switch-line">
+          <span className="schema-field__label-row">
+            <span className="schema-field__label">
+              {displayLabel}
+              {field.required ? <span className="schema-field__required" aria-hidden="true">*</span> : null}
+            </span>
+            <FieldHelpButton
+              field={field}
+              label={displayLabel}
+              helpId={helpId}
+              helpOpen={helpOpen}
+              helpParts={helpParts}
+              setHelpOpen={setHelpOpen}
+            />
+          </span>
+          <MaterialSwitch
+            disabled={disabled}
+            label={displayLabel}
+            selected={Boolean(value)}
+            onChange={(selected) => commit(selected)}
+          />
+        </div>
+        {fieldError ? (
+          <p className="field-error" id={errorId} role="alert">
+            {fieldError}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (field.control === "textarea") {
+    return (
+      <div className={wide ? "mb-field mb-field--wide" : "mb-field"} data-variant="textarea">
+        <div className="mb-field__control">
+          <MaterialOutlinedTextField
+            ariaDescribedBy={fieldDescribedBy}
+            ariaLabel={displayLabel}
+            ariaInvalid={Boolean(fieldError)}
+            className="schema-text-field"
+            disabled={disabled}
+            error={Boolean(fieldError)}
+            errorText={fieldError}
+            id={id}
+            label={displayLabel}
+            required={field.required}
+            rows={6}
+            supportingText={fieldSupportingText(field, t("field.secretReplacementHint"))}
+            trailingIcon={(
+              <FieldHelpIconButton
+                anchorRef={trailingHelpAnchorRef}
+                field={field}
+                label={displayLabel}
+                helpId={helpId}
+                helpOpen={helpOpen}
+                setHelpOpen={setHelpOpen}
+                slot="trailing-icon"
+              />
+            )}
+            type="textarea"
+            value={text}
+            onInput={(next) => updateTextValue(next, onChange, field)}
+            onBlur={commitOnBlur}
+          />
+          <FieldHelpTooltip
+            anchorRef={trailingHelpAnchorRef}
+            helpId={helpId}
+            helpOpen={helpOpen}
+            helpParts={helpParts}
+          />
+        </div>
+        <FieldA11yMessages errorId={errorId} error={fieldError} />
+      </div>
+    );
+  }
+
+  if (field.type === "object" || field.type === "array" || field.control === "object" || field.control === "array") {
+    const summary = structuredSummary(value, field, displayLabel, t);
+    if (isObjectFieldValue(value)) {
+      return (
+        <div className={schemaFieldClass(wide)}>
+          {objectDisplay === "expandedFixed" ? null : (
+            <FieldTopline
+              field={field}
+              label={displayLabel}
+              helpId={helpId}
+              helpOpen={helpOpen}
+              helpParts={helpParts}
+              id={id}
+              setHelpOpen={setHelpOpen}
+            />
+          )}
+          <StructuredObjectEditor
+            describedBy={fieldDescribedBy}
+            disabled={disabled}
+            id={id}
+            label={displayLabel}
+            objectDisplay={objectDisplay}
+            onCommit={commit}
+            summary={summary}
+            value={value}
+            helpButton={objectDisplay === "expandedFixed" ? (
+              <FieldHelpIconButton
+                anchorRef={trailingHelpAnchorRef}
+                field={field}
+                label={displayLabel}
+                helpId={helpId}
+                helpOpen={helpOpen}
+                setHelpOpen={setHelpOpen}
+              />
+            ) : null}
+          />
+          {objectDisplay === "expandedFixed" ? (
+            <FieldHelpTooltip
+              anchorRef={trailingHelpAnchorRef}
+              helpId={helpId}
+              helpOpen={helpOpen}
+              helpParts={helpParts}
+            />
+          ) : null}
+          <FieldA11yMessages errorId={errorId} error={fieldError} />
+        </div>
+      );
+    }
+    return (
+      <div className={schemaFieldClass(wide)}>
+        {objectDisplay === "expandedFixed" ? null : (
+          <FieldTopline
+            field={field}
+            label={displayLabel}
+            helpId={helpId}
+            helpOpen={helpOpen}
+            helpParts={helpParts}
+            id={id}
+            setHelpOpen={setHelpOpen}
+          />
+        )}
+        <div
+          aria-describedby={fieldDescribedBy}
+          aria-label={t("field.structuredSummaryLabel", { label: displayLabel })}
+          className="schema-structured-summary"
+          id={id}
+        >
+          <div className="schema-structured-summary__header">
+            <span>{summary.title}</span>
+            <strong>{t("field.structuredReadonly")}</strong>
+            {objectDisplay === "expandedFixed" ? (
+              <FieldHelpIconButton
+                anchorRef={trailingHelpAnchorRef}
+                field={field}
+                label={displayLabel}
+                helpId={helpId}
+                helpOpen={helpOpen}
+                setHelpOpen={setHelpOpen}
+              />
+            ) : null}
+          </div>
+          {summary.rows.length ? (
+            <dl className="schema-structured-summary__rows">
+              {summary.rows.map((row) => (
+                <div className="schema-structured-summary__row" key={row.key}>
+                  <dt>{row.key}</dt>
+                  <dd>{row.value}</dd>
+                </div>
+              ))}
+            </dl>
+          ) : (
+            <p className="schema-structured-summary__empty">{t("field.structuredEmpty")}</p>
+          )}
+        </div>
+        {objectDisplay === "expandedFixed" ? (
+          <FieldHelpTooltip
+            anchorRef={trailingHelpAnchorRef}
+            helpId={helpId}
+            helpOpen={helpOpen}
+            helpParts={helpParts}
+          />
+        ) : null}
+        <FieldA11yMessages errorId={errorId} error={fieldError} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={wide ? "mb-field mb-field--wide" : "mb-field"} data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaDescribedBy={fieldDescribedBy}
+          ariaLabel={displayLabel}
+          ariaInvalid={Boolean(fieldError)}
+          autoComplete={field.secret ? "new-password" : undefined}
+          className="schema-text-field"
+          disabled={disabled}
+          error={Boolean(fieldError)}
+          errorText={fieldError}
+          id={id}
+          label={displayLabel}
+          leadingIcon={fieldLeadingIcon(field)}
+          leadingIconNode={leadingIconNode}
+          required={field.required}
+          supportingText={fieldSupportingText(field, t("field.secretReplacementHint"))}
+          trailingIcon={renderFieldTrailing({
+            field,
+            revealed,
+            setRevealed,
+            revealLabel: t("auth.revealToken"),
+            hideLabel: t("auth.hideToken"),
+            displayLabel,
+            helpId,
+            helpOpen,
+            setHelpOpen,
+            trailingHelpAnchorRef
+          })}
+          type={isSecretField(field) && !revealed ? "password" : "text"}
+          value={text}
+          onInput={(next) => updateTextValue(next, onChange, field)}
+          onBlur={commitOnBlur}
+        />
+        <FieldHelpTooltip
+          anchorRef={trailingHelpAnchorRef}
+          helpId={helpId}
+          helpOpen={helpOpen}
+          helpParts={helpParts}
+        />
+      </div>
+      <FieldA11yMessages errorId={errorId} error={fieldError} />
+    </div>
+  );
+
+  function updateTextValue(next: string, emit: (value: unknown) => void, schema: FieldSchema) {
+    setText(next);
+    if (isSecretField(schema)) {
+      emittedSecretDraftRef.current = next;
+    }
+    if (schema.type === "number" || schema.control === "number") {
+      if (next === "") {
+        setParseError("");
+        emit(undefined);
+        return;
+      }
+      const parsed = Number(next);
+      if (!Number.isFinite(parsed)) {
+        setParseError(t("field.invalidNumber"));
+        return;
+      }
+      setParseError("");
+      emit(parsed);
+      return;
+    }
+    setParseError("");
+    emit(next);
+  }
+}
+
+type FieldHelpParts = {
+  subhead: string;
+  body: string;
+  metas: { label?: string; value: string }[];
+};
+
+function fieldLeadingIcon(field: FieldSchema): string | undefined {
+  if (field.secret || field.control === "secret") {
+    return "key";
+  }
+  const path = field.path.toLowerCase();
+  if (path.includes("url") || path.includes("endpoint") || path.includes("addr")) {
+    return "link";
+  }
+  if (path.includes("model")) {
+    return "smart_toy";
+  }
+  if (path.includes("agent")) {
+    return "badge";
+  }
+  if (field.type === "number" || field.control === "number") {
+    return "tag";
+  }
+  return undefined;
+}
+
+function isProviderProtocolField(field: FieldSchema, docPath: ConfigPath | undefined) {
+  return field.path === "protocol" && docPath === "providers.<key>.protocol";
+}
+
+function fieldLabel(field: FieldSchema, docPath: ConfigPath | undefined, locale: "en-US" | "zh-CN") {
+  const entry = docPath ? configDescriptions[docPath] : undefined;
+  return entry?.title[locale] ?? field.label;
+}
+
+function FieldTopline({
+  field,
+  helpId,
+  helpOpen,
+  helpParts,
+  id,
+  label,
+  labelForControl = true,
+  labelId,
+  setHelpOpen
+}: {
+  field: FieldSchema;
+  helpId: string;
+  helpOpen: boolean;
+  helpParts: FieldHelpParts;
+  id: string;
+  label: string;
+  labelForControl?: boolean;
+  labelId?: string;
+  setHelpOpen: (open: boolean | ((current: boolean) => boolean)) => void;
+}) {
+  const labelContent = (
+    <>
+      {label}
+      {field.required ? <span className="schema-field__required" aria-hidden="true">*</span> : null}
+    </>
+  );
+
+  return (
+    <div className="schema-field__topline">
+      <span className="schema-field__label-row">
+        {labelForControl ? (
+          <label className="schema-field__label" htmlFor={id}>
+            {labelContent}
+          </label>
+        ) : (
+          <span className="schema-field__label" id={labelId}>
+            {labelContent}
+          </span>
+        )}
+        <FieldHelpButton
+          field={field}
+          label={label}
+          helpId={helpId}
+          helpOpen={helpOpen}
+          helpParts={helpParts}
+          setHelpOpen={setHelpOpen}
+        />
+      </span>
+    </div>
+  );
+}
+
+function StructuredObjectEditor({
+  describedBy,
+  disabled,
+  helpButton,
+  id,
+  label,
+  objectDisplay,
+  onCommit,
+  summary,
+  value
+}: {
+  describedBy?: string;
+  disabled: boolean;
+  helpButton: ReactNode;
+  id: string;
+  label: string;
+  objectDisplay: "collapsible" | "expandedFixed";
+  onCommit: (value: unknown) => void;
+  summary: StructuredSummary;
+  value: Record<string, unknown>;
+}) {
+  const { t } = useI18n();
+  const editableEntries = Object.entries(value).filter(([, entryValue]) => isStructuredEditableScalar(entryValue));
+  const summaryEntries = Object.entries(value).filter(([, entryValue]) => !isStructuredEditableScalar(entryValue));
+  return (
+    <div
+      aria-describedby={describedBy}
+      aria-label={t("field.structuredEditorLabel", { label })}
+      className="schema-structured-object"
+      id={id}
+    >
+      <div className="schema-structured-object__header">
+        <span>{label}</span>
+        {helpButton}
+      </div>
+      {editableEntries.length ? (
+        <div className="schema-structured-object__grid">
+          {editableEntries.map(([key, entryValue]) => (
+            <StructuredObjectEntry
+              disabled={disabled}
+              key={key}
+              label={key}
+              value={entryValue}
+              onCommit={(nextValue) => onCommit({ ...value, [key]: nextValue })}
+            />
+          ))}
+        </div>
+      ) : null}
+      {summaryEntries.length || editableEntries.length === 0 ? (
+        <StructuredObjectSummary
+          objectDisplay={objectDisplay}
+          summary={{
+            title: editableEntries.length === 0 ? summary.title : t("field.structuredNestedValues"),
+            rows: (editableEntries.length === 0 ? summary.rows : summaryEntries.map(([key, entryValue]) => ({
+              key,
+              value: structuredScalar(entryValue, undefined, t)
+            })))
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function StructuredObjectEntry({
+  disabled,
+  label,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  onCommit: (value: unknown) => void;
+  value: unknown;
+}) {
+  if (typeof value === "boolean") {
+    return (
+      <div className="schema-field schema-field--inline schema-structured-object__boolean">
+        <div className="schema-field__switch-line">
+          <span className="schema-field__label-row">
+            <span className="schema-field__label">{label}</span>
+          </span>
+          <MaterialSwitch
+            disabled={disabled}
+            label={label}
+            selected={value}
+            onChange={onCommit}
+          />
+        </div>
+      </div>
+    );
+  }
+  if (typeof value === "number") {
+    return (
+      <StructuredObjectNumberField
+        disabled={disabled}
+        label={label}
+        value={value}
+        onCommit={onCommit}
+      />
+    );
+  }
+  return (
+    <StructuredObjectTextField
+      disabled={disabled}
+      label={label}
+      value={typeof value === "string" ? value : ""}
+      onCommit={onCommit}
+    />
+  );
+}
+
+function StructuredObjectTextField({
+  disabled,
+  label,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  onCommit: (value: unknown) => void;
+  value: string;
+}) {
+  const [draft, setDraft] = useState(value);
+
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          disabled={disabled}
+          label={label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={() => {
+            if (draft !== value) {
+              onCommit(draft);
+            }
+          }}
+          onInput={setDraft}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StructuredObjectNumberField({
+  disabled,
+  label,
+  onCommit,
+  value
+}: {
+  disabled: boolean;
+  label: string;
+  onCommit: (value: unknown) => void;
+  value: number;
+}) {
+  const { t } = useI18n();
+  const [draft, setDraft] = useState(String(value));
+  const [localError, setLocalError] = useState("");
+
+  useEffect(() => {
+    setDraft(String(value));
+    setLocalError("");
+  }, [value]);
+
+  function commit() {
+    const trimmed = draft.trim();
+    if (trimmed === String(value)) {
+      setLocalError("");
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      setLocalError(t("field.invalidNumber"));
+      return;
+    }
+    setLocalError("");
+    onCommit(parsed);
+  }
+
+  return (
+    <div className="mb-field" data-variant="input">
+      <div className="mb-field__control">
+        <MaterialOutlinedTextField
+          ariaInvalid={Boolean(localError)}
+          disabled={disabled}
+          error={Boolean(localError)}
+          errorText={localError}
+          inputMode="decimal"
+          label={label}
+          spellCheck={false}
+          type="text"
+          value={draft}
+          onBlur={commit}
+          onInput={(next) => {
+            setDraft(next);
+            if (localError && next.trim() === String(value)) {
+              setLocalError("");
+            }
+          }}
+        />
+      </div>
+      {localError ? (
+        <p className="field-error field-error--sr" role="alert">
+          {localError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function StructuredObjectSummary({
+  objectDisplay,
+  summary
+}: {
+  objectDisplay: "collapsible" | "expandedFixed";
+  summary: StructuredSummary;
+}) {
+  const { t } = useI18n();
+  return (
+    <div className="schema-structured-summary schema-structured-summary--nested">
+      <div className="schema-structured-summary__header">
+        <span>{summary.title}</span>
+        <strong>{t(objectDisplay === "expandedFixed" ? "field.structuredReadonly" : "field.structuredSummary")}</strong>
+      </div>
+      {summary.rows.length ? (
+        <dl className="schema-structured-summary__rows">
+          {summary.rows.map((row) => (
+            <div className="schema-structured-summary__row" key={row.key}>
+              <dt>{row.key}</dt>
+              <dd>{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : (
+        <p className="schema-structured-summary__empty">{t("field.structuredEmpty")}</p>
+      )}
+    </div>
+  );
+}
+
+function FieldHelpButton({
+  field,
+  helpId,
+  helpOpen,
+  helpParts,
+  label,
+  setHelpOpen
+}: {
+  field: FieldSchema;
+  helpId: string;
+  helpOpen: boolean;
+  helpParts: FieldHelpParts;
+  label: string;
+  setHelpOpen: (open: boolean | ((current: boolean) => boolean)) => void;
+}) {
+  const anchorRef = useRef<MdIconButton>(null);
+  return (
+    <span className="schema-field__help-wrap">
+      <FieldHelpIconButton
+        anchorRef={anchorRef}
+        field={field}
+        label={label}
+        helpId={helpId}
+        helpOpen={helpOpen}
+        setHelpOpen={setHelpOpen}
+      />
+      <FieldHelpTooltip
+        anchorRef={anchorRef}
+        helpId={helpId}
+        helpOpen={helpOpen}
+        helpParts={helpParts}
+      />
+    </span>
+  );
+}
+
+function renderFieldTrailing({
+  field,
+  revealed,
+  setRevealed,
+  revealLabel,
+  hideLabel,
+  displayLabel,
+  helpId,
+  helpOpen,
+  setHelpOpen,
+  trailingHelpAnchorRef
+}: {
+  field: FieldSchema;
+  revealed: boolean;
+  setRevealed: (next: boolean | ((current: boolean) => boolean)) => void;
+  revealLabel: string;
+  hideLabel: string;
+  displayLabel: string;
+  helpId: string;
+  helpOpen: boolean;
+  setHelpOpen: (open: boolean | ((current: boolean) => boolean)) => void;
+  trailingHelpAnchorRef?: RefObject<MdIconButton | null>;
+}) {
+  // Material Web's text-field trailing slot holds exactly one icon (fixed-width
+  // container + absolutely-positioned slotted content). Secret fields use that
+  // slot for the visibility toggle; the help affordance is dropped for them
+  // (they still show their supporting text).
+  if (isSecretField(field)) {
+    return (
+      <MaterialIconButton
+        className="field-visibility-toggle"
+        icon={revealed ? "visibility_off" : "visibility"}
+        label={revealed ? hideLabel : revealLabel}
+        onClick={() => setRevealed((current) => !current)}
+        onMouseDown={(event) => event.preventDefault()}
+        slot="trailing-icon"
+      />
+    );
+  }
+  return (
+    <FieldHelpIconButton
+      anchorRef={trailingHelpAnchorRef}
+      field={field}
+      label={displayLabel}
+      helpId={helpId}
+      helpOpen={helpOpen}
+      setHelpOpen={setHelpOpen}
+      slot="trailing-icon"
+    />
+  );
+}
+
+function FieldHelpIconButton({
+  anchorRef,
+  field,
+  helpId,
+  helpOpen,
+  label,
+  setHelpOpen,
+  slot
+}: {
+  anchorRef?: RefObject<MdIconButton | null>;
+  field: FieldSchema;
+  helpId: string;
+  helpOpen: boolean;
+  label: string;
+  setHelpOpen: (open: boolean | ((current: boolean) => boolean)) => void;
+  slot?: string;
+}) {
+  const { t } = useI18n();
+  const openedByHover = useRef(false);
+
+  return (
+    <MaterialIconButton
+      className="schema-field__help"
+      describedBy={helpOpen ? helpId : undefined}
+      icon="help"
+      label={t("field.helpFor", { label })}
+      onBlur={() => setHelpOpen(false)}
+      onClick={() => {
+        if (openedByHover.current) {
+          openedByHover.current = false;
+          setHelpOpen(true);
+          return;
+        }
+        setHelpOpen((open) => !open);
+      }}
+      onFocus={() => setHelpOpen(true)}
+      onKeyDown={(event: KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Escape") {
+          setHelpOpen(false);
+        }
+      }}
+      onMouseDown={(event) => event.preventDefault()}
+      onMouseEnter={() => {
+        openedByHover.current = true;
+        setHelpOpen(true);
+      }}
+      onMouseLeave={() => {
+        openedByHover.current = false;
+        setHelpOpen(false);
+      }}
+      ref={anchorRef}
+      slot={slot}
+    />
+  );
+}
+
+function FieldHelpTooltip({
+  anchorRef,
+  helpId,
+  helpOpen,
+  helpParts
+}: {
+  anchorRef: RefObject<HTMLElement | null>;
+  helpId: string;
+  helpOpen: boolean;
+  helpParts: FieldHelpParts;
+}) {
+  const position = useAnchoredTooltipPosition(anchorRef, helpOpen);
+  const style = tooltipPositionStyle(position);
+  return helpOpen ? (
+    <span className="rich-tooltip" id={helpId} role="tooltip" style={style}>
+      {helpParts.subhead ? <span className="rich-tooltip__subhead">{helpParts.subhead}</span> : null}
+      {helpParts.body ? <span className="rich-tooltip__body">{helpParts.body}</span> : null}
+      {helpParts.metas.length ? (
+        <span className="rich-tooltip__metas">
+          {helpParts.metas.map((meta, index) => (
+            <span className="rich-tooltip__chip" key={index}>
+              {meta.label ? `${meta.label}: ${meta.value}` : meta.value}
+            </span>
+          ))}
+        </span>
+      ) : null}
+    </span>
+  ) : null;
+}
+
+function tooltipPositionStyle(position: TooltipPosition | undefined): CSSProperties | undefined {
+  if (!position) {
+    return undefined;
+  }
+  return {
+    left: `${position.left}px`,
+    maxWidth: `${position.maxWidth}px`,
+    position: "fixed",
+    top: `${position.top}px`
+  };
+}
+
+function FieldA11yMessages({
+  errorId,
+  error
+}: {
+  errorId: string;
+  error: string;
+}) {
+  return (
+    <>
+      {error ? (
+        <p className="field-error field-error--sr" id={errorId} role="alert">
+          {error}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+function fieldSupportingText(field: FieldSchema, secretReplacementHint: string) {
+  if (field.secret) {
+    return secretReplacementHint;
+  }
+  return "";
+}
+
+function schemaFieldClass(wide: boolean) {
+  return wide ? "schema-field schema-field--wide" : "schema-field";
+}
+
+function isWideField(field: FieldSchema) {
+  return (
+    field.control === "textarea" ||
+    field.control === "object" ||
+    field.control === "array" ||
+    field.type === "object" ||
+    field.type === "array"
+  );
+}
+
+function displayValue(field: FieldSchema, value: unknown) {
+  if (isSecretField(field)) {
+    return "";
+  }
+  if (value === undefined || value === null) {
+    return "";
+  }
+  if (field.type === "object" || field.type === "array" || field.control === "object" || field.control === "array") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+function inputType(field: FieldSchema) {
+  if (isSecretField(field)) {
+    return "password";
+  }
+  if (field.type === "number" || field.control === "number") {
+    return "text";
+  }
+  return "text";
+}
+
+function isSecretField(field: FieldSchema) {
+  return field.secret || field.control === "secret";
+}
+
+function fieldHelpParts(
+  field: FieldSchema,
+  label: string,
+  docPath: ConfigPath | undefined,
+  locale: "en-US" | "zh-CN",
+  labels: FieldHelpLabels
+): FieldHelpParts {
+  const entry = docPath ? configDescriptions[docPath] : undefined;
+  const metas: { label?: string; value: string }[] = [];
+  if (entry) {
+    metas.push({ label: labels.type, value: localizedConfigMetaValue(entry.type, labels) });
+    if (entry.defaultValue) {
+      metas.push({ label: labels.default, value: localizedConfigMetaValue(String(entry.defaultValue), labels) });
+    }
+    if (entry.sensitive || field.secret) {
+      metas.push({ value: labels.sensitive });
+    }
+    return { subhead: label, body: entry.description[locale], metas };
+  }
+  metas.push({ label: labels.type, value: field.type });
+  metas.push({ value: field.required ? labels.required : labels.optional });
+  if (field.secret) {
+    metas.push({ value: labels.sensitive });
+  }
+  metas.push({ value: field.hotReloadable ? labels.savedRealtime : labels.restartMayBeRequired });
+  return { subhead: label, body: "", metas };
+}
+
+type FieldHelpLabels = {
+  default: string;
+  defaultEmpty: string;
+  optional: string;
+  required: string;
+  restartMayBeRequired: string;
+  savedRealtime: string;
+  sensitive: string;
+  type: string;
+  typeArray: string;
+  typeBoolean: string;
+  typeHostPort: string;
+  typeNumber: string;
+  typeObject: string;
+  typeString: string;
+  typeUrl: string;
+};
+
+function localizedConfigMetaValue(value: string, labels: FieldHelpLabels) {
+  const normalized = value.trim().toLowerCase();
+  const localized: Record<string, string> = {
+    array: labels.typeArray,
+    boolean: labels.typeBoolean,
+    empty: labels.defaultEmpty,
+    "host:port": labels.typeHostPort,
+    number: labels.typeNumber,
+    object: labels.typeObject,
+    string: labels.typeString,
+    url: labels.typeUrl
+  };
+  return localized[normalized] ?? value;
+}
+
+function optionLabel(option: string, t: (key: MessageKey) => string) {
+  const labels: Record<string, MessageKey> = {
+    anthropic: "provider.protocol.anthropic",
+    "openai-response": "provider.protocol.openaiResponses",
+    "openai-chat": "provider.protocol.openaiChat",
+    "google-genai": "provider.protocol.googleGenai"
+  };
+  const key = labels[option];
+  return key ? t(key) : option;
+}
+
+type StructuredSummary = {
+  rows: Array<{ key: string; value: string }>;
+  title: string;
+};
+
+function structuredSummary(
+  value: unknown,
+  field: FieldSchema,
+  label: string,
+  t: (key: MessageKey, values?: Record<string, string | number>) => string
+): StructuredSummary {
+  if (Array.isArray(value)) {
+    return {
+      title: label,
+      rows: value.slice(0, 6).map((item, index) => ({
+        key: String(index + 1),
+        value: structuredScalar(item, field, t)
+      }))
+    };
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>);
+    return {
+      title: label,
+      rows: entries.slice(0, 6).map(([key, item]) => ({
+        key,
+        value: structuredScalar(item, field, t)
+      }))
+    };
+  }
+  return {
+    title: label,
+    rows: []
+  };
+}
+
+function structuredScalar(
+  value: unknown,
+  field: FieldSchema | undefined,
+  t: (key: MessageKey, values?: Record<string, string | number>) => string
+) {
+  if (value === undefined || value === null || value === "") {
+    return t("field.structuredEmptyValue");
+  }
+  if (Array.isArray(value)) {
+    return t(summaryKey("field.summary.items", value.length), { count: value.length });
+  }
+  if (value && typeof value === "object") {
+    const count = Object.keys(value).length;
+    return t(summaryKey("field.summary.keys", count), { count });
+  }
+  if (field?.secret) {
+    return "******";
+  }
+  return String(value);
+}
+
+function summaryKey(prefix: "field.summary.items" | "field.summary.keys", count: number): MessageKey {
+  return `${prefix}.${count === 1 ? "one" : "many"}` as MessageKey;
+}
+
+function isObjectFieldValue(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function isStructuredEditableScalar(value: unknown) {
+  return value === undefined || value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
diff --git a/webui/src/features/configGraph/SelectMenu.tsx b/webui/src/features/configGraph/SelectMenu.tsx
new file mode 100644
index 00000000..dc1513b8
--- /dev/null
+++ b/webui/src/features/configGraph/SelectMenu.tsx
@@ -0,0 +1,58 @@
+import { MaterialSelect } from "../../components/MaterialSelect";
+import type { ReactNode } from "react";
+
+export type SelectMenuOption = {
+  value: string;
+  label: string;
+  leadingIcon?: ReactNode;
+};
+
+export function SelectMenu({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  describedBy,
+  error,
+  errorText,
+  ariaLabel,
+  leadingIcon,
+  placeholder,
+  required,
+  supportingText
+}: {
+  options: SelectMenuOption[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  id?: string;
+  describedBy?: string;
+  error?: boolean;
+  errorText?: string;
+  ariaLabel?: string;
+  leadingIcon?: ReactNode;
+  placeholder?: string;
+  required?: boolean;
+  supportingText?: string;
+}) {
+  return (
+    <MaterialSelect
+      ariaLabel={ariaLabel}
+      describedBy={describedBy}
+      disabled={disabled}
+      error={error}
+      errorText={errorText}
+      label={ariaLabel ?? placeholder ?? ""}
+      leadingIcon={leadingIcon}
+      options={options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        leadingIcon: option.leadingIcon
+      }))}
+      required={required}
+      supportingText={supportingText}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
diff --git a/webui/src/features/configGraph/configDocPath.ts b/webui/src/features/configGraph/configDocPath.ts
new file mode 100644
index 00000000..bedfa642
--- /dev/null
+++ b/webui/src/features/configGraph/configDocPath.ts
@@ -0,0 +1,64 @@
+import type { ConfigPath } from "../../configDocs/configDescriptions";
+import type { ConfigResource, FieldSchema } from "../../rpc/types";
+
+export function configDocPathForResource(
+  resource: Pick<ConfigResource, "kind" | "id">,
+  field: Pick<FieldSchema, "path">
+): ConfigPath | undefined {
+  switch (resource.kind) {
+    case "mode":
+      return field.path === "mode" ? "mode" : undefined;
+    case "trace":
+      return topLevelPath("trace", field.path);
+    case "log":
+      return topLevelPath("log", field.path);
+    case "server":
+      return topLevelPath("server", field.path);
+    case "defaults":
+      return topLevelPath("defaults", field.path);
+    case "web_search":
+      return topLevelPath("web_search", field.path);
+    case "cache":
+      return topLevelPath("cache", field.path);
+    case "persistence":
+      return topLevelPath("persistence", field.path);
+    case "proxy":
+      return topLevelPath("proxy", field.path);
+    case "provider":
+      return providerPath(field.path);
+    case "provider_offer":
+      return providerOfferPath(field.path);
+    case "model":
+      return modelPath(field.path);
+    case "route":
+      return routePath(field.path);
+    case "extension":
+      return extensionPath(field.path);
+    default:
+      return undefined;
+  }
+}
+
+function topLevelPath(prefix: string, fieldPath: string) {
+  return `${prefix}.${fieldPath}` as ConfigPath;
+}
+
+function providerPath(fieldPath: string) {
+  return `providers.<key>.${fieldPath}` as ConfigPath;
+}
+
+function providerOfferPath(fieldPath: string) {
+  return `providers.<key>.offers[].${fieldPath}` as ConfigPath;
+}
+
+function modelPath(fieldPath: string) {
+  return `models.<slug>.${fieldPath}` as ConfigPath;
+}
+
+function routePath(fieldPath: string) {
+  return `routes.<alias>.${fieldPath}` as ConfigPath;
+}
+
+function extensionPath(fieldPath: string) {
+  return `extensions.<name>.${fieldPath}` as ConfigPath;
+}
diff --git a/webui/src/features/configGraph/editorStatus.tsx b/webui/src/features/configGraph/editorStatus.tsx
new file mode 100644
index 00000000..8e8e53f5
--- /dev/null
+++ b/webui/src/features/configGraph/editorStatus.tsx
@@ -0,0 +1,32 @@
+import { createContext, useContext, useEffect, type ReactNode } from "react";
+import type { AutosaveFieldStatus } from "./useAutosaveField";
+
+export type FieldStatusReporter = (id: string, status: AutosaveFieldStatus) => void;
+
+const EditorStatusContext = createContext<FieldStatusReporter | null>(null);
+
+export function EditorStatusProvider({
+  report,
+  children
+}: {
+  report: FieldStatusReporter;
+  children: ReactNode;
+}) {
+  return <EditorStatusContext.Provider value={report}>{children}</EditorStatusContext.Provider>;
+}
+
+/**
+ * Reports a single field's live autosave status up to the nearest editor card so
+ * the card can show one consolidated indicator instead of one per field.
+ */
+export function useReportFieldStatus(id: string, status: AutosaveFieldStatus) {
+  const report = useContext(EditorStatusContext);
+  useEffect(() => {
+    report?.(id, status);
+  }, [report, id, status]);
+  useEffect(() => {
+    return () => {
+      report?.(id, "idle");
+    };
+  }, [report, id]);
+}
diff --git a/webui/src/features/configGraph/helpTooltipPosition.ts b/webui/src/features/configGraph/helpTooltipPosition.ts
new file mode 100644
index 00000000..b0ab693b
--- /dev/null
+++ b/webui/src/features/configGraph/helpTooltipPosition.ts
@@ -0,0 +1,61 @@
+import { type RefObject, useEffect, useState } from "react";
+
+export type TooltipPosition = {
+  left: number;
+  maxWidth: number;
+  top: number;
+};
+
+const tooltipViewportPadding = 12;
+const tooltipAnchorGap = 8;
+const tooltipPreferredWidth = 320;
+
+export function useAnchoredTooltipPosition(
+  anchorRef: RefObject<HTMLElement | null>,
+  open: boolean
+): TooltipPosition | undefined {
+  const [position, setPosition] = useState<TooltipPosition>();
+
+  useEffect(() => {
+    if (!open) {
+      setPosition(undefined);
+      return undefined;
+    }
+
+    function updatePosition() {
+      const anchor = anchorRef.current;
+      if (!anchor) {
+        setPosition(undefined);
+        return;
+      }
+      setPosition(calculateTooltipPosition(anchor.getBoundingClientRect()));
+    }
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [anchorRef, open]);
+
+  return position;
+}
+
+function calculateTooltipPosition(anchorRect: DOMRect): TooltipPosition {
+  const viewportWidth = Math.max(window.innerWidth || tooltipPreferredWidth, tooltipViewportPadding * 2);
+  const maxWidth = Math.max(0, viewportWidth - tooltipViewportPadding * 2);
+  const tooltipWidth = Math.min(tooltipPreferredWidth, maxWidth);
+  const preferredLeft = anchorRect.right - tooltipWidth;
+  const maxLeft = viewportWidth - tooltipViewportPadding - tooltipWidth;
+  return {
+    left: Math.round(clamp(preferredLeft, tooltipViewportPadding, maxLeft)),
+    maxWidth: Math.round(maxWidth),
+    top: Math.round(anchorRect.bottom + tooltipAnchorGap)
+  };
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
diff --git a/webui/src/features/configGraph/modelProviderIcons.tsx b/webui/src/features/configGraph/modelProviderIcons.tsx
new file mode 100644
index 00000000..3d439eec
--- /dev/null
+++ b/webui/src/features/configGraph/modelProviderIcons.tsx
@@ -0,0 +1,151 @@
+import Anthropic from "@lobehub/icons/es/Anthropic/components/Mono";
+import Baichuan from "@lobehub/icons/es/Baichuan/components/Mono";
+import Claude from "@lobehub/icons/es/Claude/components/Mono";
+import Cohere from "@lobehub/icons/es/Cohere/components/Mono";
+import DeepSeek from "@lobehub/icons/es/DeepSeek/components/Mono";
+import Doubao from "@lobehub/icons/es/Doubao/components/Mono";
+import Gemini from "@lobehub/icons/es/Gemini/components/Mono";
+import Gemma from "@lobehub/icons/es/Gemma/components/Mono";
+import Google from "@lobehub/icons/es/Google/components/Mono";
+import Grok from "@lobehub/icons/es/Grok/components/Mono";
+import Kimi from "@lobehub/icons/es/Kimi/components/Mono";
+import Meta from "@lobehub/icons/es/Meta/components/Mono";
+import Minimax from "@lobehub/icons/es/Minimax/components/Mono";
+import Mistral from "@lobehub/icons/es/Mistral/components/Mono";
+import Moonshot from "@lobehub/icons/es/Moonshot/components/Mono";
+import OpenAI from "@lobehub/icons/es/OpenAI/components/Mono";
+import Perplexity from "@lobehub/icons/es/Perplexity/components/Mono";
+import Qwen from "@lobehub/icons/es/Qwen/components/Mono";
+import XAI from "@lobehub/icons/es/XAI/components/Mono";
+import Yi from "@lobehub/icons/es/Yi/components/Mono";
+import Zhipu from "@lobehub/icons/es/Zhipu/components/Mono";
+import type { ReactNode } from "react";
+import type { ConfigResource, FieldSchema } from "../../rpc/types";
+
+type IconComponent = (props: { className?: string; size?: number | string }) => ReactNode;
+
+const iconSize = 18;
+
+const modelMatchers: Array<{ icon: IconComponent; patterns: RegExp[] }> = [
+  { icon: Claude, patterns: [/\bclaude\b/i, /\banthropic\b/i] },
+  { icon: OpenAI, patterns: [/\b(gpt|openai|o[1345]|chatgpt)\b/i] },
+  { icon: Gemini, patterns: [/\b(gemini|google-genai)\b/i] },
+  { icon: Gemma, patterns: [/\bgemma\b/i] },
+  { icon: DeepSeek, patterns: [/\bdeepseek\b/i] },
+  { icon: Qwen, patterns: [/\b(qwen|qwq|qvq|tongyi)\b/i] },
+  { icon: Mistral, patterns: [/\b(mistral|mixtral|codestral)\b/i] },
+  { icon: Meta, patterns: [/\b(llama|meta)\b/i] },
+  { icon: Grok, patterns: [/\b(grok|xai)\b/i] },
+  { icon: XAI, patterns: [/\bx-ai\b/i] },
+  { icon: Kimi, patterns: [/\b(kimi|moonshot)\b/i] },
+  { icon: Moonshot, patterns: [/\bmoonshot\b/i] },
+  { icon: Doubao, patterns: [/\b(doubao|volcengine|bytedance)\b/i] },
+  { icon: Baichuan, patterns: [/\bbaichuan\b/i] },
+  { icon: Yi, patterns: [/\byi\b/i, /\b01-ai\b/i] },
+  { icon: Zhipu, patterns: [/\b(zhipu|glm|chatglm)\b/i] },
+  { icon: Minimax, patterns: [/\bminimax\b/i] },
+  { icon: Perplexity, patterns: [/\b(perplexity|sonar)\b/i] },
+  { icon: Cohere, patterns: [/\b(cohere|command-r)\b/i] }
+];
+
+const protocolIcons: Record<string, IconComponent> = {
+  anthropic: Anthropic,
+  "google-genai": Gemini,
+  "openai-chat": OpenAI,
+  "openai-response": OpenAI
+};
+
+export function protocolIconForValue(protocol: string) {
+  const Icon = protocolIcons[protocol];
+  return Icon ? <Icon className="lobe-brand-icon" size={iconSize} /> : undefined;
+}
+
+export function modelIconForName(name: string | undefined) {
+  if (!name) {
+    return undefined;
+  }
+  const normalized = name.trim();
+  if (!normalized) {
+    return undefined;
+  }
+  const match = modelMatchers.find((candidate) => candidate.patterns.some((pattern) => pattern.test(normalized)));
+  const Icon = match?.icon;
+  return Icon ? <Icon className="lobe-brand-icon" size={iconSize} /> : undefined;
+}
+
+function modelIconForCandidateNames(...names: Array<string | undefined>) {
+  for (const name of names) {
+    const icon = modelIconForName(name);
+    if (icon) {
+      return icon;
+    }
+  }
+  return undefined;
+}
+
+export function resourceFieldModelIcon(
+  resource: ConfigResource,
+  field: FieldSchema,
+  modelDisplayNames: Record<string, string> = {}
+) {
+  const value = resource.value[field.path];
+  if (resource.kind === "model" && field.path === "display_name") {
+    return modelIconForName(stringValue(value) || resource.id || resource.label);
+  }
+  if (resource.kind === "route" && routeModelIconFields.has(field.path)) {
+    const modelId = stringValue(resource.value.model);
+    const fieldValue = stringValue(value);
+    if (field.path === "model") {
+      return modelIconForCandidateNames(modelDisplayNames[fieldValue], modelDisplayNames[modelId], fieldValue, modelId);
+    }
+    return modelIconForCandidateNames(fieldValue, modelDisplayNames[modelId], modelId, resource.id, resource.label);
+  }
+  if (resource.kind === "defaults" && field.path === "model") {
+    const modelId = stringValue(value);
+    return modelIconForCandidateNames(modelDisplayNames[modelId], modelId);
+  }
+  return undefined;
+}
+
+export function modelSelectOptions(resources: ConfigResource[]) {
+  return resources
+    .filter((resource) => resource.kind === "model")
+    .map((resource) => ({
+      label: resource.id,
+      leadingIcon: modelIconForName(modelDisplayName(resource)),
+      value: resource.id
+    }));
+}
+
+export function providerSelectOptions(resources: ConfigResource[]) {
+  return resources
+    .filter((resource) => resource.kind === "provider")
+    .map((resource) => ({
+      label: resource.id,
+      leadingIcon: protocolIconForValue(stringValue(resource.value.protocol)),
+      value: resource.id
+    }));
+}
+
+export function modelDisplayNamesById(resources: ConfigResource[]) {
+  const modelNames = Object.fromEntries(resources
+    .filter((resource) => resource.kind === "model")
+    .map((resource) => [resource.id, modelDisplayName(resource)]));
+  const routeNames = resources
+    .filter((resource) => resource.kind === "route")
+    .map((resource) => {
+      const routeModel = stringValue(resource.value.model);
+      return [resource.id, modelNames[routeModel] || routeModel || modelDisplayName(resource)] as const;
+    });
+  return Object.fromEntries([...Object.entries(modelNames), ...routeNames]);
+}
+
+const routeModelIconFields = new Set(["model", "to", "display_name"]);
+
+function stringValue(value: unknown) {
+  return typeof value === "string" ? value : "";
+}
+
+function modelDisplayName(resource: ConfigResource) {
+  return stringValue(resource.value.display_name) || resource.label || resource.id;
+}
diff --git a/webui/src/features/configGraph/useAutosaveField.test.tsx b/webui/src/features/configGraph/useAutosaveField.test.tsx
new file mode 100644
index 00000000..c5c057d6
--- /dev/null
+++ b/webui/src/features/configGraph/useAutosaveField.test.tsx
@@ -0,0 +1,314 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import type { PatchResponse } from "../../rpc/types";
+import { useAutosaveField, type SaveField } from "./useAutosaveField";
+
+const committed = (revision = "rev-2"): PatchResponse => ({
+  result: "committed",
+  revision
+});
+
+describe("useAutosaveField", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("marks the field dirty as soon as local value changes", () => {
+    const save: SaveField<string> = vi.fn();
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "defaults",
+        resourceId: "main",
+        field: "model",
+        committedValue: "claude-3-5-sonnet",
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue("claude-3-7-sonnet"));
+
+    expect(result.current.value).toBe("claude-3-7-sonnet");
+    expect(result.current.status).toBe("dirty");
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  test("persists the dirty value on commit and clears the dirty state", async () => {
+    const save: SaveField<string> = vi.fn().mockResolvedValue(committed());
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "defaults",
+        resourceId: "main",
+        field: "model",
+        committedValue: "old-model",
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue("new-model"));
+    expect(save).not.toHaveBeenCalled();
+
+    act(() => result.current.commit());
+    expect(save).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      change: {
+        kind: "defaults",
+        id: "main",
+        field: "model",
+        value: "new-model"
+      }
+    });
+    await waitFor(() => expect(result.current.status).toBe("saved"));
+    expect(result.current.error).toBeUndefined();
+  });
+
+  test("keeps a newer dirty value when an earlier save commits", async () => {
+    const firstSave = deferred<PatchResponse>();
+    const save: SaveField<string> = vi.fn()
+      .mockReturnValueOnce(firstSave.promise)
+      .mockResolvedValue(committed("rev-3"));
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "provider",
+        resourceId: "anthropic",
+        field: "api_key",
+        committedValue: "masked",
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue("secret-a"));
+    act(() => result.current.commit());
+
+    expect(result.current.status).toBe("saving");
+    expect(save).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      change: {
+        kind: "provider",
+        id: "anthropic",
+        field: "api_key",
+        value: "secret-a"
+      }
+    });
+
+    act(() => result.current.setValue("secret-b"));
+
+    expect(result.current.value).toBe("secret-b");
+    expect(result.current.status).toBe("dirty");
+
+    await act(async () => {
+      firstSave.resolve(committed("rev-2"));
+      await firstSave.promise;
+    });
+
+    expect(result.current.value).toBe("secret-b");
+    expect(result.current.status).toBe("dirty");
+
+    act(() => result.current.commit());
+
+    expect(save).toHaveBeenCalledTimes(2);
+    expect(save).toHaveBeenLastCalledWith({
+      baseRevision: "rev-2",
+      change: {
+        kind: "provider",
+        id: "anthropic",
+        field: "api_key",
+        value: "secret-b"
+      }
+    });
+    await waitFor(() => expect(result.current.status).toBe("saved"));
+  });
+
+  test("commit is a no-op when the field is not dirty", () => {
+    const save: SaveField<string> = vi.fn().mockResolvedValue(committed());
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "defaults",
+        resourceId: "main",
+        field: "model",
+        committedValue: "old-model",
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.commit());
+
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  test("commitValue persists immediately for discrete controls", async () => {
+    const save: SaveField<boolean> = vi.fn().mockResolvedValue(committed());
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "provider",
+        resourceId: "anthropic",
+        field: "enabled",
+        committedValue: false,
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.commitValue(true));
+
+    expect(save).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      change: {
+        kind: "provider",
+        id: "anthropic",
+        field: "enabled",
+        value: true
+      }
+    });
+    await waitFor(() => expect(result.current.status).toBe("saved"));
+  });
+
+  test("keeps draft value and field error after draft rejection", async () => {
+    const save: SaveField<number> = vi.fn().mockResolvedValue({
+      result: "draftRejected",
+      revision: "rev-1",
+      errors: [
+        {
+          resourceKind: "defaults",
+          resourceId: "main",
+          field: "max_tokens",
+          code: "invalidValue",
+          message: "must be positive"
+        }
+      ]
+    } satisfies PatchResponse);
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "defaults",
+        resourceId: "main",
+        field: "max_tokens",
+        committedValue: 1024,
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue(-1));
+    act(() => result.current.commit());
+
+    await waitFor(() => expect(result.current.status).toBe("error"));
+    expect(result.current.value).toBe(-1);
+    expect(result.current.error?.message).toBe("must be positive");
+  });
+
+  test("uses the localized generic message when rejected patches do not include field errors", async () => {
+    const save: SaveField<number> = vi.fn().mockResolvedValue({
+      result: "validationRejected",
+      revision: "rev-1"
+    } satisfies PatchResponse);
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "defaults",
+        resourceId: "main",
+        field: "max_tokens",
+        committedValue: 1024,
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue(-1));
+    act(() => result.current.commit());
+
+    await waitFor(() => expect(result.current.status).toBe("error"));
+    expect(result.current.error?.message).toBe("Config update validationRejected failed.");
+  });
+
+  test("rolls back to the server value after runtime rejection", async () => {
+    const save: SaveField<string> = vi.fn().mockResolvedValue({
+      result: "runtimeRejected",
+      revision: "rev-2",
+      rollbackValue: "old-address",
+      errors: [
+        {
+          resourceKind: "server",
+          resourceId: "main",
+          field: "addr",
+          code: "runtimeReloadRejected",
+          message: "address already in use"
+        }
+      ]
+    } satisfies PatchResponse);
+    const { result } = renderHook(() =>
+      useAutosaveField({
+        resourceKind: "server",
+        resourceId: "main",
+        field: "addr",
+        committedValue: "old-address",
+        revision: "rev-1",
+        save,
+        configUpdateFailedMessage,
+        requestFailedMessage
+      })
+    );
+
+    act(() => result.current.setValue("bad-address"));
+    act(() => result.current.commit());
+
+    await waitFor(() => expect(result.current.status).toBe("error"));
+    expect(result.current.value).toBe("old-address");
+    expect(result.current.error?.message).toBe("address already in use");
+  });
+
+  test("does not discard an in-progress edit when the committed value refreshes", () => {
+    const save: SaveField<string> = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ committedValue, revision }) =>
+        useAutosaveField({
+          resourceKind: "defaults",
+          resourceId: "main",
+          field: "model",
+          committedValue,
+          revision,
+          save,
+          configUpdateFailedMessage,
+          requestFailedMessage
+        }),
+      { initialProps: { committedValue: "original", revision: "rev-1" } }
+    );
+
+    act(() => result.current.setValue("user-typing"));
+    expect(result.current.status).toBe("dirty");
+
+    // Another field commits, refreshing the graph with a new revision.
+    rerender({ committedValue: "original", revision: "rev-2" });
+
+    expect(result.current.value).toBe("user-typing");
+    expect(result.current.status).toBe("dirty");
+  });
+});
+
+const requestFailedMessage = "Request failed";
+const configUpdateFailedMessage = (result: PatchResponse["result"]) => `Config update ${result} failed.`;
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (cause: unknown) => void;
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+  return { promise, reject, resolve };
+}
diff --git a/webui/src/features/configGraph/useAutosaveField.ts b/webui/src/features/configGraph/useAutosaveField.ts
new file mode 100644
index 00000000..3e56a877
--- /dev/null
+++ b/webui/src/features/configGraph/useAutosaveField.ts
@@ -0,0 +1,242 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { FieldError, PatchOp, PatchResponse, ResourceKind } from "../../rpc/types";
+
+export type AutosaveFieldStatus = "idle" | "dirty" | "saving" | "saved" | "error";
+
+export type SaveFieldRequest<T> = {
+  baseRevision: string;
+  change: PatchOp & { value: T };
+};
+
+export type SaveField<T> = (request: SaveFieldRequest<T>) => Promise<PatchResponse>;
+
+export type UseAutosaveFieldOptions<T, SaveValue = T> = {
+  resourceKind: ResourceKind;
+  resourceId: string;
+  field: string;
+  committedValue: T;
+  revision: string;
+  save: SaveField<SaveValue>;
+  disabled?: boolean;
+  configUpdateFailedMessage: (result: PatchResponse["result"]) => string;
+  requestFailedMessage: string;
+};
+
+export type AutosaveFieldState<T, SaveValue = T> = {
+  value: T;
+  status: AutosaveFieldStatus;
+  error?: FieldError;
+  setValue: (value: T) => void;
+  commit: () => void;
+  commitValue: (value: T) => void;
+  commitSerializedValue: (localValue: T, saveValue: SaveValue) => void;
+  reset: () => void;
+};
+
+export function useAutosaveField<T, SaveValue = T>({
+  resourceKind,
+  resourceId,
+  field,
+  committedValue,
+  revision,
+  save,
+  disabled = false,
+  configUpdateFailedMessage,
+  requestFailedMessage
+}: UseAutosaveFieldOptions<T, SaveValue>): AutosaveFieldState<T, SaveValue> {
+  const [value, setValueState] = useState<T>(committedValue);
+  const [status, setStatus] = useState<AutosaveFieldStatus>("idle");
+  const [error, setError] = useState<FieldError | undefined>();
+  const saveSeq = useRef(0);
+  const committedRef = useRef(committedValue);
+  const valueRef = useRef(value);
+  const statusRef = useRef(status);
+  const revisionRef = useRef(revision);
+
+  valueRef.current = value;
+  statusRef.current = status;
+
+  useEffect(() => {
+    revisionRef.current = revision;
+  }, [revision]);
+
+  // Adopt values committed elsewhere (e.g. another field saved and refreshed
+  // the graph) without discarding an edit the user is in the middle of typing.
+  useEffect(() => {
+    if (valuesEqual(committedValue, committedRef.current)) {
+      return;
+    }
+    committedRef.current = committedValue;
+    if (statusRef.current === "dirty" || statusRef.current === "saving") {
+      return;
+    }
+    setValueState(committedValue);
+    setError(undefined);
+    setStatus("idle");
+  }, [committedValue]);
+
+  const runSave = useCallback(
+    (pendingValue: T, saveValue: SaveValue) => {
+      if (disabled) {
+        return;
+      }
+      const sequence = ++saveSeq.current;
+      setStatus("saving");
+      setError(undefined);
+
+      save({
+        baseRevision: revisionRef.current,
+        change: {
+          kind: resourceKind,
+          id: resourceId,
+          field,
+          value: saveValue
+        }
+      })
+        .then((response) => {
+          if (sequence !== saveSeq.current) {
+            return;
+          }
+          applySaveResponse(response, pendingValue);
+        })
+        .catch((cause: unknown) => {
+          if (sequence !== saveSeq.current) {
+            return;
+          }
+          setError({
+            resourceKind,
+            resourceId,
+            field,
+            code: "requestFailed",
+            message: cause instanceof Error ? cause.message : requestFailedMessage
+          });
+          setStatus("error");
+        });
+    },
+    [disabled, field, requestFailedMessage, resourceId, resourceKind, save]
+  );
+
+  const setValue = useCallback((next: T) => {
+    setValueState(next);
+    setError(undefined);
+    setStatus(valuesEqual(next, committedRef.current) ? "idle" : "dirty");
+  }, []);
+
+  // Commit the current value (used when an input loses focus).
+  const commit = useCallback(() => {
+    if (statusRef.current !== "dirty") {
+      return;
+    }
+    runSave(valueRef.current, valueRef.current as unknown as SaveValue);
+  }, [runSave]);
+
+  // Set and immediately persist (used by discrete controls like switches/menus).
+  const commitValue = useCallback(
+    (next: T) => {
+      setValueState(next);
+      if (valuesEqual(next, committedRef.current)) {
+        setError(undefined);
+        setStatus("idle");
+        return;
+      }
+      runSave(next, next as unknown as SaveValue);
+    },
+    [runSave]
+  );
+
+  // Persist a different wire value while keeping the local UI value typed.
+  const commitSerializedValue = useCallback(
+    (next: T, serialized: SaveValue) => {
+      setValueState(next);
+      if (valuesEqual(next, committedRef.current)) {
+        setError(undefined);
+        setStatus("idle");
+        return;
+      }
+      runSave(next, serialized);
+    },
+    [runSave]
+  );
+
+  const reset = useCallback(() => {
+    setValueState(committedRef.current);
+    setError(undefined);
+    setStatus("idle");
+  }, []);
+
+  return { value, status, error, setValue, commit, commitValue, commitSerializedValue, reset };
+
+  function applySaveResponse(response: PatchResponse, pendingValue: T) {
+    const fieldError = findFieldError(response.errors, resourceKind, resourceId, field);
+    switch (response.result) {
+      case "committed":
+      case "restartRequired":
+        revisionRef.current = response.revision;
+        committedRef.current = pendingValue;
+        setError(undefined);
+        if (!valuesEqual(valueRef.current, pendingValue)) {
+          setStatus("dirty");
+          return;
+        }
+        setStatus("saved");
+        return;
+      case "draftRejected":
+      case "validationRejected":
+      case "revisionConflict":
+        setError(fieldError ?? genericPatchError(response, resourceKind, resourceId, field, configUpdateFailedMessage));
+        setStatus("error");
+        return;
+      case "runtimeRejected": {
+        const rollback = response.rollbackValue === undefined
+          ? committedRef.current
+          : response.rollbackValue as T;
+        setValueState(rollback);
+        setError(fieldError ?? genericPatchError(response, resourceKind, resourceId, field, configUpdateFailedMessage));
+        setStatus("error");
+        return;
+      }
+      default:
+        setError(genericPatchError(response, resourceKind, resourceId, field, configUpdateFailedMessage));
+        setStatus("error");
+    }
+  }
+}
+
+function findFieldError(
+  errors: FieldError[] | undefined,
+  resourceKind: ResourceKind,
+  resourceId: string,
+  field: string
+) {
+  return errors?.find((error) =>
+    (error.resourceKind === resourceKind || error.resourceKind === "") &&
+    (error.resourceId === resourceId || error.resourceId === "") &&
+    (!error.field || error.field === field)
+  ) ?? errors?.[0];
+}
+
+function genericPatchError(
+  response: PatchResponse,
+  resourceKind: ResourceKind,
+  resourceId: string,
+  field: string,
+  message: (result: PatchResponse["result"]) => string
+): FieldError {
+  return {
+    resourceKind,
+    resourceId,
+    field,
+    code: response.result,
+    message: message(response.result)
+  };
+}
+
+function valuesEqual(left: unknown, right: unknown) {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  if (typeof left !== "object" || left === null || typeof right !== "object" || right === null) {
+    return false;
+  }
+  return JSON.stringify(left) === JSON.stringify(right);
+}
diff --git a/webui/src/features/configGraph/useConfigGraph.test.ts b/webui/src/features/configGraph/useConfigGraph.test.ts
new file mode 100644
index 00000000..92aeb173
--- /dev/null
+++ b/webui/src/features/configGraph/useConfigGraph.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+import { patchRequestForField } from "./useConfigGraph";
+
+describe("config graph hooks", () => {
+  test("converts field save requests into graph patch requests", () => {
+    const request = patchRequestForField({
+      baseRevision: "rev-1",
+      change: {
+        kind: "defaults",
+        id: "main",
+        field: "model",
+        value: "claude-sonnet"
+      }
+    });
+
+    expect(request).toEqual({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "defaults",
+          id: "main",
+          field: "model",
+          value: "claude-sonnet"
+        }
+      ]
+    });
+  });
+});
diff --git a/webui/src/features/configGraph/useConfigGraph.ts b/webui/src/features/configGraph/useConfigGraph.ts
new file mode 100644
index 00000000..1128c7a6
--- /dev/null
+++ b/webui/src/features/configGraph/useConfigGraph.ts
@@ -0,0 +1,89 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createConfigResource,
+  deleteConfigResource,
+  getConfigGraph,
+  patchConfigGraph,
+  validateConfigGraph
+} from "../../rpc/configGraph";
+import { queryKeys } from "../../rpc/queryKeys";
+import type {
+  CreateConfigResourceRequest,
+  PatchRequest,
+  PatchResponse,
+  ResourceKind
+} from "../../rpc/types";
+import type { SaveFieldRequest } from "./useAutosaveField";
+
+export function useConfigGraph() {
+  return useQuery({
+    queryKey: queryKeys.configGraph,
+    queryFn: getConfigGraph
+  });
+}
+
+export function usePatchConfigGraph() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (request: PatchRequest) => patchConfigGraph(request),
+    onSuccess: (response) => updateGraphCache(queryClient, response)
+  });
+}
+
+export function useValidateConfigGraph() {
+  return useMutation({
+    mutationFn: (request: PatchRequest) => validateConfigGraph(request)
+  });
+}
+
+export function useCreateConfigResource() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ kind, body }: { kind: ResourceKind; body: CreateConfigResourceRequest }) =>
+      createConfigResource(kind, body),
+    onSuccess: (response) => updateGraphCache(queryClient, response)
+  });
+}
+
+export function useDeleteConfigResource() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      kind,
+      id,
+      baseRevision
+    }: {
+      kind: ResourceKind;
+      id: string;
+      baseRevision: string;
+    }) => deleteConfigResource(kind, id, baseRevision),
+    onSuccess: (response) => updateGraphCache(queryClient, response)
+  });
+}
+
+export function useGraphFieldSaver<T>() {
+  const patch = usePatchConfigGraph();
+  return (request: SaveFieldRequest<T>) =>
+    patch.mutateAsync({
+      baseRevision: request.baseRevision,
+      changes: [request.change]
+    });
+}
+
+function updateGraphCache(
+  queryClient: ReturnType<typeof useQueryClient>,
+  response: PatchResponse
+) {
+  if (response.graph) {
+    queryClient.setQueryData(queryKeys.configGraph, response.graph);
+    return;
+  }
+  queryClient.invalidateQueries({ queryKey: queryKeys.configGraph });
+}
+
+export function patchRequestForField<T>(request: SaveFieldRequest<T>): PatchRequest {
+  return {
+    baseRevision: request.baseRevision,
+    changes: [request.change]
+  };
+}
diff --git a/webui/src/features/defaults/DefaultsPage.test.tsx b/webui/src/features/defaults/DefaultsPage.test.tsx
new file mode 100644
index 00000000..b574c0bd
--- /dev/null
+++ b/webui/src/features/defaults/DefaultsPage.test.tsx
@@ -0,0 +1,180 @@
+import { act, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as configGraph from "../../rpc/configGraph";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { DefaultsPage } from "./DefaultsPage";
+
+describe("DefaultsPage", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test("renders defaults, trace, and log resources", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Defaults" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Trace" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Log" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Defaults main status")).getByText("Saved")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Trace main status")).getByText("Saved")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Log main status")).getByText("Saved")).toBeInTheDocument();
+    expect(screen.getAllByText("Hot reload").length).toBeGreaterThan(0);
+    const defaultModelField = getMaterialTextField(document, "Default model");
+    expect(defaultModelField.value).toBe("claude-sonnet");
+    expectLobeLeadingIcon(defaultModelField);
+    expect(getMaterialSelect(document, "Log level").value).toBe("info");
+  });
+
+  test("resolves default model route aliases to their underlying model icon", async () => {
+    const graph = configGraphFixture();
+    const defaults = graph.resources.find((resource) => resource.kind === "defaults");
+    if (!defaults) {
+      throw new Error("Fixture is missing defaults resource.");
+    }
+    defaults.value = { ...defaults.value, model: "primary" };
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(graph);
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    const defaultModelField = await findMaterialTextField(document, "Default model");
+    expect(defaultModelField.value).toBe("primary");
+    expectLobeLeadingIcon(defaultModelField, "Claude");
+  });
+
+  test("autosaves defaults through graph patches", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    const defaultsPanel = (await screen.findByRole("heading", { level: 2, name: "Defaults" }))
+      .closest("section")!;
+    vi.useFakeTimers();
+    const modelField = getMaterialTextField(defaultsPanel, "Default model");
+    setMaterialTextFieldValue(modelField, "gpt-4o");
+    fireEvent.blur(modelField);
+
+    await advanceAutosave();
+
+    expect(patch).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "defaults",
+          id: "main",
+          field: "model",
+          value: "gpt-4o"
+        }
+      ]
+    });
+  });
+
+  test("does not expose delete actions for singleton default resources", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<DefaultsPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Defaults" })).toBeInTheDocument();
+    expect(queryMaterialFilledButton(document, "Delete Defaults main")).not.toBeInTheDocument();
+    expect(queryMaterialFilledButton(document, "Delete Trace main")).not.toBeInTheDocument();
+    expect(queryMaterialFilledButton(document, "Delete Log main")).not.toBeInTheDocument();
+  });
+
+  test("localizes singleton resource titles and field labels in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<DefaultsPage />, { locale: "zh-CN" });
+
+    expect(await screen.findByRole("heading", { level: 2, name: "默认值" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "追踪" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "日志" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("默认值 main 状态")).getByText("已保存")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "默认模型")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "全局系统提示词")).toBeInTheDocument();
+    expect(getMaterialSelect(document, "日志级别")).toBeInTheDocument();
+  });
+});
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+type MaterialSelectElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+async function findMaterialTextField(container: ParentNode, label: string) {
+  await screen.findByRole("heading", { level: 2, name: "Defaults" });
+  return getMaterialTextField(container, label);
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function expectLobeLeadingIcon(fieldElement: HTMLElement, title?: string) {
+  const leadingIcon = fieldElement.querySelector("[slot='leading-icon']");
+  expect(leadingIcon).toBeInTheDocument();
+  expect(leadingIcon?.querySelector("svg")).toBeInTheDocument();
+  if (title) {
+    expect(leadingIcon?.querySelector("title")).toHaveTextContent(title);
+  }
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialSelectElement>("md-outlined-select")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element;
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function setMaterialTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function queryMaterialFilledButton(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-filled-button")).find((candidate) => {
+    const accessibleLabel = candidate.getAttribute("aria-label") ?? candidate.textContent ?? "";
+    return accessibleLabel.includes(label);
+  }) ?? null;
+}
+
+async function advanceAutosave() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(450);
+    await Promise.resolve();
+  });
+}
diff --git a/webui/src/features/defaults/DefaultsPage.tsx b/webui/src/features/defaults/DefaultsPage.tsx
new file mode 100644
index 00000000..9f51446f
--- /dev/null
+++ b/webui/src/features/defaults/DefaultsPage.tsx
@@ -0,0 +1,75 @@
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { MessageKey } from "../../i18n/messages";
+import type { ConfigResource } from "../../rpc/types";
+import { modelDisplayNamesById } from "../configGraph/modelProviderIcons";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { PageHeader, QueryErrorState } from "../shared";
+
+const defaultResourceOrder = ["defaults", "trace", "log"] as const;
+const defaultResourceTitleKeys: Record<(typeof defaultResourceOrder)[number], MessageKey> = {
+  defaults: "resource.kind.defaults",
+  trace: "resource.kind.trace",
+  log: "resource.kind.log"
+};
+
+export function DefaultsPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("common.loading")} />;
+  }
+
+  const resources = defaultResourceOrder
+    .map((kind) => graph.data.resources.find((resource) => resource.kind === kind))
+    .filter((resource): resource is ConfigResource => Boolean(resource));
+  const modelDisplayNames = modelDisplayNamesById(graph.data.resources);
+
+  return (
+    <section className="page-stack" aria-labelledby="defaults-title">
+      <PageHeader eyebrow={t("pageEyebrow.config")} title={t("nav.defaults")}>
+        {t("config.description")}
+      </PageHeader>
+
+      {resources.map((resource) => (
+        <DefaultResourceSection
+          key={resource.kind}
+          modelDisplayNames={modelDisplayNames}
+          resource={resource}
+          revision={graph.data.revision}
+        />
+      ))}
+    </section>
+  );
+}
+
+function DefaultResourceSection({
+  resource,
+  revision,
+  modelDisplayNames
+}: {
+  modelDisplayNames: Record<string, string>;
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const titleKey = defaultResourceTitleKeys[resource.kind as (typeof defaultResourceOrder)[number]];
+  const title = titleKey ? t(titleKey) : resource.label;
+  return (
+    <section className="resource-section" aria-label={title}>
+      <h2>{title}</h2>
+      <ResourceEditorCard
+        ariaLabel={t("resource.cardLabel", { title, id: resource.id })}
+        modelDisplayNames={modelDisplayNames}
+        resource={resource}
+        revision={revision}
+        title={title}
+      />
+    </section>
+  );
+}
diff --git a/webui/src/features/logs/LogPanel.tsx b/webui/src/features/logs/LogPanel.tsx
new file mode 100644
index 00000000..d0753bd4
--- /dev/null
+++ b/webui/src/features/logs/LogPanel.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "motion/react";
+import { MaterialIconButton, MaterialOutlinedButton } from "../../components/MaterialButton";
+import { MaterialFilterChip } from "../../components/MaterialFilterChip";
+import { MaterialOutlinedTextField } from "../../components/MaterialTextField";
+import { useI18n } from "../../i18n/I18nProvider";
+import { createLogStream, getRecentLogs } from "../../rpc/logs";
+import type { LogEntry } from "../../rpc/types";
+import { springs } from "../../theme/motion";
+
+const logLevels = ["ALL", "ERROR", "WARN", "INFO", "DEBUG"] as const;
+type LogLevelFilter = (typeof logLevels)[number];
+
+export function LogPanel({ labelledBy, embedded }: { labelledBy?: string; embedded?: boolean }) {
+  const { t } = useI18n();
+  const [entries, setEntries] = useState<LogEntry[]>([]);
+  const [filter, setFilter] = useState("");
+  const [levelFilter, setLevelFilter] = useState<LogLevelFilter>("ALL");
+  const [follow, setFollow] = useState(true);
+  const [streamError, setStreamError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<unknown>();
+
+  useEffect(() => {
+    let cancelled = false;
+    getRecentLogs({ limit: 200 })
+      .then((recent) => {
+        if (!cancelled) {
+          setEntries(recent);
+          setLoading(false);
+        }
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled) {
+          setError(cause);
+          setLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!follow) {
+      return undefined;
+    }
+    setStreamError(false);
+    const abort = new AbortController();
+    void consumeStream(abort.signal, (entry) => {
+      setEntries((current) => [...current, entry]);
+    }).catch((cause: unknown) => {
+      if (!abort.signal.aborted) {
+        setStreamError(true);
+        console.error("log stream failed", cause);
+      }
+    });
+    return () => abort.abort();
+  }, [follow]);
+
+  const visibleEntries = useMemo(() => {
+    const needle = filter.trim().toLowerCase();
+    return entries.filter((entry) => {
+      if (levelFilter !== "ALL" && normalizeLevel(entry.level) !== levelFilter.toLowerCase()) {
+        return false;
+      }
+      if (!needle) {
+        return true;
+      }
+      return logLine(entry).toLowerCase().includes(needle);
+    });
+  }, [entries, filter, levelFilter]);
+
+  return (
+    <section
+      aria-label={labelledBy ? undefined : t("logs.panelLabel")}
+      aria-labelledby={labelledBy}
+      className={embedded ? "logs-panel" : "content-panel logs-panel"}
+    >
+      <div className="logs-panel__header">
+        {labelledBy ? <span aria-hidden="true" /> : <h2>{t("logs.panelTitle")}</h2>}
+        <div className="logs-panel__actions">
+          <MaterialOutlinedButton
+            disabled={visibleEntries.length === 0}
+            icon="content_copy"
+            onClick={() => copyLogs(visibleEntries)}
+          >
+            {t("logs.copy")}
+          </MaterialOutlinedButton>
+          <MaterialOutlinedButton
+            disabled={visibleEntries.length === 0}
+            icon="download"
+            onClick={() => downloadLogs(visibleEntries)}
+          >
+            {t("logs.download")}
+          </MaterialOutlinedButton>
+        </div>
+      </div>
+
+      <div className="logs-toolbar">
+        <div className="logs-toolbar__actions">
+          <md-chip-set className="logs-chip-set logs-follow-mode" role="group" aria-label={t("logs.followMode")}>
+            <MaterialFilterChip value="follow" selected={follow} onSelect={() => setFollow(true)}>
+              {t("logs.follow")}
+            </MaterialFilterChip>
+            <MaterialFilterChip value="pause" selected={!follow} onSelect={() => setFollow(false)}>
+              {t("logs.pause")}
+            </MaterialFilterChip>
+          </md-chip-set>
+        </div>
+        <p className="logs-count">
+          {t("logs.visibleCount", { visible: visibleEntries.length, total: entries.length })}
+        </p>
+      </div>
+
+      <md-chip-set className="logs-chip-set log-level-filter" role="group" aria-label={t("logs.levelFilter")}>
+        {logLevels.map((level) => (
+          <MaterialFilterChip
+            key={level}
+            value={level}
+            selected={levelFilter === level}
+            onSelect={setLevelFilter}
+          >
+            {level === "ALL" ? t("logs.levelAll") : level}
+          </MaterialFilterChip>
+        ))}
+      </md-chip-set>
+
+      {streamError ? (
+        <p className="logs-stream-status" role="status">
+          {t("logs.streamDisconnected")}
+        </p>
+      ) : null}
+
+      {error ? (
+        <p className="logs-stream-status" role="status">
+          {error instanceof Error ? error.message : t("error.unknownRequest")}
+        </p>
+      ) : null}
+
+      <div className="logs-search">
+        <MaterialOutlinedTextField
+          className="logs-search__field"
+          label={t("logs.search")}
+          type="search"
+          value={filter}
+          onInput={setFilter}
+        />
+        <MaterialIconButton
+          disabled={filter.length === 0}
+          icon="close"
+          label={t("logs.clearSearch")}
+          onClick={() => setFilter("")}
+        />
+      </div>
+
+      <div className="log-output" aria-label={t("logs.output")}>
+        {loading ? (
+          <p className="log-empty-state" role="status">
+            {t("common.loading")}
+          </p>
+        ) : visibleEntries.length === 0 ? (
+          <p className="log-empty-state" role="status">
+            {entries.length === 0 ? t("logs.empty") : t("logs.emptyFiltered")}
+          </p>
+        ) : (
+          visibleEntries.map((entry, index) => (
+            <LogRow entry={entry} index={index} key={`${entry.timestamp}-${index}-${logLine(entry)}`} />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+function LogRow({ entry, index }: { entry: LogEntry; index: number }) {
+  const { t } = useI18n();
+  const level = normalizeLevel(entry.level);
+  return (
+    <motion.article
+      className={`log-row log-row--${level}`}
+      aria-label={t("logs.rowLabel", { index: index + 1 })}
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={springs.effects}
+    >
+      <span className={`log-row__level log-row__level--${level}`} aria-hidden="true">{entry.level}</span>
+      <time className="log-row__time" dateTime={entry.timestamp}>{compactLogTime(entry.timestamp)}</time>
+      <p className="log-row__message">{entry.message || logLine(entry)}</p>
+    </motion.article>
+  );
+}
+
+/** Compact HH:MM:SS view of an ISO timestamp for dense log rows. */
+function compactLogTime(timestamp: string): string {
+  const time = timestamp.split("T")[1];
+  return time ? time.replace(/\.\d{3,}.*$/, "").replace(/Z$/i, "") : timestamp;
+}
+
+async function consumeStream(signal: AbortSignal, append: (entry: LogEntry) => void) {
+  const response = await createLogStream({ signal });
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error("log stream response body is empty");
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = "";
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+    buffer += decoder.decode(value, { stream: true });
+    const events = buffer.split("\n\n");
+    buffer = events.pop() ?? "";
+    for (const event of events) {
+      const entry = parseSSEEvent(event);
+      if (entry) {
+        append(entry);
+      }
+    }
+  }
+  buffer += decoder.decode();
+  const entry = parseSSEEvent(buffer);
+  if (entry) {
+    append(entry);
+  }
+}
+
+function parseSSEEvent(event: string): LogEntry | undefined {
+  const data = event
+    .split("\n")
+    .filter((line) => line.startsWith("data:"))
+    .map((line) => line.slice(5).trimStart())
+    .join("\n");
+  if (!data) {
+    return undefined;
+  }
+  return JSON.parse(data) as LogEntry;
+}
+
+function logLine(entry: LogEntry) {
+  return entry.raw || `${entry.timestamp} ${entry.level} ${entry.message}`;
+}
+
+function normalizeLevel(level: string) {
+  return level.trim().toLowerCase();
+}
+
+function copyLogs(entries: LogEntry[]) {
+  const text = entries.map((entry) => logLine(entry)).join("\n");
+  if (!navigator.clipboard) {
+    console.error("clipboard API unavailable");
+    return;
+  }
+  void navigator.clipboard.writeText(text).catch((cause: unknown) => {
+    console.error("copy logs failed", cause);
+  });
+}
+
+function downloadLogs(entries: LogEntry[]) {
+  const blob = new Blob([entries.map((entry) => logLine(entry)).join("\n")], {
+    type: "text/plain"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = "moonbridge-logs.txt";
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/webui/src/features/logs/LogsPage.test.tsx b/webui/src/features/logs/LogsPage.test.tsx
new file mode 100644
index 00000000..064e0c52
--- /dev/null
+++ b/webui/src/features/logs/LogsPage.test.tsx
@@ -0,0 +1,311 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as logs from "../../rpc/logs";
+import type { LogEntry } from "../../rpc/types";
+import { LogsPage } from "./LogsPage";
+
+describe("LogsPage", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreNavigatorClipboard();
+    restoreURLMethods();
+  });
+
+  test("renders recent raw logs, filters visible rows, and exposes log actions", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+    expect(screen.getByText("3 of 3 logs")).toBeInTheDocument();
+    expect(getMaterialFilterChip(document.body, "Pause")).toBeInTheDocument();
+    expect(getMaterialButton(document.body, "Copy")).toBeInTheDocument();
+    expect(getMaterialButton(document.body, "Download")).toBeInTheDocument();
+    expect(getMaterialTextField(document.body, "Search logs")).toHaveClass("material-text-field--single-line");
+    const topActions = document.querySelector(".logs-panel__actions");
+    const toolbarActions = document.querySelector(".logs-toolbar__actions");
+    expect(topActions).toBeInTheDocument();
+    expect(toolbarActions).toBeInTheDocument();
+    expect(getMaterialButton(topActions!, "Copy")).toBeInTheDocument();
+    expect(getMaterialButton(topActions!, "Download")).toBeInTheDocument();
+    expect(toolbarActions!.querySelectorAll("md-outlined-button")).toHaveLength(0);
+
+    setMaterialTextFieldValue(getMaterialTextField(document.body, "Search logs"), "database");
+
+    expect(screen.queryByText(/server started/)).not.toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+    expect(screen.getByText("1 of 3 logs")).toBeInTheDocument();
+
+    fireEvent.click(getMaterialFilterChip(document.body, "Pause"));
+    expect(getMaterialFilterChip(document.body, "Follow")).toBeInTheDocument();
+  });
+
+  test("filters by level and copies only visible raw lines", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+    const writeText = installClipboard();
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    fireEvent.click(getMaterialFilterChip(document.body, "ERROR"));
+    expect(screen.queryByText(/server started/)).not.toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+    expect(screen.getByText("1 of 3 logs")).toBeInTheDocument();
+
+    fireEvent.click(getMaterialButton(document.body, "Copy"));
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith("time=2026-06-07T00:00:01Z level=ERROR msg=database-unavailable");
+    });
+  });
+
+  test("uses a segmented follow control with clear pressed state", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    const followMode = screen.getByRole("group", { name: "Live follow mode" });
+    expect(getMaterialFilterChip(followMode, "Follow")).toHaveProperty("selected", true);
+    expect(getMaterialFilterChip(followMode, "Pause")).toHaveProperty("selected", false);
+
+    fireEvent.click(getMaterialFilterChip(followMode, "Pause"));
+
+    expect(getMaterialFilterChip(followMode, "Follow")).toHaveProperty("selected", false);
+    expect(getMaterialFilterChip(followMode, "Pause")).toHaveProperty("selected", true);
+  });
+
+  test("localizes log row labels in Chinese locale", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+
+    renderWithConsoleProviders(<LogsPage />, { locale: "zh-CN" });
+
+    expect(await screen.findByLabelText("日志 1")).toHaveTextContent("server started");
+    expect(screen.getByLabelText("日志 2")).toHaveTextContent("database unavailable");
+  });
+
+  test("shows empty feedback and disables log actions when filters hide every row", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    setMaterialTextFieldValue(getMaterialTextField(document.body, "Search logs"), "no matching backend event");
+
+    expect(screen.getByText("No logs match the current filters.")).toBeInTheDocument();
+    expect(getMaterialButton(document.body, "Copy")).toHaveProperty("disabled", true);
+    expect(getMaterialButton(document.body, "Download")).toHaveProperty("disabled", true);
+    expect(screen.getByText("0 of 3 logs")).toBeInTheDocument();
+  });
+
+  test("shows a calm empty state when no recent logs are available", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue([]);
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText("No log entries yet.")).toBeInTheDocument();
+    expect(screen.getByText("0 of 0 logs")).toBeInTheDocument();
+  });
+
+  test("downloads only visible raw lines", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(
+      new Response(new ReadableStream<Uint8Array>())
+    );
+    const { getBlob } = installURLMethods();
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    fireEvent.click(getMaterialFilterChip(document.body, "WARN"));
+    fireEvent.click(getMaterialButton(document.body, "Download"));
+
+    await expect(readBlobText(getBlob())).resolves.toBe("time=2026-06-07T00:00:02Z level=WARN msg=slow-request");
+  });
+
+  test("shows a non-blocking status when log streaming fails", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockRejectedValue(new Error("stream unavailable"));
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("Live stream disconnected");
+    });
+  });
+
+  test("appends stream events without rewriting raw text", async () => {
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue([]);
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(
+          new TextEncoder().encode(
+            'data: {"timestamp":"2026-06-07T00:00:02Z","level":"INFO","message":"streamed","raw":"raw streamed line"}\n\n'
+          )
+        );
+        controller.close();
+      }
+    });
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(stream));
+
+    renderWithConsoleProviders(<LogsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("streamed")).toBeInTheDocument();
+    });
+  });
+});
+
+function getMaterialFilterChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filter-chip")).find(
+    (chip) => chip.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filter chip labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function getMaterialButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (button) => button.textContent?.includes(label)
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined button labelled "${label}".`);
+  }
+  return element as HTMLElement & { disabled: boolean };
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => (textField as HTMLElement & { label?: string }).label === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element as HTMLElement & { value: string };
+}
+
+function setMaterialTextFieldValue(element: HTMLElement & { value: string }, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function logEntries(): LogEntry[] {
+  return [
+    {
+      timestamp: "2026-06-07T00:00:00Z",
+      level: "INFO",
+      message: "server started",
+      raw: "time=2026-06-07T00:00:00Z level=INFO msg=server-started"
+    },
+    {
+      timestamp: "2026-06-07T00:00:01Z",
+      level: "ERROR",
+      message: "database unavailable",
+      raw: "time=2026-06-07T00:00:01Z level=ERROR msg=database-unavailable"
+    },
+    {
+      timestamp: "2026-06-07T00:00:02Z",
+      level: "WARN",
+      message: "slow request",
+      raw: "time=2026-06-07T00:00:02Z level=WARN msg=slow-request"
+    }
+  ];
+}
+
+const clipboardDescriptor = Object.getOwnPropertyDescriptor(Navigator.prototype, "clipboard");
+const createObjectURLDescriptor = Object.getOwnPropertyDescriptor(URL, "createObjectURL");
+const revokeObjectURLDescriptor = Object.getOwnPropertyDescriptor(URL, "revokeObjectURL");
+
+function installClipboard() {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    value: { writeText }
+  });
+  return writeText;
+}
+
+function restoreNavigatorClipboard() {
+  if (clipboardDescriptor) {
+    Object.defineProperty(Navigator.prototype, "clipboard", clipboardDescriptor);
+  } else {
+    Reflect.deleteProperty(navigator, "clipboard");
+  }
+}
+
+function installURLMethods() {
+  let blob: Blob | undefined;
+  const createObjectURL = vi.fn((nextBlob: Blob) => {
+    blob = nextBlob;
+    return "blob:moonbridge-logs";
+  });
+  const revokeObjectURL = vi.fn();
+  vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined);
+  Object.defineProperty(URL, "createObjectURL", {
+    configurable: true,
+    value: createObjectURL
+  });
+  Object.defineProperty(URL, "revokeObjectURL", {
+    configurable: true,
+    value: revokeObjectURL
+  });
+  return {
+    createObjectURL,
+    revokeObjectURL,
+    getBlob() {
+      if (!blob) {
+        throw new Error("download did not create a blob URL");
+      }
+      return blob;
+    }
+  };
+}
+
+function restoreURLMethods() {
+  if (createObjectURLDescriptor) {
+    Object.defineProperty(URL, "createObjectURL", createObjectURLDescriptor);
+  }
+  if (revokeObjectURLDescriptor) {
+    Object.defineProperty(URL, "revokeObjectURL", revokeObjectURLDescriptor);
+  }
+}
+
+function readBlobText(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => resolve(String(reader.result ?? "")));
+    reader.addEventListener("error", () => reject(reader.error ?? new Error("failed to read blob")));
+    reader.readAsText(blob);
+  });
+}
diff --git a/webui/src/features/logs/LogsPage.tsx b/webui/src/features/logs/LogsPage.tsx
new file mode 100644
index 00000000..c6bc3391
--- /dev/null
+++ b/webui/src/features/logs/LogsPage.tsx
@@ -0,0 +1,15 @@
+import { PageHeader } from "../shared";
+import { useI18n } from "../../i18n/I18nProvider";
+import { LogPanel } from "./LogPanel";
+
+export function LogsPage() {
+  const { t } = useI18n();
+  return (
+    <section className="page-stack" aria-labelledby="logs-title">
+      <PageHeader eyebrow={t("pageEyebrow.runtime")} title={t("nav.logs")}>
+        {t("logs.description")}
+      </PageHeader>
+      <LogPanel />
+    </section>
+  );
+}
diff --git a/webui/src/features/modelProviders/ModelsProvidersPage.test.tsx b/webui/src/features/modelProviders/ModelsProvidersPage.test.tsx
new file mode 100644
index 00000000..f7b0e13b
--- /dev/null
+++ b/webui/src/features/modelProviders/ModelsProvidersPage.test.tsx
@@ -0,0 +1,1008 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { AppShell } from "../../app/App";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { expectPanelElementToBeFlat, expectPanelRuleToAvoidEdges } from "../../test/panelStyleAssertions";
+import * as configGraph from "../../rpc/configGraph";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { ModelsProvidersPage } from "./ModelsProvidersPage";
+
+describe("ModelsProvidersPage", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test("lists providers as summary rows and keeps provider bindings inside the model editor", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    // Providers render as compact top-level summary rows, with no provider-offers disclosure on the row.
+    const providerPanel = await screen.findByLabelText("Provider anthropic");
+    expect(providerPanel.querySelector(".provider-offers__toggle")).not.toBeInTheDocument();
+    expect(within(providerPanel).queryByRole("heading", { name: /Provider Offers/ })).not.toBeInTheDocument();
+    expect(within(providerPanel).queryByText("anthropic/claude-sonnet")).not.toBeInTheDocument();
+
+    // A model's provider bindings live behind the model editor dialog.
+    const dialog = await openModelEditor();
+    const supplyPanel = within(dialog).getByRole("region", { name: "Providers (1)" });
+
+    expect(supplyPanel).toHaveClass("resource-field-group");
+    expect(supplyPanel).toHaveClass("resource-field-group--advanced");
+    expect(within(supplyPanel).getByRole("heading", { name: "Providers (1)" })).toBeInTheDocument();
+    // Bindings are always expanded inside the dialog (no collapse toggle).
+    expect(within(supplyPanel).queryByLabelText("Toggle Providers")).not.toBeInTheDocument();
+    expect(within(supplyPanel).getByText("anthropic/claude-sonnet")).toBeInTheDocument();
+    expect(supplyPanel.querySelector(".resource-field-group__header")).toContainElement(
+      getMaterialButton(supplyPanel, "Add Provider", "filled")
+    );
+  });
+
+  test("places Providers above Models and omits enabled toggles", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const providers = await screen.findByRole("heading", { level: 2, name: "Providers (1)" });
+    const models = screen.getByRole("heading", { name: "Models (1)" });
+
+    expect(providers.compareDocumentPosition(models) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(screen.queryByLabelText(/^enabled$/i)).not.toBeInTheDocument();
+  });
+
+  test("renders resource sections without outer tonal panels and keeps page header title-only", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ModelsProvidersPage />} />
+      </MemoryRouter>
+    );
+
+    expect(await screen.findByRole("heading", { level: 1, name: "Models & Providers" })).toBeInTheDocument();
+    const pageHeader = container.querySelector(".page-header");
+    expect(pageHeader).toBeInTheDocument();
+    expect(within(pageHeader as HTMLElement).queryByText("Upstream")).not.toBeInTheDocument();
+    expect(within(pageHeader as HTMLElement).queryByText("Manage provider endpoints and model definitions in one realtime editor."))
+      .not.toBeInTheDocument();
+
+    const providerSection = screen.getByRole("heading", { level: 2, name: "Providers (1)" }).closest("section");
+    const modelSection = screen.getByRole("heading", { level: 2, name: "Models (1)" }).closest("section");
+    expect(providerSection).toHaveClass("resource-section");
+    expect(modelSection).toHaveClass("resource-section");
+    expect(providerSection).not.toHaveClass("content-panel");
+    expect(modelSection).not.toHaveClass("content-panel");
+    expect(getComputedStyle(providerSection!).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+    expect(getComputedStyle(modelSection!).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+    expect(providerSection?.querySelector(".resource-editor-card")).toBeInTheDocument();
+  });
+
+  test("renders provider advanced feature structured controls without JSON editors or summary toggles", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await screen.findByLabelText("Provider anthropic");
+    // The full provider field surface (including advanced features) lives in the editor dialog.
+    await openProviderEditor();
+    const advancedFeatures = screen.getByRole("group", { name: "Advanced Features" });
+
+    expect(getMaterialSelect(advancedFeatures, "Provider web search mode")).toBeInTheDocument();
+    expect(getMaterialTextField(advancedFeatures, "Provider web search max uses")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(advancedFeatures, "Provider web search search max rounds")).toHaveAttribute("spellcheck", "false");
+    expect(queryMaterialTextField(advancedFeatures, "Provider web search JSON")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(advancedFeatures, "Provider extensions JSON")).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(advancedFeatures, /Provider web search.*1 key/)).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(advancedFeatures, /Provider extensions.*0 keys/)).not.toBeInTheDocument();
+    expect(queryMaterialTextField(advancedFeatures, "Provider web search JSON editor")).not.toBeInTheDocument();
+    expect(queryMaterialTextField(advancedFeatures, "Provider extensions JSON editor")).not.toBeInTheDocument();
+  });
+
+  test("localizes section headings and resource metadata in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />, { locale: "zh-CN" });
+
+    expect(await screen.findByRole("heading", { level: 2, name: "提供商 (1)" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "模型 (1)" })).toBeInTheDocument();
+
+    await openProviderEditor("编辑提供商 anthropic");
+    // Provider status ("已保存") is shown inside the editor dialog, not in the summary row.
+    expect(screen.getByText("已保存")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "上游 Base URL")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Base URL")).not.toBeInTheDocument();
+  });
+
+  test("localizes create model help and validation in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />, { locale: "zh-CN" });
+
+    await waitForMaterialButton(document, "添加模型");
+    await userEvent.click(getMaterialButton(document, "添加模型", "filled"));
+    const form = screen.getByRole("form", { name: "创建模型" });
+    await userEvent.click(getMaterialIconButton(form, "显示名称 帮助"));
+
+    expect(within(form).getByRole("tooltip")).toHaveTextContent("控制台中显示的名称。");
+
+    setMaterialTextFieldValue(getMaterialTextField(form, "上下文窗口"), "0");
+    setMaterialTextFieldValue(getMaterialTextField(form, "模型 ID"), "zero-window");
+    await submitMaterialForm(form, "创建模型");
+
+    expect(await within(form).findByRole("alert")).toHaveTextContent("上下文窗口 必须大于 0。");
+    expect(create).not.toHaveBeenCalled();
+  });
+
+  test("localizes create provider protocol and context presets in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<ModelsProvidersPage />, { locale: "zh-CN" });
+
+    await waitForMaterialButton(document, "添加提供商");
+    await userEvent.click(getMaterialButton(document, "添加提供商", "filled"));
+    const providerForm = screen.getByRole("form", { name: "创建提供商" });
+    const protocolSelect = getMaterialSelect(providerForm, "协议");
+    expect(protocolSelect.value).toBe("openai-response");
+    expect(protocolSelect.querySelector("[slot='leading-icon'] svg")).toBeInTheDocument();
+    expect(getMaterialSelectOptions(protocolSelect).map((option) => option.displayText)).toEqual([
+      "OpenAI Responses",
+      "OpenAI Chat",
+      "Anthropic",
+      "Gemini"
+    ]);
+    for (const option of getMaterialSelectOptions(protocolSelect)) {
+      expect(option.querySelector("[slot='start'] svg")).toBeInTheDocument();
+    }
+
+    await userEvent.click(getMaterialButton(providerForm, "取消", "outlined"));
+    await waitForMaterialButton(document, "添加模型");
+    await userEvent.click(getMaterialButton(document, "添加模型", "filled"));
+    const modelForm = screen.getByRole("form", { name: "创建模型" });
+    expect(getMaterialFilterChip(modelForm, "128K")).toBeInTheDocument();
+    expect(getMaterialFilterChip(modelForm, "400K")).toBeInTheDocument();
+    expect(getMaterialFilterChip(modelForm, "100 万")).toBeInTheDocument();
+  });
+
+  test("autosaves provider fields and provider binding priority through graph patches", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await screen.findByRole("heading", { level: 3, name: "anthropic" });
+    await openProviderEditor();
+    vi.useFakeTimers();
+    const baseUrlField = getMaterialTextField(document, "Upstream base URL");
+    setMaterialTextFieldValue(baseUrlField, "https://api.anthropic.test");
+    fireEvent.blur(baseUrlField);
+
+    await advanceAutosave();
+
+    expect(patch).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "provider",
+          id: "anthropic",
+          field: "base_url",
+          value: "https://api.anthropic.test"
+        }
+      ]
+    });
+
+    vi.useRealTimers();
+    await closeResourceEditor();
+    const dialog = await openModelEditor();
+    const offerPanel = within(dialog)
+      .getByText("anthropic/claude-sonnet")
+      .closest("section")!;
+    vi.useFakeTimers();
+    const priorityField = getMaterialTextField(offerPanel, "Provider priority");
+    setMaterialTextFieldValue(priorityField, "5");
+    fireEvent.blur(priorityField);
+
+    await advanceAutosave();
+
+    expect(patch).toHaveBeenLastCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "provider_offer",
+          id: "anthropic/claude-sonnet",
+          field: "priority",
+          value: 5
+        }
+      ]
+    });
+  });
+
+  test("creates a provider with default OpenAI Responses protocol", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const form = screen.getByRole("form", { name: "Create Provider" });
+    const providerIdField = getMaterialTextField(form, "Provider ID");
+    const baseUrlField = getMaterialTextField(form, "Base URL");
+    const apiKeyField = getMaterialTextField(form, "API key");
+    expect(apiKeyField.type).toBe("password");
+    expect(getMaterialButton(form, "Create Provider", "filled")).toHaveProperty("type", "submit");
+    expect(form.querySelectorAll("input")).toHaveLength(0);
+
+    setMaterialTextFieldValue(providerIdField, "openai");
+    setMaterialTextFieldValue(baseUrlField, "https://api.openai.com/v1");
+    setMaterialTextFieldValue(apiKeyField, "sk-test");
+    await submitMaterialForm(form, "Create Provider");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("provider", {
+      baseRevision: "rev-1",
+      id: "openai",
+      value: {
+        base_url: "https://api.openai.com/v1",
+        api_key: "sk-test",
+        protocol: "openai-response"
+      }
+    }));
+  });
+
+  test("keeps add resource button icon colors aligned with secondary-container labels", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    const { container } = renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ModelsProvidersPage />} />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => expect(getMaterialButton(container, "Add Provider", "filled")).toBeInTheDocument());
+    const addProviderButton = getMaterialButton(container, "Add Provider", "filled");
+    expectMaterialFilledButtonContentColors(addProviderButton, "var(--mb-color-on-secondary-container)");
+  });
+
+  test("lets users choose provider protocol and read create field help", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const form = screen.getByRole("form", { name: "Create Provider" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Provider ID"), "gemini");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Base URL"), "https://generativelanguage.googleapis.com");
+    setMaterialTextFieldValue(getMaterialTextField(form, "API key"), "gemini-key");
+    const protocolSelect = getMaterialSelect(form, "Protocol");
+    expect(protocolSelect.querySelector("[slot='trailing-icon']")).not.toBeInTheDocument();
+    const protocolHelp = getMaterialIconButton(form, "Help for Protocol");
+    expect(protocolHelp).toHaveClass("mb-field__select-help");
+    expect(protocolHelp.closest(".mb-field__select-actions")).toBeInTheDocument();
+    expect(getComputedStyle(protocolHelp).position).not.toBe("absolute");
+    expect(protocolSelect).not.toContainElement(protocolHelp);
+    await userEvent.click(protocolHelp);
+    expect(within(form).getByRole("tooltip")).toHaveTextContent(
+      "Selects the upstream API format: Anthropic Messages, OpenAI Responses, Google GenAI, or OpenAI Chat."
+    );
+    expect(protocolSelect.open).toBe(false);
+    expect(protocolSelect.querySelector("[slot='leading-icon'] title")).toHaveTextContent("OpenAI");
+    setMaterialSelectValue(protocolSelect, "google-genai");
+    await waitFor(() => expect(protocolSelect.querySelector("[slot='leading-icon'] title")).toHaveTextContent("Gemini"));
+    expect(getMaterialSelectOptions(protocolSelect).find((option) => option.value === "google-genai")
+      ?.querySelector("[slot='start'] title")).toHaveTextContent("Gemini");
+    await submitMaterialForm(form, "Create Provider");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("provider", {
+      baseRevision: "rev-1",
+      id: "gemini",
+      value: {
+        base_url: "https://generativelanguage.googleapis.com",
+        api_key: "gemini-key",
+        protocol: "google-genai"
+      }
+    }));
+  });
+
+  test("uses wider create panel field tracks than dense resource editors", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const form = screen.getByRole("form", { name: "Create Provider" });
+
+    expect(getMaterialTextField(form, "Provider ID").closest(".form-field--create-track")).toBeInTheDocument();
+    expect(getMaterialTextField(form, "Base URL").closest(".form-field--create-track")).toBeInTheDocument();
+    expect(getMaterialSelect(form, "Protocol").closest(".form-field--create-track")).toBeInTheDocument();
+  });
+
+  test("keeps create background panels tonal without borders or glow", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<ModelsProvidersPage />} />
+      </MemoryRouter>
+    );
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const form = screen.getByRole("form", { name: "Create Provider" });
+
+    expectPanelElementToBeFlat(form);
+    expectPanelRuleToAvoidEdges(".create-resource__panel");
+  });
+
+  test("renders create text fields with official Material labels and trailing help slots", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const providerForm = screen.getByRole("form", { name: "Create Provider" });
+    const providerIdField = getMaterialTextField(providerForm, "Provider ID");
+    expect(providerIdField.label).toBe("Provider ID");
+    expect(providerIdField).not.toHaveAttribute("aria-labelledby");
+    expect(providerIdField).toHaveAttribute("spellcheck", "false");
+    expect(providerIdField.closest(".form-field--create-track")?.querySelector(".schema-field__label")).not.toBeInTheDocument();
+    expect(getMaterialTrailingIconButton(providerIdField, "Help for Provider ID")).toBeInTheDocument();
+
+    await userEvent.click(getMaterialButton(providerForm, "Cancel", "outlined"));
+    await waitForMaterialButton(document, "Add Model");
+    await userEvent.click(getMaterialButton(document, "Add Model", "filled"));
+    const modelForm = screen.getByRole("form", { name: "Create Model" });
+    const displayNameField = getMaterialTextField(modelForm, "Display name");
+    setMaterialTextFieldValue(displayNameField, "GPT-4o");
+    expectLobeLeadingIcon(displayNameField);
+    const contextWindowField = getMaterialTextField(modelForm, "Context window");
+    const contextWindowRow = contextWindowField.closest(".create-resource__context-window-row");
+    expect(contextWindowField.label).toBe("Context window");
+    expect(contextWindowField).toHaveAttribute("spellcheck", "false");
+    expect(contextWindowField.closest(".form-field--create-track")?.querySelector(".schema-field__label")).not.toBeInTheDocument();
+    expect(getMaterialTrailingIconButton(contextWindowField, "Help for Context window")).toBeInTheDocument();
+    expect(contextWindowRow).toHaveClass("form-field--create-track");
+    expect(contextWindowRow).toHaveClass("form-grid__wide");
+    expect(Array.from(contextWindowRow!.children).map((child) => child.className)).toEqual([
+      "mb-field__control",
+      "material-chip-group create-resource__context-window-presets"
+    ]);
+    expect(contextWindowRow!.children[0]).toContainElement(contextWindowField);
+    expect(contextWindowRow!.children[1]).toContainElement(getMaterialFilterChip(modelForm, "128k"));
+  });
+
+  test("keeps create subpanel controls aligned with resource editor field styling", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const providerForm = screen.getByRole("form", { name: "Create Provider" });
+    const baseUrlField = getMaterialTextField(providerForm, "Base URL");
+    const apiKeyField = getMaterialTextField(providerForm, "API key");
+    const protocolSelect = getMaterialSelect(providerForm, "Protocol");
+
+    expect(getMaterialLeadingIcon(baseUrlField, "link")).toBeInTheDocument();
+    expect(getMaterialLeadingIcon(apiKeyField, "key")).toBeInTheDocument();
+    expect(protocolSelect.closest(".form-field--create-track")).toBeInTheDocument();
+    expect(protocolSelect.querySelector("[slot='leading-icon'] svg")).toBeInTheDocument();
+
+    await userEvent.click(getMaterialButton(providerForm, "Cancel", "outlined"));
+    const supplyPanel = await openModelProviderBindings();
+    await userEvent.click(getMaterialButton(supplyPanel, "Add Provider", "filled"));
+    const offerForm = within(supplyPanel).getByRole("form", { name: "Create Provider" });
+    expect(offerForm.querySelector(".material-static-chip")).not.toBeInTheDocument();
+    expect(getMaterialAssistChip(offerForm, "claude-sonnet").closest(".schema-field")).toBeInTheDocument();
+    expect(getMaterialSelect(offerForm, "Provider").value).toBe("anthropic");
+  });
+
+  test("creates a model with a 128k default context window", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Model");
+    await userEvent.click(getMaterialButton(document, "Add Model", "filled"));
+    const form = screen.getByRole("form", { name: "Create Model" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Model ID"), "gpt-4o");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Display name"), "GPT-4o");
+    await submitMaterialForm(form, "Create Model");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("model", {
+      baseRevision: "rev-1",
+      id: "gpt-4o",
+      value: {
+        display_name: "GPT-4o",
+        context_window: 128000
+      }
+    }));
+  });
+
+  test("lets users edit model context window through presets or custom input", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Model");
+    await userEvent.click(getMaterialButton(document, "Add Model", "filled"));
+    const form = screen.getByRole("form", { name: "Create Model" });
+    await userEvent.click(getMaterialIconButton(form, "Help for Context window"));
+    expect(within(form).getByRole("tooltip")).toHaveTextContent("Maximum tokens the model can handle");
+    const presetChip = getMaterialFilterChip(form, "400k");
+    await userEvent.click(presetChip);
+    expect(getMaterialTextField(form, "Context window").value).toBe("400000");
+
+    setMaterialTextFieldValue(getMaterialTextField(form, "Context window"), "640000");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Model ID"), "gpt-large");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Display name"), "GPT Large");
+    await submitMaterialForm(form, "Create Model");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("model", {
+      baseRevision: "rev-1",
+      id: "gpt-large",
+      value: {
+        display_name: "GPT Large",
+        context_window: 640000
+      }
+    }));
+  });
+
+  test("rejects non-positive custom model context windows", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Model");
+    await userEvent.click(getMaterialButton(document, "Add Model", "filled"));
+    const form = screen.getByRole("form", { name: "Create Model" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Context window"), "0");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Model ID"), "zero-window");
+    await submitMaterialForm(form, "Create Model");
+
+    expect(await within(form).findByRole("alert")).toHaveTextContent(
+      "Context window must be greater than zero."
+    );
+    expect(create).not.toHaveBeenCalled();
+    expect(getMaterialTextField(form, "Context window").value).toBe("0");
+  });
+
+  test("creates provider binding from the selected model without billing by default", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const supplyPanel = await openModelProviderBindings();
+    await userEvent.click(getMaterialButton(supplyPanel, "Add Provider", "filled"));
+    const form = within(supplyPanel).getByRole("form", { name: "Create Provider" });
+    expect(getMaterialAssistChip(form, "claude-sonnet")).toBeInTheDocument();
+    expect(getMaterialSelect(form, "Provider").value).toBe("anthropic");
+    expect(queryMaterialTextField(form, "Input price")).not.toBeInTheDocument();
+    expect(getMaterialSwitch(form, "Billing").selected).toBe(false);
+    setMaterialTextFieldValue(getMaterialTextField(form, "Upstream name"), "claude-3-5-sonnet-latest");
+    await submitMaterialForm(form, "Create Provider");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("provider_offer", {
+      baseRevision: "rev-1",
+      id: "anthropic/claude-sonnet",
+      value: {
+        model: "claude-sonnet",
+        upstream_name: "claude-3-5-sonnet-latest",
+        priority: 1
+      }
+    }));
+  });
+
+  test("creates provider billing only when the optional billing switch is enabled", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const supplyPanel = await openModelProviderBindings();
+    await userEvent.click(getMaterialButton(supplyPanel, "Add Provider", "filled"));
+    const form = within(supplyPanel).getByRole("form", { name: "Create Provider" });
+    setMaterialSwitchSelected(getMaterialSwitch(form, "Billing"), true);
+    expect(getMaterialTextField(form, "Input price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(form, "Output price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(form, "Cache write price")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(form, "Cache read price")).toHaveAttribute("spellcheck", "false");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Upstream name"), "claude-3-5-sonnet-latest");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Input price"), "3");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Output price"), "15");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Cache write price"), "3.75");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Cache read price"), "0.3");
+    await submitMaterialForm(form, "Create Provider");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("provider_offer", {
+      baseRevision: "rev-1",
+      id: "anthropic/claude-sonnet",
+      value: {
+        model: "claude-sonnet",
+        upstream_name: "claude-3-5-sonnet-latest",
+        priority: 1,
+        pricing: {
+          input_price: 3,
+          output_price: 15,
+          cache_write_price: 3.75,
+          cache_read_price: 0.3
+        }
+      }
+    }));
+  });
+
+  test("rejects invalid provider numbers without submitting the create request", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const supplyPanel = await openModelProviderBindings();
+    await userEvent.click(getMaterialButton(supplyPanel, "Add Provider", "filled"));
+    const form = within(supplyPanel).getByRole("form", { name: "Create Provider" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Priority"), "fast");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Upstream name"), "claude-3-5-sonnet-latest");
+    await submitMaterialForm(form, "Create Provider");
+
+    expect(screen.getByRole("alert")).toHaveTextContent("Priority must be a valid number.");
+    expect(getMaterialTextField(form, "Priority").value).toBe("fast");
+    expect(create).not.toHaveBeenCalled();
+  });
+
+  test("keeps create dialog input values when backend rejects duplicate ids", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "createConfigResource").mockRejectedValue(
+      Object.assign(new Error("Request failed"), {
+        raw: {
+          errors: [
+            {
+              message: 'provider "anthropic" already exists'
+            }
+          ]
+        }
+      })
+    );
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    await waitForMaterialButton(document, "Add Provider");
+    await userEvent.click(getMaterialButton(document, "Add Provider", "filled"));
+    const form = screen.getByRole("form", { name: "Create Provider" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Provider ID"), "anthropic");
+    setMaterialTextFieldValue(getMaterialTextField(form, "Base URL"), "https://api.anthropic.com");
+    setMaterialTextFieldValue(getMaterialTextField(form, "API key"), "sk-ant");
+    await submitMaterialForm(form, "Create Provider");
+
+    expect(await screen.findByRole("alert")).toHaveTextContent('provider "anthropic" already exists');
+    expect(getMaterialTextField(form, "Provider ID").value).toBe("anthropic");
+    expect(getMaterialTextField(form, "Base URL").value).toBe("https://api.anthropic.com");
+  });
+
+  test("deletes provider resources only after inline confirmation", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const graphAfterDelete = configGraphFixture({
+      revision: "rev-2",
+      resources: configGraphFixture().resources.filter((resource) => resource.id !== "anthropic")
+    });
+    const remove = vi.spyOn(configGraph, "deleteConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: graphAfterDelete
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const providerPanel = await screen.findByLabelText("Provider anthropic");
+    await userEvent.click(getMaterialButton(providerPanel, "Delete Provider anthropic", "filled"));
+
+    expect(remove).not.toHaveBeenCalled();
+    await userEvent.click(getMaterialButton(providerPanel, "Confirm delete anthropic", "filled"));
+
+    expect(remove).toHaveBeenCalledWith("provider", "anthropic", "rev-1");
+    expect(screen.queryByLabelText("Provider anthropic")).not.toBeInTheDocument();
+  });
+
+  test("deletes provider bindings and keeps slash identifiers intact", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const graphAfterDelete = configGraphFixture({
+      revision: "rev-2",
+      resources: configGraphFixture().resources.filter((resource) => resource.id !== "anthropic/claude-sonnet")
+    });
+    const remove = vi.spyOn(configGraph, "deleteConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: graphAfterDelete
+    });
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const dialog = await openModelEditor();
+    const offerPanel = within(dialog)
+      .getByText("anthropic/claude-sonnet")
+      .closest("section")!;
+    await userEvent.click(getMaterialButton(offerPanel, "Delete Provider anthropic/claude-sonnet", "filled"));
+    await userEvent.click(getMaterialButton(offerPanel, "Confirm delete anthropic/claude-sonnet", "filled"));
+
+    expect(remove).toHaveBeenCalledWith("provider_offer", "anthropic/claude-sonnet", "rev-1");
+    expect(screen.queryByText("anthropic/claude-sonnet")).not.toBeInTheDocument();
+  });
+
+  test("surfaces delete errors without removing the model card", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(configGraph, "deleteConfigResource").mockRejectedValue(
+      Object.assign(new Error("Request failed"), {
+        raw: {
+          errors: [
+            {
+              message: 'model "claude-sonnet" is still referenced'
+            }
+          ]
+        }
+      })
+    );
+
+    renderWithConsoleProviders(<ModelsProvidersPage />);
+
+    const modelPanel = (await screen.findByRole("heading", { level: 3, name: "claude-sonnet" }))
+      .closest("section")!;
+    await userEvent.click(getMaterialButton(modelPanel, "Delete Model claude-sonnet", "filled"));
+    await userEvent.click(getMaterialButton(modelPanel, "Confirm delete claude-sonnet", "filled"));
+
+    expect(await within(modelPanel).findByRole("alert")).toHaveTextContent(
+      'model "claude-sonnet" is still referenced'
+    );
+    expect(within(modelPanel).getByRole("heading", { level: 3, name: "claude-sonnet" })).toBeInTheDocument();
+  });
+});
+
+async function advanceAutosave() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(450);
+    await Promise.resolve();
+  });
+}
+
+function getOutlinedButton(container: ParentNode, label: string): HTMLElement {
+  const element = Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => (candidate.getAttribute("aria-label") ?? candidate.textContent ?? "").includes(label)
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function resourceDialog(): HTMLElement {
+  const dialog = document.querySelector("md-dialog.resource-editor-dialog");
+  if (!dialog) {
+    throw new Error("Expected the resource editor dialog to be open.");
+  }
+  return dialog as HTMLElement;
+}
+
+async function openProviderEditor(label = "Edit Provider anthropic") {
+  const button = await waitFor(() => getOutlinedButton(document, label));
+  await userEvent.click(button);
+  await waitFor(() => expect(resourceDialog()).toBeInTheDocument());
+  return resourceDialog();
+}
+
+async function openModelEditor(label = "Edit Model claude-sonnet") {
+  const button = await waitFor(() => getOutlinedButton(document, label));
+  await userEvent.click(button);
+  await waitFor(() => expect(resourceDialog()).toBeInTheDocument());
+  return resourceDialog();
+}
+
+async function openModelProviderBindings() {
+  // Provider bindings are always expanded inside the model editor dialog now.
+  const dialog = await openModelEditor();
+  return within(dialog).getByRole("region", { name: "Providers (1)" });
+}
+
+async function closeResourceEditor() {
+  const closeButton = resourceDialog().querySelector('md-icon-button[aria-label="Close"]');
+  if (closeButton) {
+    await userEvent.click(closeButton as HTMLElement);
+  }
+  await waitFor(() => expect(document.querySelector("md-dialog.resource-editor-dialog")).not.toBeInTheDocument());
+}
+
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  type: string;
+  value: string;
+};
+
+type MaterialSelectElement = HTMLElement & {
+  label: string;
+  open: boolean;
+  value: string;
+};
+
+type MaterialSelectOptionElement = HTMLElement & {
+  displayText: string;
+  value: string;
+};
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function queryMaterialTextField(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  ) ?? null;
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialSelectElement>("md-outlined-select")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element;
+}
+
+function getMaterialSelectOptions(select: ParentNode) {
+  const options = Array.from(select.querySelectorAll<MaterialSelectOptionElement>("md-select-option"));
+  if (options.length === 0) {
+    throw new Error("Expected Material Web select options to be rendered.");
+  }
+  return options;
+}
+
+function getMaterialSwitch(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-switch")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web switch labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function getMaterialButton(container: ParentNode, label: string, variant: "filled" | "outlined" = "outlined") {
+  const tagName = variant === "filled" ? "md-filled-button" : "md-outlined-button";
+  const element = Array.from(container.querySelectorAll(tagName)).find(
+    (candidate) => {
+      const accessibleLabel = candidate.getAttribute("aria-label") ?? candidate.textContent ?? "";
+      return accessibleLabel.includes(label);
+    }
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web ${variant} button labelled "${label}".`);
+  }
+  return element as HTMLElement & { type: string };
+}
+
+function queryMaterialOutlinedButton(container: ParentNode, label: RegExp) {
+  return Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => label.test(candidate.getAttribute("aria-label") ?? candidate.textContent ?? "")
+  ) ?? null;
+}
+
+function expectMaterialFilledButtonContentColors(button: HTMLElement, colorToken: string) {
+  expect(button.tagName.toLowerCase()).toBe("md-filled-button");
+  for (const property of [
+    "--md-filled-button-label-text-color",
+    "--md-filled-button-hover-label-text-color",
+    "--md-filled-button-focus-label-text-color",
+    "--md-filled-button-pressed-label-text-color",
+    "--md-filled-button-icon-color",
+    "--md-filled-button-hover-icon-color",
+    "--md-filled-button-focus-icon-color",
+    "--md-filled-button-pressed-icon-color"
+  ]) {
+    expect(getComputedStyle(button).getPropertyValue(property).trim()).toBe(colorToken);
+  }
+}
+
+async function waitForMaterialButton(container: ParentNode, label: string, variant: "filled" | "outlined" = "filled") {
+  await waitFor(() => expect(getMaterialButton(container, label, variant)).toBeInTheDocument());
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialTrailingIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("slot") === "trailing-icon" && candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web trailing icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialLeadingIcon(container: ParentNode, icon: string) {
+  const element = Array.from(container.querySelectorAll("md-icon")).find(
+    (candidate) => candidate.getAttribute("slot") === "leading-icon" && candidate.textContent?.trim() === icon
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web leading icon "${icon}".`);
+  }
+  return element as HTMLElement;
+}
+
+function expectLobeLeadingIcon(fieldElement: HTMLElement) {
+  const leadingIcon = fieldElement.querySelector("[slot='leading-icon']");
+  expect(leadingIcon).toBeInTheDocument();
+  expect(leadingIcon?.querySelector("svg")).toBeInTheDocument();
+}
+
+function getMaterialFilterChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filter-chip")).find(
+    (candidate) => candidate.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filter chip labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function getMaterialAssistChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-assist-chip")).find(
+    (candidate) => candidate.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web assist chip labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialChipSet(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-chip-set")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web chip set labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function setMaterialTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function setMaterialSelectValue(element: MaterialSelectElement, value: string) {
+  act(() => {
+    let selectedValue = value;
+    Object.defineProperty(element, "value", {
+      configurable: true,
+      get: () => selectedValue,
+      set: (next: string) => {
+        selectedValue = next;
+      }
+    });
+    element.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  });
+}
+
+function setMaterialSwitchSelected(element: HTMLElement & { selected: boolean }, selected: boolean) {
+  act(() => {
+    element.selected = selected;
+    element.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  });
+}
+
+async function submitMaterialForm(container: ParentNode, submitLabel: string) {
+  const button = getMaterialButton(container, submitLabel, "filled");
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected Material Web submit button inside a form.");
+  }
+  let clicked = false;
+  let submitted = false;
+  button.addEventListener("click", () => {
+    clicked = true;
+  }, { once: true });
+  form.addEventListener("submit", () => {
+    submitted = true;
+  }, { once: true });
+  await userEvent.click(button);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  expect(clicked).toBe(true);
+  if (!submitted) {
+    await act(async () => {
+      form.requestSubmit();
+      await Promise.resolve();
+    });
+  }
+}
diff --git a/webui/src/features/modelProviders/ModelsProvidersPage.tsx b/webui/src/features/modelProviders/ModelsProvidersPage.tsx
new file mode 100644
index 00000000..15ad114e
--- /dev/null
+++ b/webui/src/features/modelProviders/ModelsProvidersPage.tsx
@@ -0,0 +1,208 @@
+import { useMemo, useState } from "react";
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { ConfigGraph, ConfigResource, ResourceKind } from "../../rpc/types";
+import { CreateResourcePanel } from "../configGraph/CreateResourcePanel";
+import { ResourceEditorDialog } from "../configGraph/ResourceEditorDialog";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { modelDisplayNamesById } from "../configGraph/modelProviderIcons";
+import { PageHeader, QueryErrorState } from "../shared";
+
+export function ModelsProvidersPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+  const [editing, setEditing] = useState<{ kind: ResourceKind; id: string } | null>(null);
+
+  const modelDisplayNames = useMemo(
+    () => (graph.data ? modelDisplayNamesById(graph.data.resources) : {}),
+    [graph.data]
+  );
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("loading.providers")} />;
+  }
+
+  const resources = graph.data.resources;
+  const providers = resourcesByKind(resources, "provider");
+  const offers = resourcesByKind(resources, "provider_offer");
+  const models = resourcesByKind(resources, "model");
+  const offersByModel = groupOffersByModel(offers);
+  const unmatchedOffers = offers.filter((offer) => !models.some((model) => model.id === modelIdForOffer(offer)));
+
+  const editingResource = editing
+    ? resources.find((resource) => resource.kind === editing.kind && resource.id === editing.id)
+    : undefined;
+
+  return (
+    <section className="page-stack" aria-labelledby="models-providers-title">
+      <PageHeader eyebrow={t("pageEyebrow.upstream")} title={t("nav.modelsProviders")}>
+        {t("modelsProviders.description")}
+      </PageHeader>
+
+      <section className="resource-section" aria-labelledby="providers-heading">
+        <div className="section-heading">
+          <h2 id="providers-heading">{t("modelsProviders.providers", { count: providers.length })}</h2>
+          <CreateResourcePanel graph={graph.data} kind="provider" />
+        </div>
+        <div className="resource-card-list resource-card-list--summary">
+          {providers.map((provider) => (
+            <ResourceEditorCard
+              ariaLabel={t("modelsProviders.providerRegion", { id: provider.id })}
+              key={provider.id}
+              onOpenEditor={() => setEditing({ kind: "provider", id: provider.id })}
+              resource={provider}
+              revision={graph.data.revision}
+              title={t("resource.kind.provider")}
+              variant="summary"
+            />
+          ))}
+        </div>
+      </section>
+
+      {unmatchedOffers.length > 0 ? (
+        <section className="resource-section" aria-labelledby="offers-heading">
+          <h2 id="offers-heading">{t("modelsProviders.unmatchedSupplies", { count: unmatchedOffers.length })}</h2>
+          <div className="resource-card-list resource-card-list--summary">
+            {unmatchedOffers.map((offer) => (
+              <ResourceEditorCard
+                key={offer.id}
+                modelDisplayNames={modelDisplayNames}
+                onOpenEditor={() => setEditing({ kind: "provider_offer", id: offer.id })}
+                resource={offer}
+                revision={graph.data.revision}
+                title={t("resource.kind.offer")}
+                variant="summary"
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <section className="resource-section" aria-labelledby="models-heading">
+        <div className="section-heading">
+          <h2 id="models-heading">{t("modelsProviders.models", { count: models.length })}</h2>
+          <CreateResourcePanel graph={graph.data} kind="model" />
+        </div>
+        <div className="resource-card-list resource-card-list--summary">
+          {models.map((model) => (
+            <ResourceEditorCard
+              ariaLabel={t("modelsProviders.modelRegion", { id: model.id })}
+              key={model.id}
+              modelDisplayNames={modelDisplayNames}
+              onOpenEditor={() => setEditing({ kind: "model", id: model.id })}
+              resource={model}
+              revision={graph.data.revision}
+              title={t("resource.kind.model")}
+              variant="summary"
+            />
+          ))}
+        </div>
+      </section>
+
+      {editingResource ? (
+        <ResourceEditorDialog
+          open
+          onClose={() => setEditing(null)}
+          modelDisplayNames={modelDisplayNames}
+          resource={editingResource}
+          revision={graph.data.revision}
+          title={titleForResource(editingResource.kind, t)}
+        >
+          {editingResource.kind === "model" ? (
+            <ModelProviderBindings
+              graph={graph.data}
+              modelDisplayNames={modelDisplayNames}
+              modelId={editingResource.id}
+              offers={offersByModel.get(editingResource.id) ?? []}
+            />
+          ) : null}
+        </ResourceEditorDialog>
+      ) : null}
+    </section>
+  );
+}
+
+function titleForResource(kind: ResourceKind, t: ReturnType<typeof useI18n>["t"]): string {
+  switch (kind) {
+    case "model":
+      return t("resource.kind.model");
+    case "provider":
+      return t("resource.kind.provider");
+    case "provider_offer":
+      return t("resource.kind.offer");
+    default:
+      return "";
+  }
+}
+
+function resourcesByKind(resources: ConfigResource[], kind: ResourceKind) {
+  return resources.filter((resource) => resource.kind === kind);
+}
+function groupOffersByModel(offers: ConfigResource[]) {
+  const groups = new Map<string, ConfigResource[]>();
+  for (const offer of offers) {
+    const modelId = modelIdForOffer(offer);
+    const group = groups.get(modelId) ?? [];
+    group.push(offer);
+    groups.set(modelId, group);
+  }
+  return groups;
+}
+
+function modelIdForOffer(offer: ConfigResource) {
+  const valueModel = offer.value.model;
+  if (typeof valueModel === "string" && valueModel.trim()) {
+    return valueModel;
+  }
+  const slash = offer.id.indexOf("/");
+  return slash >= 0 ? offer.id.slice(slash + 1) : "";
+}
+
+function ModelProviderBindings({
+  graph,
+  modelDisplayNames,
+  modelId,
+  offers
+}: {
+  graph: ConfigGraph;
+  modelDisplayNames: Record<string, string>;
+  modelId: string;
+  offers: ConfigResource[];
+}) {
+  const { t } = useI18n();
+  const headingId = `model-${modelId}-providers-heading`;
+  const bodyId = `model-${modelId}-providers-body`.replace(/[^a-zA-Z0-9_-]/g, "-");
+  const offersLabel = t("modelsProviders.modelProviders", { count: offers.length });
+  return (
+    <section
+      className="resource-field-group resource-field-group--advanced model-provider-bindings"
+      aria-labelledby={headingId}
+      aria-label={offersLabel}
+    >
+      <div className="resource-field-group__header">
+        <h4 id={headingId}>
+          <span className="material-symbol" aria-hidden="true">cloud_sync</span>
+          {offersLabel}
+        </h4>
+        <div className="resource-field-group__header-actions">
+          <CreateResourcePanel graph={graph} kind="provider_offer" modelId={modelId} />
+        </div>
+      </div>
+      <div className="resource-card-list resource-card-list--compact resource-field-group__body" id={bodyId}>
+        {offers.map((offer) => (
+          <ResourceEditorCard
+            key={offer.id}
+            modelDisplayNames={modelDisplayNames}
+            resource={offer}
+            revision={graph.revision}
+            title={t("resource.kind.offer")}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/webui/src/features/overview/OverviewPage.test.tsx b/webui/src/features/overview/OverviewPage.test.tsx
new file mode 100644
index 00000000..72d3fd65
--- /dev/null
+++ b/webui/src/features/overview/OverviewPage.test.tsx
@@ -0,0 +1,448 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { ApiError } from "../../rpc/http";
+import * as configGraph from "../../rpc/configGraph";
+import * as logs from "../../rpc/logs";
+import * as management from "../../rpc/management";
+import type { LogEntry, UsageStats } from "../../rpc/types";
+import { AppShell } from "../../app/App";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import {
+  expectPanelElementToBeFlat,
+  expectPanelRuleToAvoidEdges,
+  expectPanelStateRuleToStayFlat
+} from "../../test/panelStyleAssertions";
+import { OverviewPage } from "./OverviewPage";
+import { MemoryRouter } from "react-router-dom";
+
+function metricCard(label: string): HTMLElement {
+  const labelEl = screen
+    .getAllByText(label)
+    .find((el) => el.classList.contains("usage-metric__label"));
+  if (!labelEl) {
+    throw new Error(`usage metric not found for label: ${label}`);
+  }
+  return labelEl.closest(".usage-metric") as HTMLElement;
+}
+
+function usageDurationPill(): HTMLElement {
+  const pill = document.querySelector(".usage-heading-controls .status-pill");
+  if (!pill) {
+    throw new Error("usage duration pill not found");
+  }
+  return pill as HTMLElement;
+}
+
+describe("OverviewPage", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    restoreNavigatorClipboard();
+    restoreURLMethods();
+  });
+
+  test("renders a usage dashboard with model charts and bottom logs instead of runtime status panels", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(
+      configGraphFixture({
+        runtime: {
+          status: "runtimeRejected",
+          errors: [
+            {
+              resourceKind: "provider",
+              resourceId: "anthropic",
+              field: "base_url",
+              code: "runtimeReloadRejected",
+              message: "upstream rejected reload"
+            }
+          ]
+        },
+        validation: {
+          valid: false,
+          errors: [
+            {
+              resourceKind: "route",
+              resourceId: "primary",
+              field: "model",
+              code: "missingModel",
+              message: "route model missing"
+            }
+          ]
+        }
+      })
+    );
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<OverviewPage />} />
+      </MemoryRouter>
+    );
+
+    expect(await screen.findByRole("heading", { name: "Usage Analytics" })).toBeInTheDocument();
+    await screen.findAllByText("Requests");
+    expect(within(metricCard("Requests")).getByText("2")).toBeInTheDocument();
+    expect(within(metricCard("Input tokens")).getByText("300")).toBeInTheDocument();
+    expect(within(metricCard("Output tokens")).getByText("80")).toBeInTheDocument();
+    expect(within(metricCard("Cache hit")).getByText("40%")).toBeInTheDocument();
+    expect(within(metricCard("Total cost")).getByText("¥0.42")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Token split chart.*Input tokens: 300.*Output tokens: 80/ })).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Cache split chart.*Cache write: 40.*Cache read: 120/ })).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Cost by model chart.*claude-sonnet: 0.42/ })).toBeInTheDocument();
+    expect(getMaterialFilterChip(document.body, "This session")).toHaveProperty("selected", true);
+    expect(getMaterialFilterChip(document.body, "24h")).toHaveProperty("selected", false);
+
+    fireEvent.click(getMaterialFilterChip(document.body, "24h"));
+
+    expect(getMaterialFilterChip(document.body, "This session")).toHaveProperty("selected", false);
+    expect(getMaterialFilterChip(document.body, "24h")).toHaveProperty("selected", true);
+    await waitFor(() => {
+      expect(management.getUsageStats).toHaveBeenCalledWith("24h");
+    });
+
+    const modelRow = await screen.findByRole("row", { name: /claude-sonnet/i });
+    expect(modelRow).toHaveTextContent("claude-3-5-sonnet");
+    expect(modelRow).toHaveTextContent("¥0.42");
+    expect(modelRow).toHaveTextContent("¥1,105.26/M");
+
+    expect(screen.getByRole("region", { name: "Backend logs" })).toBeInTheDocument();
+    expect(screen.getByText(/server started/)).toBeInTheDocument();
+    expect(screen.queryByText("runtimeRejected")).not.toBeInTheDocument();
+    expect(screen.queryByText("upstream rejected reload")).not.toBeInTheDocument();
+    expect(screen.queryByText("Validation")).not.toBeInTheDocument();
+  });
+
+  test("keeps usage background panels tonal without borders, glow, or hover lift", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<OverviewPage />} />
+      </MemoryRouter>
+    );
+
+    await screen.findAllByText("Requests");
+
+    const panels = [
+      document.querySelector(".usage-dashboard"),
+      document.querySelector(".overview-logs"),
+      ...Array.from(document.querySelectorAll(".usage-metric")),
+      ...Array.from(document.querySelectorAll(".usage-chart"))
+    ];
+    for (const panel of panels) {
+      expect(panel).toBeInTheDocument();
+      expectPanelElementToBeFlat(panel!);
+    }
+    expectPanelRuleToAvoidEdges(".usage-metric");
+    expectPanelStateRuleToStayFlat(".usage-metric:hover");
+    expectPanelRuleToAvoidEdges(".usage-chart");
+    expectPanelStateRuleToStayFlat(".usage-chart:focus-visible");
+  });
+
+  test("localizes usage units and chart accessibility text in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />, { locale: "zh-CN" });
+
+    await screen.findByRole("heading", { name: "用量分析" });
+    await screen.findAllByText("请求");
+    expect(screen.getByRole("img", { name: /Token 拆分图表。输入 Token：300；输出 Token：80/ })).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /缓存拆分图表。缓存写入：40；缓存读取：120/ })).toBeInTheDocument();
+    const modelRow = await screen.findByRole("row", { name: /claude-sonnet/i });
+    expect(modelRow).toHaveTextContent("¥1,105.26/百万");
+  });
+
+  test("keeps the current usage dashboard visible while a newly selected range is loading", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+    const usageRequest = vi.spyOn(management, "getUsageStats").mockImplementation((range = "session") => {
+      if (range === "session") {
+        return Promise.resolve(usageStats());
+      }
+      return new Promise<UsageStats>(() => undefined);
+    });
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    await screen.findAllByText("Requests");
+    expect(within(metricCard("Requests")).getByText("2")).toBeInTheDocument();
+
+    fireEvent.click(getMaterialFilterChip(document.body, "24h"));
+
+    expect(getMaterialFilterChip(document.body, "24h")).toHaveProperty("selected", true);
+    await waitFor(() => {
+      expect(usageRequest).toHaveBeenCalledWith("24h");
+    });
+    expect(screen.queryByRole("heading", { name: "Loading" })).not.toBeInTheDocument();
+    expect(within(metricCard("Requests")).getByText("2")).toBeInTheDocument();
+    expect(screen.getByRole("table", { name: "Model usage table" })).toBeInTheDocument();
+  });
+
+  test("updates the active session usage duration every second without refetching", async () => {
+    vi.useFakeTimers();
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+      await Promise.resolve();
+    });
+    expect(screen.getAllByText("Requests").length).toBeGreaterThan(0);
+    expect(usageDurationPill()).toHaveTextContent("1m");
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(usageDurationPill()).toHaveTextContent("1m 2s");
+    expect(management.getUsageStats).toHaveBeenCalledTimes(1);
+  });
+
+  test("does not increment fixed usage range durations", async () => {
+    vi.useFakeTimers();
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockImplementation((range = "session") => {
+      if (range === "24h") {
+        return Promise.resolve(usageStats({ duration: "24h" }));
+      }
+      return Promise.resolve(usageStats());
+    });
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    fireEvent.click(getMaterialFilterChip(document.body, "24h"));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(usageDurationPill()).toHaveTextContent("24h");
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(usageDurationPill()).toHaveTextContent("24h");
+  });
+
+  test("does not increment placeholder duration while returning to the active session range", async () => {
+    vi.useFakeTimers();
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockImplementation((range = "session") => {
+      if (range === "24h") {
+        return Promise.resolve(usageStats({ duration: "24h" }));
+      }
+      return new Promise<UsageStats>(() => undefined);
+    });
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    fireEvent.click(getMaterialFilterChip(document.body, "24h"));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(usageDurationPill()).toHaveTextContent("24h");
+
+    fireEvent.click(getMaterialFilterChip(document.body, "This session"));
+    await act(async () => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(usageDurationPill()).toHaveTextContent("24h");
+  });
+
+  test("keeps the embedded log panel searchable and clearable", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    expect(await screen.findByText(/server started/)).toBeInTheDocument();
+
+    const searchField = getMaterialTextField(document.body, "Search logs");
+    setMaterialTextFieldValue(searchField, "database");
+
+    expect(screen.queryByText(/server started/)).not.toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+
+    fireEvent.click(getMaterialIconButton(document.body, "Clear log search"));
+
+    expect(screen.getByText(/server started/)).toBeInTheDocument();
+    expect(screen.getByText(/database unavailable/)).toBeInTheDocument();
+  });
+
+  test("shows usage empty state while keeping logs available", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "getUsageStats").mockResolvedValue({
+      totals: {
+        requests: 0,
+        input_tokens: 0,
+        output_tokens: 0,
+        cache_creation: 0,
+        cache_read: 0,
+        cache_hit_rate: 0,
+        cache_write_rate: 0,
+        cache_rw_ratio: 0,
+        total_cost: 0,
+        duration: "0s"
+      },
+      by_model: []
+    });
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue(logEntries());
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    expect(await screen.findByText("No usage has been recorded yet.")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Token split chart/ })).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Cache split chart/ })).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: /Cost by model chart/ })).toBeInTheDocument();
+    expect(screen.getByRole("table", { name: "Model usage table" })).toBeInTheDocument();
+    expect(screen.getByText(/server started/)).toBeInTheDocument();
+  });
+
+  test("keeps usage dashboard and logs visible when graph API store is unavailable", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockRejectedValue(
+      new ApiError(503, "store_unavailable", "配置存储不可用")
+    );
+    vi.spyOn(management, "getUsageStats").mockResolvedValue(usageStats());
+    vi.spyOn(logs, "getRecentLogs").mockResolvedValue([]);
+    vi.spyOn(logs, "createLogStream").mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    renderWithConsoleProviders(<OverviewPage />);
+
+    expect(await screen.findByRole("heading", { name: "Usage Analytics" })).toBeInTheDocument();
+    await screen.findAllByText("Requests");
+    expect(within(metricCard("Requests")).getByText("2")).toBeInTheDocument();
+    expect(screen.getByRole("region", { name: "Backend logs" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Configuration graph unavailable" })).toBeInTheDocument();
+  });
+});
+
+function getMaterialFilterChip(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filter-chip")).find(
+    (chip) => chip.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filter chip labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (textField) => (textField as HTMLElement & { label?: string }).label === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element as HTMLElement & { value: string };
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (iconButton) => iconButton.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function setMaterialTextFieldValue(element: HTMLElement & { value: string }, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function usageStats(overrides: Partial<UsageStats["totals"]> = {}): UsageStats {
+  return {
+    totals: {
+      requests: 2,
+      input_tokens: 300,
+      output_tokens: 80,
+      cache_creation: 40,
+      cache_read: 120,
+      cache_hit_rate: 40,
+      cache_write_rate: 13.3,
+      cache_rw_ratio: 3,
+      total_cost: 0.42,
+      duration: "1m",
+      ...overrides
+    },
+    by_model: [
+      {
+        model: "claude-sonnet",
+        actual_model: "claude-3-5-sonnet",
+        requests: 2,
+        input_tokens: 300,
+        output_tokens: 80,
+        cache_creation: 40,
+        cache_read: 120,
+        cache_hit_rate: 40,
+        cost: 0.42,
+        avg_cost_per_mtoken: 1105.26
+      }
+    ]
+  };
+}
+
+function logEntries(): LogEntry[] {
+  return [
+    {
+      timestamp: "2026-06-07T00:00:00Z",
+      level: "INFO",
+      message: "server started",
+      raw: "time=2026-06-07T00:00:00Z level=INFO msg=server-started"
+    },
+    {
+      timestamp: "2026-06-07T00:00:01Z",
+      level: "ERROR",
+      message: "database unavailable",
+      raw: "time=2026-06-07T00:00:01Z level=ERROR msg=database-unavailable"
+    }
+  ];
+}
+
+const clipboardDescriptor = Object.getOwnPropertyDescriptor(Navigator.prototype, "clipboard");
+const createObjectURLDescriptor = Object.getOwnPropertyDescriptor(URL, "createObjectURL");
+const revokeObjectURLDescriptor = Object.getOwnPropertyDescriptor(URL, "revokeObjectURL");
+
+function restoreNavigatorClipboard() {
+  if (clipboardDescriptor) {
+    Object.defineProperty(Navigator.prototype, "clipboard", clipboardDescriptor);
+  } else {
+    Reflect.deleteProperty(navigator, "clipboard");
+  }
+}
+
+function restoreURLMethods() {
+  if (createObjectURLDescriptor) {
+    Object.defineProperty(URL, "createObjectURL", createObjectURLDescriptor);
+  }
+  if (revokeObjectURLDescriptor) {
+    Object.defineProperty(URL, "revokeObjectURL", revokeObjectURLDescriptor);
+  }
+}
diff --git a/webui/src/features/overview/OverviewPage.tsx b/webui/src/features/overview/OverviewPage.tsx
new file mode 100644
index 00000000..b4d6265e
--- /dev/null
+++ b/webui/src/features/overview/OverviewPage.tsx
@@ -0,0 +1,393 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
+import { LoadingState } from "../../components/LoadingState";
+import { MaterialFilterChip } from "../../components/MaterialFilterChip";
+import { MaterialSwitch } from "../../components/MaterialSwitch";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { MessageKey } from "../../i18n/messages";
+import { getUsageStats, type UsageRange } from "../../rpc/management";
+import { queryKeys } from "../../rpc/queryKeys";
+import type { UsageStats, UsageStatsModelRow } from "../../rpc/types";
+import { listContainer, listItem } from "../../theme/motion";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { LogPanel } from "../logs/LogPanel";
+import { mockUsageStats } from "./mockUsage";
+import { PageHeader, QueryErrorState } from "../shared";
+
+const usageRanges: UsageRange[] = ["session", "24h", "7d", "30d", "all"];
+
+const usageRangeLabelKeys: Record<UsageRange, MessageKey> = {
+  session: "overview.range.session",
+  "24h": "overview.range.24h",
+  "7d": "overview.range.7d",
+  "30d": "overview.range.30d",
+  all: "overview.range.all"
+};
+
+export function OverviewPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+  const [range, setRange] = useState<UsageRange>("session");
+  const [demoData, setDemoData] = useState(false);
+  const usage = useQuery({
+    queryKey: [...queryKeys.usageStats, range, demoData ? "demo" : "live"],
+    queryFn: () => (demoData ? mockUsageStats(range) : getUsageStats(range)),
+    placeholderData: keepPreviousData
+  });
+  const liveDuration = useLiveUsageDuration(
+    usage.data?.totals.duration,
+    range === "session" && !usage.isPlaceholderData && !demoData
+  );
+
+  return (
+    <section className="page-stack" aria-labelledby="overview-title">
+      <PageHeader eyebrow={t("pageEyebrow.analytics")} title={t("nav.overview")}>
+        {t("overview.description")}
+      </PageHeader>
+
+      {graph.error ? (
+        <section className="state-panel state-panel--inline" role="status">
+          <p className="eyebrow">{t("common.error")}</p>
+          <h2>{t("overview.graphUnavailableTitle")}</h2>
+          <p>{t("overview.graphUnavailableDescription")}</p>
+        </section>
+      ) : null}
+
+      <section className="usage-dashboard" aria-labelledby="usage-title">
+        <div className="panel-heading">
+          <div>
+            <h2 id="usage-title">{t("overview.usageTitle")}</h2>
+            <p>{t("overview.usageDescription")}</p>
+          </div>
+          <div className="usage-heading-controls">
+            <md-chip-set className="usage-range" role="group" aria-label={t("overview.rangeLabel")}>
+              {usageRanges.map((option) => (
+                <MaterialFilterChip
+                  key={option}
+                  value={option}
+                  selected={range === option}
+                  onSelect={setRange}
+                >
+                  {t(usageRangeLabelKeys[option])}
+                </MaterialFilterChip>
+              ))}
+            </md-chip-set>
+            {usage.data ? <span className="status-pill status-pill--muted">{liveDuration}</span> : null}
+            {import.meta.env.DEV ? (
+              <label className="usage-demo-toggle">
+                <MaterialSwitch label={t("overview.demoData")} selected={demoData} onChange={setDemoData} />
+                <span>{t("overview.demoData")}</span>
+              </label>
+            ) : null}
+          </div>
+        </div>
+
+        {usage.isLoading ? (
+          <LoadingState label={t("common.loading")} />
+        ) : usage.error ? (
+          <QueryErrorState error={usage.error} />
+        ) : usage.data ? (
+          <UsageDashboard stats={usage.data} />
+        ) : null}
+      </section>
+
+      <section id="logs" className="overview-logs">
+        <div className="panel-heading">
+          <div>
+            <h2 id="overview-logs-title">{t("logs.panelTitle")}</h2>
+            <p>{t("logs.description")}</p>
+          </div>
+        </div>
+        <LogPanel labelledBy="overview-logs-title" embedded />
+      </section>
+    </section>
+  );
+}
+
+function useLiveUsageDuration(rawDuration: string | undefined, active: boolean) {
+  const { t } = useI18n();
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  const baseSeconds = rawDuration ? parseDurationSeconds(rawDuration) : undefined;
+
+  useEffect(() => {
+    setElapsedSeconds(0);
+    if (!active || baseSeconds === undefined) {
+      return;
+    }
+    const intervalId = window.setInterval(() => {
+      setElapsedSeconds((current) => current + 1);
+    }, 1000);
+    return () => window.clearInterval(intervalId);
+  }, [active, baseSeconds, rawDuration]);
+
+  if (!rawDuration) {
+    return "";
+  }
+  if (!active || baseSeconds === undefined) {
+    return formatDuration(rawDuration, translateDurationPart);
+  }
+  return formatDurationSeconds(baseSeconds + elapsedSeconds, translateDurationPart);
+
+  function translateDurationPart(key: MessageKey, count: number) {
+    return t(key, { count });
+  }
+}
+
+function UsageDashboard({ stats }: { stats: UsageStats }) {
+  const { t } = useI18n();
+  const hasUsage = stats.totals.requests > 0 || stats.by_model.length > 0;
+
+  return (
+    <>
+      {!hasUsage ? (
+        <div className="usage-empty-state">
+          <p>{t("overview.usageEmpty")}</p>
+        </div>
+      ) : null}
+
+      <motion.div
+        className="usage-summary-grid"
+        variants={listContainer}
+        initial="hidden"
+        animate="show"
+      >
+        <UsageMetric icon="swap_horiz" tone="primary" value={t("overview.requestsValue", { count: stats.totals.requests })} label={t("overview.requests")} />
+        <UsageMetric icon="south_west" tone="primary" value={t("overview.inputValue", { count: formatTokenValue(stats.totals.input_tokens) })} label={t("overview.inputTokens")} />
+        <UsageMetric icon="north_east" tone="tertiary" value={t("overview.outputValue", { count: formatTokenValue(stats.totals.output_tokens) })} label={t("overview.outputTokens")} />
+        <UsageMetric icon="bolt" tone="secondary" value={t("overview.cacheHitValue", { rate: formatPercent(stats.totals.cache_hit_rate) })} label={t("overview.cacheHit")} />
+        <UsageMetric icon="sync_alt" tone="secondary" value={t("overview.cacheRatioValue", { ratio: formatRatio(stats.totals.cache_rw_ratio) })} label={t("overview.cacheReadWrite")} />
+        <UsageMetric icon="payments" tone="tertiary" value={t("overview.totalCostValue", { cost: formatCurrency(stats.totals.total_cost) })} label={t("overview.totalCost")} />
+      </motion.div>
+
+      <div className="usage-chart-grid">
+        <UsageBarChart
+          ariaLabel={chartAriaLabel(t, t("overview.tokenSplitChart"), [
+            [t("overview.inputTokens"), stats.totals.input_tokens],
+            [t("overview.outputTokens"), stats.totals.output_tokens]
+          ], t("overview.noData"))}
+          title={t("overview.tokenSplit")}
+          segments={[
+            { label: t("overview.inputTokens"), value: stats.totals.input_tokens, className: "usage-segment--input" },
+            { label: t("overview.outputTokens"), value: stats.totals.output_tokens, className: "usage-segment--output" }
+          ]}
+        />
+        <UsageBarChart
+          ariaLabel={chartAriaLabel(t, t("overview.cacheSplitChart"), [
+            [t("overview.cacheWrite"), stats.totals.cache_creation],
+            [t("overview.cacheRead"), stats.totals.cache_read]
+          ], t("overview.noData"))}
+          title={t("overview.cacheSplit")}
+          segments={[
+            { label: t("overview.cacheWrite"), value: stats.totals.cache_creation, className: "usage-segment--cache-write" },
+            { label: t("overview.cacheRead"), value: stats.totals.cache_read, className: "usage-segment--cache-read" }
+          ]}
+        />
+        <UsageBarChart
+          ariaLabel={chartAriaLabel(
+            t,
+            t("overview.costByModelChart"),
+            stats.by_model.map((row) => [row.model, row.cost]),
+            t("overview.noData")
+          )}
+          title={t("overview.costByModel")}
+          segments={stats.by_model.map((row, index) => ({
+            label: row.model,
+            value: row.cost,
+            className: `usage-segment--cost-${(index % 6) + 1}`
+          }))}
+        />
+      </div>
+
+      <div className="table-scroll">
+        <table className="resource-table usage-table" aria-label={t("overview.modelUsageTable")}>
+          <thead>
+            <tr>
+              <th>{t("overview.model")}</th>
+              <th>{t("overview.actualModel")}</th>
+              <th>{t("overview.requests")}</th>
+              <th>{t("overview.inputTokens")}</th>
+              <th>{t("overview.outputTokens")}</th>
+              <th>{t("overview.cacheWrite")}</th>
+              <th>{t("overview.cacheRead")}</th>
+              <th>{t("overview.cacheHit")}</th>
+              <th>{t("overview.cost")}</th>
+              <th>{t("overview.avgCost")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {stats.by_model.map((row) => (
+              <UsageModelRow row={row} key={row.model} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+function UsageMetric({
+  label,
+  value,
+  icon,
+  tone = "primary"
+}: {
+  label: string;
+  value: string;
+  icon: string;
+  tone?: "primary" | "tertiary" | "secondary";
+}) {
+  return (
+    <motion.article className={`usage-metric usage-metric--${tone}`} variants={listItem}>
+      <span className="usage-metric__icon material-symbol" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="usage-metric__label">{label}</span>
+      <strong>{value}</strong>
+    </motion.article>
+  );
+}
+
+function UsageBarChart({
+  ariaLabel,
+  title,
+  segments
+}: {
+  ariaLabel: string;
+  title: string;
+  segments: Array<{ label: string; value: number; className: string }>;
+}) {
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  return (
+    <section className="usage-chart" role="img" aria-label={ariaLabel} tabIndex={0}>
+      <div className="usage-chart__header">
+        <h3>{title}</h3>
+        <span>{formatNumber(total)}</span>
+      </div>
+      <div className="usage-chart__bar" aria-hidden="true">
+        {segments.map((segment) => (
+          <span
+            className={`usage-chart__segment ${segment.className}`}
+            key={segment.label}
+            style={{ inlineSize: `${total > 0 ? (Math.max(0, segment.value) / total) * 100 : 0}%` }}
+          />
+        ))}
+      </div>
+      <ul className="usage-chart__legend">
+        {segments.map((segment) => (
+          <li key={segment.label}>
+            <span className={`usage-chart__dot ${segment.className}`} aria-hidden="true" />
+            <span>{segment.label}</span>
+            <strong>{formatNumber(segment.value)}</strong>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function UsageModelRow({ row }: { row: UsageStatsModelRow }) {
+  const { t } = useI18n();
+  return (
+    <tr aria-label={t("overview.modelUsageRow", { model: row.model })}>
+      <td>{row.model}</td>
+      <td>{row.actual_model || "-"}</td>
+      <td>{formatNumber(row.requests)}</td>
+      <td>{formatTokenValue(row.input_tokens)}</td>
+      <td>{formatTokenValue(row.output_tokens)}</td>
+      <td>{formatTokenValue(row.cache_creation)}</td>
+      <td>{formatTokenValue(row.cache_read)}</td>
+      <td>{formatPercent(row.cache_hit_rate)}</td>
+      <td>{formatCurrency(row.cost)}</td>
+      <td>{formatCurrency(row.avg_cost_per_mtoken)}{t("overview.costPerMillionSuffix")}</td>
+    </tr>
+  );
+}
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat().format(value);
+}
+
+function formatDuration(
+  raw: string,
+  translatePart: (key: MessageKey, count: number) => string
+) {
+  if (!raw || raw === "N/A") {
+    return "—";
+  }
+  const seconds = parseDurationSeconds(raw);
+  if (seconds === undefined) {
+    return raw.trim();
+  }
+  return formatDurationSeconds(seconds, translatePart);
+}
+
+function parseDurationSeconds(raw: string) {
+  const match = /^(?:(\d+)h)?(?:(\d+)m)?(?:([\d.]+)s)?$/.exec(raw.trim());
+  if (!match || (!match[1] && !match[2] && !match[3])) {
+    return undefined;
+  }
+  const hours = match[1] ? parseInt(match[1], 10) : 0;
+  const minutes = match[2] ? parseInt(match[2], 10) : 0;
+  const seconds = match[3] ? Math.round(parseFloat(match[3])) : 0;
+  return hours * 3600 + minutes * 60 + seconds;
+}
+
+function formatDurationSeconds(
+  totalSeconds: number,
+  translatePart: (key: MessageKey, count: number) => string
+) {
+  const roundedSeconds = Math.max(0, Math.round(totalSeconds));
+  const hours = Math.floor(roundedSeconds / 3600);
+  const minutes = Math.floor((roundedSeconds % 3600) / 60);
+  const seconds = roundedSeconds % 60;
+  const parts: string[] = [];
+  if (hours) {
+    parts.push(translatePart("overview.duration.hoursShort", hours));
+  }
+  if (minutes) {
+    parts.push(translatePart("overview.duration.minutesShort", minutes));
+  }
+  if (seconds || parts.length === 0) {
+    parts.push(translatePart("overview.duration.secondsShort", seconds));
+  }
+  return parts.join(" ");
+}
+
+function formatTokenValue(value: number) {
+  return formatNumber(value);
+}
+
+function formatPercent(value: number) {
+  return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value)}%`;
+}
+
+function formatRatio(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2
+  }).format(value);
+}
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: "CNY",
+    currencyDisplay: "narrowSymbol",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value);
+}
+
+function chartAriaLabel(
+  t: (key: MessageKey, values?: Record<string, string | number>) => string,
+  title: string,
+  values: Array<[string, number]>,
+  emptySummary: string
+) {
+  const summary = values.length > 0
+    ? values
+      .map(([label, value]) => t("overview.chartAriaItem", { label, value: formatNumber(value) }))
+      .join(t("overview.chartAriaSeparator"))
+    : emptySummary;
+  return t("overview.chartAriaLabel", { title, summary });
+}
diff --git a/webui/src/features/overview/mockUsage.ts b/webui/src/features/overview/mockUsage.ts
new file mode 100644
index 00000000..45457497
--- /dev/null
+++ b/webui/src/features/overview/mockUsage.ts
@@ -0,0 +1,93 @@
+import type { UsageRange } from "../../rpc/management";
+import type { UsageStats, UsageStatsModelRow, UsageStatsTotals } from "../../rpc/types";
+
+/**
+ * Dev-only mock usage data so the Overview dashboard can be previewed without a live
+ * backend. Eight models spanning three providers (Anthropic / OpenAI / Google).
+ *
+ * Never referenced in production builds — OverviewPage only enables the demo toggle
+ * when `import.meta.env.DEV` is true.
+ */
+
+const DEMO_MODELS: Array<{ model: string; actual: string }> = [
+  { model: "claude-sonnet", actual: "claude-3-5-sonnet" },
+  { model: "claude-opus", actual: "claude-3-opus" },
+  { model: "claude-haiku", actual: "claude-3-5-haiku" },
+  { model: "gpt-4o", actual: "gpt-4o-2024-08-06" },
+  { model: "gpt-4o-mini", actual: "gpt-4o-mini" },
+  { model: "o3-mini", actual: "o3-mini" },
+  { model: "gemini-pro", actual: "gemini-1.5-pro" },
+  { model: "gemini-flash", actual: "gemini-1.5-flash" }
+];
+
+const RANGE_SCALE: Record<UsageRange, number> = {
+  session: 1,
+  "24h": 4,
+  "7d": 26,
+  "30d": 110,
+  all: 340
+};
+
+const RANGE_DURATION: Record<UsageRange, string> = {
+  session: "1h 12m",
+  "24h": "23h 48m",
+  "7d": "167h",
+  "30d": "718h",
+  all: "2400h"
+};
+
+export function mockUsageStats(range: UsageRange = "session"): UsageStats {
+  const scale = RANGE_SCALE[range] ?? 1;
+  const byModel: UsageStatsModelRow[] = DEMO_MODELS.map((entry, index) => {
+    const requests = Math.max(1, Math.round((38 + index * 19 + ((index * 7) % 5) * 11) * scale));
+    const inputTokens = requests * (1400 + (index % 4) * 520);
+    const outputTokens = requests * (260 + (index % 3) * 180);
+    const cacheCreation = Math.round(inputTokens * (0.22 + (index % 3) * 0.05));
+    const cacheRead = Math.round(inputTokens * (0.7 + (index % 4) * 0.12));
+    const cacheHitRate = Math.min(99, Math.round((58 + (index * 6) % 38) * 10) / 10);
+    const cost = Math.round(
+      (inputTokens * 0.000003 + outputTokens * 0.000015 + cacheRead * 0.0000004) * 100
+    ) / 100;
+    return {
+      model: entry.model,
+      actual_model: entry.actual,
+      requests,
+      input_tokens: inputTokens,
+      output_tokens: outputTokens,
+      cache_creation: cacheCreation,
+      cache_read: cacheRead,
+      cache_hit_rate: cacheHitRate,
+      cost,
+      avg_cost_per_mtoken: Math.round((cost / Math.max(1, inputTokens + outputTokens)) * 1_000_000 * 100) / 100
+    };
+  });
+
+  return { totals: aggregateTotals(byModel, range), by_model: byModel };
+}
+
+function aggregateTotals(byModel: UsageStatsModelRow[], range: UsageRange): UsageStatsTotals {
+  const sum = (selector: (row: UsageStatsModelRow) => number) =>
+    byModel.reduce((total, row) => total + selector(row), 0);
+
+  const requests = sum((row) => row.requests);
+  const inputTokens = sum((row) => row.input_tokens);
+  const outputTokens = sum((row) => row.output_tokens);
+  const cacheCreation = sum((row) => row.cache_creation);
+  const cacheRead = sum((row) => row.cache_read);
+  const totalCost = Math.round(sum((row) => row.cost) * 100) / 100;
+
+  return {
+    requests,
+    input_tokens: inputTokens,
+    output_tokens: outputTokens,
+    cache_creation: cacheCreation,
+    cache_read: cacheRead,
+    cache_hit_rate: inputTokens + cacheRead > 0
+      ? Math.round((cacheRead / (inputTokens + cacheRead)) * 1000) / 10
+      : 0,
+    cache_write_rate: inputTokens > 0 ? Math.round((cacheCreation / inputTokens) * 1000) / 10 : 0,
+    cache_rw_ratio: cacheCreation > 0 ? Math.round((cacheRead / cacheCreation) * 100) / 100 : 0,
+    total_cost: totalCost,
+    duration: RANGE_DURATION[range] ?? "0s"
+  };
+}
diff --git a/webui/src/features/routes/RoutesPage.test.tsx b/webui/src/features/routes/RoutesPage.test.tsx
new file mode 100644
index 00000000..79618027
--- /dev/null
+++ b/webui/src/features/routes/RoutesPage.test.tsx
@@ -0,0 +1,319 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as configGraph from "../../rpc/configGraph";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { RoutesPage } from "./RoutesPage";
+
+describe("RoutesPage", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test("renders route graph fields without priority or fallback controls", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<RoutesPage />);
+
+    // The list shows a compact summary row; operational markers are hidden until the editor opens.
+    expect(await screen.findByRole("heading", { level: 3, name: "primary" })).toBeInTheDocument();
+
+    await openRouteEditor();
+
+    expect(screen.getByText("8 fields")).toBeInTheDocument();
+    expect(screen.getByText("Hot reload")).toBeInTheDocument();
+    // Route model + provider are selects populated from configured models/providers.
+    const routeModelField = getMaterialSelect(document, "Route model");
+    expect(routeModelField).toBeInTheDocument();
+    expectLobeLeadingIcon(routeModelField);
+    expect(getMaterialSelect(document, "Route provider")).toBeInTheDocument();
+    expectLobeLeadingIcon(getMaterialTextField(document, "Route display name"));
+    expect(getMaterialTextField(document, "Route context window")).toBeInTheDocument();
+    const advancedFeatures = screen.getByRole("group", { name: "Advanced Features" });
+    expect(getMaterialSelect(advancedFeatures, "Route web search mode")).toBeInTheDocument();
+    expect(getMaterialTextField(advancedFeatures, "Route web search max uses")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(advancedFeatures, "Route web search search max rounds")).toHaveAttribute("spellcheck", "false");
+    expect(Array.from(advancedFeatures.querySelectorAll("md-outlined-text-field")).some(
+      (candidate) => materialElementLabel(candidate as MaterialTextFieldElement) === "Route web search JSON"
+    )).toBe(false);
+    expect(Array.from(advancedFeatures.querySelectorAll("md-outlined-text-field")).some(
+      (candidate) => materialElementLabel(candidate as MaterialTextFieldElement) === "Route extensions JSON"
+    )).toBe(false);
+    expect(queryMaterialOutlinedButton(advancedFeatures, /Route web search.*1 key/)).not.toBeInTheDocument();
+    expect(queryMaterialOutlinedButton(advancedFeatures, /Route extensions.*0 keys/)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/priority/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/fallback/i)).not.toBeInTheDocument();
+  });
+
+  test("autosaves route edits through graph patches", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const patch = vi.spyOn(configGraph, "patchConfigGraph").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2"
+    });
+
+    renderWithConsoleProviders(<RoutesPage />);
+
+    await screen.findByLabelText("Route primary");
+    await openRouteEditor();
+    vi.useFakeTimers();
+    const displayNameField = getMaterialTextField(document, "Route display name");
+    setMaterialTextFieldValue(displayNameField, "Fast Route");
+    fireEvent.blur(displayNameField);
+
+    await advanceAutosave();
+
+    expect(patch).toHaveBeenCalledWith({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "route",
+          id: "primary",
+          field: "display_name",
+          value: "Fast Route"
+        }
+      ]
+    });
+  });
+
+  test("creates a route from current graph model and provider options", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<RoutesPage />);
+
+    await waitFor(() => expect(getMaterialButton(document, "Add Route")).toBeInTheDocument());
+    await userEvent.click(getMaterialButton(document, "Add Route"));
+    const form = screen.getByRole("form", { name: "Create Route" });
+    setMaterialTextFieldValue(getMaterialTextField(form, "Route alias"), "fast");
+    expect(getMaterialSelect(form, "Model").value).toBe("claude-sonnet");
+    expect(getMaterialSelect(form, "Provider").value).toBe("anthropic");
+    submitMaterialForm(form, "Create Route");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("route", {
+      baseRevision: "rev-1",
+      id: "fast",
+      value: {
+        model: "claude-sonnet",
+        provider: "anthropic"
+      }
+    }));
+  });
+
+  test("renders create route controls with official Material field labels", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<RoutesPage />);
+
+    await waitFor(() => expect(getMaterialButton(document, "Add Route")).toBeInTheDocument());
+    await userEvent.click(getMaterialButton(document, "Add Route"));
+    const form = screen.getByRole("form", { name: "Create Route" });
+    const aliasField = getMaterialTextField(form, "Route alias");
+    const modelSelect = getMaterialSelect(form, "Model");
+
+    expect(aliasField.label).toBe("Route alias");
+    expect(aliasField).not.toHaveAttribute("aria-labelledby");
+    expect(aliasField).toHaveAttribute("spellcheck", "false");
+    expect(aliasField.closest(".form-field--create-track")?.querySelector(".schema-field__label")).not.toBeInTheDocument();
+    expect(getMaterialTrailingIconButton(aliasField, "Help for Route alias")).toBeInTheDocument();
+    expect(modelSelect.label).toBe("Model");
+    expect(modelSelect.querySelector("[slot='leading-icon'] svg")).toBeInTheDocument();
+    expect(getMaterialSelectOptions(modelSelect).find((option) => option.value === "claude-sonnet")
+      ?.querySelector("[slot='start'] svg")).toBeInTheDocument();
+    expect(modelSelect).not.toHaveAttribute("aria-labelledby");
+    expect(modelSelect.closest(".form-field--create-track")?.querySelector(".schema-field__label")).not.toBeInTheDocument();
+    expect(modelSelect.supportingText).toBe("");
+    expect(modelSelect.closest(".mb-field__select-shell")).not.toBeInTheDocument();
+    expect(modelSelect.querySelector("[slot='trailing-icon']")).not.toBeInTheDocument();
+    const modelHelp = getMaterialIconButton(form, "Help for Model");
+    expect(modelHelp).toHaveClass("mb-field__select-help");
+    expect(modelHelp.closest(".mb-field__select-actions")).toBeInTheDocument();
+    expect(getComputedStyle(modelHelp).position).not.toBe("absolute");
+    expect(modelSelect).not.toContainElement(modelHelp);
+    await userEvent.click(modelHelp);
+    expect(within(form).getByRole("tooltip")).toHaveTextContent("Model this alias points to.");
+  });
+
+  test("deletes a route after inline confirmation", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const remove = vi.spyOn(configGraph, "deleteConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({
+        revision: "rev-2",
+        resources: configGraphFixture().resources.filter((resource) => resource.kind !== "route")
+      })
+    });
+
+    renderWithConsoleProviders(<RoutesPage />);
+
+    const routePanel = await screen.findByLabelText("Route primary");
+    await userEvent.click(getMaterialButton(routePanel, "Delete Route primary"));
+    expect(remove).not.toHaveBeenCalled();
+    await userEvent.click(getMaterialButton(routePanel, "Confirm delete primary"));
+
+    expect(remove).toHaveBeenCalledWith("route", "primary", "rev-1");
+    expect(screen.queryByLabelText("Route primary")).not.toBeInTheDocument();
+  });
+});
+
+async function advanceAutosave() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(450);
+    await Promise.resolve();
+  });
+}
+
+type MaterialSelectElement = HTMLElement & {
+  label: string;
+  supportingText: string;
+  value: string;
+};
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialSelectElement>("md-outlined-select")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element;
+}
+
+type MaterialSelectOptionElement = HTMLElement & {
+  displayText: string;
+  selected: boolean;
+  value: string;
+};
+
+function getMaterialSelectOptions(select: ParentNode) {
+  const options = Array.from(select.querySelectorAll<MaterialSelectOptionElement>("md-select-option"));
+  if (options.length === 0) {
+    throw new Error("Expected Material Web select options to be rendered.");
+  }
+  return options;
+}
+
+function expectLobeLeadingIcon(fieldElement: HTMLElement) {
+  const leadingIcon = fieldElement.querySelector("[slot='leading-icon']");
+  expect(leadingIcon).toBeInTheDocument();
+  expect(leadingIcon?.querySelector("svg")).toBeInTheDocument();
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function getMaterialButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filled-button")).find(
+    (candidate) => {
+      const accessibleLabel = candidate.getAttribute("aria-label") ?? candidate.textContent ?? "";
+      return accessibleLabel.includes(label);
+    }
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filled button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialOutlinedButton(container: ParentNode, label: RegExp) {
+  const element = Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => label.test(candidate.getAttribute("aria-label") ?? candidate.textContent ?? "")
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function queryMaterialOutlinedButton(container: ParentNode, label: RegExp) {
+  return Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => label.test(candidate.getAttribute("aria-label") ?? candidate.textContent ?? "")
+  ) ?? null;
+}
+
+function getMaterialTrailingIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("slot") === "trailing-icon" && candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web trailing icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = queryMaterialIconButton(container, label);
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function queryMaterialIconButton(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  ) ?? null;
+}
+
+function setMaterialTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+function submitMaterialForm(container: ParentNode, submitLabel: string) {
+  const button = getMaterialButton(container, submitLabel);
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected Material Web submit button inside a form.");
+  }
+  fireEvent.submit(form);
+}
+
+function getOutlinedButton(container: ParentNode, label: string): HTMLElement {
+  const element = Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => (candidate.getAttribute("aria-label") ?? candidate.textContent ?? "").includes(label)
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+/** Opens the route editor dialog from its summary row. */
+async function openRouteEditor() {
+  await userEvent.click(getOutlinedButton(document, "Edit Route primary"));
+}
+
diff --git a/webui/src/features/routes/RoutesPage.tsx b/webui/src/features/routes/RoutesPage.tsx
new file mode 100644
index 00000000..f3bd0c4f
--- /dev/null
+++ b/webui/src/features/routes/RoutesPage.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import { CreateResourcePanel } from "../configGraph/CreateResourcePanel";
+import { ResourceEditorDialog } from "../configGraph/ResourceEditorDialog";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { modelDisplayNamesById } from "../configGraph/modelProviderIcons";
+import { PageHeader, QueryErrorState } from "../shared";
+
+export function RoutesPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("loading.routes")} />;
+  }
+
+  const routes = graph.data.resources.filter((resource) => resource.kind === "route");
+  const routeTitle = t("routes.resourceTitle");
+  const modelDisplayNames = modelDisplayNamesById(graph.data.resources);
+  const editing = editingId ? routes.find((route) => route.id === editingId) : undefined;
+
+  return (
+    <section className="page-stack" aria-labelledby="routes-title">
+      <PageHeader eyebrow={t("pageEyebrow.aliases")} title={t("nav.routes")}>
+        {t("routes.description")}
+      </PageHeader>
+
+      <section className="resource-section" aria-labelledby="routes-list-heading">
+        <div className="section-heading">
+          <h2 id="routes-list-heading">{t("routes.listTitle", { count: routes.length })}</h2>
+          <CreateResourcePanel graph={graph.data} kind="route" />
+        </div>
+        <div className="resource-card-list resource-card-list--summary">
+          {routes.map((route) => (
+            <ResourceEditorCard
+              ariaLabel={t("resource.cardLabel", { title: routeTitle, id: route.id })}
+              key={route.id}
+              modelDisplayNames={modelDisplayNames}
+              onOpenEditor={() => setEditingId(route.id)}
+              resource={route}
+              revision={graph.data!.revision}
+              title={routeTitle}
+              variant="summary"
+            />
+          ))}
+        </div>
+      </section>
+
+      {editing ? (
+        <ResourceEditorDialog
+          open
+          onClose={() => setEditingId(null)}
+          modelDisplayNames={modelDisplayNames}
+          resource={editing}
+          revision={graph.data!.revision}
+          title={routeTitle}
+        />
+      ) : null}
+    </section>
+  );
+}
diff --git a/webui/src/features/rpcTest/RpcTestPage.test.tsx b/webui/src/features/rpcTest/RpcTestPage.test.tsx
new file mode 100644
index 00000000..e4c776f7
--- /dev/null
+++ b/webui/src/features/rpcTest/RpcTestPage.test.tsx
@@ -0,0 +1,194 @@
+import { act, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { AppShell } from "../../app/App";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import * as responses from "../../rpc/responses";
+import { RpcTestPage } from "./RpcTestPage";
+
+if (!Element.prototype.animate) {
+  Object.defineProperty(Element.prototype, "animate", {
+    configurable: true,
+    value: () => ({
+      addEventListener: () => undefined,
+      cancel: () => undefined,
+      commitStyles: () => undefined,
+      finish: () => undefined,
+      finished: Promise.resolve(),
+      pause: () => undefined,
+      persist: () => undefined,
+      play: () => undefined,
+      ready: Promise.resolve(),
+      removeEventListener: () => undefined,
+      reverse: () => undefined,
+      updatePlaybackRate: () => undefined
+    } as unknown as Animation)
+  });
+}
+
+describe("RpcTestPage", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders official Material Web form controls", async () => {
+    vi.spyOn(responses, "listResponseModels").mockResolvedValue({
+      models: [{ slug: "moonbridge", name: "Moon Bridge", provider: "route" }]
+    });
+
+    const { container } = renderWithConsoleProviders(<RpcTestPage />);
+
+    await screen.findByText("moonbridge");
+
+    expect(getMaterialSelect(container, "Model")).toBeInTheDocument();
+    expect(getMaterialTextField(container, "Input")).toHaveProperty("type", "textarea");
+    expect(getMaterialTextField(container, "Input")).not.toHaveClass("material-text-field--single-line");
+    expect(getMaterialTextField(container, "Max Output Tokens")).toHaveProperty("type", "number");
+    expect(getMaterialTextField(container, "Max Output Tokens")).toHaveClass("material-text-field--single-line");
+    expect(getMaterialTextField(container, "Temperature")).toHaveProperty("type", "number");
+    expect(getMaterialTextField(container, "Temperature")).toHaveClass("material-text-field--single-line");
+    expect(getMaterialButton(container, "Send")).toBeInTheDocument();
+  });
+
+  test("keeps Material selects aligned with single-line text field density", async () => {
+    vi.spyOn(responses, "listResponseModels").mockResolvedValue({
+      models: [{ slug: "moonbridge", name: "Moon Bridge", provider: "route" }]
+    });
+
+    renderWithConsoleProviders(
+      <MemoryRouter>
+        <AppShell content={<RpcTestPage />} />
+      </MemoryRouter>
+    );
+
+    await screen.findByText("moonbridge");
+
+    const materialSelect = getMaterialSelect(document, "Model");
+    const materialTextField = getMaterialTextField(document, "Max Output Tokens");
+    const selectStyle = getComputedStyle(materialSelect);
+    const textFieldStyle = getComputedStyle(materialTextField);
+
+    expect(materialSelect).toHaveClass("material-select--single-line");
+    expect(selectStyle.getPropertyValue("--md-outlined-field-top-space").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-top-space").trim()
+    );
+    expect(selectStyle.getPropertyValue("--md-outlined-field-bottom-space").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-bottom-space").trim()
+    );
+    expect(selectStyle.getPropertyValue("--md-outlined-select-text-field-input-text-line-height").trim()).toBe(
+      textFieldStyle.getPropertyValue("--md-outlined-text-field-input-text-line-height").trim()
+    );
+  });
+
+  test("sends a responses smoke test from Material Web controls and shows latency/result", async () => {
+    vi.spyOn(responses, "listResponseModels").mockResolvedValue({
+      models: [{ slug: "moonbridge", name: "Moon Bridge", provider: "route" }]
+    });
+    const createResponse = vi.spyOn(responses, "createResponse").mockResolvedValue({
+      id: "resp_1",
+      status: "completed",
+      model: "moonbridge",
+      output: [],
+      output_text: "pong"
+    });
+
+    const { container } = renderWithConsoleProviders(<RpcTestPage />);
+
+    await screen.findByText("moonbridge");
+    setMaterialSelectValue(getMaterialSelect(container, "Model"), "moonbridge");
+    setMaterialTextFieldValue(getMaterialTextField(container, "Input"), "ping");
+    setMaterialTextFieldValue(getMaterialTextField(container, "Max Output Tokens"), "128");
+    setMaterialTextFieldValue(getMaterialTextField(container, "Temperature"), "0.4");
+    await submitMaterialForm(container);
+
+    await waitFor(() => expect(createResponse).toHaveBeenCalledWith(expect.objectContaining({
+      model: "moonbridge",
+      input: "ping",
+      max_output_tokens: 128,
+      temperature: 0.4
+    })));
+    expect(await screen.findByText(/pong/)).toBeInTheDocument();
+    expect(screen.getByText(/latency/i)).toBeInTheDocument();
+  });
+});
+
+type MaterialSelectElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  type: string;
+  value: string;
+};
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialSelectElement>("md-outlined-select")).find(
+    (candidate) => candidate.label === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element;
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => candidate.label === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web text field labelled "${label}".`);
+  }
+  return element;
+}
+
+function getMaterialButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-filled-button")).find(
+    (candidate) => candidate.textContent?.trim() === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web filled button labelled "${label}".`);
+  }
+  return element;
+}
+
+function setMaterialSelectValue(element: MaterialSelectElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function setMaterialTextFieldValue(element: MaterialTextFieldElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+  });
+}
+
+async function submitMaterialForm(container: ParentNode) {
+  const button = getMaterialButton(container, "Send");
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected Material submit button to be inside a form.");
+  }
+  let clicked = false;
+  let submitted = false;
+  button.addEventListener("click", () => {
+    clicked = true;
+  }, { once: true });
+  form.addEventListener("submit", () => {
+    submitted = true;
+  }, { once: true });
+  await userEvent.click(button);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  expect(clicked).toBe(true);
+  if (!submitted) {
+    await act(async () => {
+      form.requestSubmit();
+      await Promise.resolve();
+    });
+  }
+}
diff --git a/webui/src/features/rpcTest/RpcTestPage.tsx b/webui/src/features/rpcTest/RpcTestPage.tsx
new file mode 100644
index 00000000..086fb3b3
--- /dev/null
+++ b/webui/src/features/rpcTest/RpcTestPage.tsx
@@ -0,0 +1,118 @@
+import { useQuery } from "@tanstack/react-query";
+import { type FormEvent, useState } from "react";
+import { MaterialFilledButton } from "../../components/MaterialButton";
+import { MaterialSelect } from "../../components/MaterialSelect";
+import { MaterialOutlinedTextField } from "../../components/MaterialTextField";
+import {
+  createResponse,
+  listResponseModels,
+  type CreateResponseResult
+} from "../../rpc/responses";
+import { useI18n } from "../../i18n/I18nProvider";
+import { PageHeader, QueryErrorState } from "../shared";
+
+export function RpcTestPage() {
+  const { t } = useI18n();
+  const models = useQuery({
+    queryKey: ["responses", "models"],
+    queryFn: listResponseModels
+  });
+  const [model, setModel] = useState("");
+  const [input, setInput] = useState("ping");
+  const [maxTokens, setMaxTokens] = useState("256");
+  const [temperature, setTemperature] = useState("0.2");
+  const [latency, setLatency] = useState<number | null>(null);
+  const [result, setResult] = useState<CreateResponseResult | null>(null);
+  const [error, setError] = useState<unknown>(null);
+
+  if (models.error) {
+    return <QueryErrorState error={models.error} />;
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    const started = performance.now();
+    try {
+      const response = await createResponse({
+        model: model || models.data?.models[0]?.slug || "",
+        input,
+        max_output_tokens: Number(maxTokens),
+        temperature: Number(temperature)
+      });
+      setLatency(Math.round(performance.now() - started));
+      setResult(response);
+    } catch (caught) {
+      setLatency(Math.round(performance.now() - started));
+      setError(caught);
+    }
+  }
+
+  return (
+    <section className="page-stack" aria-labelledby="rpc-test-title">
+      <PageHeader eyebrow={t("pageEyebrow.smokeTest")} title={t("nav.rpcTest")}>
+        {t("rpc.description")}
+      </PageHeader>
+      <style>{rpcTestStyles}</style>
+      <div className="section-grid">
+        <section className="content-panel">
+          <h2>{t("rpc.request")}</h2>
+          <form className="form-grid" onSubmit={submit}>
+            <MaterialSelect
+              className="rpc-test-field form-grid__wide"
+              label={t("field.model")}
+              value={model}
+              onChange={setModel}
+              options={[
+                { label: t("rpc.selectModel"), value: "" },
+                ...(models.data?.models.map((item) => ({ label: item.slug, value: item.slug })) ?? [])
+              ]}
+            />
+            <MaterialOutlinedTextField
+              className="rpc-test-field form-grid__wide"
+              label={t("field.input")}
+              rows={6}
+              type="textarea"
+              value={input}
+              onInput={setInput}
+            />
+            <MaterialOutlinedTextField
+              className="rpc-test-field"
+              label={t("field.maxOutputTokens")}
+              type="number"
+              value={maxTokens}
+              onInput={setMaxTokens}
+            />
+            <MaterialOutlinedTextField
+              className="rpc-test-field"
+              label={t("field.temperature")}
+              step="0.1"
+              type="number"
+              value={temperature}
+              onInput={setTemperature}
+            />
+            <div className="form-actions">
+              <MaterialFilledButton type="submit">{t("action.send")}</MaterialFilledButton>
+            </div>
+          </form>
+        </section>
+        <section className="content-panel">
+          <h2>{t("rpc.response")}</h2>
+          {latency !== null ? <p className="feedback-inline">{t("feedback.latency", { latency })}</p> : null}
+          {error ? (
+            <pre className="json-block">{JSON.stringify(error, null, 2)}</pre>
+          ) : (
+            <pre className="json-block">{JSON.stringify(result ?? {}, null, 2)}</pre>
+          )}
+        </section>
+      </div>
+    </section>
+  );
+}
+
+const rpcTestStyles = `
+  .rpc-test-field {
+    width: 100%;
+    min-width: 0;
+  }
+`;
diff --git a/webui/src/features/searchTools/SearchToolsPage.test.tsx b/webui/src/features/searchTools/SearchToolsPage.test.tsx
new file mode 100644
index 00000000..dbbc92c2
--- /dev/null
+++ b/webui/src/features/searchTools/SearchToolsPage.test.tsx
@@ -0,0 +1,252 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as configGraph from "../../rpc/configGraph";
+import * as management from "../../rpc/management";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { SearchToolsPage } from "./SearchToolsPage";
+
+describe("SearchToolsPage", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders web search, extensions, and proxy graph resources without YAML controls", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<SearchToolsPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Web Search" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Extensions" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Proxy" })).toBeInTheDocument();
+
+    const webSearch = screen.getByLabelText("Web Search");
+    expect(within(webSearch).getByRole("heading", { level: 3, name: "main" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Web Search main status")).getByText("Saved")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Extension db_sqlite status")).getByText("Saved")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Proxy main status")).getByText("Critical")).toBeInTheDocument();
+
+    expect(getMaterialSelect(document, "Web search mode").value).toBe("auto");
+    expect(screen.getByText("db_sqlite")).toBeInTheDocument();
+    expect(getStructuredObject(document, "Extension config")).not.toHaveTextContent("Structured editor");
+    expect(getMaterialTextField(document, "path")).toHaveAttribute("spellcheck", "false");
+    expect(getStructuredObject(document, "OpenAI capture proxy")).not.toHaveTextContent("Structured editor");
+    expect(getMaterialTextField(document, "base_url")).toHaveAttribute("spellcheck", "false");
+    expect(getMaterialTextField(document, "api_key")).toHaveAttribute("spellcheck", "false");
+    expect(queryMaterialOutlinedButton(document, /OpenAI capture proxy.*2 keys/)).not.toBeInTheDocument();
+    expect(document.querySelector(".schema-json-editor")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/yaml/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/yaml/i)).not.toBeInTheDocument();
+  });
+
+  test("localizes page chrome in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<SearchToolsPage />, { locale: "zh-CN" });
+
+    expect(await screen.findByRole("heading", { level: 2, name: "联网搜索" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "扩展" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "代理" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("代理 main 状态")).getByText("关键运行时")).toBeInTheDocument();
+  });
+
+  test("creates an extension from the extensions section", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "listExtensions").mockResolvedValue(["db_sqlite", "metrics"]);
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<SearchToolsPage />);
+
+    await waitFor(() => expect(getMaterialButton(document, "Add Extension")).toBeInTheDocument());
+    await userEvent.click(getMaterialButton(document, "Add Extension"));
+    const form = screen.getByRole("form", { name: "Create Extension" });
+    expect(within(form).queryByRole("textbox", { name: "Extension ID" })).not.toBeInTheDocument();
+    expect(getMaterialSelect(form, "Extension ID")).toBeInTheDocument();
+    setMaterialSelectValue(getMaterialSelect(form, "Extension ID"), "metrics");
+    submitMaterialForm(form, "Create Extension");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("extension", {
+      baseRevision: "rev-1",
+      id: "metrics",
+      value: {
+        enabled: true
+      }
+    }));
+  });
+
+  test("lets users disable a new extension and read create field help", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    vi.spyOn(management, "listExtensions").mockResolvedValue(["db_sqlite", "metrics"]);
+    const create = vi.spyOn(configGraph, "createConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({ revision: "rev-2" })
+    });
+
+    renderWithConsoleProviders(<SearchToolsPage />);
+
+    await waitFor(() => expect(getMaterialButton(document, "Add Extension")).toBeInTheDocument());
+    await userEvent.click(getMaterialButton(document, "Add Extension"));
+    const form = screen.getByRole("form", { name: "Create Extension" });
+    const enabledSwitch = getMaterialSwitch(form, "Enabled");
+    expect(form.querySelector(".schema-switch")).not.toBeInTheDocument();
+    expect(enabledSwitch.closest(".schema-field__switch-line")).toBeInTheDocument();
+    expect(enabledSwitch.closest(".schema-field")).toBeInTheDocument();
+    expect(enabledSwitch.selected).toBe(true);
+    expect(getMaterialSelect(form, "Extension ID")).toBeInTheDocument();
+    await userEvent.click(getMaterialIconButton(form, "Help for Enabled"));
+    expect(within(form).getByRole("tooltip")).toHaveTextContent("Turn this extension on or off");
+    setMaterialSelectValue(getMaterialSelect(form, "Extension ID"), "metrics");
+    setMaterialSwitchSelected(enabledSwitch, false);
+    submitMaterialForm(form, "Create Extension");
+
+    await waitFor(() => expect(create).toHaveBeenCalledWith("extension", {
+      baseRevision: "rev-1",
+      id: "metrics",
+      value: {
+        enabled: false
+      }
+    }));
+  });
+
+  test("deletes extensions but not singleton search or proxy resources", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+    const remove = vi.spyOn(configGraph, "deleteConfigResource").mockResolvedValue({
+      result: "committed",
+      revision: "rev-2",
+      graph: configGraphFixture({
+        revision: "rev-2",
+        resources: configGraphFixture().resources.filter((resource) => resource.id !== "db_sqlite")
+      })
+    });
+
+    renderWithConsoleProviders(<SearchToolsPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Web Search" })).toBeInTheDocument();
+    expect(queryMaterialButton(document, "Delete Web Search main")).not.toBeInTheDocument();
+    expect(queryMaterialButton(document, "Delete Proxy main")).not.toBeInTheDocument();
+
+    const extensionPanel = screen.getByText("db_sqlite").closest("section")!;
+    await userEvent.click(getMaterialButton(extensionPanel, "Delete Extension db_sqlite"));
+    await userEvent.click(getMaterialButton(extensionPanel, "Confirm delete db_sqlite"));
+
+    expect(remove).toHaveBeenCalledWith("extension", "db_sqlite", "rev-1");
+    expect(screen.queryByText("db_sqlite")).not.toBeInTheDocument();
+  });
+});
+
+function getMaterialSwitch(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-switch")).find(
+    (switchElement) => switchElement.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web switch labelled "${label}".`);
+  }
+  return element as HTMLElement & { selected: boolean };
+}
+
+type MaterialSelectElement = HTMLElement & {
+  label: string;
+  value: string;
+};
+
+function queryMaterialOutlinedButton(container: ParentNode, label: RegExp) {
+  return Array.from(container.querySelectorAll("md-outlined-button")).find(
+    (candidate) => label.test(candidate.getAttribute("aria-label") ?? candidate.textContent ?? "")
+  ) ?? null;
+}
+
+function getStructuredObject(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll(".schema-structured-object")).find(
+    (summary) => summary.getAttribute("aria-label")?.startsWith(`${label},`)
+  );
+  if (!element) {
+    throw new Error(`Expected a structured object editor labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialSelect(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialSelectElement>("md-outlined-select")).find(
+    (candidate) => materialElementLabel(candidate) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web select labelled "${label}".`);
+  }
+  return element;
+}
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-outlined-text-field")).find(
+    (candidate) => materialElementLabel(candidate as HTMLElement & { label?: string }) === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web text field labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function materialElementLabel(element: HTMLElement & { label?: string }) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    return labelledBy
+      .split(/\s+/)
+      .map((id) => document.getElementById(id)?.textContent?.trim() ?? "")
+      .filter(Boolean)
+      .join(" ");
+  }
+  return element.label || element.getAttribute("aria-label") || element.getAttribute("label") || "";
+}
+
+function getMaterialIconButton(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll("md-icon-button")).find(
+    (candidate) => candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web icon button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function getMaterialButton(container: ParentNode, label: string) {
+  const element = queryMaterialButton(container, label);
+  if (!element) {
+    throw new Error(`Expected a Material Web filled button labelled "${label}".`);
+  }
+  return element as HTMLElement;
+}
+
+function queryMaterialButton(container: ParentNode, label: string) {
+  return Array.from(container.querySelectorAll("md-filled-button")).find((candidate) => {
+    const accessibleLabel = candidate.getAttribute("aria-label") ?? candidate.textContent ?? "";
+    return accessibleLabel.includes(label);
+  }) ?? null;
+}
+
+function setMaterialSelectValue(element: MaterialSelectElement, value: string) {
+  act(() => {
+    element.value = value;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function setMaterialSwitchSelected(element: HTMLElement & { selected: boolean }, selected: boolean) {
+  act(() => {
+    element.selected = selected;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+function submitMaterialForm(container: ParentNode, submitLabel: string) {
+  const button = getMaterialButton(container, submitLabel);
+  const form = button.closest("form");
+  if (!form) {
+    throw new Error("Expected Material Web submit button inside a form.");
+  }
+  fireEvent.submit(form);
+}
diff --git a/webui/src/features/searchTools/SearchToolsPage.tsx b/webui/src/features/searchTools/SearchToolsPage.tsx
new file mode 100644
index 00000000..72fb4646
--- /dev/null
+++ b/webui/src/features/searchTools/SearchToolsPage.tsx
@@ -0,0 +1,112 @@
+import { useQuery } from "@tanstack/react-query";
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import { listExtensions } from "../../rpc/management";
+import { queryKeys } from "../../rpc/queryKeys";
+import type { ConfigResource } from "../../rpc/types";
+import { CreateResourcePanel } from "../configGraph/CreateResourcePanel";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { PageHeader, QueryErrorState } from "../shared";
+
+export function SearchToolsPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+  const registeredExtensions = useQuery({
+    queryKey: queryKeys.extensions,
+    queryFn: listExtensions
+  });
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("common.loading")} />;
+  }
+
+  const webSearch = graph.data.resources.find((resource) => resource.kind === "web_search");
+  const extensions = graph.data.resources.filter((resource) => resource.kind === "extension");
+  const proxy = graph.data.resources.find((resource) => resource.kind === "proxy");
+  const existingExtensionIds = new Set(extensions.map((extension) => extension.id));
+  const availableExtensionIds = (registeredExtensions.data ?? [])
+    .filter((extensionId) => !existingExtensionIds.has(extensionId));
+
+  return (
+    <section className="page-stack" aria-labelledby="search-tools-title">
+      <PageHeader eyebrow={t("pageEyebrow.config")} title={t("nav.searchTools")}>
+        {t("searchTools.description")}
+      </PageHeader>
+
+      {webSearch ? (
+        <ResourceSection
+          resource={webSearch}
+          revision={graph.data.revision}
+          title={t("searchTools.webSearch")}
+        />
+      ) : null}
+
+      <section className="resource-section" aria-labelledby="extensions-heading">
+        <div className="section-heading">
+          <h2 id="extensions-heading">{t("searchTools.extensions")}</h2>
+          {registeredExtensions.isLoading ? (
+            <span className="status-pill status-pill--muted">{t("common.loading")}</span>
+          ) : registeredExtensions.error ? (
+            <span className="field-error" role="alert">
+              {registeredExtensions.error instanceof Error
+                ? registeredExtensions.error.message
+                : t("error.unknownRequest")}
+            </span>
+          ) : (
+            <CreateResourcePanel
+              availableExtensionIds={availableExtensionIds}
+              graph={graph.data}
+              kind="extension"
+            />
+          )}
+        </div>
+        <div className="resource-card-list">
+          {extensions.map((extension) => (
+            <ResourceEditorCard
+              ariaLabel={t("resource.cardLabel", { title: t("searchTools.extension"), id: extension.id })}
+              key={extension.id}
+              resource={extension}
+              revision={graph.data.revision}
+              title={t("searchTools.extension")}
+            />
+          ))}
+        </div>
+      </section>
+
+      {proxy ? (
+        <ResourceSection
+          resource={proxy}
+          revision={graph.data.revision}
+          title={t("searchTools.proxy")}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+function ResourceSection({
+  resource,
+  revision,
+  title
+}: {
+  resource: ConfigResource;
+  revision: string;
+  title: string;
+}) {
+  const { t } = useI18n();
+  return (
+    <section className="resource-section" aria-label={title}>
+      <h2>{title}</h2>
+      <ResourceEditorCard
+        ariaLabel={t("resource.cardLabel", { title, id: resource.id })}
+        resource={resource}
+        revision={revision}
+        title={title}
+      />
+    </section>
+  );
+}
diff --git a/webui/src/features/security/SecurityPage.test.tsx b/webui/src/features/security/SecurityPage.test.tsx
new file mode 100644
index 00000000..d751749b
--- /dev/null
+++ b/webui/src/features/security/SecurityPage.test.tsx
@@ -0,0 +1,56 @@
+import { screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as configGraph from "../../rpc/configGraph";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { SecurityPage } from "./SecurityPage";
+
+describe("SecurityPage", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders server security fields with write-only auth token", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<SecurityPage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Server" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Server")).getByRole("heading", { level: 3, name: "main" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Server main status")).getByText("Restart required")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Server main status")).getByText("Critical")).toBeInTheDocument();
+    expect(screen.getByLabelText("Listen address")).toHaveValue(":38440");
+    expect(screen.getByLabelText("Max sessions")).toHaveValue("64");
+    expect(screen.getByLabelText("Session TTL")).toHaveValue("24h");
+    expect(screen.getByLabelText("Auth token")).toHaveValue("");
+    expect(screen.queryByDisplayValue("******")).not.toBeInTheDocument();
+    expect(screen.getByText("Restart required")).toBeInTheDocument();
+  });
+
+  test("localizes page chrome in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<SecurityPage />, { locale: "zh-CN" });
+
+    expect(await screen.findByRole("heading", { level: 2, name: "服务访问" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("服务访问 main 状态")).getByText("需要重启")).toBeInTheDocument();
+    expect(getMaterialTextField(document, "认证 Token").supportingText).toBe("输入新值以替换已保存的密钥。");
+    expect(getMaterialTextField(document, "认证 Token")).toHaveAttribute("aria-label", "认证 Token");
+    expect(screen.queryByLabelText("Auth Token")).not.toBeInTheDocument();
+  });
+});
+
+type MaterialTextFieldElement = HTMLElement & {
+  label: string;
+  supportingText: string;
+};
+
+function getMaterialTextField(container: ParentNode, label: string) {
+  const element = Array.from(container.querySelectorAll<MaterialTextFieldElement>("md-outlined-text-field")).find(
+    (candidate) => candidate.label === label || candidate.getAttribute("aria-label") === label
+  );
+  if (!element) {
+    throw new Error(`Expected a Material Web outlined text field labelled "${label}".`);
+  }
+  return element;
+}
diff --git a/webui/src/features/security/SecurityPage.tsx b/webui/src/features/security/SecurityPage.tsx
new file mode 100644
index 00000000..533449ee
--- /dev/null
+++ b/webui/src/features/security/SecurityPage.tsx
@@ -0,0 +1,52 @@
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { ConfigResource } from "../../rpc/types";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { PageHeader, QueryErrorState } from "../shared";
+
+export function SecurityPage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("common.loading")} />;
+  }
+
+  const server = graph.data.resources.find((resource) => resource.kind === "server");
+
+  return (
+    <section className="page-stack" aria-labelledby="security-title">
+      <PageHeader eyebrow={t("pageEyebrow.config")} title={t("nav.security")}>
+        {t("security.description")}
+      </PageHeader>
+
+      {server ? <ServerSection resource={server} revision={graph.data.revision} /> : null}
+    </section>
+  );
+}
+
+function ServerSection({
+  resource,
+  revision
+}: {
+  resource: ConfigResource;
+  revision: string;
+}) {
+  const { t } = useI18n();
+  const title = t("security.server");
+  return (
+    <section className="resource-section" aria-label={title}>
+      <h2>{title}</h2>
+      <ResourceEditorCard
+        ariaLabel={t("resource.cardLabel", { title, id: resource.id })}
+        resource={resource}
+        revision={revision}
+        title={title}
+      />
+    </section>
+  );
+}
diff --git a/webui/src/features/shared.tsx b/webui/src/features/shared.tsx
new file mode 100644
index 00000000..8d4438b2
--- /dev/null
+++ b/webui/src/features/shared.tsx
@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import { ApiError } from "../rpc/http";
+import { ErrorState } from "../components/ErrorState";
+import { useI18n } from "../i18n/I18nProvider";
+import { type ConfigPath, getConfigDescription } from "../configDocs/configDescriptions";
+
+export const defaultPage = { limit: 20, offset: 0 };
+
+export function PageHeader({
+  title
+}: {
+  eyebrow: string;
+  title: string;
+  children?: ReactNode;
+}) {
+  return (
+    <header className="page-header">
+      <h1>{title}</h1>
+    </header>
+  );
+}
+
+export function StoreUnavailableState() {
+  const { t } = useI18n();
+  return (
+    <ErrorState
+      title={t("error.storeTitle")}
+      message={t("error.storeMessage")}
+    />
+  );
+}
+
+export function QueryErrorState({ error }: { error: unknown }) {
+  if (error instanceof ApiError && (error.code === "store_unavailable" || error.status === 404)) {
+    return <StoreUnavailableState />;
+  }
+  const { t } = useI18n();
+  const message = error instanceof Error ? error.message : t("error.unknownRequest");
+  return <ErrorState title={t("error.requestFailed")} message={message} />;
+}
+
+export function formatNumber(value: number | undefined) {
+  return typeof value === "number" ? new Intl.NumberFormat().format(value) : "0";
+}
+
+export function FieldHint({ children }: { children: ReactNode }) {
+  return <small className="field-hint">{children}</small>;
+}
+
+export function ConfigHint({ path, id }: { path: ConfigPath; id?: string }) {
+  const { locale, t } = useI18n();
+  const description = getConfigDescription(path, locale);
+
+  return (
+    <small id={id} className="field-hint">
+      {description.description}
+      <span> {t("configDoc.type")}: {localizedConfigMetaValue(description.type, t)}</span>
+      {description.defaultValue ? (
+        <span> {t("configDoc.default")}: {localizedConfigMetaValue(description.defaultValue, t)}</span>
+      ) : null}
+      {description.sensitive ? <span> {t("configDoc.sensitive")}</span> : null}
+    </small>
+  );
+}
+
+function localizedConfigMetaValue(value: string, t: ReturnType<typeof useI18n>["t"]) {
+  const normalized = value.trim().toLowerCase();
+  const localized: Record<string, string> = {
+    boolean: t("configDoc.type.boolean"),
+    empty: t("configDoc.default.empty"),
+    "host:port": t("configDoc.type.hostPort"),
+    number: t("configDoc.type.number"),
+    object: t("configDoc.type.object"),
+    string: t("configDoc.type.string"),
+    url: t("configDoc.type.url")
+  };
+  return localized[normalized] ?? value;
+}
+
+export function FieldWithHint({
+  children,
+  className,
+  hintPath,
+  hintId
+}: {
+  children: ReactNode;
+  className?: string;
+  hintPath: ConfigPath;
+  hintId: string;
+}) {
+  return (
+    <div className={className ? `form-field ${className}` : "form-field"}>
+      {children}
+      <ConfigHint id={hintId} path={hintPath} />
+    </div>
+  );
+}
diff --git a/webui/src/features/storage/StoragePage.test.tsx b/webui/src/features/storage/StoragePage.test.tsx
new file mode 100644
index 00000000..debd46c4
--- /dev/null
+++ b/webui/src/features/storage/StoragePage.test.tsx
@@ -0,0 +1,52 @@
+import { screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { renderWithConsoleProviders } from "../../test/renderWithConsoleProviders";
+import * as configGraph from "../../rpc/configGraph";
+import { configGraphFixture } from "../../test/configGraphFixtures";
+import { StoragePage } from "./StoragePage";
+
+describe("StoragePage", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("renders cache and persistence resources with runtime storage errors", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(
+      configGraphFixture({
+        runtime: {
+          status: "runtimeRejected",
+          errors: [
+            {
+              resourceKind: "persistence",
+              resourceId: "main",
+              field: "active_provider",
+              code: "databaseUnavailable",
+              message: "database unavailable"
+            }
+          ]
+        }
+      })
+    );
+
+    renderWithConsoleProviders(<StoragePage />);
+
+    expect(await screen.findByRole("heading", { level: 2, name: "Cache" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Persistence" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Cache")).getByRole("heading", { level: 3, name: "main" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Cache main status")).getByText("Saved")).toBeInTheDocument();
+    expect(within(screen.getByLabelText("Persistence main status")).getByText("Saved")).toBeInTheDocument();
+    expect(screen.getByLabelText("Cache mode")).toHaveValue("memory");
+    expect(screen.getByLabelText("Persistence provider")).toHaveValue("db_sqlite");
+    expect(screen.getByText("database unavailable")).toBeInTheDocument();
+  });
+
+  test("localizes page chrome in Chinese locale", async () => {
+    vi.spyOn(configGraph, "getConfigGraph").mockResolvedValue(configGraphFixture());
+
+    renderWithConsoleProviders(<StoragePage />, { locale: "zh-CN" });
+
+    expect(await screen.findByRole("heading", { level: 2, name: "缓存" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "持久化" })).toBeInTheDocument();
+    expect(within(screen.getByLabelText("缓存 main 状态")).getByText("已保存")).toBeInTheDocument();
+  });
+});
diff --git a/webui/src/features/storage/StoragePage.tsx b/webui/src/features/storage/StoragePage.tsx
new file mode 100644
index 00000000..e73436b7
--- /dev/null
+++ b/webui/src/features/storage/StoragePage.tsx
@@ -0,0 +1,90 @@
+import { LoadingState } from "../../components/LoadingState";
+import { useI18n } from "../../i18n/I18nProvider";
+import type { ConfigResource, FieldError } from "../../rpc/types";
+import { ResourceEditorCard } from "../configGraph/ResourceEditorCard";
+import { useConfigGraph } from "../configGraph/useConfigGraph";
+import { PageHeader, QueryErrorState } from "../shared";
+
+const storageKinds = new Set(["cache", "persistence"]);
+
+export function StoragePage() {
+  const { t } = useI18n();
+  const graph = useConfigGraph();
+
+  if (graph.error) {
+    return <QueryErrorState error={graph.error} />;
+  }
+  if (graph.isLoading || !graph.data) {
+    return <LoadingState label={t("common.loading")} />;
+  }
+
+  const cache = graph.data.resources.find((resource) => resource.kind === "cache");
+  const persistence = graph.data.resources.find((resource) => resource.kind === "persistence");
+  const storageErrors = (graph.data.runtime.errors ?? []).filter((error) =>
+    storageKinds.has(error.resourceKind)
+  );
+
+  return (
+    <section className="page-stack" aria-labelledby="storage-title">
+      <PageHeader eyebrow={t("pageEyebrow.config")} title={t("nav.storage")}>
+        {t("storage.description")}
+      </PageHeader>
+
+      {storageErrors.length > 0 ? <ErrorList errors={storageErrors} /> : null}
+      {cache ? (
+        <ResourceSection
+          resource={cache}
+          revision={graph.data.revision}
+          title={t("storage.cache")}
+        />
+      ) : null}
+      {persistence ? (
+        <ResourceSection
+          resource={persistence}
+          revision={graph.data.revision}
+          title={t("storage.persistence")}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+function ErrorList({ errors }: { errors: FieldError[] }) {
+  const { t } = useI18n();
+  return (
+    <section className="content-panel" aria-label={t("storage.errors")}>
+      <h2>{t("storage.status")}</h2>
+      <ul className="compact-list">
+        {errors.map((error) => (
+          <li key={`${error.resourceKind}-${error.resourceId}-${error.field}-${error.code}`}>
+            <strong>{error.resourceId || error.resourceKind}</strong>
+            <span>{error.message}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function ResourceSection({
+  resource,
+  revision,
+  title
+}: {
+  resource: ConfigResource;
+  revision: string;
+  title: string;
+}) {
+  const { t } = useI18n();
+  return (
+    <section className="resource-section" aria-label={title}>
+      <h2>{title}</h2>
+      <ResourceEditorCard
+        ariaLabel={t("resource.cardLabel", { title, id: resource.id })}
+        resource={resource}
+        revision={revision}
+        title={title}
+      />
+    </section>
+  );
+}
diff --git a/webui/src/i18n/I18nProvider.test.tsx b/webui/src/i18n/I18nProvider.test.tsx
new file mode 100644
index 00000000..dc6e6c0f
--- /dev/null
+++ b/webui/src/i18n/I18nProvider.test.tsx
@@ -0,0 +1,108 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  CONSOLE_LOCALE_STORAGE_KEY,
+  I18nProvider,
+  translateMessage,
+  useI18n
+} from "./I18nProvider";
+
+function Probe() {
+  const { locale, setLocale, t } = useI18n();
+  return (
+    <div>
+      <p data-testid="locale">{locale}</p>
+      <p data-testid="title">{t("nav.overview")}</p>
+      <p data-testid="routes">{t("overview.routes")}</p>
+      <button type="button" onClick={() => setLocale("en-US")}>
+        English
+      </button>
+      <button type="button" onClick={() => setLocale("zh-CN")}>
+        Chinese
+      </button>
+    </div>
+  );
+}
+
+describe("I18nProvider", () => {
+  afterEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  test("defaults to Chinese when navigator language is zh", () => {
+    vi.spyOn(window.navigator, "language", "get").mockReturnValue("zh-CN");
+
+    render(
+      <I18nProvider>
+        <Probe />
+      </I18nProvider>
+    );
+
+    expect(screen.getByTestId("locale")).toHaveTextContent("zh-CN");
+    expect(screen.getByTestId("title")).toHaveTextContent("概览");
+    expect(screen.getByTestId("routes")).toHaveTextContent("路由");
+  });
+
+  test("supports switching to English and persists the choice", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(window.navigator, "language", "get").mockReturnValue("zh-CN");
+
+    render(
+      <I18nProvider>
+        <Probe />
+      </I18nProvider>
+    );
+
+    await user.click(screen.getByRole("button", { name: "English" }));
+
+    expect(screen.getByTestId("locale")).toHaveTextContent("en-US");
+    expect(screen.getByTestId("title")).toHaveTextContent("Overview");
+    expect(localStorage.getItem(CONSOLE_LOCALE_STORAGE_KEY)).toBe("en-US");
+  });
+
+  test("uses stored language before navigator language", () => {
+    localStorage.setItem(CONSOLE_LOCALE_STORAGE_KEY, "en-US");
+    vi.spyOn(window.navigator, "language", "get").mockReturnValue("zh-CN");
+
+    render(
+      <I18nProvider>
+        <Probe />
+      </I18nProvider>
+    );
+
+    expect(screen.getByTestId("locale")).toHaveTextContent("en-US");
+    expect(screen.getByTestId("title")).toHaveTextContent("Overview");
+  });
+
+  test("translates messages outside React from the stored locale", () => {
+    localStorage.setItem(CONSOLE_LOCALE_STORAGE_KEY, "zh-CN");
+
+    expect(translateMessage("error.requestFailedWithStatus", { status: 502 })).toBe("请求失败，状态码 502");
+  });
+
+  test("keeps working when localStorage is unavailable", () => {
+    const original = Object.getOwnPropertyDescriptor(window, "localStorage");
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      get() {
+        throw new DOMException("blocked", "SecurityError");
+      }
+    });
+    vi.spyOn(window.navigator, "language", "get").mockReturnValue("en-US");
+
+    render(
+      <I18nProvider>
+        <Probe />
+      </I18nProvider>
+    );
+
+    expect(screen.getByTestId("locale")).toHaveTextContent("en-US");
+    expect(screen.getByTestId("title")).toHaveTextContent("Overview");
+
+    if (original) {
+      Object.defineProperty(window, "localStorage", original);
+    }
+  });
+});
diff --git a/webui/src/i18n/I18nProvider.tsx b/webui/src/i18n/I18nProvider.tsx
new file mode 100644
index 00000000..f1e273c8
--- /dev/null
+++ b/webui/src/i18n/I18nProvider.tsx
@@ -0,0 +1,97 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { type Locale, type MessageKey, messages, normalizeLocale } from "./messages";
+
+export const CONSOLE_LOCALE_STORAGE_KEY = "moonbridge.console.locale";
+
+type InterpolationValue = string | number;
+
+type I18nContextValue = {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: (key: MessageKey, values?: Record<string, InterpolationValue>) => string;
+};
+
+const I18nContext = createContext<I18nContextValue | undefined>(undefined);
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState(readInitialLocale);
+
+  const setLocale = useCallback((nextLocale: Locale) => {
+    setLocaleState(nextLocale);
+    safeSetStorage(CONSOLE_LOCALE_STORAGE_KEY, nextLocale);
+  }, []);
+
+  const t = useCallback(
+    (key: MessageKey, values?: Record<string, InterpolationValue>) =>
+      translateMessageForLocale(locale, key, values),
+    [locale]
+  );
+
+  const value = useMemo(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n() {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error("useI18n must be used within I18nProvider");
+  }
+  return context;
+}
+
+export function translateMessage(key: MessageKey, values?: Record<string, InterpolationValue>) {
+  return translateMessageForLocale(readInitialLocale(), key, values);
+}
+
+function translateMessageForLocale(
+  locale: Locale,
+  key: MessageKey,
+  values?: Record<string, InterpolationValue>
+) {
+  return interpolate(messages[locale][key] ?? messages["zh-CN"][key], values);
+}
+
+function readInitialLocale(): Locale {
+  const stored = safeGetStorage(CONSOLE_LOCALE_STORAGE_KEY);
+  if (stored === "en-US" || stored === "zh-CN") {
+    return stored;
+  }
+  if (typeof window === "undefined") {
+    return "zh-CN";
+  }
+  return normalizeLocale(window.navigator.language);
+}
+
+function interpolate(message: string, values?: Record<string, InterpolationValue>) {
+  if (!values) {
+    return message;
+  }
+  return Object.entries(values).reduce(
+    (result, [key, value]) => result.replaceAll(`{${key}}`, String(value)),
+    message
+  );
+}
+
+function safeGetStorage(key: string): string | null {
+  try {
+    return window.localStorage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeSetStorage(key: string, value: string) {
+  try {
+    window.localStorage?.setItem(key, value);
+  } catch {
+    // Storage can be disabled in hardened browser contexts.
+  }
+}
diff --git a/webui/src/i18n/locales/en.ts b/webui/src/i18n/locales/en.ts
new file mode 100644
index 00000000..2caddd49
--- /dev/null
+++ b/webui/src/i18n/locales/en.ts
@@ -0,0 +1,344 @@
+export const en = {
+  "action.saveToken": "Save token",
+  "action.send": "Send",
+  "app.console": "Console",
+  "app.consoleSections": "Console sections",
+  "app.language": "Language",
+  "app.language.en": "English",
+  "app.language.zh": "中文",
+  "app.routeContent": "Console route content",
+  "app.signOut": "Sign out",
+  "app.switchTheme": "Switch to {theme} theme",
+  "theme.dark": "dark",
+  "theme.light": "light",
+  "nav.overview": "Overview",
+  "nav.modelsProviders": "Models & Providers",
+  "nav.routes": "Routes",
+  "nav.defaults": "Defaults",
+  "nav.searchTools": "Search & Tools",
+  "nav.storage": "Storage",
+  "nav.security": "Security",
+  "nav.logs": "Logs",
+  "nav.rpcTest": "RPC Test",
+  "auth.eyebrow": "Authentication required",
+  "auth.title": "Enter Moon Bridge Token",
+  "auth.token": "Token",
+  "auth.remember": "Remember on this device",
+  "auth.signedOut": "Signed out — re-enter your token.",
+  "auth.verifying": "Verifying…",
+  "auth.revealToken": "Show token",
+  "auth.hideToken": "Hide token",
+  "common.error": "Error",
+  "common.loading": "Loading",
+  "common.unknown": "unknown",
+  "config.description": "Adjust how Moon Bridge runs. Changes apply instantly.",
+  "configDoc.default": "Default",
+  "configDoc.default.empty": "empty",
+  "configDoc.optional": "Optional",
+  "configDoc.required": "Required",
+  "configDoc.sensitive": "Sensitive",
+  "configDoc.savedRealtime": "Saved in realtime",
+  "configDoc.restartMayBeRequired": "May require restart",
+  "configDoc.type": "Type",
+  "configDoc.type.array": "array",
+  "configDoc.type.boolean": "boolean",
+  "configDoc.type.hostPort": "host:port",
+  "configDoc.type.number": "number",
+  "configDoc.type.object": "object",
+  "configDoc.type.string": "string",
+  "configDoc.type.url": "URL",
+  "editor.liveSaving": "Saving\u2026",
+  "editor.liveUnsaved": "Unsaved changes",
+  "editor.liveError": "Save failed",
+  "create.cancel": "Cancel",
+  "create.close": "Close create panel",
+  "create.extension.add": "Add Extension",
+  "create.extension.enabled": "Enabled",
+  "create.extension.id": "Extension ID",
+  "create.extension.submit": "Create Extension",
+  "create.extension.title": "Create Extension",
+  "create.contextWindowPresets": "{label} presets",
+  "create.contextWindowPreset.128k": "128k",
+  "create.contextWindowPreset.400k": "400k",
+  "create.contextWindowPreset.1m": "1m",
+  "create.help.extensionEnabled": "Enables the extension.",
+  "create.help.extensionId": "Stable id, e.g. metrics.",
+  "create.help.modelContextWindow": "Maximum context tokens.",
+  "create.help.modelDisplayName": "Name shown in the console.",
+  "create.help.modelId": "Stable model id.",
+  "create.help.offerBilling": "Optional pricing for cost tracking.",
+  "create.help.offerCacheReadPrice": "Cache-read price for cost tracking.",
+  "create.help.offerCacheWritePrice": "Cache-write price for cost tracking.",
+  "create.help.offerInputPrice": "Input token price for cost tracking.",
+  "create.help.offerModel": "Model this binding supplies.",
+  "create.help.offerOutputPrice": "Output token price for cost tracking.",
+  "create.help.offerPriority": "Order weight; lower is tried first.",
+  "create.help.offerProvider": "Provider for this binding.",
+  "create.help.offerUpstreamName": "Real upstream model name.",
+  "create.help.providerApiKey": "API key sent to the provider.",
+  "create.help.providerBaseUrl": "Upstream API base URL.",
+  "create.help.providerId": "Stable provider id.",
+  "create.help.providerProtocol": "Upstream API format.",
+  "create.help.routeId": "The alias clients use.",
+  "create.help.routeModel": "Model this route points to.",
+  "create.help.routeProvider": "Provider that serves this route.",
+  "create.invalidNumber": "{field} must be a valid number.",
+  "create.positiveNumber": "{field} must be greater than zero.",
+  "create.model.add": "Add Model",
+  "create.model.contextWindow": "Context window",
+  "create.model.displayName": "Display name",
+  "create.model.id": "Model ID",
+  "create.model.submit": "Create Model",
+  "create.model.title": "Create Model",
+  "create.offer.add": "Add Provider",
+  "create.offer.billing": "Billing",
+  "create.offer.cacheReadPrice": "Cache read price",
+  "create.offer.cacheWritePrice": "Cache write price",
+  "create.offer.inputPrice": "Input price",
+  "create.offer.model": "Model",
+  "create.offer.outputPrice": "Output price",
+  "create.offer.priority": "Priority",
+  "create.offer.provider": "Provider",
+  "create.offer.submit": "Create Provider",
+  "create.offer.title": "Create Provider",
+  "create.offer.upstreamName": "Upstream name",
+  "create.provider.add": "Add Provider",
+  "create.provider.apiKey": "API key",
+  "create.provider.baseUrl": "Base URL",
+  "create.provider.id": "Provider ID",
+  "create.provider.protocol": "Protocol",
+  "create.provider.submit": "Create Provider",
+  "create.provider.title": "Create Provider",
+  "create.route.add": "Add Route",
+  "create.route.id": "Route alias",
+  "create.route.model": "Model",
+  "create.route.provider": "Provider",
+  "create.route.submit": "Create Route",
+  "create.route.title": "Create Route",
+  "empty.resources": "No resources",
+  "error.requestFailed": "Request failed",
+  "error.requestFailedWithStatus": "Request failed with status {status}",
+  "field.configUpdateFailed": "Config update {result} failed.",
+  "error.storeTitle": "Management API unavailable",
+  "error.storeMessage": "Saved settings aren't available right now. Enable persistence to edit here.",
+  "error.unknownRequest": "Unknown request error",
+  "feedback.latency": "Latency: {latency}ms",
+  "field.input": "Input",
+  "field.helpFor": "Help for {label}",
+  "field.editableList.add": "Add",
+  "field.editableList.addAction": "Add {label} item",
+  "field.editableList.addInput": "Add {label}",
+  "field.editableList.remove": "Remove {item} from {label}",
+  "field.extensions.addAction": "Add {label} extension",
+  "field.extensions.addInput": "Add extension to {label}",
+  "field.extensions.enable": "Enable {name} extension",
+  "field.extensions.remove": "Remove {name} extension",
+  "field.invalidNumber": "Invalid number",
+  "field.maxOutputTokens": "Max Output Tokens",
+  "field.model": "Model",
+  "field.providerOverrides.baseInstructions": "Override base instructions",
+  "field.providerOverrides.contextWindow": "Override context window",
+  "field.providerOverrides.defaultReasoningLevel": "Override default reasoning level",
+  "field.providerOverrides.defaultReasoningSummary": "Override default reasoning summary",
+  "field.providerOverrides.description": "Override description",
+  "field.providerOverrides.disabled": "Disabled",
+  "field.providerOverrides.displayName": "Override display name",
+  "field.providerOverrides.enabled": "Enabled",
+  "field.providerOverrides.inherit": "Inherit",
+  "field.providerOverrides.inputModalities": "Override input modalities",
+  "field.providerOverrides.maxOutputTokens": "Override max output tokens",
+  "field.providerOverrides.supportedReasoningLevels": "Override supported reasoning levels",
+  "field.providerOverrides.supportsImageDetailOriginal": "Override supports original image detail",
+  "field.providerOverrides.supportsReasoning": "Override supports reasoning",
+  "field.providerOverrides.supportsReasoningSummaries": "Override supports reasoning summaries",
+  "field.providerOverrides.title": "Provider overrides",
+  "field.secretReplacementHint": "Enter a new value to replace the saved secret.",
+  "field.structuredEditable": "Structured editor",
+  "field.structuredEmpty": "No configured entries.",
+  "field.structuredEmptyValue": "Empty",
+  "field.structuredEditorLabel": "{label}, structured editor",
+  "field.structuredNestedValues": "Nested values",
+  "field.structuredReadonly": "Structured summary",
+  "field.structuredSummary": "Structured summary",
+  "field.structuredSummaryLabel": "{label}, structured summary",
+  "field.summary.items.many": "{count} items",
+  "field.summary.items.one": "1 item",
+  "field.summary.keys.many": "{count} keys",
+  "field.summary.keys.one": "1 key",
+  "field.temperature": "Temperature",
+  "field.webSearch.firecrawlAPIKey": "{label} Firecrawl API key",
+  "field.webSearch.maxUses": "{label} max uses",
+  "field.webSearch.searchMaxRounds": "{label} search max rounds",
+  "field.webSearch.support": "{label} mode",
+  "field.webSearch.tavilyAPIKey": "{label} Tavily API key",
+  "loading.overview": "Loading console overview",
+  "loading.providers": "Loading providers",
+  "loading.routes": "Loading routes",
+  "logs.copy": "Copy",
+  "logs.description": "Recent logs from the server.",
+  "logs.download": "Download",
+  "logs.empty": "No log entries yet.",
+  "logs.emptyFiltered": "No logs match the current filters.",
+  "logs.follow": "Follow",
+  "logs.followMode": "Live follow mode",
+  "logs.levelAll": "All",
+  "logs.levelFilter": "Log level filter",
+  "logs.output": "Log output",
+  "logs.pause": "Pause",
+  "logs.panelLabel": "Backend logs",
+  "logs.panelTitle": "Backend logs",
+  "logs.search": "Search logs",
+  "logs.clearSearch": "Clear log search",
+  "logs.rowLabel": "Log {index}",
+  "logs.streamDisconnected": "Live stream disconnected",
+  "logs.streamBodyEmpty": "Log stream response body is empty",
+  "logs.streamFailedWithStatus": "Log stream failed with status {status}",
+  "logs.visibleCount": "{visible} of {total} logs",
+  "modelsProviders.description": "Manage providers and models. Changes apply in real time.",
+  "modelsProviders.models": "Models ({count})",
+  "modelsProviders.modelProvidersToggle": "Providers",
+  "modelsProviders.modelRegion": "Model {id}",
+  "modelsProviders.offers": "Providers ({count})",
+  "modelsProviders.modelProviders": "Providers ({count})",
+  "modelsProviders.providerRegion": "Provider {id}",
+  "modelsProviders.providers": "Providers ({count})",
+  "modelsProviders.unmatchedSupplies": "Unmatched Providers ({count})",
+  "modelsProviders.upstreamSupply": "Providers ({count})",
+  "overview.description": "Usage, tokens, cache, cost, and recent logs.",
+  "overview.actualModel": "Actual model",
+  "overview.avgCost": "Avg cost",
+  "overview.cacheHit": "Cache hit",
+  "overview.cacheHitValue": "{rate}",
+  "overview.cacheRead": "Cache read",
+  "overview.cacheReadWrite": "Read/write",
+  "overview.cacheRatioValue": "{ratio}",
+  "overview.cacheSplit": "Cache split",
+  "overview.cacheSplitChart": "Cache split chart",
+  "overview.cacheWrite": "Cache write",
+  "overview.chartAriaItem": "{label}: {value}",
+  "overview.chartAriaLabel": "{title}. {summary}",
+  "overview.chartAriaSeparator": ", ",
+  "overview.cost": "Cost",
+  "overview.costByModel": "Cost by model",
+  "overview.costByModelChart": "Cost by model chart",
+  "overview.costPerMillionSuffix": "/M",
+  "overview.duration.hoursShort": "{count}h",
+  "overview.duration.minutesShort": "{count}m",
+  "overview.duration.secondsShort": "{count}s",
+  "overview.graph": "Graph",
+  "overview.graphUnavailableDescription": "Settings are temporarily unavailable. Usage and logs still work.",
+  "overview.graphUnavailableTitle": "Configuration graph unavailable",
+  "overview.inputTokens": "Input tokens",
+  "overview.inputValue": "{count}",
+  "overview.invalid": "Invalid",
+  "overview.mode": "Mode",
+  "overview.model": "Model",
+  "overview.modelUsageRow": "{model} usage",
+  "overview.modelUsageTable": "Model usage table",
+  "overview.models": "Models",
+  "overview.noData": "no data",
+  "overview.outputTokens": "Output tokens",
+  "overview.outputValue": "{count}",
+  "overview.providers": "Providers",
+  "overview.requests": "Requests",
+  "overview.requestsValue": "{count}",
+  "overview.restart": "Restart",
+  "overview.restartCount.many": "{count} restart",
+  "overview.restartCount.one": "1 restart",
+  "overview.revision": "Revision",
+  "overview.routes": "Routes",
+  "overview.runtime": "Runtime",
+  "overview.tokenSplit": "Token split",
+  "overview.tokenSplitChart": "Token split chart",
+  "overview.totalCost": "Total cost",
+  "overview.totalCostValue": "{cost}",
+  "overview.usageDescription": "Model volume, cache, and cost for the selected range.",
+  "overview.usageEmpty": "No usage has been recorded yet.",
+  "overview.usageTitle": "Usage Analytics",
+  "overview.rangeLabel": "Time range",
+  "overview.demoData": "Demo data",
+  "overview.range.session": "This session",
+  "overview.range.24h": "24h",
+  "overview.range.7d": "7d",
+  "overview.range.30d": "30d",
+  "overview.range.all": "All time",
+  "overview.valid": "Valid",
+  "overview.validation": "Validation",
+  "pageEyebrow.aliases": "Aliases",
+  "pageEyebrow.analytics": "Analytics",
+  "pageEyebrow.config": "Configuration",
+  "pageEyebrow.runtime": "Runtime",
+  "pageEyebrow.smokeTest": "Smoke Test",
+  "pageEyebrow.upstream": "Upstream",
+  "placeholder.description": "This section is a work in progress.",
+  "placeholder.eyebrow": "Console workspace",
+  "routes.description": "Map each client alias to a model and provider.",
+  "routes.listTitle": "Routes ({count})",
+  "routes.resourceTitle": "Route",
+  "rpc.description": "Send a test request to check that everything works.",
+  "rpc.request": "Request",
+  "rpc.response": "Response",
+  "rpc.selectModel": "Select model",
+  "resource.fieldCount.many": "{count} fields",
+  "resource.fieldCount.one": "1 field",
+  "resource.cancelDelete": "Cancel",
+  "resource.confirmDelete": "Confirm delete {id}",
+  "resource.confirmDeleteShort": "Delete",
+  "resource.delete": "Delete {title} {id}",
+  "resource.cardLabel": "{title} {id}",
+  "resource.deletePrompt": "Delete {id}? This takes effect after saving.",
+  "resource.deleteShort": "Delete",
+  "resource.openEditor": "Edit {title} {id}",
+  "resource.editShort": "Edit",
+  "resource.editorHeading": "Edit {title}",
+  "resource.editorAriaLabel": "{title} {id} editor",
+  "resource.closeEditor": "Close",
+  "resource.fact.keySet": "Key set",
+  "route.warning.modelMissing": "Select a model",
+  "route.warning.modelUnknown": "Model \"{value}\" is not configured",
+  "route.warning.providerMissing": "Select a provider",
+  "route.warning.providerUnknown": "Provider \"{value}\" is not configured",
+  "resource.group.advancedFeatures": "Advanced Features",
+  "resource.group.basic": "Basic",
+  "resource.group.billing": "Billing",
+  "resource.group.identity": "Identity",
+  "resource.group.multimodal": "Multimodal",
+  "resource.group.reasoning": "Reasoning",
+  "resource.group.settings": "Settings",
+  "resource.group.toggle": "Toggle {label}",
+  "resource.impact.critical": "Critical",
+  "resource.impact.normal": "Runtime safe",
+  "resource.kind.model": "Model",
+  "resource.kind.offer": "Provider",
+  "resource.kind.provider": "Provider",
+  "resource.kind.defaults": "Defaults",
+  "resource.kind.log": "Log",
+  "resource.kind.trace": "Trace",
+  "provider.protocol.anthropic": "Anthropic",
+  "provider.protocol.googleGenai": "Gemini",
+  "provider.protocol.openaiChat": "OpenAI Chat",
+  "provider.protocol.openaiResponses": "OpenAI Responses",
+  "resource.reload.hot": "Hot reload",
+  "resource.reload.restart": "Restart on change",
+  "resource.statusGroupLabel": "{label} status",
+  "resource.status.needsAttention": "Needs attention",
+  "resource.status.restartRequired": "Restart required",
+  "resource.status.saved": "Saved",
+  "searchTools.description": "Web search, extensions, and proxy settings.",
+  "searchTools.extension": "Extension",
+  "searchTools.extensions": "Extensions",
+  "searchTools.proxy": "Proxy",
+  "searchTools.webSearch": "Web Search",
+  "security.description": "Access, sign-in, and active sessions.",
+  "security.server": "Server",
+  "saveStatus.dirty": "Unsaved",
+  "saveStatus.error": "Error",
+  "saveStatus.saved": "Saved",
+  "saveStatus.saving": "Saving",
+  "saveStatus.idle": "Saved",
+  "storage.cache": "Cache",
+  "storage.description": "Cache and where your settings are saved.",
+  "storage.errors": "Storage errors",
+  "storage.persistence": "Persistence",
+  "storage.status": "Storage Status"
+} as const;
diff --git a/webui/src/i18n/locales/zh.ts b/webui/src/i18n/locales/zh.ts
new file mode 100644
index 00000000..3afa889f
--- /dev/null
+++ b/webui/src/i18n/locales/zh.ts
@@ -0,0 +1,346 @@
+import type { Messages } from "../messages";
+
+export const zh = {
+  "action.saveToken": "保存 Token",
+  "action.send": "发送",
+  "app.console": "控制台",
+  "app.consoleSections": "控制台分区",
+  "app.language": "语言",
+  "app.language.en": "English",
+  "app.language.zh": "中文",
+  "app.routeContent": "控制台路由内容",
+  "app.signOut": "登出",
+  "app.switchTheme": "切换到{theme}主题",
+  "theme.dark": "暗色",
+  "theme.light": "亮色",
+  "nav.overview": "概览",
+  "nav.modelsProviders": "模型与提供商",
+  "nav.routes": "路由",
+  "nav.defaults": "默认值",
+  "nav.searchTools": "搜索与工具",
+  "nav.storage": "存储",
+  "nav.security": "安全",
+  "nav.logs": "日志",
+  "nav.rpcTest": "RPC 测试",
+  "auth.eyebrow": "需要认证",
+  "auth.title": "输入 Moon Bridge Token",
+  "auth.token": "Token",
+  "auth.remember": "在此设备记住",
+  "auth.signedOut": "已登出，请重新输入令牌。",
+  "auth.verifying": "验证中…",
+  "auth.revealToken": "显示令牌",
+  "auth.hideToken": "隐藏令牌",
+  "common.error": "错误",
+  "common.loading": "加载中",
+  "common.unknown": "未知",
+  "config.description": "调整 Moon Bridge 的运行方式，改动即时生效。",
+  "configDoc.default": "默认值",
+  "configDoc.default.empty": "空",
+  "configDoc.optional": "可选",
+  "configDoc.required": "必填",
+  "configDoc.sensitive": "敏感项",
+  "configDoc.savedRealtime": "实时保存",
+  "configDoc.restartMayBeRequired": "可能需要重启",
+  "configDoc.type": "类型",
+  "configDoc.type.array": "数组",
+  "configDoc.type.boolean": "布尔值",
+  "configDoc.type.hostPort": "主机:端口",
+  "configDoc.type.number": "数字",
+  "configDoc.type.object": "对象",
+  "configDoc.type.string": "字符串",
+  "configDoc.type.url": "URL",
+  "editor.liveSaving": "保存中…",
+  "editor.liveUnsaved": "未保存的更改",
+  "editor.liveError": "保存失败",
+  "create.cancel": "取消",
+  "create.close": "关闭创建面板",
+  "create.extension.add": "添加扩展",
+  "create.extension.enabled": "启用",
+  "create.extension.id": "扩展 ID",
+  "create.extension.submit": "创建扩展",
+  "create.extension.title": "创建扩展",
+  "create.contextWindowPresets": "{label} 预设",
+  "create.contextWindowPreset.128k": "128K",
+  "create.contextWindowPreset.400k": "400K",
+  "create.contextWindowPreset.1m": "100 万",
+  "create.help.extensionEnabled": "启用该扩展。",
+  "create.help.extensionId": "稳定的标识，例如 metrics。",
+  "create.help.modelContextWindow": "最大上下文 Token 数。",
+  "create.help.modelDisplayName": "控制台中显示的名称。",
+  "create.help.modelId": "稳定的模型标识。",
+  "create.help.offerBilling": "可选的计费信息，用于费用统计。",
+  "create.help.offerCacheReadPrice": "缓存读取单价，用于费用统计。",
+  "create.help.offerCacheWritePrice": "缓存写入单价，用于费用统计。",
+  "create.help.offerInputPrice": "输入 Token 单价，用于费用统计。",
+  "create.help.offerModel": "此绑定提供的模型。",
+  "create.help.offerOutputPrice": "输出 Token 单价，用于费用统计。",
+  "create.help.offerPriority": "排序权重，数值越小越优先。",
+  "create.help.offerProvider": "此绑定使用的提供商。",
+  "create.help.offerUpstreamName": "实际的上游模型名。",
+  "create.help.providerApiKey": "发送给提供商的 API 密钥。",
+  "create.help.providerBaseUrl": "上游 API 基础 URL。",
+  "create.help.providerId": "稳定的提供商标识。",
+  "create.help.providerProtocol": "上游 API 格式。",
+  "create.help.routeId": "客户端使用的别名。",
+  "create.help.routeModel": "此路由指向的模型。",
+  "create.help.routeProvider": "为此路由提供服务的提供商。",
+  "create.invalidNumber": "{field} 必须是有效数字。",
+  "create.positiveNumber": "{field} 必须大于 0。",
+  "create.model.add": "添加模型",
+  "create.model.contextWindow": "上下文窗口",
+  "create.model.displayName": "显示名称",
+  "create.model.id": "模型 ID",
+  "create.model.submit": "创建模型",
+  "create.model.title": "创建模型",
+  "create.offer.add": "添加提供商",
+  "create.offer.billing": "计费",
+  "create.offer.cacheReadPrice": "缓存读取价格",
+  "create.offer.cacheWritePrice": "缓存写入价格",
+  "create.offer.inputPrice": "输入价格",
+  "create.offer.model": "模型",
+  "create.offer.outputPrice": "输出价格",
+  "create.offer.priority": "优先级",
+  "create.offer.provider": "提供商",
+  "create.offer.submit": "创建提供商",
+  "create.offer.title": "创建提供商",
+  "create.offer.upstreamName": "上游名称",
+  "create.provider.add": "添加提供商",
+  "create.provider.apiKey": "API key",
+  "create.provider.baseUrl": "Base URL",
+  "create.provider.id": "提供商 ID",
+  "create.provider.protocol": "协议",
+  "create.provider.submit": "创建提供商",
+  "create.provider.title": "创建提供商",
+  "create.route.add": "添加路由",
+  "create.route.id": "路由别名",
+  "create.route.model": "模型",
+  "create.route.provider": "提供商",
+  "create.route.submit": "创建路由",
+  "create.route.title": "创建路由",
+  "empty.resources": "没有资源",
+  "error.requestFailed": "请求失败",
+  "error.requestFailedWithStatus": "请求失败，状态码 {status}",
+  "field.configUpdateFailed": "配置更新 {result} 失败。",
+  "error.storeTitle": "管理 API 不可用",
+  "error.storeMessage": "暂无法读取已保存的设置。启用持久化后即可在此编辑。",
+  "error.unknownRequest": "未知请求错误",
+  "feedback.latency": "延迟：{latency}ms",
+  "field.input": "输入",
+  "field.helpFor": "{label} 帮助",
+  "field.editableList.add": "添加",
+  "field.editableList.addAction": "添加{label}条目",
+  "field.editableList.addInput": "添加{label}",
+  "field.editableList.remove": "从{label}移除 {item}",
+  "field.extensions.addAction": "向{label}添加扩展",
+  "field.extensions.addInput": "向{label}添加扩展",
+  "field.extensions.enable": "启用 {name} 扩展",
+  "field.extensions.remove": "移除 {name} 扩展",
+  "field.invalidNumber": "无效数字",
+  "field.maxOutputTokens": "最大输出 Token",
+  "field.model": "模型",
+  "field.providerOverrides.baseInstructions": "覆盖基础指令",
+  "field.providerOverrides.contextWindow": "覆盖上下文窗口",
+  "field.providerOverrides.defaultReasoningLevel": "覆盖默认思考深度",
+  "field.providerOverrides.defaultReasoningSummary": "覆盖默认思考摘要",
+  "field.providerOverrides.description": "覆盖描述",
+  "field.providerOverrides.disabled": "禁用",
+  "field.providerOverrides.displayName": "覆盖显示名称",
+  "field.providerOverrides.enabled": "启用",
+  "field.providerOverrides.inherit": "继承",
+  "field.providerOverrides.inputModalities": "覆盖输入模态",
+  "field.providerOverrides.maxOutputTokens": "覆盖最大输出 Token",
+  "field.providerOverrides.supportedReasoningLevels": "覆盖支持的思考深度",
+  "field.providerOverrides.supportsImageDetailOriginal": "覆盖原始图像细节支持",
+  "field.providerOverrides.supportsReasoning": "覆盖思考支持",
+  "field.providerOverrides.supportsReasoningSummaries": "覆盖思考摘要支持",
+  "field.providerOverrides.title": "提供商覆盖配置",
+  "field.secretReplacementHint": "输入新值以替换已保存的密钥。",
+  "field.structuredEditable": "结构化编辑器",
+  "field.structuredEmpty": "暂无配置条目。",
+  "field.structuredEmptyValue": "空",
+  "field.structuredEditorLabel": "{label}，结构化编辑器",
+  "field.structuredNestedValues": "嵌套值",
+  "field.structuredReadonly": "只读结构化摘要",
+  "field.structuredSummary": "结构化摘要",
+  "field.structuredSummaryLabel": "{label}，只读结构化摘要",
+  "field.summary.items.many": "{count} 个条目",
+  "field.summary.items.one": "1 个条目",
+  "field.summary.keys.many": "{count} 个键",
+  "field.summary.keys.one": "1 个键",
+  "field.temperature": "Temperature",
+  "field.webSearch.firecrawlAPIKey": "{label} Firecrawl API Key",
+  "field.webSearch.maxUses": "{label}最大使用次数",
+  "field.webSearch.searchMaxRounds": "{label}最大搜索轮数",
+  "field.webSearch.support": "{label}模式",
+  "field.webSearch.tavilyAPIKey": "{label} Tavily API Key",
+  "loading.overview": "正在加载控制台概览",
+  "loading.providers": "正在加载提供商",
+  "loading.routes": "正在加载路由",
+  "logs.copy": "复制",
+  "logs.description": "服务器的近期日志。",
+  "logs.download": "下载",
+  "logs.empty": "暂无日志条目。",
+  "logs.emptyFiltered": "没有符合当前过滤条件的日志。",
+  "logs.follow": "跟随",
+  "logs.followMode": "实时跟随模式",
+  "logs.levelAll": "全部",
+  "logs.levelFilter": "日志级别过滤",
+  "logs.output": "日志输出",
+  "logs.pause": "暂停",
+  "logs.panelLabel": "后台日志",
+  "logs.panelTitle": "后台日志",
+  "logs.search": "搜索日志",
+  "logs.clearSearch": "清除日志搜索",
+  "logs.rowLabel": "日志 {index}",
+  "logs.streamDisconnected": "实时日志流已断开",
+  "logs.streamBodyEmpty": "日志流响应体为空",
+  "logs.streamFailedWithStatus": "日志流请求失败，状态码 {status}",
+  "logs.visibleCount": "{visible} / {total} 条日志",
+  "modelsProviders.description": "管理提供商和模型，改动实时生效。",
+  "modelsProviders.models": "模型 ({count})",
+  "modelsProviders.modelProvidersToggle": "提供商",
+  "modelsProviders.modelRegion": "模型 {id}",
+  "modelsProviders.offers": "提供商 ({count})",
+  "modelsProviders.modelProviders": "提供商 ({count})",
+  "modelsProviders.providerRegion": "提供商 {id}",
+  "modelsProviders.providers": "提供商 ({count})",
+  "modelsProviders.unmatchedSupplies": "未匹配提供商 ({count})",
+  "modelsProviders.upstreamSupply": "提供商 ({count})",
+  "overview.description": "用量、Token、缓存、费用和近期日志。",
+  "overview.actualModel": "实际模型",
+  "overview.avgCost": "平均费用",
+  "overview.cacheHit": "缓存命中",
+  "overview.cacheHitValue": "{rate}",
+  "overview.cacheRead": "缓存读取",
+  "overview.cacheReadWrite": "读写比",
+  "overview.cacheRatioValue": "{ratio}",
+  "overview.cacheSplit": "缓存拆分",
+  "overview.cacheSplitChart": "缓存拆分图表",
+  "overview.cacheWrite": "缓存写入",
+  "overview.chartAriaItem": "{label}：{value}",
+  "overview.chartAriaLabel": "{title}。{summary}",
+  "overview.chartAriaSeparator": "；",
+  "overview.cost": "费用",
+  "overview.costByModel": "模型费用",
+  "overview.costByModelChart": "模型费用图表",
+  "overview.costPerMillionSuffix": "/百万",
+  "overview.duration.hoursShort": "{count} 小时",
+  "overview.duration.minutesShort": "{count} 分",
+  "overview.duration.secondsShort": "{count} 秒",
+  "overview.graph": "配置图",
+  "overview.graphUnavailableDescription": "设置暂不可用，但用量和日志仍可查看。",
+  "overview.graphUnavailableTitle": "配置图暂不可用",
+  "overview.inputTokens": "输入 Token",
+  "overview.inputValue": "{count}",
+  "overview.invalid": "无效",
+  "overview.mode": "模式",
+  "overview.model": "模型",
+  "overview.modelUsageRow": "{model} 用量",
+  "overview.modelUsageTable": "模型用量表",
+  "overview.models": "模型",
+  "overview.noData": "暂无数据",
+  "overview.outputTokens": "输出 Token",
+  "overview.outputValue": "{count}",
+  "overview.providers": "提供商",
+  "overview.requests": "请求",
+  "overview.requestsValue": "{count}",
+  "overview.restart": "重启",
+  "overview.restartCount.many": "{count} 个需要重启",
+  "overview.restartCount.one": "1 个需要重启",
+  "overview.revision": "修订版本",
+  "overview.routes": "路由",
+  "overview.runtime": "运行时",
+  "overview.tokenSplit": "Token 拆分",
+  "overview.tokenSplitChart": "Token 拆分图表",
+  "overview.totalCost": "总费用",
+  "overview.totalCostValue": "{cost}",
+  "overview.usageDescription": "所选时间范围内的模型用量、缓存和费用。",
+  "overview.usageEmpty": "还没有记录到用量。",
+  "overview.usageTitle": "用量分析",
+  "overview.rangeLabel": "时间范围",
+  "overview.demoData": "演示数据",
+  "overview.range.session": "本次会话",
+  "overview.range.24h": "24 小时",
+  "overview.range.7d": "7 天",
+  "overview.range.30d": "30 天",
+  "overview.range.all": "全部",
+  "overview.valid": "有效",
+  "overview.validation": "校验",
+  "pageEyebrow.aliases": "别名",
+  "pageEyebrow.analytics": "用量分析",
+  "pageEyebrow.config": "配置",
+  "pageEyebrow.runtime": "运行时",
+  "pageEyebrow.smokeTest": "冒烟测试",
+  "pageEyebrow.upstream": "上游",
+  "placeholder.description": "此页面尚在建设中。",
+  "placeholder.eyebrow": "控制台工作区",
+  "routes.description": "把每个客户端别名映射到一个模型和提供商。",
+  "routes.listTitle": "路由 ({count})",
+  "routes.resourceTitle": "路由",
+  "rpc.description": "发送一个测试请求，确认一切正常。",
+  "rpc.request": "请求",
+  "rpc.response": "响应",
+  "rpc.selectModel": "选择模型",
+  "resource.fieldCount.many": "{count} 个字段",
+  "resource.fieldCount.one": "1 个字段",
+  "resource.cancelDelete": "取消",
+  "resource.confirmDelete": "确认删除 {id}",
+  "resource.confirmDeleteShort": "删除",
+  "resource.delete": "删除{title} {id}",
+  "resource.cardLabel": "{title} {id}",
+  "resource.deletePrompt": "删除 {id}？保存后生效。",
+  "resource.deleteShort": "删除",
+  "resource.openEditor": "编辑{title} {id}",
+  "resource.editShort": "编辑",
+  "resource.editorHeading": "编辑{title}",
+  "resource.editorAriaLabel": "{title} {id} 编辑器",
+  "resource.closeEditor": "关闭",
+  "resource.fact.keySet": "已设置密钥",
+  "route.warning.modelMissing": "请选择模型",
+  "route.warning.modelUnknown": "模型「{value}」尚未配置",
+  "route.warning.providerMissing": "请选择提供商",
+  "route.warning.providerUnknown": "提供商「{value}」尚未配置",
+  "resource.group.advancedFeatures": "高级功能",
+  "resource.group.basic": "基础",
+  "resource.group.billing": "计费",
+  "resource.group.identity": "标识",
+  "resource.group.multimodal": "多模态",
+  "resource.group.reasoning": "思考",
+  "resource.group.settings": "设置",
+  "resource.group.toggle": "切换 {label}",
+  "resource.impact.critical": "关键运行时",
+  "resource.impact.normal": "运行时安全",
+  "resource.kind.model": "模型",
+  "resource.kind.offer": "提供商",
+  "resource.kind.provider": "提供商",
+  "resource.kind.defaults": "默认值",
+  "resource.kind.log": "日志",
+  "resource.kind.trace": "追踪",
+  "provider.protocol.anthropic": "Anthropic",
+  "provider.protocol.googleGenai": "Gemini",
+  "provider.protocol.openaiChat": "OpenAI Chat",
+  "provider.protocol.openaiResponses": "OpenAI Responses",
+  "resource.reload.hot": "热重载",
+  "resource.reload.restart": "变更后重启",
+  "resource.statusGroupLabel": "{label} 状态",
+  "resource.status.needsAttention": "需要处理",
+  "resource.status.restartRequired": "需要重启",
+  "resource.status.saved": "已保存",
+  "searchTools.description": "联网搜索、扩展和代理设置。",
+  "searchTools.extension": "扩展",
+  "searchTools.extensions": "扩展",
+  "searchTools.proxy": "代理",
+  "searchTools.webSearch": "联网搜索",
+  "security.description": "访问、登录和会话管理。",
+  "security.server": "服务访问",
+  "saveStatus.dirty": "未保存",
+  "saveStatus.error": "错误",
+  "saveStatus.saved": "已保存",
+  "saveStatus.saving": "保存中",
+  "saveStatus.idle": "已保存",
+  "storage.cache": "缓存",
+  "storage.description": "缓存以及设置保存的位置。",
+  "storage.errors": "存储错误",
+  "storage.persistence": "持久化",
+  "storage.status": "存储状态"
+} satisfies Messages;
diff --git a/webui/src/i18n/messages.ts b/webui/src/i18n/messages.ts
new file mode 100644
index 00000000..a10d06ed
--- /dev/null
+++ b/webui/src/i18n/messages.ts
@@ -0,0 +1,18 @@
+import { en } from "./locales/en";
+import { zh } from "./locales/zh";
+
+export type Locale = "en-US" | "zh-CN";
+export type MessageKey = keyof typeof en;
+export type Messages = Record<MessageKey, string>;
+
+export const messages: Record<Locale, Messages> = {
+  "en-US": en,
+  "zh-CN": zh
+};
+
+export function normalizeLocale(value: string | undefined): Locale {
+  if (value?.toLowerCase().startsWith("en")) {
+    return "en-US";
+  }
+  return "zh-CN";
+}
diff --git a/webui/src/main.tsx b/webui/src/main.tsx
new file mode 100644
index 00000000..c037181b
--- /dev/null
+++ b/webui/src/main.tsx
@@ -0,0 +1,32 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider } from "react-router-dom";
+import { MotionConfig } from "motion/react";
+import { router } from "./app/routes";
+import { queryClient } from "./app/queryClient";
+import { ConsoleAuthProvider } from "./app/auth/ConsoleAuthContext";
+import { I18nProvider } from "./i18n/I18nProvider";
+import { ThemeProvider } from "./theme/ThemeProvider";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root was not found");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider>
+        <ThemeProvider>
+          <MotionConfig reducedMotion="user">
+            <ConsoleAuthProvider>
+              <RouterProvider router={router} />
+            </ConsoleAuthProvider>
+          </MotionConfig>
+        </ThemeProvider>
+      </I18nProvider>
+    </QueryClientProvider>
+  </StrictMode>
+);
diff --git a/webui/src/rpc/configGenerator.test.ts b/webui/src/rpc/configGenerator.test.ts
new file mode 100644
index 00000000..204c21fa
--- /dev/null
+++ b/webui/src/rpc/configGenerator.test.ts
@@ -0,0 +1,100 @@
+import { parse } from "yaml";
+import { describe, expect, test } from "vitest";
+import { generateConfigYAML, type GeneratedConfigDraft } from "./configGenerator";
+
+describe("generateConfigYAML", () => {
+  test("generates transform config with provider, model, offer, route, and sqlite persistence", () => {
+    const draft: GeneratedConfigDraft = {
+      mode: "Transform",
+      server: { addr: "127.0.0.1:38440", auth_token: "secret-token" },
+      persistence: { active_provider: "db_sqlite" },
+      defaults: { model: "moonbridge", max_tokens: 4096 },
+      providers: [
+        {
+          key: "anthropic",
+          base_url: "https://api.anthropic.com",
+          api_key: "sk-ant",
+          protocol: "anthropic",
+          version: "2023-06-01",
+          offers: [
+            {
+              model: "claude-sonnet",
+              upstream_name: "claude-3-5-sonnet",
+              input_price: 3,
+              output_price: 15,
+              cache_write_price: 3.75,
+              cache_read_price: 0.3
+            }
+          ]
+        }
+      ],
+      models: [
+        {
+          slug: "claude-sonnet",
+          display_name: "Claude Sonnet",
+          context_window: 200000,
+          max_output_tokens: 64000
+        }
+      ],
+      routes: [
+        {
+          alias: "moonbridge",
+          model: "claude-sonnet",
+          provider: "anthropic",
+          display_name: "Moon Bridge"
+        }
+      ]
+    };
+
+    const yaml = generateConfigYAML(draft);
+    const parsed = parse(yaml);
+
+    expect(parsed.mode).toBe("Transform");
+    expect(parsed.server.auth_token).toBe("secret-token");
+    expect(parsed.persistence.active_provider).toBe("db_sqlite");
+    expect(parsed.providers.anthropic.offers[0].pricing.cache_read_price).toBe(0.3);
+    expect(parsed.models["claude-sonnet"].context_window).toBe(200000);
+    expect(parsed.routes.moonbridge.provider).toBe("anthropic");
+  });
+
+  test("generates capture response proxy config", () => {
+    const yaml = generateConfigYAML({
+      mode: "CaptureResponse",
+      server: { addr: "127.0.0.1:38440" },
+      proxy: {
+        response: {
+          base_url: "https://api.openai.com",
+          api_key: "openai-key",
+          model: "gpt-5.4"
+        }
+      }
+    });
+    const parsed = parse(yaml);
+
+    expect(parsed.mode).toBe("CaptureResponse");
+    expect(parsed.proxy.response.base_url).toBe("https://api.openai.com");
+    expect(parsed.proxy.response.api_key).toBe("openai-key");
+    expect(parsed.proxy.response.model).toBe("gpt-5.4");
+  });
+
+  test("generates capture anthropic proxy config", () => {
+    const yaml = generateConfigYAML({
+      mode: "CaptureAnthropic",
+      server: { addr: "127.0.0.1:38440" },
+      proxy: {
+        anthropic: {
+          base_url: "https://provider.example.com",
+          api_key: "anthropic-key",
+          version: "2023-06-01",
+          model: "claude-sonnet"
+        }
+      }
+    });
+    const parsed = parse(yaml);
+
+    expect(parsed.mode).toBe("CaptureAnthropic");
+    expect(parsed.proxy.anthropic.base_url).toBe("https://provider.example.com");
+    expect(parsed.proxy.anthropic.version).toBe("2023-06-01");
+    expect(parsed.proxy.anthropic.model).toBe("claude-sonnet");
+  });
+});
diff --git a/webui/src/rpc/configGenerator.ts b/webui/src/rpc/configGenerator.ts
new file mode 100644
index 00000000..aa100fca
--- /dev/null
+++ b/webui/src/rpc/configGenerator.ts
@@ -0,0 +1,215 @@
+import { stringify } from "yaml";
+
+export type GeneratedConfigDraft = {
+  mode: "Transform" | "CaptureResponse" | "CaptureAnthropic";
+  server?: {
+    addr?: string;
+    auth_token?: string;
+  };
+  defaults?: {
+    model?: string;
+    max_tokens?: number;
+    system_prompt?: string;
+  };
+  persistence?: {
+    active_provider?: string;
+  };
+  cache?: {
+    mode?: string;
+    ttl?: string;
+    prompt_caching?: boolean;
+    automatic_prompt_cache?: boolean;
+    explicit_cache_breakpoints?: boolean;
+    allow_retention_downgrade?: boolean;
+    max_breakpoints?: number;
+    min_cache_tokens?: number;
+    expected_reuse?: number;
+    minimum_value_score?: number;
+    min_breakpoint_tokens?: number;
+  };
+  web_search?: {
+    support?: string;
+    max_uses?: number;
+    tavily_api_key?: string;
+    firecrawl_api_key?: string;
+    search_max_rounds?: number;
+  };
+  models?: GeneratedModel[];
+  providers?: GeneratedProvider[];
+  routes?: GeneratedRoute[];
+  extensions?: GeneratedExtension[];
+  proxy?: {
+    response?: GeneratedProxyTarget;
+    anthropic?: GeneratedProxyTarget;
+  };
+};
+
+export type GeneratedModel = {
+  slug: string;
+  context_window?: number;
+  max_output_tokens?: number;
+  display_name?: string;
+  description?: string;
+};
+
+export type GeneratedProvider = {
+  key: string;
+  base_url: string;
+  api_key: string;
+  version?: string;
+  user_agent?: string;
+  protocol?: string;
+  offers?: GeneratedOffer[];
+};
+
+export type GeneratedOffer = {
+  model: string;
+  upstream_name?: string;
+  priority?: number;
+  input_price?: number;
+  output_price?: number;
+  cache_write_price?: number;
+  cache_read_price?: number;
+};
+
+export type GeneratedRoute = {
+  alias: string;
+  model?: string;
+  provider?: string;
+  display_name?: string;
+  description?: string;
+  context_window?: number;
+};
+
+export type GeneratedExtension = {
+  name: string;
+  enabled?: boolean;
+  config?: Record<string, unknown>;
+};
+
+export type GeneratedProxyTarget = {
+  base_url: string;
+  api_key: string;
+  model?: string;
+  version?: string;
+};
+
+export function generateConfigYAML(draft: GeneratedConfigDraft): string {
+  const doc = pruneEmpty({
+    mode: draft.mode,
+    server: pruneEmpty({
+      addr: draft.server?.addr || "127.0.0.1:38440",
+      auth_token: draft.server?.auth_token
+    }),
+    persistence: pruneEmpty({
+      active_provider: draft.persistence?.active_provider ?? "db_sqlite"
+    }),
+    defaults: pruneEmpty(draft.defaults ?? { model: firstRouteModel(draft), max_tokens: 4096 }),
+    cache: pruneEmpty(
+      draft.cache ?? {
+        mode: "explicit",
+        ttl: "5m",
+        prompt_caching: true,
+        automatic_prompt_cache: false,
+        explicit_cache_breakpoints: true,
+        allow_retention_downgrade: false,
+        max_breakpoints: 4,
+        min_cache_tokens: 1024,
+        expected_reuse: 2,
+        minimum_value_score: 2048,
+        min_breakpoint_tokens: 1024
+      }
+    ),
+    web_search: pruneEmpty(draft.web_search),
+    models: keyed(draft.models, "slug", (model) =>
+      pruneEmpty({
+        context_window: model.context_window,
+        max_output_tokens: model.max_output_tokens,
+        display_name: model.display_name,
+        description: model.description
+      })
+    ),
+    providers: keyed(draft.providers, "key", (provider) =>
+      pruneEmpty({
+        base_url: provider.base_url,
+        api_key: provider.api_key,
+        version: provider.version,
+        user_agent: provider.user_agent,
+        protocol: provider.protocol,
+        offers: provider.offers?.map((offer) =>
+          pruneEmpty({
+            model: offer.model,
+            upstream_name: offer.upstream_name,
+            priority: offer.priority,
+            pricing: pruneEmpty({
+              input_price: offer.input_price,
+              output_price: offer.output_price,
+              cache_write_price: offer.cache_write_price,
+              cache_read_price: offer.cache_read_price
+            })
+          })
+        )
+      })
+    ),
+    routes: keyed(draft.routes, "alias", (route) =>
+      pruneEmpty({
+        model: route.model,
+        provider: route.provider,
+        display_name: route.display_name,
+        description: route.description,
+        context_window: route.context_window
+      })
+    ),
+    extensions: keyed(draft.extensions, "name", (extension) =>
+      pruneEmpty({
+        enabled: extension.enabled,
+        config: pruneEmpty(extension.config)
+      })
+    ),
+    proxy: pruneEmpty({
+      response: pruneEmpty(draft.proxy?.response),
+      anthropic: pruneEmpty(draft.proxy?.anthropic)
+    })
+  });
+
+  return stringify(doc, { indent: 2 });
+}
+
+function firstRouteModel(draft: GeneratedConfigDraft) {
+  return draft.routes?.[0]?.alias ?? draft.models?.[0]?.slug ?? "";
+}
+
+function keyed<T extends Record<string, unknown>>(
+  rows: T[] | undefined,
+  key: keyof T,
+  build: (row: T) => unknown
+) {
+  if (!rows?.length) {
+    return undefined;
+  }
+  return rows.reduce<Record<string, unknown>>((out, row) => {
+    const name = String(row[key] ?? "");
+    if (name) {
+      out[name] = build(row);
+    }
+    return out;
+  }, {});
+}
+
+function pruneEmpty<T>(value: T): T | undefined {
+  if (value === undefined || value === null || value === "") {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    const next = value.map(pruneEmpty).filter((entry) => entry !== undefined);
+    return (next.length ? next : undefined) as T | undefined;
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value).flatMap(([key, entry]) => {
+      const next = pruneEmpty(entry);
+      return next === undefined ? [] : [[key, next]];
+    });
+    return (entries.length ? Object.fromEntries(entries) : undefined) as T | undefined;
+  }
+  return value;
+}
diff --git a/webui/src/rpc/configGraph.test.ts b/webui/src/rpc/configGraph.test.ts
new file mode 100644
index 00000000..88610668
--- /dev/null
+++ b/webui/src/rpc/configGraph.test.ts
@@ -0,0 +1,145 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  createConfigResource,
+  deleteConfigResource,
+  getConfigGraph,
+  patchConfigGraph,
+  validateConfigGraph
+} from "./configGraph";
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { "Content-Type": "application/json" },
+    ...init
+  });
+}
+
+describe("config graph RPC client", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("gets the current config graph", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({
+        revision: "rev-1",
+        resources: [],
+        validation: { valid: true },
+        runtime: { status: "ready" },
+        capabilities: { autosave: true, logs: true }
+      })
+    );
+
+    const graph = await getConfigGraph();
+
+    expect(graph.revision).toBe("rev-1");
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/graph");
+    expect(fetchMock.mock.calls[0][1]?.method).toBeUndefined();
+  });
+
+  test("patches graph fields with a base revision", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ result: "committed", revision: "rev-2" })
+    );
+
+    await patchConfigGraph({
+      baseRevision: "rev-1",
+      changes: [
+        {
+          kind: "provider",
+          id: "anthropic",
+          field: "base_url",
+          value: "https://api.anthropic.com"
+        }
+      ]
+    });
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/graph");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "PATCH",
+      body: JSON.stringify({
+        baseRevision: "rev-1",
+        changes: [
+          {
+            kind: "provider",
+            id: "anthropic",
+            field: "base_url",
+            value: "https://api.anthropic.com"
+          }
+        ]
+      })
+    });
+  });
+
+  test("validates graph patches without committing", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ result: "committed", revision: "rev-1" })
+    );
+
+    await validateConfigGraph({
+      baseRevision: "rev-1",
+      changes: [{ kind: "defaults", id: "main", field: "max_tokens", value: 2048 }]
+    });
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/graph/validate");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "POST"
+    });
+  });
+
+  test("creates resources with an explicit base revision", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ result: "committed", revision: "rev-2" })
+    );
+
+    await createConfigResource("model", {
+      id: "claude-sonnet",
+      baseRevision: "rev-1",
+      value: {
+        display_name: "Claude Sonnet",
+        context_window: 200000
+      }
+    });
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/resources/model");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "POST",
+      body: JSON.stringify({
+        id: "claude-sonnet",
+        baseRevision: "rev-1",
+        value: {
+          display_name: "Claude Sonnet",
+          context_window: 200000
+        }
+      })
+    });
+  });
+
+  test("deletes resources with base revision in the request body", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ result: "committed", revision: "rev-2" })
+    );
+
+    await deleteConfigResource("route", "primary", "rev-1");
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/resources/route/primary");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "DELETE",
+      body: JSON.stringify({ baseRevision: "rev-1" })
+    });
+  });
+
+  test("encodes resource identifiers in URLs", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ result: "committed", revision: "rev-2" })
+    );
+
+    await deleteConfigResource("provider_offer", "openai/gpt-4.1", "rev-1");
+
+    expect(fetchMock.mock.calls[0][0]).toBe(
+      "/api/v1/config/resources/provider_offer/openai%2Fgpt-4.1"
+    );
+  });
+});
diff --git a/webui/src/rpc/configGraph.ts b/webui/src/rpc/configGraph.ts
new file mode 100644
index 00000000..39c65f10
--- /dev/null
+++ b/webui/src/rpc/configGraph.ts
@@ -0,0 +1,41 @@
+import { apiFetch } from "./http";
+import type {
+  ConfigGraph,
+  CreateConfigResourceRequest,
+  PatchRequest,
+  PatchResponse,
+  ResourceKind
+} from "./types";
+
+export const getConfigGraph = () => apiFetch<ConfigGraph>("/config/graph");
+
+export const patchConfigGraph = (body: PatchRequest) =>
+  apiFetch<PatchResponse>("/config/graph", { method: "PATCH", body });
+
+export const validateConfigGraph = (body: PatchRequest) =>
+  apiFetch<PatchResponse>("/config/graph/validate", { method: "POST", body });
+
+export const createConfigResource = (
+  kind: ResourceKind,
+  body: CreateConfigResourceRequest
+) =>
+  apiFetch<PatchResponse>(`/config/resources/${encodeURIComponent(kind)}`, {
+    method: "POST",
+    body: {
+      ...body,
+      value: body.value ?? {}
+    }
+  });
+
+export const deleteConfigResource = (
+  kind: ResourceKind,
+  id: string,
+  baseRevision: string
+) =>
+  apiFetch<PatchResponse>(
+    `/config/resources/${encodeURIComponent(kind)}/${encodeURIComponent(id)}`,
+    {
+      method: "DELETE",
+      body: { baseRevision }
+    }
+  );
diff --git a/webui/src/rpc/http.test.ts b/webui/src/rpc/http.test.ts
new file mode 100644
index 00000000..e04cd6a3
--- /dev/null
+++ b/webui/src/rpc/http.test.ts
@@ -0,0 +1,183 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  ApiError,
+  REMEMBER_TOKEN_STORAGE_KEY,
+  TOKEN_STORAGE_KEY,
+  apiFetch,
+  clearStoredToken,
+  readStoredToken,
+  saveToken
+} from "./http";
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { "Content-Type": "application/json" },
+    ...init
+  });
+}
+
+describe("apiFetch", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("sends JSON requests and bearer token from session storage", async () => {
+    sessionStorage.setItem(TOKEN_STORAGE_KEY, "session-token");
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(jsonResponse({ ok: true }));
+
+    const result = await apiFetch<{ ok: boolean }>("/providers", {
+      method: "POST",
+      body: { name: "anthropic" }
+    });
+
+    expect(result).toEqual({ ok: true });
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe("/api/v1/providers");
+    expect(init?.headers).toMatchObject({
+      Authorization: "Bearer session-token",
+      "Content-Type": "application/json"
+    });
+    expect(init?.body).toBe(JSON.stringify({ name: "anthropic" }));
+  });
+
+  test("falls back to remembered local storage token", async () => {
+    localStorage.setItem(REMEMBER_TOKEN_STORAGE_KEY, "local-token");
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(jsonResponse({ ok: true }));
+
+    await apiFetch("/status");
+
+    expect(fetchMock.mock.calls[0][1]?.headers).toMatchObject({
+      Authorization: "Bearer local-token"
+    });
+  });
+
+  test("normalizes management error responses", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse(
+        { error: { code: "invalid_auth", message: "missing token" } },
+        { status: 401 }
+      )
+    );
+
+    await expect(apiFetch("/status")).rejects.toMatchObject({
+      status: 401,
+      code: "invalid_auth",
+      message: "missing token",
+      raw: { error: { code: "invalid_auth", message: "missing token" } }
+    });
+  });
+
+  test("normalizes OpenAI-style error responses", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse(
+        {
+          error: {
+            type: "invalid_request_error",
+            code: "bad_request",
+            message: "bad request"
+          }
+        },
+        { status: 400 }
+      )
+    );
+
+    const promise = apiFetch("/responses");
+    await expect(promise).rejects.toBeInstanceOf(ApiError);
+    await expect(promise).rejects.toMatchObject({
+      status: 400,
+      code: "bad_request",
+      message: "bad request"
+    });
+  });
+
+  test("continues when storage is unavailable", async () => {
+    vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("blocked");
+    });
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(jsonResponse({ ok: true }));
+
+    await expect(apiFetch("/status")).resolves.toEqual({ ok: true });
+    expect(fetchMock.mock.calls[0][1]?.headers).not.toHaveProperty("Authorization");
+  });
+
+  test("keeps a session token in memory when storage writes are blocked", () => {
+    vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("blocked");
+    });
+    vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("blocked");
+    });
+
+    saveToken("volatile-token", false);
+
+    expect(readStoredToken()).toBe("volatile-token");
+  });
+
+  test("normalizes empty error responses", async () => {
+    localStorage.setItem("moonbridge.console.locale", "zh-CN");
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response("", {
+        status: 401,
+        headers: { "Content-Type": "application/json" }
+      })
+    );
+
+    await expect(apiFetch("/status")).rejects.toMatchObject({
+      status: 401,
+      code: "request_error",
+      message: "请求失败，状态码 401"
+    });
+  });
+
+  test("normalizes malformed JSON error responses", async () => {
+    localStorage.setItem("moonbridge.console.locale", "zh-CN");
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response("{", {
+        status: 502,
+        headers: { "Content-Type": "application/json" }
+      })
+    );
+
+    await expect(apiFetch("/status")).rejects.toMatchObject({
+      status: 502,
+      code: "request_error",
+      message: "请求失败，状态码 502"
+    });
+  });
+});
+
+describe("clearStoredToken", () => {
+  afterEach(() => {
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("removes remembered token from both stores and memory", () => {
+    saveToken("remembered-token", true);
+    expect(readStoredToken()).toBe("remembered-token");
+
+    clearStoredToken();
+
+    expect(sessionStorage.getItem(TOKEN_STORAGE_KEY)).toBeNull();
+    expect(localStorage.getItem(REMEMBER_TOKEN_STORAGE_KEY)).toBeNull();
+    expect(readStoredToken()).toBe("");
+  });
+
+  test("clears a session-only token too", () => {
+    saveToken("session-token", false);
+    expect(readStoredToken()).toBe("session-token");
+
+    clearStoredToken();
+
+    expect(sessionStorage.getItem(TOKEN_STORAGE_KEY)).toBeNull();
+    expect(readStoredToken()).toBe("");
+  });
+});
diff --git a/webui/src/rpc/http.ts b/webui/src/rpc/http.ts
new file mode 100644
index 00000000..7c578eb3
--- /dev/null
+++ b/webui/src/rpc/http.ts
@@ -0,0 +1,181 @@
+import { translateMessage } from "../i18n/I18nProvider";
+
+export const API_BASE = "/api/v1";
+export const TOKEN_STORAGE_KEY = "moonbridge.console.token";
+export const REMEMBER_TOKEN_STORAGE_KEY = "moonbridge.console.rememberedToken";
+
+let volatileToken = "";
+
+export type ApiFetchOptions = Omit<RequestInit, "body" | "headers"> & {
+  body?: unknown;
+  headers?: HeadersInit;
+  rawBody?: BodyInit | null;
+};
+
+export class ApiError extends Error {
+  status: number;
+  code: string;
+  raw: unknown;
+
+  constructor(status: number, code: string, message: string, raw?: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.code = code;
+    this.raw = raw;
+  }
+}
+
+export function isAuthError(error: unknown): error is ApiError {
+  return error instanceof ApiError && error.status === 401;
+}
+
+export function readStoredToken(): string {
+  const sessionToken = safeGetStorage(getStorage("sessionStorage"), TOKEN_STORAGE_KEY);
+  if (sessionToken) {
+    return sessionToken;
+  }
+  return safeGetStorage(getStorage("localStorage"), REMEMBER_TOKEN_STORAGE_KEY) ?? volatileToken;
+}
+
+export function saveToken(token: string, remember: boolean) {
+  volatileToken = token;
+  safeSetStorage(getStorage("sessionStorage"), TOKEN_STORAGE_KEY, token);
+  if (remember) {
+    safeSetStorage(getStorage("localStorage"), REMEMBER_TOKEN_STORAGE_KEY, token);
+  } else {
+    safeRemoveStorage(getStorage("localStorage"), REMEMBER_TOKEN_STORAGE_KEY);
+  }
+}
+
+export function clearStoredToken() {
+  volatileToken = "";
+  safeRemoveStorage(getStorage("sessionStorage"), TOKEN_STORAGE_KEY);
+  safeRemoveStorage(getStorage("localStorage"), REMEMBER_TOKEN_STORAGE_KEY);
+}
+
+export async function apiFetch<T>(path: string, options: ApiFetchOptions = {}): Promise<T> {
+  const url = normalizeURL(path);
+  const headers = headersToRecord(options.headers);
+  const token = readStoredToken();
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  let body: BodyInit | null | undefined = options.rawBody;
+  if (options.body !== undefined) {
+    headers["Content-Type"] = "application/json";
+    body = JSON.stringify(options.body);
+  }
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+    body
+  });
+
+  const payload = await readPayload(response);
+  if (!response.ok) {
+    throw normalizeError(response.status, payload);
+  }
+  return payload as T;
+}
+
+export function normalizeURL(path: string): string {
+  if (/^https?:\/\//.test(path)) {
+    return path;
+  }
+  if (
+    path.startsWith("/api/v1/") ||
+    path === "/api/v1" ||
+    path.startsWith("/v1/") ||
+    path === "/v1"
+  ) {
+    return path;
+  }
+  if (path.startsWith("/")) {
+    return `${API_BASE}${path}`;
+  }
+  return `${API_BASE}/${path}`;
+}
+
+async function readPayload(response: Response): Promise<unknown> {
+  const contentType = response.headers.get("Content-Type") ?? "";
+  const text = await response.text();
+  if (!text) {
+    return undefined;
+  }
+  if (contentType.includes("application/json")) {
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}
+
+function normalizeError(status: number, raw: unknown): ApiError {
+  if (isObject(raw) && isObject(raw.error)) {
+    const code = stringValue(raw.error.code) ?? stringValue(raw.error.type) ?? "request_error";
+    const message = stringValue(raw.error.message) ?? translateMessage("error.requestFailedWithStatus", { status });
+    return new ApiError(status, code, message, raw);
+  }
+  return new ApiError(status, "request_error", translateMessage("error.requestFailedWithStatus", { status }), raw);
+}
+
+function safeGetStorage(storage: Storage | undefined, key: string): string | null {
+  try {
+    return storage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function getStorage(name: "sessionStorage" | "localStorage"): Storage | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  try {
+    return window[name];
+  } catch {
+    return undefined;
+  }
+}
+
+function headersToRecord(headers?: HeadersInit): Record<string, string> {
+  if (!headers) {
+    return {};
+  }
+  if (headers instanceof Headers) {
+    return Object.fromEntries(headers.entries());
+  }
+  if (Array.isArray(headers)) {
+    return Object.fromEntries(headers);
+  }
+  return { ...headers };
+}
+
+function safeSetStorage(storage: Storage | undefined, key: string, value: string) {
+  try {
+    storage?.setItem(key, value);
+  } catch {
+    // Storage may be disabled in hardened browser contexts.
+  }
+}
+
+function safeRemoveStorage(storage: Storage | undefined, key: string) {
+  try {
+    storage?.removeItem(key);
+  } catch {
+    // Storage may be disabled in hardened browser contexts.
+  }
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function stringValue(value: unknown): string | undefined {
+  return typeof value === "string" && value ? value : undefined;
+}
diff --git a/webui/src/rpc/logs.test.ts b/webui/src/rpc/logs.test.ts
new file mode 100644
index 00000000..790951b0
--- /dev/null
+++ b/webui/src/rpc/logs.test.ts
@@ -0,0 +1,104 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  REMEMBER_TOKEN_STORAGE_KEY,
+  TOKEN_STORAGE_KEY
+} from "./http";
+import { createLogStream, getRecentLogs } from "./logs";
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { "Content-Type": "application/json" },
+    ...init
+  });
+}
+
+describe("logs RPC client", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("gets recent logs with a limit", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse([
+        {
+          timestamp: "2026-06-07T00:00:00Z",
+          level: "INFO",
+          message: "started",
+          raw: "time=2026-06-07T00:00:00Z level=INFO msg=started"
+        }
+      ])
+    );
+
+    const logs = await getRecentLogs({ limit: 2 });
+
+    expect(logs).toHaveLength(1);
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/logs/recent?limit=2");
+  });
+
+  test("omits limit when recent logs options are empty", async () => {
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(jsonResponse([]));
+
+    await getRecentLogs();
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/logs/recent");
+  });
+
+  test("opens log streams with bearer token from session storage", async () => {
+    sessionStorage.setItem(TOKEN_STORAGE_KEY, "session-token");
+    const stream = new ReadableStream<Uint8Array>();
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(stream, {
+        headers: { "Content-Type": "text/event-stream" }
+      })
+    );
+
+    const response = await createLogStream();
+
+    expect(response.body).toBe(stream);
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/logs/stream");
+    expect(fetchMock.mock.calls[0][1]?.headers).toMatchObject({
+      Authorization: "Bearer session-token"
+    });
+  });
+
+  test("opens log streams with remembered token when session token is absent", async () => {
+    localStorage.setItem(REMEMBER_TOKEN_STORAGE_KEY, "remembered-token");
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response(new ReadableStream<Uint8Array>()));
+
+    await createLogStream();
+
+    expect(fetchMock.mock.calls[0][1]?.headers).toMatchObject({
+      Authorization: "Bearer remembered-token"
+    });
+  });
+
+  test("localizes stream fallback failures from the stored locale", async () => {
+    localStorage.setItem("moonbridge.console.locale", "zh-CN");
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("", { status: 503 }));
+
+    await expect(createLogStream()).rejects.toMatchObject({
+      code: "log_stream_error",
+      message: "日志流请求失败，状态码 503"
+    });
+  });
+
+  test("localizes empty stream body failures from the stored locale", async () => {
+    localStorage.setItem("moonbridge.console.locale", "zh-CN");
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(null, {
+        status: 200
+      })
+    );
+
+    await expect(createLogStream()).rejects.toMatchObject({
+      code: "log_stream_error",
+      message: "日志流响应体为空"
+    });
+  });
+});
diff --git a/webui/src/rpc/logs.ts b/webui/src/rpc/logs.ts
new file mode 100644
index 00000000..15532663
--- /dev/null
+++ b/webui/src/rpc/logs.ts
@@ -0,0 +1,47 @@
+import { ApiError, apiFetch, normalizeURL, readStoredToken } from "./http";
+import { translateMessage } from "../i18n/I18nProvider";
+import type { LogEntry } from "./types";
+
+export type RecentLogsOptions = {
+  limit?: number;
+};
+
+export const getRecentLogs = (options: RecentLogsOptions = {}) => {
+  const params = new URLSearchParams();
+  if (options.limit !== undefined) {
+    params.set("limit", String(options.limit));
+  }
+  const query = params.toString();
+  return apiFetch<LogEntry[]>(`/logs/recent${query ? `?${query}` : ""}`);
+};
+
+export type LogStreamOptions = {
+  signal?: AbortSignal;
+};
+
+export async function createLogStream(options: LogStreamOptions = {}) {
+  const headers: Record<string, string> = {
+    Accept: "text/event-stream"
+  };
+  const token = readStoredToken();
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const response = await fetch(normalizeURL("/logs/stream"), {
+    method: "GET",
+    headers,
+    signal: options.signal
+  });
+  if (!response.ok) {
+    throw new ApiError(
+      response.status,
+      "log_stream_error",
+      translateMessage("logs.streamFailedWithStatus", { status: response.status })
+    );
+  }
+  if (!response.body) {
+    throw new ApiError(response.status, "log_stream_error", translateMessage("logs.streamBodyEmpty"));
+  }
+  return response;
+}
diff --git a/webui/src/rpc/management.test.ts b/webui/src/rpc/management.test.ts
new file mode 100644
index 00000000..1d6c7572
--- /dev/null
+++ b/webui/src/rpc/management.test.ts
@@ -0,0 +1,125 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  exportConfig,
+  getUsageStats,
+  importConfig,
+  listProviders,
+  validateConfig
+} from "./management";
+
+function response(body: unknown, init?: ResponseInit) {
+  return new Response(typeof body === "string" ? body : JSON.stringify(body), {
+    headers: {
+      "Content-Type":
+        typeof body === "string" ? "application/x-yaml" : "application/json"
+    },
+    ...init
+  });
+}
+
+describe("management RPC client", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  test("listProviders encodes pagination query params", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      response({
+        data: [],
+        total: 0,
+        limit: 10,
+        offset: 20
+      })
+    );
+
+    await listProviders({ limit: 10, offset: 20 });
+
+    expect(fetchMock.mock.calls[0][0]).toBe(
+      "/api/v1/providers?limit=10&offset=20"
+    );
+  });
+
+  test("validateConfig posts config payload", async () => {
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(response({ valid: true }));
+
+    await validateConfig("providers: {}");
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/validate");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "POST",
+      body: JSON.stringify({ config: "providers: {}" })
+    });
+  });
+
+  test("importConfig posts yaml payload", async () => {
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(response({ changes: [], count: 0 }));
+
+    await importConfig("providers: {}");
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/config/import");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "POST",
+      body: JSON.stringify({ yaml: "providers: {}" })
+    });
+  });
+
+  test("exportConfig adds include_secrets query and confirmation header", async () => {
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(response("providers: {}\n"));
+
+    await exportConfig({ includeSecrets: true });
+
+    expect(fetchMock.mock.calls[0][0]).toBe(
+      "/api/v1/config/export?include_secrets=true"
+    );
+    expect(fetchMock.mock.calls[0][1]?.headers).toMatchObject({
+      "X-Confirm-Secrets": "true"
+    });
+  });
+
+  test("getUsageStats reads stable model usage metrics", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      response({
+        totals: {
+          requests: 2,
+          input_tokens: 300,
+          output_tokens: 80,
+          cache_creation: 40,
+          cache_read: 120,
+          cache_hit_rate: 40,
+          cache_write_rate: 13.3,
+          cache_rw_ratio: 3,
+          total_cost: 0.42,
+          duration: "1m"
+        },
+        by_model: [
+          {
+            model: "claude-sonnet",
+            actual_model: "claude-3-5-sonnet",
+            requests: 2,
+            input_tokens: 300,
+            output_tokens: 80,
+            cache_creation: 40,
+            cache_read: 120,
+            cache_hit_rate: 40,
+            cost: 0.42,
+            avg_cost_per_mtoken: 1105.26
+          }
+        ]
+      })
+    );
+
+    const stats = await getUsageStats();
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/api/v1/stats/usage");
+    expect(stats.by_model[0].actual_model).toBe("claude-3-5-sonnet");
+    expect(stats.totals.cache_rw_ratio).toBe(3);
+  });
+});
diff --git a/webui/src/rpc/management.ts b/webui/src/rpc/management.ts
new file mode 100644
index 00000000..5d0209f3
--- /dev/null
+++ b/webui/src/rpc/management.ts
@@ -0,0 +1,122 @@
+import { apiFetch } from "./http";
+import type {
+  ApplyResult,
+  ChangeRow,
+  DefaultsSettings,
+  ImportResult,
+  ModelDetail,
+  ModelSummary,
+  ModelUpsert,
+  MutationAccepted,
+  Paginated,
+  ProviderDetail,
+  ProviderSummary,
+  ProviderUpsert,
+  RouteDetail,
+  RouteSummary,
+  RouteUpsert,
+  SessionInfo,
+  StatsSummary,
+  StatusResponse,
+  UsageStats,
+  ValidationResult,
+  WebSearchSettings
+} from "./types";
+
+type Page = {
+  limit?: number;
+  offset?: number;
+};
+
+function pageQuery(page: Page = {}) {
+  const params = new URLSearchParams();
+  if (page.limit !== undefined) {
+    params.set("limit", String(page.limit));
+  }
+  if (page.offset !== undefined) {
+    params.set("offset", String(page.offset));
+  }
+  const query = params.toString();
+  return query ? `?${query}` : "";
+}
+
+export const getStatus = () => apiFetch<StatusResponse>("/status");
+
+export const listProviders = (page?: Page) =>
+  apiFetch<Paginated<ProviderSummary>>(`/providers${pageQuery(page)}`);
+export const getProvider = (key: string) => apiFetch<ProviderDetail>(`/providers/${encodeURIComponent(key)}`);
+export const putProvider = (key: string, body: ProviderUpsert) =>
+  apiFetch<MutationAccepted>(`/providers/${encodeURIComponent(key)}`, { method: "PUT", body });
+export const patchProvider = (key: string, body: Partial<ProviderUpsert>) =>
+  apiFetch<MutationAccepted>(`/providers/${encodeURIComponent(key)}`, { method: "PATCH", body });
+export const deleteProvider = (key: string) =>
+  apiFetch<MutationAccepted>(`/providers/${encodeURIComponent(key)}`, { method: "DELETE" });
+export const testProvider = (key: string) =>
+  apiFetch<Record<string, unknown>>(`/providers/${encodeURIComponent(key)}/test`, { method: "POST" });
+
+export const createOffer = (providerKey: string, body: Record<string, unknown>) =>
+  apiFetch<MutationAccepted>(`/providers/${encodeURIComponent(providerKey)}/offers`, {
+    method: "POST",
+    body
+  });
+export const updateOffer = (providerKey: string, model: string, body: Record<string, unknown>) =>
+  apiFetch<MutationAccepted>(
+    `/providers/${encodeURIComponent(providerKey)}/offers/${encodeURIComponent(model)}`,
+    { method: "PATCH", body }
+  );
+export const deleteOffer = (providerKey: string, model: string) =>
+  apiFetch<MutationAccepted>(
+    `/providers/${encodeURIComponent(providerKey)}/offers/${encodeURIComponent(model)}`,
+    { method: "DELETE" }
+  );
+
+export const listModels = (page?: Page) =>
+  apiFetch<Paginated<ModelSummary>>(`/models${pageQuery(page)}`);
+export const getModel = (slug: string) => apiFetch<ModelDetail>(`/models/${encodeURIComponent(slug)}`);
+export const putModel = (slug: string, body: ModelUpsert) =>
+  apiFetch<MutationAccepted>(`/models/${encodeURIComponent(slug)}`, { method: "PUT", body });
+export const deleteModel = (slug: string) =>
+  apiFetch<MutationAccepted>(`/models/${encodeURIComponent(slug)}`, { method: "DELETE" });
+
+export const listRoutes = (page?: Page) =>
+  apiFetch<Paginated<RouteSummary>>(`/routes${pageQuery(page)}`);
+export const getRoute = (alias: string) => apiFetch<RouteDetail>(`/routes/${encodeURIComponent(alias)}`);
+export const putRoute = (alias: string, body: RouteUpsert) =>
+  apiFetch<MutationAccepted>(`/routes/${encodeURIComponent(alias)}`, { method: "PUT", body });
+export const deleteRoute = (alias: string) =>
+  apiFetch<MutationAccepted>(`/routes/${encodeURIComponent(alias)}`, { method: "DELETE" });
+
+export const getChanges = () => apiFetch<ChangeRow[]>("/changes");
+export const applyChanges = () => apiFetch<ApplyResult>("/changes/apply", { method: "POST" });
+export const discardChanges = () => apiFetch<ApplyResult>("/changes/discard", { method: "POST" });
+
+export const getEffectiveConfig = () => apiFetch<Record<string, unknown>>("/config/effective");
+export const validateConfig = (config: string) =>
+  apiFetch<ValidationResult>("/config/validate", { method: "POST", body: { config } });
+export const importConfig = (yaml: string) =>
+  apiFetch<ImportResult>("/config/import", { method: "POST", body: { yaml } });
+export const exportConfig = ({ includeSecrets = false }: { includeSecrets?: boolean } = {}) =>
+  apiFetch<string>(`/config/export?include_secrets=${includeSecrets ? "true" : "false"}`, {
+    headers: includeSecrets ? { "X-Confirm-Secrets": "true" } : undefined
+  });
+
+export const getDefaults = () => apiFetch<DefaultsSettings>("/defaults");
+export const putDefaults = (body: DefaultsSettings) =>
+  apiFetch<MutationAccepted>("/defaults", { method: "PUT", body });
+
+export const getWebSearch = () => apiFetch<WebSearchSettings>("/web-search");
+export const putWebSearch = (body: WebSearchSettings) =>
+  apiFetch<MutationAccepted>("/web-search", { method: "PUT", body });
+
+export const listExtensions = () => apiFetch<string[]>("/extensions");
+export const getExtension = (name: string) =>
+  apiFetch<Record<string, unknown>>(`/extensions/${encodeURIComponent(name)}`);
+export const putExtension = (name: string, body: Record<string, unknown>) =>
+  apiFetch<MutationAccepted>(`/extensions/${encodeURIComponent(name)}`, { method: "PUT", body });
+
+export const getStatsSummary = () => apiFetch<StatsSummary>("/stats/summary");
+
+export type UsageRange = "session" | "24h" | "7d" | "30d" | "all";
+export const getUsageStats = (range: UsageRange = "session") =>
+  apiFetch<UsageStats>(range === "session" ? "/stats/usage" : `/stats/usage?range=${range}`);
+export const getSessions = () => apiFetch<SessionInfo[]>("/sessions");
diff --git a/webui/src/rpc/queryKeys.ts b/webui/src/rpc/queryKeys.ts
new file mode 100644
index 00000000..cddc320b
--- /dev/null
+++ b/webui/src/rpc/queryKeys.ts
@@ -0,0 +1,13 @@
+export const queryKeys = {
+  status: ["status"] as const,
+  providers: (page: { limit: number; offset: number }) => ["providers", page] as const,
+  models: (page: { limit: number; offset: number }) => ["models", page] as const,
+  routes: (page: { limit: number; offset: number }) => ["routes", page] as const,
+  configGraph: ["config", "graph"] as const,
+  changes: ["changes"] as const,
+  logsRecent: (limit?: number) => ["logs", "recent", { limit }] as const,
+  extensions: ["extensions"] as const,
+  statsSummary: ["stats", "summary"] as const,
+  usageStats: ["stats", "usage"] as const,
+  sessions: ["sessions"] as const
+};
diff --git a/webui/src/rpc/responses.test.ts b/webui/src/rpc/responses.test.ts
new file mode 100644
index 00000000..da3c25d8
--- /dev/null
+++ b/webui/src/rpc/responses.test.ts
@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { ApiError } from "./http";
+import { createResponse, listResponseModels } from "./responses";
+
+describe("responses RPC client", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("lists models from /v1/models", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ models: [{ slug: "moonbridge", name: "Moon Bridge", provider: "route" }] }), {
+        headers: { "Content-Type": "application/json" }
+      })
+    );
+
+    await expect(listResponseModels()).resolves.toEqual({
+      models: [{ slug: "moonbridge", name: "Moon Bridge", provider: "route" }]
+    });
+    expect(fetchMock.mock.calls[0][0]).toBe("/v1/models");
+  });
+
+  test("posts a non-streaming response request", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "resp_1", status: "completed", output_text: "ok", output: [] }), {
+        headers: { "Content-Type": "application/json" }
+      })
+    );
+
+    await createResponse({ model: "moonbridge", input: "ping" });
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/v1/responses");
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({
+      method: "POST",
+      body: JSON.stringify({ model: "moonbridge", input: "ping", stream: false })
+    });
+  });
+
+  test("normalizes OpenAI-style errors", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ error: { code: "bad_request", message: "bad request" } }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" }
+      })
+    );
+
+    await expect(createResponse({ model: "missing", input: "ping" })).rejects.toBeInstanceOf(ApiError);
+  });
+});
diff --git a/webui/src/rpc/responses.ts b/webui/src/rpc/responses.ts
new file mode 100644
index 00000000..fa9a99ba
--- /dev/null
+++ b/webui/src/rpc/responses.ts
@@ -0,0 +1,42 @@
+import { apiFetch } from "./http";
+
+export type ResponseModel = {
+  slug: string;
+  name: string;
+  provider: string;
+  model?: string;
+};
+
+export type ResponseModelsResult = {
+  models: ResponseModel[];
+};
+
+export type CreateResponseRequest = {
+  model: string;
+  input: unknown;
+  max_output_tokens?: number;
+  temperature?: number;
+  stream?: boolean;
+};
+
+export type CreateResponseResult = {
+  id: string;
+  object?: string;
+  status: string;
+  model?: string;
+  output: unknown[];
+  output_text?: string;
+  usage?: Record<string, unknown>;
+  error?: { message: string; type?: string; code?: string; param?: string };
+};
+
+export function listResponseModels() {
+  return apiFetch<ResponseModelsResult>("/v1/models");
+}
+
+export function createResponse(request: CreateResponseRequest) {
+  return apiFetch<CreateResponseResult>("/v1/responses", {
+    method: "POST",
+    body: { ...request, stream: request.stream ?? false }
+  });
+}
diff --git a/webui/src/rpc/types.ts b/webui/src/rpc/types.ts
new file mode 100644
index 00000000..9bc68aec
--- /dev/null
+++ b/webui/src/rpc/types.ts
@@ -0,0 +1,324 @@
+export type Paginated<T> = {
+  data: T[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+
+export type StatusResponse = {
+  uptime: string;
+  version: string;
+  mode: string;
+  provider_count: number;
+  route_count: number;
+  addr: string;
+  timestamp: string;
+};
+
+export type Offer = {
+  model: string;
+  upstream_name?: string;
+  priority: number;
+  input_price: number;
+  output_price: number;
+  cache_write: number;
+  cache_read: number;
+};
+
+export type ProviderSummary = {
+  key: string;
+  protocol: string;
+  offer_count: number;
+  base_url: string;
+  health_status: string;
+};
+
+export type ProviderDetail = Omit<ProviderSummary, "health_status"> & {
+  health_status?: string;
+  api_key: string;
+  version: string;
+  user_agent: string;
+  offers: Offer[];
+  web_search: string;
+  web_search_max_uses: number;
+};
+
+export type ProviderUpsert = {
+  base_url: string;
+  api_key: string;
+  version?: string;
+  protocol?: string;
+  user_agent?: string;
+};
+
+export type ModelSummary = {
+  slug: string;
+  display_name?: string;
+  context_window: number;
+  providers: string[];
+};
+
+export type ModelDetail = ModelSummary & {
+  description: string;
+  max_output_tokens: number;
+  input_modalities: string[];
+};
+
+export type ModelUpsert = {
+  display_name?: string;
+  description?: string;
+  context_window?: number;
+  max_output_tokens?: number;
+};
+
+export type RouteSummary = {
+  alias: string;
+  model: string;
+  provider: string;
+  display_name?: string;
+};
+
+export type RouteDetail = RouteSummary & {
+  context_window: number;
+};
+
+export type RouteUpsert = {
+  model: string;
+  provider?: string;
+  display_name?: string;
+  context_window?: number;
+};
+
+export type ChangeRow = {
+  ID?: number;
+  BatchID?: string;
+  Action?: string;
+  Resource?: string;
+  TargetKey?: string;
+  Before?: string;
+  After?: string;
+  Applied?: boolean;
+  Error?: string;
+  Revision?: number;
+  CreatedAt?: string;
+  AppliedAt?: string;
+  id?: number;
+  change_id?: number;
+  action?: string;
+  resource?: string;
+  target_key?: string;
+  target?: string;
+  before?: string;
+  after?: string;
+  created_at?: string;
+};
+
+export type StatsSummary = {
+  requests: number;
+  input_tokens: number;
+  output_tokens: number;
+  cache_hit_rate: number;
+  total_cost: number;
+  duration: string;
+};
+
+export type UsageStats = {
+  totals: UsageStatsTotals;
+  by_model: UsageStatsModelRow[];
+};
+
+export type UsageStatsTotals = {
+  requests: number;
+  input_tokens: number;
+  output_tokens: number;
+  cache_creation: number;
+  cache_read: number;
+  cache_hit_rate: number;
+  cache_write_rate: number;
+  cache_rw_ratio: number;
+  total_cost: number;
+  duration: string;
+};
+
+export type UsageStatsModelRow = {
+  model: string;
+  actual_model: string;
+  requests: number;
+  input_tokens: number;
+  output_tokens: number;
+  cache_creation: number;
+  cache_read: number;
+  cache_hit_rate: number;
+  cost: number;
+  avg_cost_per_mtoken: number;
+};
+
+export type SessionInfo = {
+  key: string;
+  model?: string;
+  created_at: string;
+  last_used: string;
+};
+
+export type DefaultsSettings = {
+  model: string;
+  max_tokens: number;
+  system_prompt: string;
+};
+
+export type WebSearchSettings = {
+  support: string;
+  max_uses: number;
+  tavily_api_key: string;
+  firecrawl_api_key: string;
+  search_max_rounds: number;
+};
+
+export type ValidationResult = {
+  valid: boolean;
+  errors?: string[];
+};
+
+export type ImportResult = {
+  changes: Array<{ change_id: number; resource: string; target: string }>;
+  count: number;
+  message: string;
+};
+
+export type MutationAccepted = {
+  change_id: number;
+  status: string;
+  message?: string;
+};
+
+export type ApplyResult = {
+  status: string;
+  message: string;
+};
+
+export type ResourceKind =
+  | "mode"
+  | "trace"
+  | "log"
+  | "server"
+  | "defaults"
+  | "model"
+  | "provider"
+  | "provider_offer"
+  | "route"
+  | "web_search"
+  | "cache"
+  | "persistence"
+  | "extension"
+  | "proxy";
+
+export type ResourceStatus = "saved" | "needsAttention" | "restartRequired";
+
+export type RuntimeImpact = "normal" | "critical";
+
+export type ConfigGraph = {
+  revision: string;
+  resources: ConfigResource[];
+  validation: ValidationState;
+  runtime: RuntimeState;
+  capabilities: ConfigCapabilities;
+};
+
+export type ConfigResource = {
+  kind: ResourceKind;
+  id: string;
+  label: string;
+  value: Record<string, unknown>;
+  schema: ResourceSchema;
+  status: ResourceStatus;
+  runtimeImpact: RuntimeImpact;
+  hotReloadable: boolean;
+  references?: ResourceRef[];
+};
+
+export type ResourceSchema = {
+  fields: FieldSchema[];
+};
+
+export type FieldSchema = {
+  path: string;
+  type: "string" | "number" | "boolean" | "array" | "object" | string;
+  label: string;
+  required?: boolean;
+  secret?: boolean;
+  control?: string;
+  enum?: string[];
+  hotReloadable: boolean;
+  runtimeImpact?: string;
+};
+
+export type ResourceRef = {
+  kind: ResourceKind;
+  id: string;
+};
+
+export type ValidationState = {
+  valid: boolean;
+  errors?: FieldError[];
+};
+
+export type RuntimeState = {
+  status: string;
+  errors?: FieldError[];
+  message?: string;
+};
+
+export type ConfigCapabilities = {
+  autosave: boolean;
+  logs: boolean;
+};
+
+export type FieldError = {
+  resourceKind: ResourceKind | "";
+  resourceId: string;
+  field?: string;
+  code: string;
+  message: string;
+};
+
+export type PatchRequest = {
+  baseRevision: string;
+  changes: PatchOp[];
+};
+
+export type PatchOp = {
+  kind: ResourceKind;
+  id: string;
+  field: string;
+  value: unknown;
+};
+
+export type PatchResult =
+  | "committed"
+  | "restartRequired"
+  | "revisionConflict"
+  | "validationRejected"
+  | "runtimeRejected"
+  | "draftRejected";
+
+export type PatchResponse = {
+  result: PatchResult;
+  revision: string;
+  graph?: ConfigGraph;
+  errors?: FieldError[];
+  rollbackValue?: unknown;
+};
+
+export type CreateConfigResourceRequest = {
+  baseRevision: string;
+  id: string;
+  value?: Record<string, unknown>;
+};
+
+export type LogEntry = {
+  timestamp: string;
+  level: string;
+  message: string;
+  attrs?: Record<string, unknown>;
+  raw?: string;
+};
diff --git a/webui/src/test/configGraphFixtures.ts b/webui/src/test/configGraphFixtures.ts
new file mode 100644
index 00000000..c7412473
--- /dev/null
+++ b/webui/src/test/configGraphFixtures.ts
@@ -0,0 +1,196 @@
+import type { ConfigGraph, ConfigResource, FieldSchema, ResourceKind } from "../rpc/types";
+
+export function configGraphFixture(overrides: Partial<ConfigGraph> = {}): ConfigGraph {
+  const resources = overrides.resources ?? [
+    resource("mode", "main", "Mode", { mode: "Transform" }, [
+      field("mode", "Mode", "string", "select", ["Transform", "CaptureResponse", "CaptureAnthropic"])
+    ]),
+    resource("defaults", "main", "Defaults", {
+      model: "claude-sonnet",
+      max_tokens: 4096,
+      system_prompt: "Be concise."
+    }, [
+      field("model", "Model"),
+      field("max_tokens", "Max Tokens", "number", "number"),
+      field("system_prompt", "System Prompt", "string", "textarea")
+    ]),
+    resource("trace", "main", "Trace", { enabled: true }, [
+      field("enabled", "Enabled", "boolean", "switch")
+    ]),
+    resource("log", "main", "Log", { level: "info", format: "text" }, [
+      field("level", "Level", "string", "select", ["debug", "info", "warn", "error"]),
+      field("format", "Format", "string", "select", ["text", "json"])
+    ]),
+    resource("provider", "anthropic", "anthropic", {
+      base_url: "https://api.anthropic.com",
+      api_key: "******",
+      version: "2023-06-01",
+      user_agent: "MoonBridge",
+      protocol: "anthropic",
+      web_search: { support: "auto" },
+      extensions: {}
+    }, [
+      field("base_url", "Base URL"),
+      field("api_key", "API Key", "string", "secret", undefined, true),
+      field("version", "Version"),
+      field("user_agent", "User Agent"),
+      field("protocol", "Protocol", "string", "select", ["anthropic", "openai-response"]),
+      field("web_search", "Web Search", "object", "object"),
+      field("extensions", "Extensions", "object", "object")
+    ]),
+    resource("provider_offer", "anthropic/claude-sonnet", "anthropic/claude-sonnet", {
+      model: "claude-sonnet",
+      upstream_name: "claude-3-5-sonnet",
+      priority: 1,
+      pricing: {
+        input_price: 3,
+        output_price: 15
+      },
+      overrides: {}
+    }, [
+      field("model", "Model"),
+      field("upstream_name", "Upstream Name"),
+      field("priority", "Priority", "number", "number"),
+      field("pricing", "Pricing", "object", "object"),
+      field("overrides", "Overrides", "object", "object")
+    ]),
+    resource("model", "claude-sonnet", "Claude Sonnet", {
+      context_window: 200000,
+      max_output_tokens: 8192,
+      display_name: "Claude Sonnet",
+      description: "Balanced model"
+    }, [
+      field("context_window", "Context Window", "number", "number"),
+      field("max_output_tokens", "Max Output Tokens", "number", "number"),
+      field("display_name", "Display Name"),
+      field("description", "Description", "string", "textarea")
+    ]),
+    resource("route", "primary", "Primary Route", {
+      to: "primary",
+      model: "claude-sonnet",
+      provider: "anthropic",
+      display_name: "Primary Route",
+      description: "Default route",
+      context_window: 200000,
+      web_search: { support: "auto" },
+      extensions: {}
+    }, [
+      field("to", "Route Target"),
+      field("model", "Model"),
+      field("provider", "Provider"),
+      field("display_name", "Display Name"),
+      field("description", "Description", "string", "textarea"),
+      field("context_window", "Context Window", "number", "number"),
+      field("web_search", "Web Search", "object", "object"),
+      field("extensions", "Extensions", "object", "object")
+    ]),
+    resource("web_search", "main", "Web Search", {
+      support: "auto",
+      max_uses: 4,
+      tavily_api_key: "******",
+      firecrawl_api_key: "******",
+      search_max_rounds: 2
+    }, [
+      field("support", "Support", "string", "select", ["auto", "enabled", "disabled", "injected"]),
+      field("max_uses", "Max Uses", "number", "number"),
+      field("tavily_api_key", "Tavily API Key", "string", "secret", undefined, true),
+      field("firecrawl_api_key", "Firecrawl API Key", "string", "secret", undefined, true),
+      field("search_max_rounds", "Search Max Rounds", "number", "number")
+    ]),
+    resource("extension", "db_sqlite", "db_sqlite", {
+      enabled: true,
+      config: { path: "~/.moon-bridge/moonbridge.db" }
+    }, [
+      field("enabled", "Enabled", "boolean", "switch"),
+      field("config", "Config", "object", "object")
+    ]),
+    resource("proxy", "main", "Proxy", {
+      response: { base_url: "https://response.proxy", api_key: "******" },
+      anthropic: { base_url: "https://anthropic.proxy", api_key: "******" }
+    }, [
+      field("response", "Response Proxy", "object", "object"),
+      field("anthropic", "Anthropic Proxy", "object", "object")
+    ], { hotReloadable: false, runtimeImpact: "critical" }),
+    resource("cache", "main", "Cache", {
+      mode: "memory",
+      ttl: "1h",
+      prompt_caching: true,
+      automatic_prompt_cache: false
+    }, [
+      field("mode", "Mode"),
+      field("ttl", "TTL"),
+      field("prompt_caching", "Prompt Caching", "boolean", "switch"),
+      field("automatic_prompt_cache", "Automatic Prompt Cache", "boolean", "switch")
+    ]),
+    resource("persistence", "main", "Persistence", {
+      active_provider: "db_sqlite"
+    }, [
+      field("active_provider", "Active Provider")
+    ]),
+    resource("server", "main", "Server", {
+      addr: ":38440",
+      auth_token: "******",
+      max_sessions: 64,
+      session_ttl: "24h"
+    }, [
+      field("addr", "Address"),
+      field("auth_token", "Auth Token", "string", "secret", undefined, true),
+      field("max_sessions", "Max Sessions", "number", "number"),
+      field("session_ttl", "Session TTL")
+    ], {
+      hotReloadable: false,
+      runtimeImpact: "critical",
+      status: "restartRequired"
+    })
+  ];
+
+  return {
+    revision: "rev-1",
+    resources,
+    validation: { valid: true },
+    runtime: { status: "ok" },
+    capabilities: { autosave: true, logs: true },
+    ...overrides
+  };
+}
+
+export function resource(
+  kind: ResourceKind,
+  id: string,
+  label: string,
+  value: Record<string, unknown>,
+  fields: FieldSchema[],
+  overrides: Partial<ConfigResource> = {}
+): ConfigResource {
+  return {
+    kind,
+    id,
+    label,
+    value,
+    schema: { fields },
+    status: "saved",
+    runtimeImpact: "normal",
+    hotReloadable: true,
+    ...overrides
+  };
+}
+
+export function field(
+  path: string,
+  label: string,
+  type: FieldSchema["type"] = "string",
+  control = type === "number" ? "number" : "text",
+  enumValues?: string[],
+  secret = false
+): FieldSchema {
+  return {
+    path,
+    type,
+    label,
+    control,
+    enum: enumValues,
+    secret,
+    hotReloadable: true,
+    runtimeImpact: "normal"
+  };
+}
diff --git a/webui/src/test/panelStyleAssertions.ts b/webui/src/test/panelStyleAssertions.ts
new file mode 100644
index 00000000..85946d17
--- /dev/null
+++ b/webui/src/test/panelStyleAssertions.ts
@@ -0,0 +1,134 @@
+export function expectPanelElementToBeFlat(element: Element) {
+  const style = getComputedStyle(element);
+  expect(isZeroLength(style.borderTopWidth)).toBe(true);
+  expect(isZeroLength(style.borderRightWidth)).toBe(true);
+  expect(isZeroLength(style.borderBottomWidth)).toBe(true);
+  expect(isZeroLength(style.borderLeftWidth)).toBe(true);
+  expect(isZeroLength(style.outlineWidth)).toBe(true);
+  expect(style.boxShadow === "" || style.boxShadow === "none").toBe(true);
+  expect(style.filter === "" || style.filter === "none").toBe(true);
+}
+
+export function expectPanelRuleToAvoidEdges(selector: string) {
+  const edgeProperties = [
+    "border",
+    "border-block",
+    "border-inline",
+    "border-top",
+    "border-right",
+    "border-bottom",
+    "border-left",
+    "border-color",
+    "border-width",
+    "border-style",
+    "outline",
+    "outline-color",
+    "outline-width",
+    "outline-style",
+    "box-shadow",
+    "filter"
+  ];
+  const rule = findStyleRule(selector);
+  if (!rule) {
+    const ruleText = findRawStyleRule(selector);
+    for (const property of edgeProperties) {
+      expect(ruleText).not.toMatch(new RegExp(`(^|;)\\s*${escapeRegExp(property)}\\s*:`));
+    }
+    return;
+  }
+  for (const property of edgeProperties) {
+    const value = rule.style.getPropertyValue(property).trim();
+    expect(value === "" || value === "0" || value === "0px" || value === "none").toBe(true);
+  }
+}
+
+export function expectPanelStateRuleToStayFlat(selector: string) {
+  expectPanelRuleToAvoidEdges(selector);
+  const rule = findStyleRule(selector);
+  if (!rule) {
+    expect(findRawStyleRule(selector)).not.toMatch(/(^|;)\s*transform\s*:/);
+    return;
+  }
+  expect(rule.style.getPropertyValue("transform").trim()).toBe("");
+}
+
+function findStyleRule(selector: string): CSSStyleRule | undefined {
+  for (const styleSheet of Array.from(document.styleSheets)) {
+    const rule = findStyleRuleInList(styleSheet.cssRules, selector);
+    if (rule) {
+      return rule;
+    }
+  }
+  return undefined;
+}
+
+function findStyleRuleInList(rules: CSSRuleList, selector: string): CSSStyleRule | undefined {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule && selectorList(rule.selectorText).includes(selector)) {
+      return rule;
+    }
+    if (rule instanceof CSSMediaRule) {
+      const nestedRule = findStyleRuleInList(rule.cssRules, selector);
+      if (nestedRule) {
+        return nestedRule;
+      }
+    }
+  }
+  return undefined;
+}
+
+function selectorList(selectorText: string) {
+  return selectorText.split(",").map((selector) => selector.trim());
+}
+
+function isZeroLength(value: string) {
+  return value === "" || value === "0px";
+}
+
+function findRawStyleRule(selector: string) {
+  for (const styleElement of Array.from(document.querySelectorAll("style"))) {
+    const css = styleElement.textContent ?? "";
+    if (!css.includes(selector)) {
+      continue;
+    }
+    const ruleText = findRawStyleRuleInText(css, selector);
+    if (ruleText) {
+      return ruleText;
+    }
+  }
+  throw new Error(`Expected stylesheet rule for selector "${selector}".`);
+}
+
+function findRawStyleRuleInText(css: string, selector: string) {
+  let searchFrom = 0;
+  while (searchFrom < css.length) {
+    const selectorIndex = css.indexOf(selector, searchFrom);
+    if (selectorIndex === -1) {
+      return undefined;
+    }
+    const openBrace = css.indexOf("{", selectorIndex);
+    if (openBrace === -1) {
+      return undefined;
+    }
+    const selectorTextStart = css.lastIndexOf("}", selectorIndex) + 1;
+    const atRuleStart = css.lastIndexOf("@", selectorIndex);
+    if (atRuleStart > selectorTextStart) {
+      searchFrom = selectorIndex + selector.length;
+      continue;
+    }
+    const selectorText = css.slice(selectorTextStart, openBrace).trim();
+    if (selectorList(selectorText).includes(selector)) {
+      const closeBrace = css.indexOf("}", openBrace);
+      if (closeBrace === -1) {
+        return undefined;
+      }
+      return css.slice(openBrace + 1, closeBrace);
+    }
+    searchFrom = selectorIndex + selector.length;
+  }
+  return undefined;
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
diff --git a/webui/src/test/renderWithConsoleProviders.tsx b/webui/src/test/renderWithConsoleProviders.tsx
new file mode 100644
index 00000000..0b82b8ee
--- /dev/null
+++ b/webui/src/test/renderWithConsoleProviders.tsx
@@ -0,0 +1,29 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import type { Locale } from "../i18n/messages";
+import { I18nProvider, CONSOLE_LOCALE_STORAGE_KEY } from "../i18n/I18nProvider";
+import { ThemeProvider } from "../theme/ThemeProvider";
+import { ConsoleAuthProvider } from "../app/auth/ConsoleAuthContext";
+import { shellStyles } from "../app/styles/shellStyles";
+
+export function renderWithConsoleProviders(
+  ui: ReactElement,
+  options: { locale?: Locale } = {}
+) {
+  localStorage.setItem(CONSOLE_LOCALE_STORAGE_KEY, options.locale ?? "en-US");
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } }
+  });
+
+  return render(
+    <QueryClientProvider client={client}>
+      <I18nProvider>
+        <ThemeProvider>
+          <style>{shellStyles}</style>
+          <ConsoleAuthProvider>{ui}</ConsoleAuthProvider>
+        </ThemeProvider>
+      </I18nProvider>
+    </QueryClientProvider>
+  );
+}
diff --git a/webui/src/test/setup.ts b/webui/src/test/setup.ts
new file mode 100644
index 00000000..57fceed4
--- /dev/null
+++ b/webui/src/test/setup.ts
@@ -0,0 +1,170 @@
+import "@testing-library/jest-dom/vitest";
+
+type TestElementInternals = {
+  checkValidity: () => boolean;
+  reportValidity: () => boolean;
+  setFormValue: (value: unknown, state?: unknown) => void;
+  setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
+  validationMessage: string;
+  validity: ValidityState;
+  willValidate: boolean;
+};
+
+const validValidityState = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+} as ValidityState;
+
+if (typeof ElementInternals !== "undefined") {
+  if (typeof ElementInternals.prototype.setFormValue !== "function") {
+    Object.defineProperty(ElementInternals.prototype, "setFormValue", {
+      configurable: true,
+      value: () => undefined
+    });
+  }
+
+  if (typeof ElementInternals.prototype.setValidity !== "function") {
+    Object.defineProperty(ElementInternals.prototype, "setValidity", {
+      configurable: true,
+      value: () => undefined
+    });
+  }
+
+  if (typeof ElementInternals.prototype.checkValidity !== "function") {
+    Object.defineProperty(ElementInternals.prototype, "checkValidity", {
+      configurable: true,
+      value: () => true
+    });
+  }
+
+  if (typeof ElementInternals.prototype.reportValidity !== "function") {
+    Object.defineProperty(ElementInternals.prototype, "reportValidity", {
+      configurable: true,
+      value: () => true
+    });
+  }
+
+  if (!("validity" in ElementInternals.prototype)) {
+    Object.defineProperty(ElementInternals.prototype, "validity", {
+      configurable: true,
+      get: () => validValidityState
+    });
+  }
+
+  if (!("validationMessage" in ElementInternals.prototype)) {
+    Object.defineProperty(ElementInternals.prototype, "validationMessage", {
+      configurable: true,
+      get: () => ""
+    });
+  }
+
+  if (!("willValidate" in ElementInternals.prototype)) {
+    Object.defineProperty(ElementInternals.prototype, "willValidate", {
+      configurable: true,
+      get: () => true
+    });
+  }
+}
+
+if (!HTMLElement.prototype.attachInternals) {
+  Object.defineProperty(HTMLElement.prototype, "attachInternals", {
+    configurable: true,
+    value: function attachInternals(): TestElementInternals {
+      return {
+        checkValidity: () => true,
+        reportValidity: () => true,
+        setFormValue: () => undefined,
+        setValidity: () => undefined,
+        validationMessage: "",
+        validity: validValidityState,
+        willValidate: true
+      };
+    }
+  });
+}
+
+if (!Element.prototype.animate) {
+  Object.defineProperty(Element.prototype, "animate", {
+    configurable: true,
+    value: () =>
+      ({
+        addEventListener: () => undefined,
+        cancel: () => undefined,
+        commitStyles: () => undefined,
+        finish: () => undefined,
+        finished: Promise.resolve(),
+        pause: () => undefined,
+        persist: () => undefined,
+        play: () => undefined,
+        ready: Promise.resolve(),
+        removeEventListener: () => undefined,
+        reverse: () => undefined,
+        updatePlaybackRate: () => undefined
+      }) as unknown as Animation
+  });
+}
+
+// md-dialog (and other Material Web surfaces) observe scrolling/sizing with
+// IntersectionObserver/ResizeObserver, which jsdom does not implement.
+if (!globalThis.IntersectionObserver) {
+  class IntersectionObserverStub {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return [];
+    }
+  }
+  Object.defineProperty(globalThis, "IntersectionObserver", {
+    configurable: true,
+    writable: true,
+    value: IntersectionObserverStub
+  });
+}
+
+if (!globalThis.ResizeObserver) {
+  class ResizeObserverStub {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  Object.defineProperty(globalThis, "ResizeObserver", {
+    configurable: true,
+    writable: true,
+    value: ResizeObserverStub
+  });
+}
+
+if (!globalThis.localStorage) {
+  const store = new Map<string, string>();
+
+  const storage: Storage = {
+    get length() {
+      return store.size;
+    },
+    clear: () => store.clear(),
+    getItem: (key) => store.get(key) ?? null,
+    key: (index) => Array.from(store.keys())[index] ?? null,
+    removeItem: (key) => store.delete(key),
+    setItem: (key, value) => store.set(key, value)
+  };
+
+  Object.defineProperty(globalThis, "localStorage", {
+    configurable: true,
+    value: storage
+  });
+
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: storage
+  });
+}
diff --git a/webui/src/theme/ThemeProvider.test.tsx b/webui/src/theme/ThemeProvider.test.tsx
new file mode 100644
index 00000000..3355f2c4
--- /dev/null
+++ b/webui/src/theme/ThemeProvider.test.tsx
@@ -0,0 +1,109 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  CONSOLE_THEME_STORAGE_KEY,
+  ThemeProvider,
+  useConsoleTheme
+} from "./ThemeProvider";
+
+function ThemeProbe() {
+  const { theme, setTheme, toggleTheme } = useConsoleTheme();
+
+  return (
+    <section>
+      <p data-testid="theme-value">{theme}</p>
+      <button type="button" onClick={() => setTheme("light")}>
+        Set light
+      </button>
+      <button type="button" onClick={toggleTheme}>
+        Toggle
+      </button>
+    </section>
+  );
+}
+
+describe("ThemeProvider", () => {
+  afterEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.removeAttribute("style");
+  });
+
+  it("defaults to the dark theme", () => {
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("theme-value")).toHaveTextContent("dark");
+    expect(document.documentElement).toHaveAttribute("data-theme", "dark");
+  });
+
+  it("switches to light theme", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Set light" }));
+
+    expect(screen.getByTestId("theme-value")).toHaveTextContent("light");
+    expect(document.documentElement).toHaveAttribute("data-theme", "light");
+  });
+
+  it("applies container tokens used by expressive resource cards", () => {
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>
+    );
+
+    expect(document.documentElement.style.getPropertyValue("--mb-color-secondary-container")).not.toBe("");
+    expect(document.documentElement.style.getPropertyValue("--mb-color-on-secondary-container")).not.toBe("");
+    expect(document.documentElement.style.getPropertyValue("--mb-color-tertiary-container")).not.toBe("");
+    expect(document.documentElement.style.getPropertyValue("--mb-color-on-tertiary-container")).not.toBe("");
+    expect(document.documentElement.style.getPropertyValue("--mb-color-error-container")).not.toBe("");
+    expect(document.documentElement.style.getPropertyValue("--mb-color-on-error-container")).not.toBe("");
+  });
+
+  it("persists the selected theme in localStorage", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Toggle" }));
+
+    expect(localStorage.getItem(CONSOLE_THEME_STORAGE_KEY)).toBe("light");
+  });
+
+  it("falls back to dark when localStorage is unavailable", () => {
+    const original = Object.getOwnPropertyDescriptor(window, "localStorage");
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      get() {
+        throw new DOMException("blocked", "SecurityError");
+      }
+    });
+
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("theme-value")).toHaveTextContent("dark");
+
+    if (original) {
+      Object.defineProperty(window, "localStorage", original);
+    }
+  });
+});
diff --git a/webui/src/theme/ThemeProvider.tsx b/webui/src/theme/ThemeProvider.tsx
new file mode 100644
index 00000000..2cde2384
--- /dev/null
+++ b/webui/src/theme/ThemeProvider.tsx
@@ -0,0 +1,80 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { applyThemeTokens, type ConsoleTheme } from "./tokens";
+
+export const CONSOLE_THEME_STORAGE_KEY = "moonbridge.console.theme";
+
+type ConsoleThemeContextValue = {
+  theme: ConsoleTheme;
+  setTheme: (theme: ConsoleTheme) => void;
+  toggleTheme: () => void;
+};
+
+const ConsoleThemeContext = createContext<ConsoleThemeContextValue | undefined>(
+  undefined
+);
+
+function readStoredTheme(): ConsoleTheme {
+  if (typeof window === "undefined") {
+    return "dark";
+  }
+
+  try {
+    if (!window.localStorage) {
+      return "dark";
+    }
+    const stored = window.localStorage.getItem(CONSOLE_THEME_STORAGE_KEY);
+    return stored === "light" || stored === "dark" ? stored : "dark";
+  } catch {
+    return "dark";
+  }
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<ConsoleTheme>(readStoredTheme);
+
+  const setTheme = useCallback((nextTheme: ConsoleTheme) => {
+    setThemeState(nextTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((current) => (current === "dark" ? "light" : "dark"));
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.dataset.theme = theme;
+    applyThemeTokens(theme, root);
+    try {
+      window.localStorage?.setItem(CONSOLE_THEME_STORAGE_KEY, theme);
+    } catch {
+      // Storage may be disabled in hardened browser contexts.
+    }
+  }, [theme]);
+
+  const value = useMemo(
+    () => ({ theme, setTheme, toggleTheme }),
+    [theme, setTheme, toggleTheme]
+  );
+
+  return (
+    <ConsoleThemeContext.Provider value={value}>
+      {children}
+    </ConsoleThemeContext.Provider>
+  );
+}
+
+export function useConsoleTheme(): ConsoleThemeContextValue {
+  const context = useContext(ConsoleThemeContext);
+  if (!context) {
+    throw new Error("useConsoleTheme must be used within ThemeProvider");
+  }
+  return context;
+}
diff --git a/webui/src/theme/motion.ts b/webui/src/theme/motion.ts
new file mode 100644
index 00000000..a9e2c1d4
--- /dev/null
+++ b/webui/src/theme/motion.ts
@@ -0,0 +1,84 @@
+import type { Transition, Variants } from "motion/react";
+
+/**
+ * Material Design 3 Expressive motion-physics tokens, expressed as
+ * framer-`motion` transitions.
+ *
+ * M3 Expressive replaces fixed easing/duration with a spring system:
+ *  - **Spatial** springs animate position, size and shape; they slightly
+ *    overshoot and settle with a gentle bounce.
+ *  - **Effects** springs animate colour and opacity; they never overshoot.
+ *
+ * Each family has three speeds — fast (small components such as switches and
+ * buttons), default (partial-surface motion like the navigation rail) and slow
+ * (full-surface transitions). Stiffness/damping pairs below map the published
+ * M3 Expressive phone tokens to framer-motion's absolute-damping springs.
+ */
+export const springs = {
+  spatialFast: { type: "spring", stiffness: 1400, damping: 50, mass: 1 },
+  spatial: { type: "spring", stiffness: 700, damping: 36, mass: 1 },
+  spatialSlow: { type: "spring", stiffness: 320, damping: 24, mass: 1 },
+  effectsFast: { type: "spring", stiffness: 3800, damping: 120, mass: 1 },
+  effects: { type: "spring", stiffness: 1600, damping: 80, mass: 1 },
+  effectsSlow: { type: "spring", stiffness: 800, damping: 60, mass: 1 }
+} as const satisfies Record<string, Transition>;
+
+/** CSS easing curves matching the M3 standard scheme (for plain transitions). */
+export const easing = {
+  standard: "cubic-bezier(0.2, 0, 0, 1)",
+  standardDecelerate: "cubic-bezier(0, 0, 0, 1)",
+  standardAccelerate: "cubic-bezier(0.3, 0, 1, 1)",
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+  emphasizedDecelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+  emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)"
+} as const;
+
+/** Page/route content enters with an emphasized spatial spring. */
+export const pageMotion = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  transition: { ...springs.spatial, opacity: springs.effects }
+} as const;
+
+/** Cards and panels rise into place with a softer spatial spring. */
+export const surfaceMotion = {
+  initial: { opacity: 0, y: 12 },
+  animate: { opacity: 1, y: 0 },
+  transition: { ...springs.spatial, opacity: springs.effects }
+} as const;
+
+/** Staggered list container — children animate in sequence. */
+export const listContainer: Variants = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.05, delayChildren: 0.02 }
+  }
+};
+
+/** Individual staggered list item. */
+export const listItem: Variants = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { ...springs.spatial, opacity: springs.effects }
+  }
+};
+
+/** Interactive press feedback for buttons / pressable surfaces. */
+export const pressable = {
+  whileHover: { scale: 1.015 },
+  whileTap: { scale: 0.97 },
+  transition: springs.spatialFast
+} as const;
+
+/** Expand / collapse helper for revealing panels (delete confirm, drawers). */
+export const collapse: Variants = {
+  hidden: { opacity: 0, height: 0, y: -4 },
+  show: {
+    opacity: 1,
+    height: "auto",
+    y: 0,
+    transition: { ...springs.spatial, opacity: springs.effectsFast }
+  }
+};
diff --git a/webui/src/theme/tokens.ts b/webui/src/theme/tokens.ts
new file mode 100644
index 00000000..ac642d81
--- /dev/null
+++ b/webui/src/theme/tokens.ts
@@ -0,0 +1,136 @@
+export type ConsoleTheme = "dark" | "light";
+
+export const primarySeed = "#7AA7A2";
+
+type ThemeTokens = Record<string, string>;
+
+/**
+ * Material Design 3 (Expressive) colour roles for the Moon Bridge console.
+ *
+ * Built from the teal primary seed (#7AA7A2) and extended with secondary
+ * (muted teal), tertiary (cool blue), warning (warm amber) and success (green)
+ * families so the UI can establish hierarchy through colour contrast — a core
+ * M3 Expressive tactic. A full surface tonal scale (lowest → highest) supplies
+ * expressive elevation without relying solely on shadows, which matters most in
+ * the dark theme.
+ */
+export const themeTokens: Record<ConsoleTheme, ThemeTokens> = {
+  dark: {
+    // Primary — teal
+    "--mb-color-primary": primarySeed,
+    "--mb-color-on-primary": "#08201d",
+    "--mb-color-primary-container": "#274e4a",
+    "--mb-color-on-primary-container": "#d4f3ee",
+    "--mb-color-primary-fixed": "#c3eae4",
+    "--mb-color-primary-fixed-dim": "#a7cec8",
+    // Secondary — desaturated teal
+    "--mb-color-secondary": "#bbc8c5",
+    "--mb-color-on-secondary": "#253331",
+    "--mb-color-secondary-container": "#3b4947",
+    "--mb-color-on-secondary-container": "#dbe5e2",
+    // Tertiary — cool blue (accents + the "output" data series)
+    "--mb-color-tertiary": "#a7c8e8",
+    "--mb-color-on-tertiary": "#0c2438",
+    "--mb-color-tertiary-container": "#3b4858",
+    "--mb-color-on-tertiary-container": "#d8e4f8",
+    // Warning — warm amber (restart-required / needs-attention)
+    "--mb-color-warning": "#f3c06b",
+    "--mb-color-on-warning": "#412d00",
+    "--mb-color-warning-container": "#5b4300",
+    "--mb-color-on-warning-container": "#ffdfa3",
+    // Success — green (healthy / saved confirmations)
+    "--mb-color-success": "#86d7a8",
+    "--mb-color-on-success": "#003920",
+    "--mb-color-success-container": "#1d5236",
+    "--mb-color-on-success-container": "#a2f4c3",
+    // Error
+    "--mb-color-error": "#ffb4ab",
+    "--mb-color-on-error": "#690005",
+    "--mb-color-error-container": "#93000a",
+    "--mb-color-on-error-container": "#ffdad6",
+    // Surfaces — tonal elevation scale
+    "--mb-color-surface": "#0e1413",
+    "--mb-color-surface-dim": "#0e1413",
+    "--mb-color-surface-bright": "#343b39",
+    "--mb-color-surface-container-lowest": "#090f0e",
+    "--mb-color-surface-container-low": "#161d1b",
+    "--mb-color-surface-container": "#1a2120",
+    "--mb-color-surface-container-high": "#252b2a",
+    "--mb-color-surface-container-highest": "#2f3635",
+    "--mb-color-on-surface": "#e0e3e1",
+    "--mb-color-on-surface-variant": "#bec9c6",
+    // Outline + utility
+    "--mb-color-outline": "#899390",
+    "--mb-color-outline-variant": "#3f4946",
+    "--mb-color-shadow": "#000000",
+    "--mb-color-scrim": "#000000",
+    "--mb-color-inverse-surface": "#e0e3e1",
+    "--mb-color-inverse-on-surface": "#2b3231",
+    "--mb-color-inverse-primary": "#3a615c",
+    "--mb-motion-standard": "180ms cubic-bezier(0.2, 0, 0, 1)"
+  },
+  light: {
+    // Primary — teal
+    "--mb-color-primary": "#406863",
+    "--mb-color-on-primary": "#ffffff",
+    "--mb-color-primary-container": "#c2ebe5",
+    "--mb-color-on-primary-container": "#00201d",
+    "--mb-color-primary-fixed": "#c2ebe5",
+    "--mb-color-primary-fixed-dim": "#a6cfc9",
+    // Secondary
+    "--mb-color-secondary": "#4b6360",
+    "--mb-color-on-secondary": "#ffffff",
+    "--mb-color-secondary-container": "#cde8e3",
+    "--mb-color-on-secondary-container": "#05201d",
+    // Tertiary — cool blue
+    "--mb-color-tertiary": "#41617d",
+    "--mb-color-on-tertiary": "#ffffff",
+    "--mb-color-tertiary-container": "#d4e4f7",
+    "--mb-color-on-tertiary-container": "#101d2b",
+    // Warning — warm amber
+    "--mb-color-warning": "#7c5800",
+    "--mb-color-on-warning": "#ffffff",
+    "--mb-color-warning-container": "#ffdfa3",
+    "--mb-color-on-warning-container": "#271900",
+    // Success — green
+    "--mb-color-success": "#236c47",
+    "--mb-color-on-success": "#ffffff",
+    "--mb-color-success-container": "#a8f4c5",
+    "--mb-color-on-success-container": "#002111",
+    // Error
+    "--mb-color-error": "#ba1a1a",
+    "--mb-color-on-error": "#ffffff",
+    "--mb-color-error-container": "#ffdad6",
+    "--mb-color-on-error-container": "#410002",
+    // Surfaces — tonal elevation scale
+    "--mb-color-surface": "#f4fbf8",
+    "--mb-color-surface-dim": "#d5dbd8",
+    "--mb-color-surface-bright": "#f4fbf8",
+    "--mb-color-surface-container-lowest": "#ffffff",
+    "--mb-color-surface-container-low": "#eef5f1",
+    "--mb-color-surface-container": "#e8efeb",
+    "--mb-color-surface-container-high": "#e2e9e6",
+    "--mb-color-surface-container-highest": "#dde4e0",
+    "--mb-color-on-surface": "#171d1b",
+    "--mb-color-on-surface-variant": "#3f4946",
+    // Outline + utility
+    "--mb-color-outline": "#6f7976",
+    "--mb-color-outline-variant": "#bec9c5",
+    "--mb-color-shadow": "#000000",
+    "--mb-color-scrim": "#000000",
+    "--mb-color-inverse-surface": "#2b3231",
+    "--mb-color-inverse-on-surface": "#eff1ee",
+    "--mb-color-inverse-primary": "#a6cfc9",
+    "--mb-motion-standard": "180ms cubic-bezier(0.2, 0, 0, 1)"
+  }
+};
+
+export function applyThemeTokens(theme: ConsoleTheme, root: HTMLElement): void {
+  Object.entries(themeTokens[theme]).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+    if (name.startsWith("--mb-color-")) {
+      const mdSysName = name.replace("--mb-color-", "--md-sys-color-");
+      root.style.setProperty(mdSysName, value);
+    }
+  });
+}
diff --git a/webui/src/vite-env.d.ts b/webui/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/webui/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/webui/tsconfig.json b/webui/tsconfig.json
new file mode 100644
index 00000000..ef7e5ed6
--- /dev/null
+++ b/webui/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": false,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/webui/tsconfig.node.json b/webui/tsconfig.node.json
new file mode 100644
index 00000000..cbd2a63d
--- /dev/null
+++ b/webui/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
new file mode 100644
index 00000000..7f0cd1c1
--- /dev/null
+++ b/webui/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+const backendTarget = process.env.MOONBRIDGE_CONSOLE_BACKEND ?? "http://127.0.0.1:38440";
+
+export default defineConfig({
+  base: "/console/",
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": backendTarget,
+      "/v1": backendTarget,
+      "/responses": backendTarget,
+      "/models": backendTarget
+    }
+  },
+  test: {
+    environment: "jsdom",
+    environmentOptions: {
+      jsdom: {
+        url: "http://127.0.0.1:5173/console/"
+      }
+    },
+    globals: true,
+    setupFiles: "./src/test/setup.ts"
+  }
+});