{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "console-preferences",
	"title": "Console Preferences and About",
	"description": "A DaisyUI appearance settings page with paired themes, searchable catalog, component previews, display preferences, persistence, and About",
	"dependencies": ["daisyui", "lucide-react"],
	"files": [
		{
			"path": "registry/default/blocks/console-preferences/console-theme.tsx",
			"content": "'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport {\n\tassertConsoleThemeOptions,\n\ttype ConsoleThemeColorScheme,\n\ttype ConsoleThemeOption,\n\tdefaultConsoleThemeOptions,\n} from './console-theme-catalog';\n\nexport type { ConsoleThemeColorScheme, ConsoleThemeOption } from './console-theme-catalog';\nexport { defaultConsoleThemeOptions } from './console-theme-catalog';\n\nexport const DEFAULT_CONSOLE_DISPLAY_SETTINGS_KEY = 'console.display-settings.v1';\nexport const CONSOLE_DISPLAY_SETTINGS_EVENT = 'wener:console-display-settings';\n\nexport type ConsoleDisplayDensity = 'comfortable' | 'compact';\nexport type ConsoleDisplayRadius = 'square' | 'soft' | 'rounded';\nexport type ConsoleMotionPreference = 'system' | 'reduced' | 'full';\nexport type ConsoleThemeMode = 'system' | ConsoleThemeColorScheme;\n\nexport type ConsoleDisplaySettings = {\n\tthemeMode: ConsoleThemeMode;\n\tlightTheme: string;\n\tdarkTheme: string;\n\tdensity: ConsoleDisplayDensity;\n\tradius: ConsoleDisplayRadius;\n\tmotion: ConsoleMotionPreference;\n};\n\nexport type ConsoleDisplaySettingsEventDetail = {\n\tstorageKey: string;\n\tsettings: ConsoleDisplaySettings;\n};\n\nexport type ResolvedConsoleTheme = {\n\ttheme: string;\n\tcolorScheme: ConsoleThemeColorScheme;\n\toption: ConsoleThemeOption;\n};\n\nexport const defaultConsoleDisplaySettings: ConsoleDisplaySettings = {\n\tthemeMode: 'system',\n\tlightTheme: 'wener',\n\tdarkTheme: 'dark',\n\tdensity: 'comfortable',\n\tradius: 'soft',\n\tmotion: 'system',\n};\n\nexport function getDefaultConsoleDisplaySettings(\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n): ConsoleDisplaySettings {\n\tconst defaults = getConsoleThemeDefaults(themeOptions);\n\treturn {\n\t\t...defaultConsoleDisplaySettings,\n\t\tlightTheme: defaults.light.value,\n\t\tdarkTheme: defaults.dark.value,\n\t};\n}\n\nexport type ConsoleThemeControllerProps = {\n\tstorageKey?: string;\n\tthemeOptions?: readonly ConsoleThemeOption[];\n};\n\nexport function ConsoleThemeController({\n\tstorageKey = DEFAULT_CONSOLE_DISPLAY_SETTINGS_KEY,\n\tthemeOptions = defaultConsoleThemeOptions,\n}: ConsoleThemeControllerProps) {\n\tassertConsoleThemeOptions(themeOptions);\n\tuseEffect(() => {\n\t\tconst colorMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\t\tconst motionMedia = window.matchMedia('(prefers-reduced-motion: reduce)');\n\t\tconst apply = () => applyConsoleDisplaySettings(loadConsoleDisplaySettings(storageKey, themeOptions), themeOptions);\n\t\tconst onStorage = (event: StorageEvent) => {\n\t\t\tif (event.key === storageKey) apply();\n\t\t};\n\t\tconst onSettings = (event: Event) => {\n\t\t\tconst detail = (event as CustomEvent<ConsoleDisplaySettingsEventDetail>).detail;\n\t\t\tif (detail?.storageKey === storageKey) applyConsoleDisplaySettings(detail.settings, themeOptions);\n\t\t};\n\t\tapply();\n\t\tcolorMedia.addEventListener('change', apply);\n\t\tmotionMedia.addEventListener('change', apply);\n\t\twindow.addEventListener('storage', onStorage);\n\t\twindow.addEventListener(CONSOLE_DISPLAY_SETTINGS_EVENT, onSettings);\n\t\treturn () => {\n\t\t\tcolorMedia.removeEventListener('change', apply);\n\t\t\tmotionMedia.removeEventListener('change', apply);\n\t\t\twindow.removeEventListener('storage', onStorage);\n\t\t\twindow.removeEventListener(CONSOLE_DISPLAY_SETTINGS_EVENT, onSettings);\n\t\t};\n\t}, [storageKey, themeOptions]);\n\treturn null;\n}\n\nexport function useConsoleDisplaySettings({\n\tstorageKey = DEFAULT_CONSOLE_DISPLAY_SETTINGS_KEY,\n\tthemeOptions = defaultConsoleThemeOptions,\n}: ConsoleThemeControllerProps = {}) {\n\tconst [settings, setSettings] = useState<ConsoleDisplaySettings>(() =>\n\t\tgetDefaultConsoleDisplaySettings(themeOptions),\n\t);\n\tconst settingsRef = useRef(settings);\n\tconst systemDark = useSyncExternalStore(\n\t\tsubscribeConsoleSystemColorScheme,\n\t\tgetConsoleSystemPrefersDark,\n\t\tgetConsoleServerPrefersDark,\n\t);\n\tconst systemReducedMotion = useSyncExternalStore(\n\t\tsubscribeConsoleSystemReducedMotion,\n\t\tgetConsoleSystemPrefersReducedMotion,\n\t\tgetConsoleServerPrefersReducedMotion,\n\t);\n\n\tuseEffect(() => {\n\t\tconst sync = () => {\n\t\t\tconst next = loadConsoleDisplaySettings(storageKey, themeOptions);\n\t\t\tsettingsRef.current = next;\n\t\t\tsetSettings(next);\n\t\t\tapplyConsoleDisplaySettings(next, themeOptions);\n\t\t};\n\t\tconst onStorage = (event: StorageEvent) => {\n\t\t\tif (event.key === storageKey) sync();\n\t\t};\n\t\tconst onSettings = (event: Event) => {\n\t\t\tconst detail = (event as CustomEvent<ConsoleDisplaySettingsEventDetail>).detail;\n\t\t\tif (detail?.storageKey !== storageKey) return;\n\t\t\tconst next = normalizeConsoleDisplaySettings(detail.settings, themeOptions);\n\t\t\tsettingsRef.current = next;\n\t\t\tsetSettings(next);\n\t\t\tapplyConsoleDisplaySettings(next, themeOptions);\n\t\t};\n\t\tsync();\n\t\twindow.addEventListener('storage', onStorage);\n\t\twindow.addEventListener(CONSOLE_DISPLAY_SETTINGS_EVENT, onSettings);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('storage', onStorage);\n\t\t\twindow.removeEventListener(CONSOLE_DISPLAY_SETTINGS_EVENT, onSettings);\n\t\t};\n\t}, [storageKey, themeOptions]);\n\n\tuseEffect(() => {\n\t\tapplyConsoleDisplaySettings(settingsRef.current, themeOptions);\n\t}, [systemDark, systemReducedMotion, themeOptions]);\n\n\tconst replace = useCallback(\n\t\t(next: ConsoleDisplaySettings) => {\n\t\t\tconst normalized = normalizeConsoleDisplaySettings(next, themeOptions);\n\t\t\tsettingsRef.current = normalized;\n\t\t\tsetSettings(normalized);\n\t\t\tsaveConsoleDisplaySettings(normalized, storageKey, themeOptions);\n\t\t\tapplyConsoleDisplaySettings(normalized, themeOptions);\n\t\t},\n\t\t[storageKey, themeOptions],\n\t);\n\n\tconst update = useCallback(\n\t\t(patch: Partial<ConsoleDisplaySettings>) =>\n\t\t\treplace(patchConsoleDisplaySettings(settingsRef.current, patch, themeOptions)),\n\t\t[replace, themeOptions],\n\t);\n\n\tconst reset = useCallback(() => replace(getDefaultConsoleDisplaySettings(themeOptions)), [replace, themeOptions]);\n\tconst resolvedTheme = useMemo(\n\t\t() => resolveConsoleTheme(settings, themeOptions, systemDark),\n\t\t[settings, systemDark, themeOptions],\n\t);\n\tconst motionReduced = resolveConsoleMotion(settings, systemReducedMotion);\n\treturn { settings, systemDark, systemReducedMotion, motionReduced, resolvedTheme, update, reset } as const;\n}\n\nexport function normalizeConsoleDisplaySettings(\n\tinput?: unknown,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n): ConsoleDisplaySettings {\n\tconst defaults = getConsoleThemeDefaults(themeOptions);\n\tconst value = isRecord(input) ? input : {};\n\tconst legacyTheme = typeof value.theme === 'string' && value.theme ? value.theme : undefined;\n\tlet themeMode: ConsoleThemeMode =\n\t\tvalue.themeMode === 'light' || value.themeMode === 'dark' || value.themeMode === 'system'\n\t\t\t? value.themeMode\n\t\t\t: 'system';\n\tlet lightTheme = typeof value.lightTheme === 'string' && value.lightTheme ? value.lightTheme : undefined;\n\tlet darkTheme = typeof value.darkTheme === 'string' && value.darkTheme ? value.darkTheme : undefined;\n\n\tif (!('themeMode' in value) && legacyTheme) {\n\t\tif (legacyTheme === 'system') {\n\t\t\tthemeMode = 'system';\n\t\t} else {\n\t\t\tconst legacyOption =\n\t\t\t\tthemeOptions.find((option) => option.value === legacyTheme) ??\n\t\t\t\tdefaultConsoleThemeOptions.find((option) => option.value === legacyTheme);\n\t\t\tthemeMode = legacyOption?.colorScheme ?? 'light';\n\t\t\tif (themeMode === 'dark') darkTheme = legacyTheme;\n\t\t\telse lightTheme = legacyTheme;\n\t\t}\n\t}\n\n\treturn {\n\t\tthemeMode,\n\t\tlightTheme: normalizeThemeSlot(lightTheme, 'light', defaults.light, themeOptions),\n\t\tdarkTheme: normalizeThemeSlot(darkTheme, 'dark', defaults.dark, themeOptions),\n\t\tdensity: value.density === 'compact' ? 'compact' : 'comfortable',\n\t\tradius: value.radius === 'square' || value.radius === 'rounded' ? value.radius : 'soft',\n\t\tmotion:\n\t\t\tvalue.motion === 'reduced' || value.motion === 'full' || value.motion === 'system'\n\t\t\t\t? value.motion\n\t\t\t\t: 'reducedMotion' in value\n\t\t\t\t\t? value.reducedMotion === true\n\t\t\t\t\t\t? 'reduced'\n\t\t\t\t\t\t: 'full'\n\t\t\t\t\t: 'system',\n\t};\n}\n\nexport function patchConsoleDisplaySettings(\n\tsettings: ConsoleDisplaySettings,\n\tpatch: Partial<ConsoleDisplaySettings>,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n) {\n\treturn normalizeConsoleDisplaySettings({ ...settings, ...patch }, themeOptions);\n}\n\nexport function resolveConsoleTheme(\n\tsettings: ConsoleDisplaySettings,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n\tsystemDark = getConsoleSystemPrefersDark(),\n): ResolvedConsoleTheme {\n\tconst normalized = normalizeConsoleDisplaySettings(settings, themeOptions);\n\tconst colorScheme: ConsoleThemeColorScheme =\n\t\tnormalized.themeMode === 'system' ? (systemDark ? 'dark' : 'light') : normalized.themeMode;\n\tconst requestedTheme = colorScheme === 'dark' ? normalized.darkTheme : normalized.lightTheme;\n\tconst defaults = getConsoleThemeDefaults(themeOptions);\n\tconst fallback = colorScheme === 'dark' ? defaults.dark : defaults.light;\n\tconst listedOption = themeOptions.find((theme) => theme.value === requestedTheme);\n\tconst option =\n\t\tlistedOption?.colorScheme === colorScheme\n\t\t\t? listedOption\n\t\t\t: listedOption\n\t\t\t\t? fallback\n\t\t\t\t: ({\n\t\t\t\t\t\tvalue: requestedTheme,\n\t\t\t\t\t\tlabel: requestedTheme,\n\t\t\t\t\t\tcolorScheme,\n\t\t\t\t\t\tdescription: '自定义主题',\n\t\t\t\t\t} satisfies ConsoleThemeOption);\n\treturn { theme: option.value, colorScheme: option.colorScheme, option };\n}\n\nexport function getConsoleSystemPrefersDark() {\n\treturn getConsoleMediaPreference('(prefers-color-scheme: dark)');\n}\n\nexport function getConsoleSystemPrefersReducedMotion() {\n\treturn getConsoleMediaPreference('(prefers-reduced-motion: reduce)');\n}\n\nexport function resolveConsoleMotion(\n\tsettings: Pick<ConsoleDisplaySettings, 'motion'>,\n\tsystemReducedMotion = getConsoleSystemPrefersReducedMotion(),\n) {\n\treturn settings.motion === 'system' ? systemReducedMotion : settings.motion === 'reduced';\n}\n\nfunction getConsoleServerPrefersDark() {\n\treturn false;\n}\n\nfunction getConsoleServerPrefersReducedMotion() {\n\treturn false;\n}\n\nfunction subscribeConsoleSystemColorScheme(onChange: () => void) {\n\treturn subscribeConsoleMediaPreference('(prefers-color-scheme: dark)', onChange);\n}\n\nfunction subscribeConsoleSystemReducedMotion(onChange: () => void) {\n\treturn subscribeConsoleMediaPreference('(prefers-reduced-motion: reduce)', onChange);\n}\n\nfunction getConsoleMediaPreference(query: string) {\n\treturn typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(query).matches;\n}\n\nfunction subscribeConsoleMediaPreference(query: string, onChange: () => void) {\n\tif (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return () => undefined;\n\tconst media = window.matchMedia(query);\n\tmedia.addEventListener('change', onChange);\n\treturn () => media.removeEventListener('change', onChange);\n}\n\nexport function loadConsoleDisplaySettings(\n\tstorageKey = DEFAULT_CONSOLE_DISPLAY_SETTINGS_KEY,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n): ConsoleDisplaySettings {\n\tconst defaults = getDefaultConsoleDisplaySettings(themeOptions);\n\tif (typeof window === 'undefined') return defaults;\n\ttry {\n\t\tconst raw = window.localStorage.getItem(storageKey);\n\t\tif (!raw) return defaults;\n\t\tconst parsed = JSON.parse(raw);\n\t\tconst normalized = normalizeConsoleDisplaySettings(parsed, themeOptions);\n\t\tconst canonical = JSON.stringify(normalized);\n\t\tif (!isCanonicalConsoleDisplaySettings(parsed) || JSON.stringify(parsed) !== canonical) {\n\t\t\ttry {\n\t\t\t\twindow.localStorage.setItem(storageKey, canonical);\n\t\t\t} catch {\n\t\t\t\t// Parsed settings remain usable when migration cannot be persisted.\n\t\t\t}\n\t\t}\n\t\treturn normalized;\n\t} catch {\n\t\treturn defaults;\n\t}\n}\n\nexport function saveConsoleDisplaySettings(\n\tsettings: ConsoleDisplaySettings,\n\tstorageKey = DEFAULT_CONSOLE_DISPLAY_SETTINGS_KEY,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n) {\n\tif (typeof window === 'undefined') return;\n\tconst normalized = normalizeConsoleDisplaySettings(settings, themeOptions);\n\ttry {\n\t\twindow.localStorage.setItem(storageKey, JSON.stringify(normalized));\n\t} catch {\n\t\t// Keep the current document reactive when storage is unavailable.\n\t}\n\twindow.dispatchEvent(\n\t\tnew CustomEvent<ConsoleDisplaySettingsEventDetail>(CONSOLE_DISPLAY_SETTINGS_EVENT, {\n\t\t\tdetail: { storageKey, settings: normalized },\n\t\t}),\n\t);\n}\n\nexport function applyConsoleDisplaySettings(\n\tsettings: ConsoleDisplaySettings,\n\tthemeOptions: readonly ConsoleThemeOption[] = defaultConsoleThemeOptions,\n\troot: HTMLElement | undefined = typeof document === 'undefined' ? undefined : document.documentElement,\n): ResolvedConsoleTheme {\n\tconst normalized = normalizeConsoleDisplaySettings(settings, themeOptions);\n\tconst resolved = resolveConsoleTheme(normalized, themeOptions);\n\tif (!root) return resolved;\n\n\troot.dataset.theme = resolved.theme;\n\troot.dataset.themeMode = normalized.themeMode;\n\troot.dataset.themePreference = normalized.themeMode;\n\troot.dataset.lightTheme = normalized.lightTheme;\n\troot.dataset.darkTheme = normalized.darkTheme;\n\troot.dataset.colorMode = resolved.colorScheme;\n\troot.dataset.density = normalized.density;\n\troot.dataset.radius = normalized.radius;\n\troot.dataset.motionPreference = normalized.motion;\n\troot.dataset.motion = resolveConsoleMotion(normalized) ? 'reduced' : 'normal';\n\troot.classList.toggle('dark', resolved.colorScheme === 'dark');\n\troot.style.colorScheme = resolved.colorScheme;\n\treturn resolved;\n}\n\nfunction getConsoleThemeDefaults(themeOptions: readonly ConsoleThemeOption[]) {\n\tassertConsoleThemeOptions(themeOptions);\n\tconst light = themeOptions.find((theme) => theme.colorScheme === 'light');\n\tconst dark = themeOptions.find((theme) => theme.colorScheme === 'dark');\n\tif (!light || !dark) throw new Error('Console theme option validation failed.');\n\treturn { light, dark };\n}\n\nfunction normalizeThemeSlot(\n\tvalue: string | undefined,\n\tcolorScheme: ConsoleThemeColorScheme,\n\tfallback: ConsoleThemeOption,\n\tthemeOptions: readonly ConsoleThemeOption[],\n) {\n\tif (!value) return fallback.value;\n\tconst listedOption = themeOptions.find((theme) => theme.value === value);\n\tif (listedOption) return listedOption.colorScheme === colorScheme ? value : fallback.value;\n\tconst builtInOption = defaultConsoleThemeOptions.find((theme) => theme.value === value);\n\treturn builtInOption ? fallback.value : value;\n}\n\nfunction isCanonicalConsoleDisplaySettings(value: unknown): value is ConsoleDisplaySettings {\n\tif (!isRecord(value)) return false;\n\treturn (\n\t\t(value.themeMode === 'system' || value.themeMode === 'light' || value.themeMode === 'dark') &&\n\t\ttypeof value.lightTheme === 'string' &&\n\t\ttypeof value.darkTheme === 'string' &&\n\t\t(value.density === 'comfortable' || value.density === 'compact') &&\n\t\t(value.radius === 'square' || value.radius === 'soft' || value.radius === 'rounded') &&\n\t\t(value.motion === 'system' || value.motion === 'reduced' || value.motion === 'full')\n\t);\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n\treturn typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-theme.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-theme-catalog.ts",
			"content": "export type ConsoleThemeColorScheme = 'light' | 'dark';\n\nexport type ConsoleThemeOption = {\n\tvalue: string;\n\tlabel: string;\n\tcolorScheme: ConsoleThemeColorScheme;\n\tdescription?: string;\n};\n\nexport const defaultConsoleThemeOptions = [\n\t{ value: 'wener', label: 'Wener', colorScheme: 'light', description: '清晰的青蓝工作界面' },\n\t{ value: 'light', label: '亮色', colorScheme: 'light' },\n\t{ value: 'dark', label: '暗色', colorScheme: 'dark' },\n\t{ value: 'cupcake', label: '杯子蛋糕', colorScheme: 'light' },\n\t{ value: 'bumblebee', label: '大黄蜂', colorScheme: 'light' },\n\t{ value: 'emerald', label: '绿宝石', colorScheme: 'light' },\n\t{ value: 'corporate', label: '企业', colorScheme: 'light' },\n\t{ value: 'synthwave', label: '合成波', colorScheme: 'dark' },\n\t{ value: 'retro', label: '复古', colorScheme: 'light' },\n\t{ value: 'cyberpunk', label: '赛博朋克', colorScheme: 'light' },\n\t{ value: 'valentine', label: '情人节', colorScheme: 'light' },\n\t{ value: 'halloween', label: '万圣节', colorScheme: 'dark' },\n\t{ value: 'garden', label: '花园', colorScheme: 'light' },\n\t{ value: 'forest', label: '森林', colorScheme: 'dark' },\n\t{ value: 'aqua', label: '水色', colorScheme: 'dark' },\n\t{ value: 'lofi', label: '低保真', colorScheme: 'light' },\n\t{ value: 'pastel', label: '粉彩', colorScheme: 'light' },\n\t{ value: 'fantasy', label: '幻想', colorScheme: 'light' },\n\t{ value: 'wireframe', label: '线框', colorScheme: 'light' },\n\t{ value: 'black', label: '黑色', colorScheme: 'dark' },\n\t{ value: 'luxury', label: '奢华', colorScheme: 'dark' },\n\t{ value: 'dracula', label: '德古拉', colorScheme: 'dark' },\n\t{ value: 'cmyk', label: 'CMYK', colorScheme: 'light' },\n\t{ value: 'autumn', label: '秋天', colorScheme: 'light' },\n\t{ value: 'business', label: '商务', colorScheme: 'dark' },\n\t{ value: 'acid', label: '酸性', colorScheme: 'light' },\n\t{ value: 'lemonade', label: '柠檬汽水', colorScheme: 'light' },\n\t{ value: 'night', label: '夜晚', colorScheme: 'dark' },\n\t{ value: 'coffee', label: '咖啡', colorScheme: 'dark' },\n\t{ value: 'winter', label: '冬天', colorScheme: 'light' },\n\t{ value: 'dim', label: '暗淡', colorScheme: 'dark' },\n\t{ value: 'nord', label: '北欧', colorScheme: 'light' },\n\t{ value: 'sunset', label: '日落', colorScheme: 'dark' },\n\t{ value: 'caramellatte', label: '焦糖拿铁', colorScheme: 'light' },\n\t{ value: 'abyss', label: '深渊', colorScheme: 'dark' },\n\t{ value: 'silk', label: '丝绸', colorScheme: 'light' },\n] as const satisfies readonly ConsoleThemeOption[];\n\nexport function getConsoleThemesByColorScheme(\n\tthemeOptions: readonly ConsoleThemeOption[],\n\tcolorScheme: ConsoleThemeColorScheme,\n) {\n\treturn themeOptions.filter((theme) => theme.colorScheme === colorScheme);\n}\n\nexport function filterConsoleThemeOptions(themeOptions: readonly ConsoleThemeOption[], query: string) {\n\tconst normalizedQuery = query.trim().toLocaleLowerCase();\n\tif (!normalizedQuery) return [...themeOptions];\n\treturn themeOptions.filter((theme) =>\n\t\t[theme.label, theme.value, theme.description]\n\t\t\t.filter((value): value is string => Boolean(value))\n\t\t\t.some((value) => value.toLocaleLowerCase().includes(normalizedQuery)),\n\t);\n}\n\nexport function assertConsoleThemeOptions(themeOptions: readonly ConsoleThemeOption[]) {\n\tconst values = new Set<string>();\n\tfor (const theme of themeOptions) {\n\t\tif (values.has(theme.value)) {\n\t\t\tthrow new Error(`Console theme options must use unique values; found duplicate \"${theme.value}\".`);\n\t\t}\n\t\tvalues.add(theme.value);\n\t}\n\tif (!themeOptions.some((theme) => theme.colorScheme === 'light')) {\n\t\tthrow new Error('Console theme options must include at least one light theme.');\n\t}\n\tif (!themeOptions.some((theme) => theme.colorScheme === 'dark')) {\n\t\tthrow new Error('Console theme options must include at least one dark theme.');\n\t}\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-theme-catalog.ts"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-theme-preview.tsx",
			"content": "'use client';\n\nimport { Bell, Check, Command, Database, LayoutGrid, Moon, PanelRight, Search, Settings, Sun } from 'lucide-react';\nimport type { ComponentPropsWithRef, CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport type { ConsoleDisplayDensity, ConsoleDisplayRadius } from './console-theme';\nimport type { ConsoleThemeOption } from './console-theme-catalog';\n\ntype ConsoleThemePreviewStyle = CSSProperties & {\n\t'--radius-box'?: string;\n\t'--radius-field'?: string;\n\t'--radius-selector'?: string;\n};\n\nconst consoleThemePreviewRadiusStyle: Record<ConsoleDisplayRadius, ConsoleThemePreviewStyle> = {\n\tsquare: {\n\t\t'--radius-box': '0.125rem',\n\t\t'--radius-field': '0.125rem',\n\t\t'--radius-selector': '0.125rem',\n\t},\n\tsoft: {\n\t\t'--radius-box': '0.5rem',\n\t\t'--radius-field': '0.25rem',\n\t\t'--radius-selector': '0.5rem',\n\t},\n\trounded: {\n\t\t'--radius-box': '0.75rem',\n\t\t'--radius-field': '0.5rem',\n\t\t'--radius-selector': '0.75rem',\n\t},\n};\n\nexport function getConsoleThemePreviewStyle(radius: ConsoleDisplayRadius, style?: CSSProperties) {\n\treturn { ...consoleThemePreviewRadiusStyle[radius], ...style } satisfies ConsoleThemePreviewStyle;\n}\n\nexport type ConsoleThemePreviewCardProps = Omit<ComponentPropsWithRef<'label'>, 'onChange' | 'onSelect'> & {\n\ttheme: ConsoleThemeOption;\n\tselected?: boolean;\n\tname?: string;\n\tonThemeSelect?: (theme: ConsoleThemeOption) => void;\n};\n\nexport function ConsoleThemePreviewCard({\n\ttheme,\n\tselected,\n\tname = 'console-theme',\n\tonThemeSelect,\n\tclassName,\n\t...props\n}: ConsoleThemePreviewCardProps) {\n\treturn (\n\t\t<label\n\t\t\tdata-theme={theme.value}\n\t\t\tclassName={cn(\n\t\t\t\t'bg-base-100 text-base-content relative block min-w-0 cursor-pointer overflow-hidden border text-left outline-none',\n\t\t\t\t'hover:border-primary focus-within:ring-primary rounded-md transition-colors focus-within:ring-2',\n\t\t\t\tselected ? 'border-primary ring-primary/35 ring-1' : 'border-base-300',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<input\n\t\t\t\ttype='radio'\n\t\t\t\tname={name}\n\t\t\t\tvalue={theme.value}\n\t\t\t\tchecked={selected}\n\t\t\t\tclassName='sr-only'\n\t\t\t\taria-label={`选择 ${theme.label} 主题`}\n\t\t\t\tonChange={() => onThemeSelect?.(theme)}\n\t\t\t/>\n\t\t\t<span className='border-base-300 flex min-h-9 items-center gap-2 border-b px-2.5 py-1.5'>\n\t\t\t\t<span className='min-w-0 flex-1'>\n\t\t\t\t\t<span className='block truncate text-xs font-semibold'>{theme.label}</span>\n\t\t\t\t\t<span className='text-base-content block truncate text-[10px]'>{theme.value}</span>\n\t\t\t\t</span>\n\t\t\t\t<span className='badge badge-ghost badge-xs'>{theme.colorScheme === 'dark' ? 'Dark' : 'Light'}</span>\n\t\t\t\t{selected ? <Check className='text-primary size-3.5 shrink-0' /> : null}\n\t\t\t</span>\n\t\t\t<span aria-hidden='true' className='bg-base-200 grid min-h-28 grid-cols-[2.25rem_minmax(0,1fr)]'>\n\t\t\t\t<span className='bg-base-300 flex flex-col items-center gap-1.5 p-1.5' aria-hidden>\n\t\t\t\t\t<span className='bg-primary size-4 rounded-sm' />\n\t\t\t\t\t<span className='bg-secondary size-4 rounded-sm' />\n\t\t\t\t\t<span className='bg-accent size-4 rounded-sm' />\n\t\t\t\t</span>\n\t\t\t\t<span className='bg-base-100 flex min-w-0 flex-col gap-2 p-2'>\n\t\t\t\t\t<span className='flex items-center gap-1.5'>\n\t\t\t\t\t\t<span className='btn btn-primary btn-xs pointer-events-none h-6 min-h-6 px-2 text-[9px]'>主要</span>\n\t\t\t\t\t\t<span className='badge badge-success badge-xs'>正常</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className='input input-xs border-base-300 pointer-events-none flex h-7 min-h-7 w-full items-center text-[9px]'>\n\t\t\t\t\t\t搜索资源\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className='flex items-center gap-2'>\n\t\t\t\t\t\t<progress className='progress progress-primary h-1.5 min-w-0 flex-1' value='68' max='100' />\n\t\t\t\t\t\t<span aria-hidden className='border-primary bg-primary relative h-4 w-7 shrink-0 rounded-full border'>\n\t\t\t\t\t\t\t<span className='bg-primary-content absolute top-0.5 right-0.5 size-2.5 rounded-full' />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</label>\n\t);\n}\n\nexport type ConsoleThemeDemoProps = ComponentPropsWithRef<'div'> & {\n\ttheme: ConsoleThemeOption;\n\tdensity?: ConsoleDisplayDensity;\n\tradius?: ConsoleDisplayRadius;\n};\n\nexport function ConsoleThemeDemo({\n\ttheme,\n\tdensity = 'comfortable',\n\tradius = 'soft',\n\tclassName,\n\tstyle,\n\t...props\n}: ConsoleThemeDemoProps) {\n\tconst compact = density === 'compact';\n\treturn (\n\t\t<div\n\t\t\tinert\n\t\t\taria-hidden='true'\n\t\t\tdata-slot='console-theme-demo'\n\t\t\tdata-theme={theme.value}\n\t\t\tdata-density={density}\n\t\t\tdata-radius={radius}\n\t\t\tclassName={cn(\n\t\t\t\t'border-base-300 bg-base-200 text-base-content grid grid-cols-[2.25rem_minmax(0,1fr)_2.75rem] overflow-hidden rounded-md border shadow-sm',\n\t\t\t\tcompact ? 'min-h-64' : 'min-h-72',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={getConsoleThemePreviewStyle(radius, style)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<nav\n\t\t\t\taria-label='主题预览全局导航'\n\t\t\t\tclassName='border-base-300 bg-base-100 flex flex-col items-center gap-1 border-r py-2'\n\t\t\t>\n\t\t\t\t<span className='bg-neutral text-neutral-content grid size-7 place-items-center rounded-sm'>\n\t\t\t\t\t<Command className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t\t<span className='bg-base-200 text-base-content grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t<LayoutGrid className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t\t<span className='text-primary grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t<Database className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t</nav>\n\n\t\t\t<div className='flex min-w-0 flex-col'>\n\t\t\t\t<header\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'border-base-300 bg-base-100 flex shrink-0 items-center gap-2 border-b px-2.5',\n\t\t\t\t\t\tcompact ? 'h-9' : 'h-11',\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span className='min-w-0 flex-1 truncate text-xs font-semibold'>资源目录</span>\n\t\t\t\t\t<span className='badge badge-ghost badge-xs'>{density === 'compact' ? 'Compact' : 'Comfortable'}</span>\n\t\t\t\t</header>\n\t\t\t\t<div className={cn('flex min-h-0 flex-1 flex-col', compact ? 'gap-1.5 p-2' : 'gap-2 p-2.5')}>\n\t\t\t\t\t<div className='flex items-center gap-2'>\n\t\t\t\t\t\t<span className='min-w-0 flex-1 truncate text-[11px] font-semibold'>{theme.label}</span>\n\t\t\t\t\t\t<span className='badge badge-primary badge-xs'>{theme.value}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='join flex w-full'>\n\t\t\t\t\t\t<label className='input input-xs join-item flex min-w-0 flex-1 items-center gap-1.5'>\n\t\t\t\t\t\t\t<Search className='size-3 shrink-0' />\n\t\t\t\t\t\t\t<input className='min-w-0' aria-label='主题预览搜索' placeholder='搜索资源' readOnly />\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<button type='button' className='btn btn-primary btn-xs join-item px-2'>\n\t\t\t\t\t\t\t查询\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='border-base-300 bg-base-100 divide-base-300 divide-y overflow-hidden rounded-sm border'>\n\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t['core-postgres', '正常', 'badge-success'],\n\t\t\t\t\t\t\t['session-cache', '正常', 'badge-success'],\n\t\t\t\t\t\t\t['audit-archive', '关注', 'badge-warning'],\n\t\t\t\t\t\t].map(([label, value, badge]) => (\n\t\t\t\t\t\t\t<div key={label} className='flex min-w-0 items-center gap-1.5 px-2 py-1.5 text-[10px]'>\n\t\t\t\t\t\t\t\t<span className='min-w-0 flex-1 truncate'>{label}</span>\n\t\t\t\t\t\t\t\t<span className={cn('badge badge-xs', badge)}>{value}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='mt-auto flex items-center gap-2'>\n\t\t\t\t\t\t<progress className='progress progress-primary h-1.5 min-w-0 flex-1' value='72' max='100' />\n\t\t\t\t\t\t<span className='text-base-content text-[10px]'>72%</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<aside\n\t\t\t\taria-label='主题预览工具坞'\n\t\t\t\tclassName='border-base-300 bg-base-100 flex flex-col items-center gap-1 border-l py-2'\n\t\t\t>\n\t\t\t\t<span className='avatar placeholder relative mb-1' title='Wener'>\n\t\t\t\t\t<span className='bg-neutral text-neutral-content grid size-7 place-items-center rounded-full text-[9px] font-semibold'>\n\t\t\t\t\t\tWN\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className='border-base-100 bg-success absolute right-0 bottom-0 size-2 rounded-full border' />\n\t\t\t\t</span>\n\t\t\t\t<span className='bg-base-200 grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t<PanelRight className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t\t<span className='grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t<Bell className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t\t<span className='flex-1' />\n\t\t\t\t<span className='grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t<Settings className='size-3.5' />\n\t\t\t\t</span>\n\t\t\t\t<span className='bg-primary text-primary-content grid size-7 place-items-center rounded-sm' aria-hidden>\n\t\t\t\t\t{theme.colorScheme === 'dark' ? <Moon className='size-3.5' /> : <Sun className='size-3.5' />}\n\t\t\t\t</span>\n\t\t\t</aside>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-theme-preview.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-theme-component-preview.tsx",
			"content": "'use client';\n\nimport { AlertTriangle, CheckCircle2, Info } from 'lucide-react';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useId } from 'react';\nimport { cn } from '@/lib/utils';\nimport type { ConsoleDisplayDensity, ConsoleDisplayRadius } from './console-theme';\nimport type { ConsoleThemeOption } from './console-theme-catalog';\nimport { getConsoleThemePreviewStyle } from './console-theme-preview';\n\nexport type ConsoleThemePreviewSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ConsoleThemePreviewTone =\n\t| 'neutral'\n\t| 'primary'\n\t| 'secondary'\n\t| 'accent'\n\t| 'info'\n\t| 'success'\n\t| 'warning'\n\t| 'error';\n\nconst sizeOptions: Array<{ value: ConsoleThemePreviewSize; label: string }> = [\n\t{ value: 'xs', label: 'XS' },\n\t{ value: 'sm', label: 'SM' },\n\t{ value: 'md', label: 'MD' },\n\t{ value: 'lg', label: 'LG' },\n];\n\nconst toneOptions: Array<{ value: ConsoleThemePreviewTone; label: string }> = [\n\t{ value: 'neutral', label: 'Neutral' },\n\t{ value: 'primary', label: 'Primary' },\n\t{ value: 'secondary', label: 'Secondary' },\n\t{ value: 'accent', label: 'Accent' },\n\t{ value: 'info', label: 'Info' },\n\t{ value: 'success', label: 'Success' },\n\t{ value: 'warning', label: 'Warning' },\n\t{ value: 'error', label: 'Error' },\n];\n\nconst previewSizeClass: Record<\n\tConsoleThemePreviewSize,\n\t{ button: string; badge: string; input: string; checkbox: string; radio: string; toggle: string }\n> = {\n\txs: {\n\t\tbutton: 'btn-xs',\n\t\tbadge: 'badge-xs',\n\t\tinput: 'input-xs',\n\t\tcheckbox: 'checkbox-xs',\n\t\tradio: 'radio-xs',\n\t\ttoggle: 'toggle-xs',\n\t},\n\tsm: {\n\t\tbutton: 'btn-sm',\n\t\tbadge: 'badge-sm',\n\t\tinput: 'input-sm',\n\t\tcheckbox: 'checkbox-sm',\n\t\tradio: 'radio-sm',\n\t\ttoggle: 'toggle-sm',\n\t},\n\tmd: {\n\t\tbutton: 'btn-md',\n\t\tbadge: 'badge-md',\n\t\tinput: 'input-md',\n\t\tcheckbox: 'checkbox-md',\n\t\tradio: 'radio-md',\n\t\ttoggle: 'toggle-md',\n\t},\n\tlg: {\n\t\tbutton: 'btn-lg',\n\t\tbadge: 'badge-lg',\n\t\tinput: 'input-lg',\n\t\tcheckbox: 'checkbox-lg',\n\t\tradio: 'radio-lg',\n\t\ttoggle: 'toggle-lg',\n\t},\n};\n\nconst previewToneClass: Record<\n\tConsoleThemePreviewTone,\n\t{ button: string; badge: string; checkbox: string; radio: string; toggle: string; progress: string }\n> = {\n\tneutral: {\n\t\tbutton: 'btn-neutral',\n\t\tbadge: 'badge-neutral',\n\t\tcheckbox: 'checkbox-neutral',\n\t\tradio: 'radio-neutral',\n\t\ttoggle: 'toggle-neutral',\n\t\tprogress: 'progress-neutral',\n\t},\n\tprimary: {\n\t\tbutton: 'btn-primary',\n\t\tbadge: 'badge-primary',\n\t\tcheckbox: 'checkbox-primary',\n\t\tradio: 'radio-primary',\n\t\ttoggle: 'toggle-primary',\n\t\tprogress: 'progress-primary',\n\t},\n\tsecondary: {\n\t\tbutton: 'btn-secondary',\n\t\tbadge: 'badge-secondary',\n\t\tcheckbox: 'checkbox-secondary',\n\t\tradio: 'radio-secondary',\n\t\ttoggle: 'toggle-secondary',\n\t\tprogress: 'progress-secondary',\n\t},\n\taccent: {\n\t\tbutton: 'btn-accent',\n\t\tbadge: 'badge-accent',\n\t\tcheckbox: 'checkbox-accent',\n\t\tradio: 'radio-accent',\n\t\ttoggle: 'toggle-accent',\n\t\tprogress: 'progress-accent',\n\t},\n\tinfo: {\n\t\tbutton: 'btn-info',\n\t\tbadge: 'badge-info',\n\t\tcheckbox: 'checkbox-info',\n\t\tradio: 'radio-info',\n\t\ttoggle: 'toggle-info',\n\t\tprogress: 'progress-info',\n\t},\n\tsuccess: {\n\t\tbutton: 'btn-success',\n\t\tbadge: 'badge-success',\n\t\tcheckbox: 'checkbox-success',\n\t\tradio: 'radio-success',\n\t\ttoggle: 'toggle-success',\n\t\tprogress: 'progress-success',\n\t},\n\twarning: {\n\t\tbutton: 'btn-warning',\n\t\tbadge: 'badge-warning',\n\t\tcheckbox: 'checkbox-warning',\n\t\tradio: 'radio-warning',\n\t\ttoggle: 'toggle-warning',\n\t\tprogress: 'progress-warning',\n\t},\n\terror: {\n\t\tbutton: 'btn-error',\n\t\tbadge: 'badge-error',\n\t\tcheckbox: 'checkbox-error',\n\t\tradio: 'radio-error',\n\t\ttoggle: 'toggle-error',\n\t\tprogress: 'progress-error',\n\t},\n};\n\nexport type ConsoleThemeComponentPreviewProps = ComponentPropsWithRef<'div'> & {\n\ttheme: ConsoleThemeOption;\n\tsize?: ConsoleThemePreviewSize;\n\ttone?: ConsoleThemePreviewTone;\n\tdensity?: ConsoleDisplayDensity;\n\tradius?: ConsoleDisplayRadius;\n\tonSizeChange?: (size: ConsoleThemePreviewSize) => void;\n\tonToneChange?: (tone: ConsoleThemePreviewTone) => void;\n};\n\nexport function ConsoleThemeComponentPreview({\n\ttheme,\n\tsize = 'sm',\n\ttone = 'primary',\n\tdensity = 'comfortable',\n\tradius = 'soft',\n\tonSizeChange,\n\tonToneChange,\n\tclassName,\n\tstyle,\n\t...props\n}: ConsoleThemeComponentPreviewProps) {\n\tconst sizeId = useId();\n\tconst toneId = useId();\n\tconst radioName = useId();\n\tconst sizeClass = previewSizeClass[size];\n\tconst toneClass = previewToneClass[tone];\n\tconst compact = density === 'compact';\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot='console-theme-component-preview'\n\t\t\tdata-theme={theme.value}\n\t\t\tdata-density={density}\n\t\t\tdata-radius={radius}\n\t\t\tclassName={cn(\n\t\t\t\t'border-base-300 bg-base-100 text-base-content min-w-0 overflow-hidden rounded-md border shadow-sm',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={getConsoleThemePreviewStyle(radius, style)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<header className='border-base-300 bg-base-200/55 flex flex-wrap items-end gap-2 border-b p-3'>\n\t\t\t\t<div className='min-w-0 flex-1'>\n\t\t\t\t\t<div className='truncate text-xs font-semibold'>{theme.label}</div>\n\t\t\t\t\t<div className='text-base-content/65 truncate text-[11px]'>{theme.value}</div>\n\t\t\t\t</div>\n\t\t\t\t<label className='grid gap-1 text-[11px]' htmlFor={sizeId}>\n\t\t\t\t\t<span className='text-base-content/65'>尺寸</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={sizeId}\n\t\t\t\t\t\tclassName='select select-xs w-20'\n\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\tonChange={(event) => onSizeChange?.(event.target.value as ConsoleThemePreviewSize)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sizeOptions.map((option) => (\n\t\t\t\t\t\t\t<option key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</select>\n\t\t\t\t</label>\n\t\t\t\t<label className='grid gap-1 text-[11px]' htmlFor={toneId}>\n\t\t\t\t\t<span className='text-base-content/65'>语义色</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={toneId}\n\t\t\t\t\t\tclassName='select select-xs w-28'\n\t\t\t\t\t\tvalue={tone}\n\t\t\t\t\t\tonChange={(event) => onToneChange?.(event.target.value as ConsoleThemePreviewTone)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{toneOptions.map((option) => (\n\t\t\t\t\t\t\t<option key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</select>\n\t\t\t\t</label>\n\t\t\t</header>\n\n\t\t\t<div inert aria-hidden='true' className={cn('grid', compact ? 'gap-3 p-3' : 'gap-4 p-4')}>\n\t\t\t\t<section aria-label='主题色板'>\n\t\t\t\t\t<div className='grid grid-cols-4 gap-1.5'>\n\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t['Primary', 'bg-primary text-primary-content'],\n\t\t\t\t\t\t\t['Secondary', 'bg-secondary text-secondary-content'],\n\t\t\t\t\t\t\t['Accent', 'bg-accent text-accent-content'],\n\t\t\t\t\t\t\t['Neutral', 'bg-neutral text-neutral-content'],\n\t\t\t\t\t\t\t['Info', 'bg-info text-info-content'],\n\t\t\t\t\t\t\t['Success', 'bg-success text-success-content'],\n\t\t\t\t\t\t\t['Warning', 'bg-warning text-warning-content'],\n\t\t\t\t\t\t\t['Error', 'bg-error text-error-content'],\n\t\t\t\t\t\t].map(([label, colorClass]) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={label}\n\t\t\t\t\t\t\t\tclassName={cn('grid min-h-12 place-items-center rounded-sm p-1 text-center text-[11px]', colorClass)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section aria-label='按钮与徽标' className='flex flex-wrap items-center gap-2'>\n\t\t\t\t\t<button type='button' className={cn('btn', sizeClass.button, toneClass.button)}>\n\t\t\t\t\t\t操作\n\t\t\t\t\t</button>\n\t\t\t\t\t<button type='button' className={cn('btn btn-outline', sizeClass.button, toneClass.button)}>\n\t\t\t\t\t\t次要\n\t\t\t\t\t</button>\n\t\t\t\t\t<button type='button' className={cn('btn btn-ghost', sizeClass.button)}>\n\t\t\t\t\t\t幽灵\n\t\t\t\t\t</button>\n\t\t\t\t\t<button type='button' className={cn('btn', sizeClass.button)} disabled>\n\t\t\t\t\t\t禁用\n\t\t\t\t\t</button>\n\t\t\t\t\t<span className={cn('badge', sizeClass.badge, toneClass.badge)}>状态</span>\n\t\t\t\t\t<span className={cn('badge badge-outline', sizeClass.badge, toneClass.badge)}>Outline</span>\n\t\t\t\t</section>\n\n\t\t\t\t<section aria-label='表单控件' className='grid gap-3 sm:grid-cols-2'>\n\t\t\t\t\t<input\n\t\t\t\t\t\taria-label='组件预览输入框'\n\t\t\t\t\t\tclassName={cn('input w-full', sizeClass.input)}\n\t\t\t\t\t\tplaceholder='输入内容'\n\t\t\t\t\t\treadOnly\n\t\t\t\t\t/>\n\t\t\t\t\t<div className='flex flex-wrap items-center gap-4'>\n\t\t\t\t\t\t<label className='flex items-center gap-2 text-xs'>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\t\t\tclassName={cn('checkbox', sizeClass.checkbox, toneClass.checkbox)}\n\t\t\t\t\t\t\t\tdefaultChecked\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t复选\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label className='flex items-center gap-2 text-xs'>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\t\tname={radioName}\n\t\t\t\t\t\t\t\tclassName={cn('radio', sizeClass.radio, toneClass.radio)}\n\t\t\t\t\t\t\t\tdefaultChecked\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t单选\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label className='flex items-center gap-2 text-xs'>\n\t\t\t\t\t\t\t<input type='checkbox' className={cn('toggle', sizeClass.toggle, toneClass.toggle)} defaultChecked />\n\t\t\t\t\t\t\t开关\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section aria-label='导航与进度' className='grid gap-3'>\n\t\t\t\t\t<div className='tabs tabs-border' aria-label='导航样例'>\n\t\t\t\t\t\t<span className='tab tab-active text-xs'>概览</span>\n\t\t\t\t\t\t<span className='tab text-xs'>事件</span>\n\t\t\t\t\t\t<span className='tab text-xs'>审计</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<progress className={cn('progress w-full', toneClass.progress)} value='68' max='100' />\n\t\t\t\t</section>\n\n\t\t\t\t<section aria-label='消息状态' className='grid gap-2'>\n\t\t\t\t\t<div className='border-info/35 bg-info/5 flex items-start gap-2 rounded-sm border p-2 text-xs'>\n\t\t\t\t\t\t<Info className='text-info mt-0.5 size-3.5 shrink-0' />\n\t\t\t\t\t\t<span>同步正在进行</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='border-success/35 bg-success/5 flex items-start gap-2 rounded-sm border p-2 text-xs'>\n\t\t\t\t\t\t<CheckCircle2 className='text-success mt-0.5 size-3.5 shrink-0' />\n\t\t\t\t\t\t<span>配置已生效</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='border-warning/40 bg-warning/5 flex items-start gap-2 rounded-sm border p-2 text-xs'>\n\t\t\t\t\t\t<AlertTriangle className='text-warning mt-0.5 size-3.5 shrink-0' />\n\t\t\t\t\t\t<span>存在待处理项</span>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-theme-component-preview.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-display-settings.tsx",
			"content": "'use client';\n\nimport {\n\tChevronDown,\n\tComponent,\n\tLayoutDashboard,\n\tMonitor,\n\tMoon,\n\tPalette,\n\tRotateCcw,\n\tSearch,\n\tSparkles,\n\tSun,\n\tX,\n\tZap,\n\tZapOff,\n} from 'lucide-react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Children, useEffect, useId, useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n\ttype ConsoleDisplayDensity,\n\ttype ConsoleDisplayRadius,\n\ttype ConsoleMotionPreference,\n\ttype ConsoleThemeMode,\n\tuseConsoleDisplaySettings,\n} from './console-theme';\nimport {\n\ttype ConsoleThemeColorScheme,\n\ttype ConsoleThemeOption,\n\tdefaultConsoleThemeOptions,\n\tfilterConsoleThemeOptions,\n\tgetConsoleThemesByColorScheme,\n} from './console-theme-catalog';\nimport {\n\tConsoleThemeComponentPreview,\n\ttype ConsoleThemePreviewSize,\n\ttype ConsoleThemePreviewTone,\n} from './console-theme-component-preview';\nimport { ConsoleThemeDemo, ConsoleThemePreviewCard } from './console-theme-preview';\n\nexport type ConsoleDisplaySettingsHeadingLevel = 2 | 3 | 4 | 5 | 6;\nexport type ConsoleDisplayPreviewMode = 'console' | 'components';\n\nconst headingTag: Record<ConsoleDisplaySettingsHeadingLevel, `h${ConsoleDisplaySettingsHeadingLevel}`> = {\n\t2: 'h2',\n\t3: 'h3',\n\t4: 'h4',\n\t5: 'h5',\n\t6: 'h6',\n};\n\nfunction hasRenderableNode(value: ReactNode) {\n\treturn Children.toArray(value).length > 0;\n}\n\nexport type ConsoleDisplaySettingsLayoutProps = ComponentPropsWithRef<'div'> & {\n\tpreview?: ReactNode;\n\tcontentClassName?: string;\n\tpreviewClassName?: string;\n};\n\nexport function ConsoleDisplaySettingsLayout({\n\tpreview,\n\tcontentClassName,\n\tpreviewClassName,\n\tchildren,\n\tclassName,\n\t...props\n}: ConsoleDisplaySettingsLayoutProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-console-density=''\n\t\t\tclassName={cn(\n\t\t\t\t'border-base-300 bg-base-100 grid min-w-0 overflow-hidden border xl:grid-cols-[minmax(0,1fr)_23rem]',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className={cn('min-w-0 p-4 md:p-5', contentClassName)}>{children}</div>\n\t\t\t{hasRenderableNode(preview) ? (\n\t\t\t\t<aside\n\t\t\t\t\taria-label='显示设置预览'\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'border-base-300 bg-base-200/45 hidden border-t p-4 xl:block xl:border-t-0 xl:border-l',\n\t\t\t\t\t\tpreviewClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className='sticky top-4'>{preview}</div>\n\t\t\t\t</aside>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nexport type ConsoleDisplaySettingsHeaderProps = Omit<ComponentPropsWithRef<'header'>, 'title'> & {\n\ttitle?: string;\n\tdescription?: ReactNode;\n\tactions?: ReactNode;\n\theadingLevel?: ConsoleDisplaySettingsHeadingLevel;\n};\n\nexport function ConsoleDisplaySettingsHeader({\n\ttitle = '显示设置',\n\tdescription,\n\tactions,\n\theadingLevel = 2,\n\tclassName,\n\t...props\n}: ConsoleDisplaySettingsHeaderProps) {\n\tconst Heading = headingTag[headingLevel];\n\treturn (\n\t\t<header\n\t\t\tclassName={cn('border-base-300 flex items-start justify-between gap-3 border-b pb-4', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className='min-w-0'>\n\t\t\t\t{title ? (\n\t\t\t\t\t<Heading className='flex items-center gap-2 text-sm font-semibold'>\n\t\t\t\t\t\t<Palette className='text-primary size-4 shrink-0' />\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Heading>\n\t\t\t\t) : null}\n\t\t\t\t{hasRenderableNode(description) ? (\n\t\t\t\t\t<div className='text-base-content/65 mt-1 text-xs leading-5'>{description}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{hasRenderableNode(actions) ? <div className='flex shrink-0 flex-wrap items-center gap-1'>{actions}</div> : null}\n\t\t</header>\n\t);\n}\n\nexport type ConsoleThemeCatalogProps = Omit<ComponentPropsWithRef<'section'>, 'title' | 'onChange'> & {\n\tthemes: readonly ConsoleThemeOption[];\n\tselectedTheme?: string;\n\tquery?: string;\n\ttitle?: string;\n\tempty?: ReactNode;\n\tradioName?: string;\n\theadingLevel?: ConsoleDisplaySettingsHeadingLevel;\n\tcollapsedCount?: number;\n\tdefaultExpanded?: boolean;\n\tonQueryChange?: (query: string) => void;\n\tonThemeSelect?: (theme: ConsoleThemeOption) => void;\n};\n\nexport function ConsoleThemeCatalog({\n\tthemes,\n\tselectedTheme,\n\tquery = '',\n\ttitle = '选择主题',\n\tempty = '没有匹配的主题',\n\tradioName,\n\theadingLevel = 3,\n\tcollapsedCount,\n\tdefaultExpanded = false,\n\tonQueryChange,\n\tonThemeSelect,\n\tclassName,\n\t'aria-label': ariaLabel,\n\t...props\n}: ConsoleThemeCatalogProps) {\n\tconst generatedRadioName = useId();\n\tconst Heading = headingTag[headingLevel];\n\tconst [expanded, setExpanded] = useState(defaultExpanded);\n\tconst filteredThemes = filterConsoleThemeOptions(themes, query);\n\tconst prioritizedThemes = selectedTheme\n\t\t? [\n\t\t\t\t...filteredThemes.filter((theme) => theme.value === selectedTheme),\n\t\t\t\t...filteredThemes.filter((theme) => theme.value !== selectedTheme),\n\t\t\t]\n\t\t: filteredThemes;\n\tconst safeCollapsedCount = collapsedCount === undefined ? undefined : Math.max(1, Math.floor(collapsedCount));\n\tconst canCollapse =\n\t\tquery.trim().length === 0 && safeCollapsedCount !== undefined && filteredThemes.length > safeCollapsedCount;\n\tconst visibleThemes = canCollapse && !expanded ? prioritizedThemes.slice(0, safeCollapsedCount) : filteredThemes;\n\tconst defaultAriaLabel = title.trim() || '主题目录';\n\n\treturn (\n\t\t<section aria-label={ariaLabel ?? defaultAriaLabel} className={cn('min-w-0', className)} {...props}>\n\t\t\t<div className='flex flex-wrap items-end justify-between gap-2'>\n\t\t\t\t<div className='min-w-0'>\n\t\t\t\t\t{title ? <Heading className='text-sm font-medium'>{title}</Heading> : null}\n\t\t\t\t\t<div className='text-base-content/65 mt-1 text-xs'>\n\t\t\t\t\t\t{filteredThemes.length} / {themes.length} 个主题\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<label className='border-base-300 bg-base-100 flex h-9 min-w-52 flex-1 items-center gap-2 rounded-md border px-2 sm:max-w-72'>\n\t\t\t\t\t<Search aria-hidden='true' className='text-base-content/45 size-4 shrink-0' />\n\t\t\t\t\t<input\n\t\t\t\t\t\taria-label='搜索主题'\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tplaceholder='名称、标识或说明'\n\t\t\t\t\t\tclassName='placeholder:text-base-content/65 min-w-0 flex-1 bg-transparent text-xs outline-none'\n\t\t\t\t\t\tonChange={(event) => onQueryChange?.(event.target.value)}\n\t\t\t\t\t/>\n\t\t\t\t\t{query ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype='button'\n\t\t\t\t\t\t\taria-label='清除主题搜索'\n\t\t\t\t\t\t\ttitle='清除搜索'\n\t\t\t\t\t\t\tclassName='hover:bg-base-200 grid size-6 shrink-0 place-items-center rounded-sm'\n\t\t\t\t\t\t\tonClick={() => onQueryChange?.('')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<X className='size-3.5' />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t{visibleThemes.length ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className='mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-3'>\n\t\t\t\t\t\t{visibleThemes.map((theme) => (\n\t\t\t\t\t\t\t<ConsoleThemePreviewCard\n\t\t\t\t\t\t\t\tkey={theme.value}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tname={radioName ?? generatedRadioName}\n\t\t\t\t\t\t\t\tselected={selectedTheme === theme.value}\n\t\t\t\t\t\t\t\tonThemeSelect={onThemeSelect}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{canCollapse ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype='button'\n\t\t\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\t\t\tclassName='border-base-300 hover:bg-base-200/45 mt-3 flex h-9 w-full items-center justify-center gap-1.5 rounded-md border text-xs'\n\t\t\t\t\t\t\tonClick={() => setExpanded((value) => !value)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronDown className={cn('size-3.5 transition-transform', expanded && 'rotate-180')} />\n\t\t\t\t\t\t\t{expanded ? '收起主题' : `显示全部 ${filteredThemes.length} 个主题`}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<div className='bg-base-200/45 text-base-content/65 mt-3 rounded-md px-3 py-8 text-center text-sm'>{empty}</div>\n\t\t\t)}\n\t\t</section>\n\t);\n}\n\nexport type ConsoleDisplaySettingsPanelProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'title'> & {\n\tstorageKey?: string;\n\tthemeOptions?: readonly ConsoleThemeOption[];\n\ttitle?: string;\n\tdescription?: ReactNode;\n\tactions?: ReactNode;\n\theadingLevel?: ConsoleDisplaySettingsHeadingLevel;\n};\n\nconst densityOptions: Array<{ value: ConsoleDisplayDensity; label: string }> = [\n\t{ value: 'comfortable', label: '舒适' },\n\t{ value: 'compact', label: '紧凑' },\n];\n\nconst radiusOptions: Array<{ value: ConsoleDisplayRadius; label: string }> = [\n\t{ value: 'square', label: '直角' },\n\t{ value: 'soft', label: '柔和' },\n\t{ value: 'rounded', label: '圆润' },\n];\n\nconst themeModeOptions: Array<{ value: ConsoleThemeMode; label: string; icon: typeof Monitor }> = [\n\t{ value: 'system', label: '跟随系统', icon: Monitor },\n\t{ value: 'light', label: '始终亮色', icon: Sun },\n\t{ value: 'dark', label: '始终暗色', icon: Moon },\n];\n\nconst motionOptions: Array<{ value: ConsoleMotionPreference; label: string; icon: typeof Monitor }> = [\n\t{ value: 'system', label: '跟随系统', icon: Monitor },\n\t{ value: 'reduced', label: '减少动效', icon: ZapOff },\n\t{ value: 'full', label: '完整动效', icon: Zap },\n];\n\nconst previewModeOptions: Array<{ value: ConsoleDisplayPreviewMode; label: string; icon: typeof Component }> = [\n\t{ value: 'console', label: 'Console', icon: LayoutDashboard },\n\t{ value: 'components', label: 'Components', icon: Component },\n];\n\nexport function ConsoleDisplaySettingsPanel({\n\tstorageKey,\n\tthemeOptions = defaultConsoleThemeOptions,\n\ttitle = '显示设置',\n\tdescription = '主题映射、界面尺度与动效偏好保存在当前浏览器。',\n\tactions,\n\theadingLevel = 2,\n\tclassName,\n\t...props\n}: ConsoleDisplaySettingsPanelProps) {\n\tconst { settings, systemDark, systemReducedMotion, motionReduced, resolvedTheme, update, reset } =\n\t\tuseConsoleDisplaySettings({ storageKey, themeOptions });\n\tconst [editingScheme, setEditingScheme] = useState<ConsoleThemeColorScheme>('light');\n\tconst [themeQuery, setThemeQuery] = useState('');\n\tconst [previewMode, setPreviewMode] = useState<ConsoleDisplayPreviewMode>('console');\n\tconst [previewSize, setPreviewSize] = useState<ConsoleThemePreviewSize>('sm');\n\tconst [previewTone, setPreviewTone] = useState<ConsoleThemePreviewTone>('primary');\n\tconst groupId = useId();\n\tconst sectionHeadingLevel = Math.min(6, headingLevel + 1) as ConsoleDisplaySettingsHeadingLevel;\n\tconst SectionHeading = headingTag[sectionHeadingLevel];\n\tconst lightThemes = getConsoleThemesByColorScheme(themeOptions, 'light');\n\tconst darkThemes = getConsoleThemesByColorScheme(themeOptions, 'dark');\n\tconst catalogThemes = editingScheme === 'light' ? lightThemes : darkThemes;\n\tconst selectedTheme = editingScheme === 'light' ? settings.lightTheme : settings.darkTheme;\n\tconst customTheme = themeOptions.some((theme) => theme.value === selectedTheme)\n\t\t? undefined\n\t\t: ({\n\t\t\t\tvalue: selectedTheme,\n\t\t\t\tlabel: selectedTheme,\n\t\t\t\tcolorScheme: editingScheme,\n\t\t\t\tdescription: '自定义主题',\n\t\t\t} satisfies ConsoleThemeOption);\n\tconst visibleThemes = customTheme ? [customTheme, ...catalogThemes] : catalogThemes;\n\tconst lightTheme = getThemeOption(themeOptions, settings.lightTheme, 'light');\n\tconst darkTheme = getThemeOption(themeOptions, settings.darkTheme, 'dark');\n\tconst editingTheme = editingScheme === 'light' ? lightTheme : darkTheme;\n\n\tuseEffect(() => {\n\t\tif (settings.themeMode !== 'system') setEditingScheme(settings.themeMode);\n\t}, [settings.themeMode]);\n\n\tconst setThemeMode = (themeMode: ConsoleThemeMode) => {\n\t\tupdate({ themeMode });\n\t\tif (themeMode !== 'system') setEditingScheme(themeMode);\n\t};\n\tconst setTheme = (theme: ConsoleThemeOption) => {\n\t\tif (editingScheme === 'light') update({ lightTheme: theme.value });\n\t\telse update({ darkTheme: theme.value });\n\t};\n\tconst preview = (\n\t\t<ConsoleDisplaySettingsPreview\n\t\t\ttheme={editingTheme}\n\t\t\teditingScheme={editingScheme}\n\t\t\tappliedTheme={resolvedTheme.option}\n\t\t\tpreviewMode={previewMode}\n\t\t\tpreviewSize={previewSize}\n\t\t\tpreviewTone={previewTone}\n\t\t\tdensity={settings.density}\n\t\t\tradius={settings.radius}\n\t\t\tmotionReduced={motionReduced}\n\t\t\tonPreviewModeChange={setPreviewMode}\n\t\t\tonPreviewSizeChange={setPreviewSize}\n\t\t\tonPreviewToneChange={setPreviewTone}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<ConsoleDisplaySettingsLayout className={className} preview={preview} {...props}>\n\t\t\t<ConsoleDisplaySettingsHeader\n\t\t\t\ttitle={title}\n\t\t\t\tdescription={description}\n\t\t\t\theadingLevel={headingLevel}\n\t\t\t\tactions={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype='button'\n\t\t\t\t\t\t\ttitle='恢复默认设置'\n\t\t\t\t\t\t\tclassName='hover:bg-base-200 inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs'\n\t\t\t\t\t\t\tonClick={reset}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RotateCcw className='size-3.5' />\n\t\t\t\t\t\t\t重置\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\n\t\t\t<section aria-labelledby={`${groupId}-display-title`} className='mt-5'>\n\t\t\t\t<SectionHeading id={`${groupId}-display-title`} className='text-sm font-medium'>\n\t\t\t\t\t界面偏好\n\t\t\t\t</SectionHeading>\n\t\t\t\t<div className='mt-3 grid gap-5 lg:grid-cols-2'>\n\t\t\t\t\t<SettingsField\n\t\t\t\t\t\tlabel='配色模式'\n\t\t\t\t\t\tdescription={\n\t\t\t\t\t\t\tsettings.themeMode === 'system'\n\t\t\t\t\t\t\t\t? `系统当前使用${systemDark ? '暗色' : '亮色'}配色`\n\t\t\t\t\t\t\t\t: settings.themeMode === 'dark'\n\t\t\t\t\t\t\t\t\t? '固定使用暗色主题'\n\t\t\t\t\t\t\t\t\t: '固定使用亮色主题'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SegmentedRadioGroup\n\t\t\t\t\t\t\tname={`${groupId}-theme-mode`}\n\t\t\t\t\t\t\tariaLabel='配色模式'\n\t\t\t\t\t\t\tvalue={settings.themeMode}\n\t\t\t\t\t\t\toptions={themeModeOptions}\n\t\t\t\t\t\t\tonValueChange={setThemeMode}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SettingsField>\n\t\t\t\t\t<SettingsField\n\t\t\t\t\t\tlabel='动效偏好'\n\t\t\t\t\t\tdescription={\n\t\t\t\t\t\t\tsettings.motion === 'system'\n\t\t\t\t\t\t\t\t? `系统当前${systemReducedMotion ? '减少动效' : '使用完整动效'}`\n\t\t\t\t\t\t\t\t: motionReduced\n\t\t\t\t\t\t\t\t\t? '已减少页面与组件动效'\n\t\t\t\t\t\t\t\t\t: '使用完整页面与组件动效'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SegmentedRadioGroup\n\t\t\t\t\t\t\tname={`${groupId}-motion`}\n\t\t\t\t\t\t\tariaLabel='动效偏好'\n\t\t\t\t\t\t\tvalue={settings.motion}\n\t\t\t\t\t\t\toptions={motionOptions}\n\t\t\t\t\t\t\tonValueChange={(motion) => update({ motion })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SettingsField>\n\t\t\t\t\t<SettingsField\n\t\t\t\t\t\tlabel='界面密度'\n\t\t\t\t\t\tdescription={settings.density === 'compact' ? '适合高频扫描与批量操作' : '适合常规浏览与触控操作'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SegmentedRadioGroup\n\t\t\t\t\t\t\tname={`${groupId}-density`}\n\t\t\t\t\t\t\tariaLabel='界面密度'\n\t\t\t\t\t\t\tvalue={settings.density}\n\t\t\t\t\t\t\toptions={densityOptions}\n\t\t\t\t\t\t\tonValueChange={(density) => update({ density })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SettingsField>\n\t\t\t\t\t<SettingsField label='控件圆角' description='影响面板、输入框和选择控件的轮廓'>\n\t\t\t\t\t\t<SegmentedRadioGroup\n\t\t\t\t\t\t\tname={`${groupId}-radius`}\n\t\t\t\t\t\t\tariaLabel='控件圆角'\n\t\t\t\t\t\t\tvalue={settings.radius}\n\t\t\t\t\t\t\toptions={radiusOptions}\n\t\t\t\t\t\t\tonValueChange={(radius) => update({ radius })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SettingsField>\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className='border-base-300 mt-6 border-t pt-5'>\n\t\t\t\t<div className='flex flex-wrap items-end justify-between gap-2'>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<SectionHeading className='text-sm font-medium'>主题映射</SectionHeading>\n\t\t\t\t\t\t<p className='text-base-content/65 mt-1 text-xs'>分别设置系统亮色与暗色状态使用的主题。</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span className='text-base-content/65 text-xs'>当前应用：{resolvedTheme.option.label}</span>\n\t\t\t\t</div>\n\t\t\t\t<div className='mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2' role='radiogroup' aria-label='正在编辑的主题映射'>\n\t\t\t\t\t<ThemeSlotOption\n\t\t\t\t\t\tname={`${groupId}-editing-scheme`}\n\t\t\t\t\t\tvalue='light'\n\t\t\t\t\t\tlabel='亮色主题'\n\t\t\t\t\t\ttheme={lightTheme}\n\t\t\t\t\t\tchecked={editingScheme === 'light'}\n\t\t\t\t\t\ticon={<Sun className='size-4' />}\n\t\t\t\t\t\tonChange={() => setEditingScheme('light')}\n\t\t\t\t\t/>\n\t\t\t\t\t<ThemeSlotOption\n\t\t\t\t\t\tname={`${groupId}-editing-scheme`}\n\t\t\t\t\t\tvalue='dark'\n\t\t\t\t\t\tlabel='暗色主题'\n\t\t\t\t\t\ttheme={darkTheme}\n\t\t\t\t\t\tchecked={editingScheme === 'dark'}\n\t\t\t\t\t\ticon={<Moon className='size-4' />}\n\t\t\t\t\t\tonChange={() => setEditingScheme('dark')}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<ConsoleThemeCatalog\n\t\t\t\tclassName='border-base-300 mt-6 border-t pt-5'\n\t\t\t\ttitle={editingScheme === 'light' ? '选择亮色主题' : '选择暗色主题'}\n\t\t\t\theadingLevel={sectionHeadingLevel}\n\t\t\t\tthemes={visibleThemes}\n\t\t\t\tselectedTheme={selectedTheme}\n\t\t\t\tcollapsedCount={8}\n\t\t\t\tquery={themeQuery}\n\t\t\t\tradioName={`${groupId}-${editingScheme}-theme`}\n\t\t\t\tonQueryChange={setThemeQuery}\n\t\t\t\tonThemeSelect={setTheme}\n\t\t\t/>\n\t\t\t<div className='border-base-300 mt-6 border-t pt-5 xl:hidden'>{preview}</div>\n\t\t</ConsoleDisplaySettingsLayout>\n\t);\n}\n\nfunction ConsoleDisplaySettingsPreview({\n\ttheme,\n\teditingScheme,\n\tappliedTheme,\n\tpreviewMode,\n\tpreviewSize,\n\tpreviewTone,\n\tdensity,\n\tradius,\n\tmotionReduced,\n\tonPreviewModeChange,\n\tonPreviewSizeChange,\n\tonPreviewToneChange,\n}: {\n\ttheme: ConsoleThemeOption;\n\teditingScheme: ConsoleThemeColorScheme;\n\tappliedTheme: ConsoleThemeOption;\n\tpreviewMode: ConsoleDisplayPreviewMode;\n\tpreviewSize: ConsoleThemePreviewSize;\n\tpreviewTone: ConsoleThemePreviewTone;\n\tdensity: ConsoleDisplayDensity;\n\tradius: ConsoleDisplayRadius;\n\tmotionReduced: boolean;\n\tonPreviewModeChange: (mode: ConsoleDisplayPreviewMode) => void;\n\tonPreviewSizeChange: (size: ConsoleThemePreviewSize) => void;\n\tonPreviewToneChange: (tone: ConsoleThemePreviewTone) => void;\n}) {\n\tconst id = useId();\n\treturn (\n\t\t<div className='min-w-0'>\n\t\t\t<div className='flex items-start gap-2'>\n\t\t\t\t<Sparkles className='text-primary mt-0.5 size-4 shrink-0' />\n\t\t\t\t<div className='min-w-0 flex-1'>\n\t\t\t\t\t<div className='text-sm font-semibold'>主题预览</div>\n\t\t\t\t\t<div className='text-base-content/65 mt-0.5 text-xs'>\n\t\t\t\t\t\t正在编辑{editingScheme === 'dark' ? '暗色' : '亮色'} · {theme.label}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className='mt-3'>\n\t\t\t\t<SegmentedRadioGroup\n\t\t\t\t\tname={`${id}-preview-mode`}\n\t\t\t\t\tariaLabel='预览类型'\n\t\t\t\t\tvalue={previewMode}\n\t\t\t\t\toptions={previewModeOptions}\n\t\t\t\t\tonValueChange={onPreviewModeChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{previewMode === 'components' ? (\n\t\t\t\t<ConsoleThemeComponentPreview\n\t\t\t\t\tclassName='mt-3'\n\t\t\t\t\ttheme={theme}\n\t\t\t\t\tsize={previewSize}\n\t\t\t\t\ttone={previewTone}\n\t\t\t\t\tdensity={density}\n\t\t\t\t\tradius={radius}\n\t\t\t\t\tonSizeChange={onPreviewSizeChange}\n\t\t\t\t\tonToneChange={onPreviewToneChange}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<ConsoleThemeDemo className='mt-3' theme={theme} density={density} radius={radius} />\n\t\t\t)}\n\t\t\t<dl className='border-base-300 divide-base-300 mt-4 divide-y border-y text-xs'>\n\t\t\t\t<PreviewFact label='当前应用' value={appliedTheme.label} />\n\t\t\t\t<PreviewFact label='界面密度' value={density === 'compact' ? '紧凑' : '舒适'} />\n\t\t\t\t<PreviewFact label='控件圆角' value={radiusOptions.find((item) => item.value === radius)?.label ?? radius} />\n\t\t\t\t<PreviewFact label='页面动效' value={motionReduced ? '减少' : '完整'} />\n\t\t\t</dl>\n\t\t</div>\n\t);\n}\n\nfunction SettingsField({\n\tlabel,\n\tdescription,\n\tchildren,\n}: {\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\tchildren: ReactNode;\n}) {\n\treturn (\n\t\t<fieldset className='min-w-0'>\n\t\t\t<legend className='text-xs font-medium'>{label}</legend>\n\t\t\t<div className='mt-2'>{children}</div>\n\t\t\t{hasRenderableNode(description) ? (\n\t\t\t\t<div className='text-base-content/65 mt-1.5 text-xs leading-5'>{description}</div>\n\t\t\t) : null}\n\t\t</fieldset>\n\t);\n}\n\nfunction SegmentedRadioGroup<Value extends string>({\n\tname,\n\tvalue,\n\toptions,\n\tariaLabel,\n\tonValueChange,\n}: {\n\tname: string;\n\tvalue: Value;\n\toptions: ReadonlyArray<{ value: Value; label: string; icon?: typeof Monitor }>;\n\tariaLabel?: string;\n\tonValueChange: (value: Value) => void;\n}) {\n\tconst columnClass = options.length === 2 ? 'grid-cols-2' : options.length === 3 ? 'grid-cols-3' : 'grid-cols-1';\n\treturn (\n\t\t<div\n\t\t\trole='radiogroup'\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn('border-base-300 bg-base-200/45 grid min-h-9 border p-0.5', columnClass)}\n\t\t>\n\t\t\t{options.map((option) => {\n\t\t\t\tconst Icon = option.icon;\n\t\t\t\treturn (\n\t\t\t\t\t<label\n\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'focus-within:ring-primary flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-sm px-2 text-xs focus-within:ring-2',\n\t\t\t\t\t\t\tvalue === option.value\n\t\t\t\t\t\t\t\t? 'bg-base-100 font-medium shadow-sm'\n\t\t\t\t\t\t\t\t: 'text-base-content/65 hover:text-base-content',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\tchecked={value === option.value}\n\t\t\t\t\t\t\tclassName='sr-only'\n\t\t\t\t\t\t\tonChange={() => onValueChange(option.value)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{Icon ? <Icon className='size-3.5 shrink-0' /> : null}\n\t\t\t\t\t\t<span className='truncate'>{option.label}</span>\n\t\t\t\t\t</label>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nfunction ThemeSlotOption({\n\tname,\n\tvalue,\n\tlabel,\n\ttheme,\n\tchecked,\n\ticon,\n\tonChange,\n}: {\n\tname: string;\n\tvalue: ConsoleThemeColorScheme;\n\tlabel: string;\n\ttheme: ConsoleThemeOption;\n\tchecked: boolean;\n\ticon: ReactNode;\n\tonChange: () => void;\n}) {\n\treturn (\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t'border-base-300 flex min-h-14 cursor-pointer items-center gap-3 rounded-md border px-3 text-left outline-none',\n\t\t\t\t'hover:bg-base-200/55 focus-within:ring-primary focus-within:ring-2',\n\t\t\t\tchecked && 'border-primary bg-primary/8',\n\t\t\t)}\n\t\t>\n\t\t\t<input type='radio' name={name} value={value} checked={checked} className='sr-only' onChange={onChange} />\n\t\t\t<span className='bg-base-200 grid size-8 shrink-0 place-items-center rounded-md'>{icon}</span>\n\t\t\t<span className='min-w-0 flex-1'>\n\t\t\t\t<span className='block text-xs font-medium'>{label}</span>\n\t\t\t\t<span className='text-base-content/65 block truncate text-[11px]'>{theme.label}</span>\n\t\t\t</span>\n\t\t</label>\n\t);\n}\n\nfunction PreviewFact({ label, value }: { label: ReactNode; value: ReactNode }) {\n\treturn (\n\t\t<div className='grid grid-cols-[5rem_minmax(0,1fr)] gap-2 py-2.5'>\n\t\t\t<dt className='text-base-content/65'>{label}</dt>\n\t\t\t<dd className='truncate font-medium'>{value}</dd>\n\t\t</div>\n\t);\n}\n\nfunction getThemeOption(\n\tthemeOptions: readonly ConsoleThemeOption[],\n\tvalue: string,\n\tcolorScheme: ConsoleThemeColorScheme,\n): ConsoleThemeOption {\n\treturn (\n\t\tthemeOptions.find((theme) => theme.value === value && theme.colorScheme === colorScheme) ?? {\n\t\t\tvalue,\n\t\t\tlabel: value,\n\t\t\tcolorScheme,\n\t\t\tdescription: '自定义主题',\n\t\t}\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-display-settings.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-about.tsx",
			"content": "import { ExternalLink } from 'lucide-react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ConsoleAboutTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';\n\nexport type ConsoleAboutDetail = {\n\tdescription?: ReactNode;\n\ticon?: ReactNode;\n\tid?: string;\n\tlabel: ReactNode;\n\tvalue: ReactNode;\n};\n\nexport type ConsoleAboutLink = {\n\tdescription?: ReactNode;\n\texternal?: boolean;\n\thref: string;\n\ticon?: ReactNode;\n\tid?: string;\n\tlabel: string;\n\trel?: string;\n\ttarget?: ComponentPropsWithRef<'a'>['target'];\n};\n\nexport type ConsoleAboutMaintainer = {\n\tavatar?: ReactNode;\n\thref?: string;\n\tid?: string;\n\tname: ReactNode;\n\trole?: ReactNode;\n};\n\nexport type ConsoleAboutStatus = {\n\ticon?: ReactNode;\n\tlabel: ReactNode;\n\ttone?: ConsoleAboutTone;\n};\n\nexport type ConsoleAboutMessages = {\n\tbuildLabel: string;\n\tdiagnosticsTitle: string;\n\tenvironmentLabel: string;\n\tlinksLabel: string;\n\tlinksTitle: string;\n\tmaintainersTitle: string;\n\topensNewWindow: string;\n\truntimeTitle: string;\n\tsupportTitle: string;\n\tversionLabel: string;\n};\n\nconst defaultConsoleAboutMessages: ConsoleAboutMessages = {\n\tversionLabel: '版本',\n\tbuildLabel: '构建',\n\tenvironmentLabel: '环境',\n\truntimeTitle: '运行信息',\n\tdiagnosticsTitle: '客户端环境',\n\tlinksTitle: '资源与文档',\n\tlinksLabel: '资源与文档',\n\tmaintainersTitle: '维护团队',\n\tsupportTitle: '支持',\n\topensNewWindow: '将在新窗口打开',\n};\n\nexport type ConsoleAboutPageProps = Omit<ComponentPropsWithRef<'section'>, 'title'> & {\n\tactions?: ReactNode;\n\tbuild?: ReactNode;\n\tdescription?: ReactNode;\n\tdetails?: ConsoleAboutDetail[];\n\tdiagnostics?: ReactNode;\n\tenvironment?: ReactNode;\n\tfooter?: ReactNode;\n\tlinks?: ConsoleAboutLink[];\n\tlogo?: ReactNode;\n\tmaintainers?: ConsoleAboutMaintainer[];\n\tmessages?: Partial<ConsoleAboutMessages>;\n\tproduct: ReactNode;\n\tstatus?: ConsoleAboutStatus;\n\tsupport?: ReactNode;\n\tversion?: ReactNode;\n};\n\nexport function ConsoleAboutPage({\n\tactions,\n\tbuild,\n\tchildren,\n\tclassName,\n\tdescription,\n\tdetails = [],\n\tdiagnostics,\n\tenvironment,\n\tfooter,\n\tlinks = [],\n\tlogo,\n\tmaintainers = [],\n\tmessages: messagesOverride,\n\tproduct,\n\tstatus,\n\tsupport,\n\tversion,\n\t...props\n}: ConsoleAboutPageProps) {\n\tconst messages = { ...defaultConsoleAboutMessages, ...messagesOverride };\n\tconst summary = [\n\t\t...(hasRenderableNode(version) ? [{ label: messages.versionLabel, value: version }] : []),\n\t\t...(hasRenderableNode(build) ? [{ label: messages.buildLabel, value: build }] : []),\n\t\t...(hasRenderableNode(environment) ? [{ label: messages.environmentLabel, value: environment }] : []),\n\t];\n\n\treturn (\n\t\t<section className={cn('mx-auto w-full max-w-4xl', className)} {...props}>\n\t\t\t<header className='border-base-300 flex flex-col gap-5 border-b pb-6 sm:flex-row sm:items-center'>\n\t\t\t\t{hasRenderableNode(logo) ? (\n\t\t\t\t\t<div className='border-base-300 bg-base-100 text-primary grid size-16 shrink-0 place-items-center rounded-md border shadow-sm'>\n\t\t\t\t\t\t{logo}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t<div className='min-w-0 flex-1'>\n\t\t\t\t\t<div className='flex flex-wrap items-center gap-2'>\n\t\t\t\t\t\t<h1 className='min-w-0 text-2xl font-semibold break-words'>{product}</h1>\n\t\t\t\t\t\t{status ? <ConsoleAboutStatusBadge status={status} /> : null}\n\t\t\t\t\t</div>\n\t\t\t\t\t{hasRenderableNode(description) ? (\n\t\t\t\t\t\t<div className='text-base-content/65 mt-2 max-w-2xl text-sm leading-6'>{description}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{hasRenderableNode(actions) ? (\n\t\t\t\t\t<div className='flex shrink-0 flex-wrap items-center gap-2'>{actions}</div>\n\t\t\t\t) : null}\n\t\t\t</header>\n\n\t\t\t{summary.length > 0 ? (\n\t\t\t\t<dl className='border-base-300 mt-6 grid border-y sm:grid-cols-3 sm:divide-x'>\n\t\t\t\t\t{summary.map((item) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={String(item.label)}\n\t\t\t\t\t\t\tclassName='border-base-300 min-w-0 border-b px-0 py-3 last:border-b-0 sm:border-b-0 sm:px-4 sm:first:pl-0 sm:last:pr-0'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<dt className='text-base-content/70 text-xs'>{item.label}</dt>\n\t\t\t\t\t\t\t<dd className='mt-1 min-w-0 text-sm font-medium break-words'>{item.value}</dd>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</dl>\n\t\t\t) : null}\n\n\t\t\t{details.length > 0 ? (\n\t\t\t\t<ConsoleAboutSection title={messages.runtimeTitle}>\n\t\t\t\t\t<ConsoleAboutDetailList details={details} />\n\t\t\t\t</ConsoleAboutSection>\n\t\t\t) : null}\n\n\t\t\t{hasRenderableNode(diagnostics) ? (\n\t\t\t\t<ConsoleAboutSection title={messages.diagnosticsTitle}>{diagnostics}</ConsoleAboutSection>\n\t\t\t) : null}\n\n\t\t\t{children}\n\n\t\t\t{maintainers.length > 0 || hasRenderableNode(support) ? (\n\t\t\t\t<div className='grid gap-x-8 md:grid-cols-2'>\n\t\t\t\t\t{maintainers.length > 0 ? (\n\t\t\t\t\t\t<ConsoleAboutSection title={messages.maintainersTitle}>\n\t\t\t\t\t\t\t<ConsoleAboutMaintainerList maintainers={maintainers} />\n\t\t\t\t\t\t</ConsoleAboutSection>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{hasRenderableNode(support) ? (\n\t\t\t\t\t\t<ConsoleAboutSection title={messages.supportTitle}>{support}</ConsoleAboutSection>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\n\t\t\t{links.length > 0 ? (\n\t\t\t\t<ConsoleAboutSection title={messages.linksTitle}>\n\t\t\t\t\t<ConsoleAboutLinkList aria-label={messages.linksLabel} links={links} messages={messages} />\n\t\t\t\t</ConsoleAboutSection>\n\t\t\t) : null}\n\n\t\t\t{hasRenderableNode(footer) ? (\n\t\t\t\t<footer className='border-base-300 text-base-content/70 mt-8 border-t pt-4 text-xs leading-5'>{footer}</footer>\n\t\t\t) : null}\n\t\t</section>\n\t);\n}\n\nexport type ConsoleAboutSectionProps = Omit<ComponentPropsWithRef<'section'>, 'title'> & {\n\tactions?: ReactNode;\n\tdescription?: ReactNode;\n\tfooter?: ReactNode;\n\ticon?: ReactNode;\n\ttitle: ReactNode;\n};\n\nexport function ConsoleAboutSection({\n\tactions,\n\tchildren,\n\tclassName,\n\tdescription,\n\tfooter,\n\ticon,\n\ttitle,\n\t...props\n}: ConsoleAboutSectionProps) {\n\treturn (\n\t\t<section className={cn('mt-8', className)} {...props}>\n\t\t\t<header className='border-base-300 flex items-start gap-3 border-b pb-2.5'>\n\t\t\t\t{hasRenderableNode(icon) ? <div className='text-primary mt-0.5 shrink-0'>{icon}</div> : null}\n\t\t\t\t<div className='min-w-0 flex-1'>\n\t\t\t\t\t<h2 className='text-sm font-semibold'>{title}</h2>\n\t\t\t\t\t{hasRenderableNode(description) ? (\n\t\t\t\t\t\t<div className='text-base-content/70 mt-1 text-xs leading-5'>{description}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{hasRenderableNode(actions) ? <div className='shrink-0'>{actions}</div> : null}\n\t\t\t</header>\n\t\t\t<div className='pt-3'>{children}</div>\n\t\t\t{hasRenderableNode(footer) ? (\n\t\t\t\t<footer className='border-base-300 text-base-content/70 mt-3 border-t pt-3 text-xs'>{footer}</footer>\n\t\t\t) : null}\n\t\t</section>\n\t);\n}\n\nexport type ConsoleAboutDetailListProps = ComponentPropsWithRef<'dl'> & {\n\tdetails: ConsoleAboutDetail[];\n};\n\nexport function ConsoleAboutDetailList({ className, details, ...props }: ConsoleAboutDetailListProps) {\n\treturn (\n\t\t<dl className={cn('divide-base-300 border-base-300 divide-y border-y', className)} {...props}>\n\t\t\t{details.map((item, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={item.id ?? index}\n\t\t\t\t\tclassName='grid min-w-0 gap-2 py-3 text-sm sm:grid-cols-[minmax(7rem,10rem)_minmax(0,1fr)] sm:gap-4'\n\t\t\t\t>\n\t\t\t\t\t<dt className='text-base-content/70 flex items-start gap-2'>\n\t\t\t\t\t\t{hasRenderableNode(item.icon) ? <span className='mt-0.5 shrink-0'>{item.icon}</span> : null}\n\t\t\t\t\t\t<span>{item.label}</span>\n\t\t\t\t\t</dt>\n\t\t\t\t\t<dd className='min-w-0 break-words'>\n\t\t\t\t\t\t<div className='font-medium'>{item.value}</div>\n\t\t\t\t\t\t{hasRenderableNode(item.description) ? (\n\t\t\t\t\t\t\t<div className='text-base-content/70 mt-1 text-xs leading-5'>{item.description}</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</dd>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</dl>\n\t);\n}\n\nexport type ConsoleAboutLinkListProps = Omit<ComponentPropsWithRef<'nav'>, 'children'> & {\n\tlinks: ConsoleAboutLink[];\n\tmessages?: Pick<ConsoleAboutMessages, 'opensNewWindow'>;\n};\n\nexport function ConsoleAboutLinkList({ className, links, messages, ...props }: ConsoleAboutLinkListProps) {\n\treturn (\n\t\t<nav className={cn('divide-base-300 border-base-300 divide-y border-y', className)} {...props}>\n\t\t\t{links.map((link, index) => {\n\t\t\t\tconst external = link.external ?? true;\n\t\t\t\tconst target = link.target ?? (external ? '_blank' : undefined);\n\t\t\t\tconst relTokens = new Set(link.rel?.split(/\\s+/).filter(Boolean));\n\t\t\t\tif (target === '_blank') {\n\t\t\t\t\trelTokens.add('noopener');\n\t\t\t\t\trelTokens.add('noreferrer');\n\t\t\t\t}\n\t\t\t\tconst rel = relTokens.size > 0 ? [...relTokens].join(' ') : undefined;\n\t\t\t\treturn (\n\t\t\t\t\t<a\n\t\t\t\t\t\tkey={link.id ?? index}\n\t\t\t\t\t\thref={link.href}\n\t\t\t\t\t\ttarget={target}\n\t\t\t\t\t\trel={rel}\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\ttarget === '_blank' ? `${link.label}，${messages?.opensNewWindow ?? '将在新窗口打开'}` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclassName='hover:text-primary focus-visible:ring-primary flex min-w-0 items-center gap-3 py-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset'\n\t\t\t\t\t>\n\t\t\t\t\t\t{hasRenderableNode(link.icon) ? <span className='shrink-0'>{link.icon}</span> : null}\n\t\t\t\t\t\t<span className='min-w-0 flex-1'>\n\t\t\t\t\t\t\t<span className='block font-medium'>{link.label}</span>\n\t\t\t\t\t\t\t{hasRenderableNode(link.description) ? (\n\t\t\t\t\t\t\t\t<span className='text-base-content/70 mt-0.5 block text-xs leading-5'>{link.description}</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{target === '_blank' ? <ExternalLink aria-hidden='true' className='size-3.5 shrink-0' /> : null}\n\t\t\t\t\t</a>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n\nexport type ConsoleAboutMaintainerListProps = ComponentPropsWithRef<'ul'> & {\n\tmaintainers: ConsoleAboutMaintainer[];\n};\n\nexport function ConsoleAboutMaintainerList({ className, maintainers, ...props }: ConsoleAboutMaintainerListProps) {\n\treturn (\n\t\t<ul className={cn('divide-base-300 border-base-300 divide-y border-y', className)} {...props}>\n\t\t\t{maintainers.map((maintainer, index) => {\n\t\t\t\tconst content = (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{hasRenderableNode(maintainer.avatar) ? (\n\t\t\t\t\t\t\t<span className='bg-base-200 grid size-9 shrink-0 place-items-center rounded-full'>\n\t\t\t\t\t\t\t\t{maintainer.avatar}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className='min-w-0 flex-1'>\n\t\t\t\t\t\t\t<span className='block truncate text-sm font-medium'>{maintainer.name}</span>\n\t\t\t\t\t\t\t{hasRenderableNode(maintainer.role) ? (\n\t\t\t\t\t\t\t\t<span className='text-base-content/70 mt-0.5 block truncate text-xs'>{maintainer.role}</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<li key={maintainer.id ?? index}>\n\t\t\t\t\t\t{maintainer.href ? (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref={maintainer.href}\n\t\t\t\t\t\t\t\ttarget='_blank'\n\t\t\t\t\t\t\t\trel='noopener noreferrer'\n\t\t\t\t\t\t\t\tclassName='hover:text-primary focus-visible:ring-primary flex items-center gap-3 py-3 outline-none focus-visible:ring-2 focus-visible:ring-inset'\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t\t<ExternalLink aria-hidden='true' className='size-3.5 shrink-0' />\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className='flex items-center gap-3 py-3'>{content}</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ul>\n\t);\n}\n\nfunction ConsoleAboutStatusBadge({ status }: { status: ConsoleAboutStatus }) {\n\tconst tones: Record<ConsoleAboutTone, string> = {\n\t\tneutral: 'badge-neutral',\n\t\tinfo: 'badge-info',\n\t\tsuccess: 'badge-success',\n\t\twarning: 'badge-warning',\n\t\terror: 'badge-error',\n\t};\n\treturn (\n\t\t<span className={cn('badge badge-sm gap-1', tones[status.tone ?? 'neutral'])}>\n\t\t\t{hasRenderableNode(status.icon) ? status.icon : null}\n\t\t\t{status.label}\n\t\t</span>\n\t);\n}\n\nfunction hasRenderableNode(value: ReactNode) {\n\treturn value !== null && value !== undefined && value !== false;\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-about.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/console-about-client.tsx",
			"content": "'use client';\n\nimport type { ComponentPropsWithRef } from 'react';\nimport { useEffect, useState } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ConsoleAboutClientSnapshot = {\n\tcolorScheme?: 'dark' | 'light';\n\tdevicePixelRatio?: number;\n\tlanguage?: string;\n\treducedMotion?: boolean;\n\tscreen?: string;\n\ttimezone?: string;\n\tuserAgent?: string;\n\tviewport?: string;\n};\n\nexport type ConsoleAboutClientMessages = {\n\tcolorSchemeLabel: string;\n\tdarkScheme: string;\n\tdevicePixelRatioLabel: string;\n\tlanguageLabel: string;\n\tlightScheme: string;\n\tno: string;\n\treducedMotionLabel: string;\n\tscreenLabel: string;\n\ttimezoneLabel: string;\n\tunavailable: string;\n\tuserAgentSummary: string;\n\tviewportLabel: string;\n\tyes: string;\n};\n\nexport type ConsoleAboutClientInfoProps = ComponentPropsWithRef<'div'> & {\n\tmessages?: Partial<ConsoleAboutClientMessages>;\n\tshowUserAgent?: boolean;\n};\n\nconst defaultClientMessages: ConsoleAboutClientMessages = {\n\tcolorSchemeLabel: '偏好主题',\n\tdarkScheme: '暗色',\n\tdevicePixelRatioLabel: '设备像素比',\n\tlanguageLabel: '语言',\n\tlightScheme: '亮色',\n\tno: '否',\n\treducedMotionLabel: '减少动态效果',\n\tscreenLabel: '屏幕',\n\ttimezoneLabel: '时区',\n\tunavailable: '—',\n\tuserAgentSummary: '查看用户代理',\n\tviewportLabel: '窗口',\n\tyes: '是',\n};\n\nexport function ConsoleAboutClientInfo({\n\tclassName,\n\tmessages: messageOverrides,\n\tshowUserAgent = true,\n\t...props\n}: ConsoleAboutClientInfoProps) {\n\tconst [snapshot, setSnapshot] = useState<ConsoleAboutClientSnapshot>();\n\tconst messages = { ...defaultClientMessages, ...messageOverrides };\n\n\tuseEffect(() => {\n\t\tconst update = () => setSnapshot(readClientSnapshot());\n\t\tconst dark = getMediaQuery('(prefers-color-scheme: dark)');\n\t\tconst reducedMotion = getMediaQuery('(prefers-reduced-motion: reduce)');\n\t\tupdate();\n\t\twindow.addEventListener('resize', update);\n\t\tconst unsubscribeDark = subscribeMediaQuery(dark, update);\n\t\tconst unsubscribeReducedMotion = subscribeMediaQuery(reducedMotion, update);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', update);\n\t\t\tunsubscribeDark();\n\t\t\tunsubscribeReducedMotion();\n\t\t};\n\t}, []);\n\n\tconst details = [\n\t\t[messages.viewportLabel, snapshot?.viewport],\n\t\t[messages.screenLabel, snapshot?.screen],\n\t\t[messages.devicePixelRatioLabel, snapshot?.devicePixelRatio],\n\t\t[messages.languageLabel, snapshot?.language],\n\t\t[messages.timezoneLabel, snapshot?.timezone],\n\t\t[\n\t\t\tmessages.colorSchemeLabel,\n\t\t\tsnapshot?.colorScheme\n\t\t\t\t? snapshot.colorScheme === 'dark'\n\t\t\t\t\t? messages.darkScheme\n\t\t\t\t\t: messages.lightScheme\n\t\t\t\t: undefined,\n\t\t],\n\t\t[\n\t\t\tmessages.reducedMotionLabel,\n\t\t\tsnapshot?.reducedMotion === undefined ? undefined : snapshot.reducedMotion ? messages.yes : messages.no,\n\t\t],\n\t] as const;\n\n\treturn (\n\t\t<div className={cn('min-w-0', className)} {...props}>\n\t\t\t<dl className='border-base-300 grid border-y sm:grid-cols-2'>\n\t\t\t\t{details.map(([label, value], index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={label}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'border-base-300 grid grid-cols-[7rem_minmax(0,1fr)] gap-3 border-b py-2.5 text-sm',\n\t\t\t\t\t\t\t'sm:px-3 sm:odd:border-r sm:odd:pl-0 sm:even:pr-0',\n\t\t\t\t\t\t\tindex >= details.length - 2 && 'sm:border-b-0',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<dt className='text-base-content/70'>{label}</dt>\n\t\t\t\t\t\t<dd className='min-w-0 font-medium break-words'>{value ?? messages.unavailable}</dd>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</dl>\n\t\t\t{showUserAgent ? (\n\t\t\t\t<details className='border-base-300 mt-3 border-b pb-3'>\n\t\t\t\t\t<summary className='hover:text-primary focus-visible:ring-primary w-fit cursor-pointer text-sm font-medium outline-none focus-visible:ring-2'>\n\t\t\t\t\t\t{messages.userAgentSummary}\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div className='bg-base-200/60 mt-2 overflow-x-auto rounded-sm p-3 font-mono text-xs leading-5 break-all'>\n\t\t\t\t\t\t{snapshot?.userAgent ?? messages.unavailable}\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction readClientSnapshot(): ConsoleAboutClientSnapshot {\n\tconst dark = getMediaQuery('(prefers-color-scheme: dark)');\n\tconst reducedMotion = getMediaQuery('(prefers-reduced-motion: reduce)');\n\treturn {\n\t\tviewport: `${window.innerWidth}×${window.innerHeight}`,\n\t\tscreen: `${window.screen.width}×${window.screen.height}`,\n\t\tdevicePixelRatio: window.devicePixelRatio,\n\t\tlanguage: navigator.language,\n\t\ttimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n\t\tcolorScheme: dark ? (dark.matches ? 'dark' : 'light') : undefined,\n\t\treducedMotion: reducedMotion?.matches,\n\t\tuserAgent: navigator.userAgent,\n\t};\n}\n\nfunction getMediaQuery(query: string) {\n\treturn typeof window.matchMedia === 'function' ? window.matchMedia(query) : undefined;\n}\n\nfunction subscribeMediaQuery(query: MediaQueryList | undefined, listener: () => void) {\n\tif (!query) return () => undefined;\n\tif (typeof query.addEventListener === 'function') {\n\t\tquery.addEventListener('change', listener);\n\t\treturn () => query.removeEventListener('change', listener);\n\t}\n\tif (typeof query.addListener === 'function') {\n\t\tquery.addListener(listener);\n\t\treturn () => query.removeListener(listener);\n\t}\n\treturn () => undefined;\n}\n",
			"type": "registry:component",
			"target": "@components/console-preferences/console-about-client.tsx"
		},
		{
			"path": "registry/default/blocks/console-preferences/index.ts",
			"content": "export * from './console-about';\nexport * from './console-about-client';\nexport * from './console-display-settings';\nexport * from './console-theme';\nexport * from './console-theme-catalog';\nexport * from './console-theme-component-preview';\nexport * from './console-theme-preview';\n",
			"type": "registry:component",
			"target": "@components/console-preferences/index.ts"
		}
	],
	"type": "registry:block"
}