diff --git a/.gitignore b/.gitignore
index ac50e01..f93cfd1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,6 @@ dist-site/
 
 .codefuse/
 
-.codefuseone/
\ No newline at end of file
+.codefuseone/
+# pnpm 本地 store（不应入库）
+.pnpm-store/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index afea791..33975ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,91 @@
 # Changelog
 
+## 0.4.4 (2026-07-15)
+
+### Bug Fixes
+
+- **MapScene:** 底图引擎改从 `@antv/l7` 统一导入，避免把 `@antv/l7-maps` 各引擎适配层（mapbox-gl / maplibre-gl / AMap Loader 等）及 GLSL 着色器打包进产物
+- **cli:** `aimapui --version` 改为从 `package.json` 动态读取，修复版本号长期显示 `0.1.0` 的问题
+
+### Documentation
+
+- aimapui skill 版本说明同步至 0.4.4
+
+## 0.4.3 (2026-07-14)
+
+### Bug Fixes
+
+- **SchemaLayer:** 修复 `sortValue` 递归遍历对象时遇到循环引用导致 `Maximum call stack size exceeded` 的问题，通过 `WeakSet` 检测已访问对象
+
+### Features
+
+- **ChinaDistrict:** 下钻模式支持双击上卷（dblclick 触发 drillUp）
+- **SchemaLayer/PolygonLayer:** 新增 `onDblclick`/`onUndblclick` 事件，与 click 互斥
+
+## 0.4.2 (2026-07-13)
+
+### Documentation
+
+- 走查修复文档与 skill 同步：补充 H3Layer、RouteLayer、AnnotationControl、ResetViewControl、LogoControl、LegendControl、SatelliteLayerControl 站点文档
+- 删除 RouteLayer 已废弃属性文档（glow/animate/animateSpeed）
+- controls.md skill reference 补齐所有控件
+- CHANGELOG.md 补录 0.3.2~0.4.1 变更记录
+- SKILL.md 补充 @antv/aimapui-plot 包说明
+- CLI 版本对齐至 0.4.2
+
+## 0.4.1 (2026-07-13)
+
+### Features
+
+- **台风地图:** 新增台风路径地图 Demo，支持降雨/云图/雷达/风场/卫星图层切换（浙江水利气象 API）
+- **台风预报:** 台风预报路径改用实线渲染，修复虚线像素级退化成点串问题；历史轨迹使用实线
+- **台风地图移动端:** 台风地图移动端适配 + BlockPage 设备切换
+- **map-app-builder skill:** 新增 map-app-builder skill，覆盖布局架构、图层层级、DOM z-index、主题系统等
+- **Canvas 风场图层:** 添加 Canvas 风场图层及 PC 端 UI 布局优化
+- **Apple/Google Maps 演示:** 优化 AppleMaps/GoogleMaps 演示与台风默认图层
+
+### Breaking Changes
+
+- **RouteLayer:** 移除 `glow`、`animate`、`animateSpeed` 属性，发光与流动动画能力不再支持
+
+### Bug Fixes
+
+- **RouteLayer:** 修复文字与图标/圆点重叠问题，优化默认参数（`lineWidth` 3→4，`stopSize` 14→8）
+- **RouteLayer:** 修复 `rest` 未定义错误、NaN 坐标校验及优化标注布局
+- **GoogleMaps:** 修复 GoogleMapsMobileDemo 地图无法交互的问题
+
+## 0.3.5 (2026-06-20)
+
+### Bug Fixes
+
+- **ImageCalibrationControl:** 清理冗余判断逻辑
+- 添加 `@types/geojson` 依赖
+- 更新依赖锁文件及 plot 包配置
+
+## 0.3.4 (2026-06-19)
+
+### Features
+
+- **SatelliteLayerControl:** 新增卫星影像图层控件，支持提供商切换（高德/天地图/Google）、可见性开关、透明度调节
+- 补齐复合图层设计规范
+
+### Bug Fixes
+
+- **ImageCalibrationControl:** 修复多图切换时图层消失的问题
+
+## 0.3.3 (2026-06-19)
+
+### Refactoring
+
+- 地图引擎从动态 `import` 改为静态 `import`，避免 chunk 加载失败
+
+## 0.3.2 (2026-06-19)
+
+### Bug Fixes
+
+- **ChinaDistrict:** 修复中国行政区划直辖市下钻时 adcode 前缀匹配不生效的问题
+- 标注 L7 版本要求 ≥ 2.28.14
+
 ## 0.3.1 (2026-06-18)
 
 ### Features
diff --git a/packages/cli/package.json b/packages/cli/package.json
index e1d419f..130f79b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/aimapui-cli",
-  "version": "0.3.3",
+  "version": "0.4.4",
   "type": "module",
   "description": "CLI for adding @antv/aimapui components to your project (shadcn/ui style)",
   "bin": {
diff --git a/packages/cli/registry.json b/packages/cli/registry.json
index e5ec226..b13e0f1 100644
--- a/packages/cli/registry.json
+++ b/packages/cli/registry.json
@@ -3,8 +3,7 @@
   "name": "@antv/aimapui",
   "baseUrl": "https://raw.githubusercontent.com/antvis/aimapui/main",
   "peerDependencies": {
-    "@antv/l7": "^2.28.0",
-    "@antv/l7-maps": "^2.28.0",
+    "@antv/l7": "^2.29.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index a1bf000..f62f252 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 import { Command } from 'commander';
+import packageJson from '../package.json' with { type: 'json' };
 import { init } from './commands/init.js';
 import { add } from './commands/add.js';
 import { list } from './commands/list.js';
@@ -10,7 +11,7 @@ const program = new Command();
 program
   .name('aimapui')
   .description('CLI for adding @antv/aimapui components to your project')
-  .version('0.1.0');
+  .version(packageJson.version);
 
 program
   .command('init')
diff --git a/packages/core/package.json b/packages/core/package.json
index 8da79b1..ed3c279 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/aimapui",
-  "version": "0.3.3",
+  "version": "0.4.4",
   "type": "module",
   "description": "Schema/DSL-driven React map visualization component library powered by L7",
   "main": "dist/index.cjs",
@@ -36,8 +36,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@antv/l7": "2.28.14",
-    "@antv/l7-maps": "2.28.14",
+    "@antv/l7": "2.29.1",
     "ahooks": "^3.8.4",
     "clsx": "^2.1.1",
     "geotiff": "^3.0.5",
@@ -49,7 +48,9 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.2",
     "@tailwindcss/vite": "^4.0.0",
+    "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/supercluster": "^7.1.3",
diff --git a/packages/core/postcss.config.mjs b/packages/core/postcss.config.mjs
new file mode 100644
index 0000000..a34a3d5
--- /dev/null
+++ b/packages/core/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
diff --git a/packages/core/src/components/CompositeLayer/ArcFlowLayer.tsx b/packages/core/src/components/CompositeLayer/ArcFlowLayer.tsx
index cad45e3..bc92ca0 100644
--- a/packages/core/src/components/CompositeLayer/ArcFlowLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/ArcFlowLayer.tsx
@@ -168,8 +168,8 @@ export function ArcFlowLayer({
   nodeSize = 4,
   nodeSizeRange,
   nodePulse = false,
-  showTooltip = true,
-  showNodePopup = true,
+  showTooltip = false,
+  showNodePopup = false,
   activeColor = '#FFD93D',
   onArcHover,
   onArcClick,
diff --git a/packages/core/src/components/CompositeLayer/BubbleLayer.tsx b/packages/core/src/components/CompositeLayer/BubbleLayer.tsx
index 1ae8c41..be8330e 100644
--- a/packages/core/src/components/CompositeLayer/BubbleLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/BubbleLayer.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import type { ActiveConfig, LayerSchema, SelectConfig, LayerEventPayload } from '../../schema/types';
 import { PointLayer } from '../Layer/PointLayer';
+import { getColorPalette, type ColorScheme } from '../../constants/colorPalettes';
 
 export const BUBBLE_SIZE_LEVELS = [8, 16, 32, 48, 64] as const;
 
@@ -36,6 +37,8 @@ export interface BubbleLayerProps extends Omit<LayerSchema, 'type' | 'source' |
   labelOffset?: [number, number];
   /** sizeField 为离散值时，对应每个 sizeValues 的域值顺序（默认 1..N） */
   sizeDomain?: Array<string | number>;
+  /** 连续数值尺寸范围 [min, max]，与 sizeField 配合使用。提供时自动线性映射 */
+  sizeRange?: [number, number];
   /** 气泡锚点，决定标签相对气泡的连接参考点 */
   bubbleAnchor?: BubbleAnchor;
   /** 文本锚点，映射到 textAnchor */
@@ -55,6 +58,9 @@ export interface BubbleLayerProps extends Omit<LayerSchema, 'type' | 'source' |
   /** 语义色板映射字段，例如 status: primary|warning|error|success */
   semanticColorField?: string;
 
+  /** 色板预设，默认 'categorical'。当无 semanticColorField 且无 colorValues 时使用 */
+  colorScheme?: ColorScheme;
+
   // ===== 事件回调 =====
   /** 点击事件 */
   onClick?: (payload: LayerEventPayload) => void;
@@ -88,14 +94,16 @@ export function BubbleLayer({
   showLabel = true,
   labelOffset,
   sizeDomain,
+  sizeRange,
   bubbleAnchor = 'bottom',
   labelAnchor = 'top',
-  hoverEffect = true,
-  clickEffect = true,
-  tooltipEffect = true,
+  hoverEffect = false,
+  clickEffect = false,
+  tooltipEffect = false,
   tooltipFields,
   tooltipTemplate,
   semanticColorField,
+  colorScheme = 'categorical',
   color = '#2563eb',
   size = 16,
   sizeField,
@@ -119,14 +127,16 @@ export function BubbleLayer({
             BUBBLE_QUALITATIVE_COLORS.error,
             BUBBLE_QUALITATIVE_COLORS.success,
           ]
-        : undefined);
+        : mappedColorField
+          ? [...getColorPalette(colorScheme)]
+          : undefined);
 
   const mappedSizeValues = sizeField
-    ? (sizeValues ?? [...BUBBLE_SIZE_LEVELS])
+    ? (sizeValues ?? (sizeRange ? undefined : [...BUBBLE_SIZE_LEVELS]))
     : sizeValues;
 
-  const defaultActive: ActiveConfig = { color: '#60a5fa' };
-  const defaultSelect: SelectConfig = { color: '#1d4ed8' };
+  const defaultActive: ActiveConfig = { color: '#60a5fa', duration: 150 };
+  const defaultSelect: SelectConfig = { color: '#1d4ed8', duration: 150 };
 
   const resolvedEvents = (() => {
     const origin = rest.events;
@@ -150,7 +160,7 @@ export function BubbleLayer({
 
   // 气泡圆图层的 size 配置：当有 sizeField 时不传固定 size 避免冲突
   const bubbleSizeProps = sizeField
-    ? { sizeField, sizeValues: mappedSizeValues }
+    ? { sizeField, sizeValues: mappedSizeValues, ...(sizeRange ? { sizeRange } : {}) }
     : { size };
 
   return (
@@ -195,7 +205,7 @@ export function BubbleLayer({
           shapeValues="text"
           color={labelColor}
           size={labelSize}
-          zIndex={(rest.zIndex ?? 0) + 1}
+          zIndex={(rest.zIndex ?? 0) + 10}
           style={{
             textAnchor: labelAnchor,
             textOffset: labelOffset ?? [0, 0],
diff --git a/packages/core/src/components/CompositeLayer/ChinaDistrict.tsx b/packages/core/src/components/CompositeLayer/ChinaDistrict.tsx
index d2fb478..0a63e0e 100644
--- a/packages/core/src/components/CompositeLayer/ChinaDistrict.tsx
+++ b/packages/core/src/components/CompositeLayer/ChinaDistrict.tsx
@@ -88,8 +88,10 @@ export interface ChinaDistrictProps {
   /** Tooltip 自定义字段 */
   tooltipFields?: string[];
 
-  /** 区域点击事件 */
+  /** 区域单击事件 */
   onRegionClick?: (feature: Record<string, unknown>, level: AdministrativeLevel) => void;
+  /** 区域双击事件（上卷时触发） */
+  onRegionDblclick?: (feature: Record<string, unknown>, level: AdministrativeLevel) => void;
   /** 图层 zIndex */
   zIndex?: number;
 }
@@ -141,11 +143,12 @@ export const ChinaDistrict = React.forwardRef<ChinaDistrictHandle, ChinaDistrict
   showLabel = true,
   labelField = 'name',
   labelSize = 12,
-  hoverHighlight = true,
-  clickSelect = true,
-  showTooltip = true,
+  hoverHighlight = false,
+  clickSelect = false,
+  showTooltip = false,
   tooltipFields,
   onRegionClick,
+  onRegionDblclick,
   zIndex = 0,
 } = props;
   const scene = useScene();
@@ -288,7 +291,7 @@ export const ChinaDistrict = React.forwardRef<ChinaDistrictHandle, ChinaDistrict
     }
   }, [autoFitOnDrill, scene, displayData, drillPath.length]);
 
-  // 事件处理
+  // 事件处理：单击下钻
   const handleClick = useCallback((payload: LayerEventPayload) => {
     const feature = payload.feature;
     if (!feature) return;
@@ -316,6 +319,13 @@ export const ChinaDistrict = React.forwardRef<ChinaDistrictHandle, ChinaDistrict
     }
   }, [labelField, currentLevel, clickSelect, drillEnabled, drillPath, controlledDrillPath, onDrill, onRegionClick]);
 
+  // 事件处理：undblclick 上卷（确认单击未触发双击时回退一级）
+  const handleUndblclick = useCallback(() => {
+    if (drillEnabled) {
+      drillUp();
+    }
+  }, [drillEnabled, drillUp]);
+
   // 所有 hooks 必须在 conditional return 之前
   if (!scene || !displayData) return null;
 
@@ -351,10 +361,11 @@ export const ChinaDistrict = React.forwardRef<ChinaDistrictHandle, ChinaDistrict
           ? { colorField: valueField, colorValues: colors }
           : { color: colors[2] ?? '#3b82f6' }
         )}
-        active={hoverHighlight ? { color: '#ffffff' } : undefined}
-        select={clickSelect ? { color: '#0f172a' } : undefined}
+        active={hoverHighlight ? { color: '#ffffff', duration: 150 } : undefined}
+        select={clickSelect ? { color: '#0f172a', duration: 150 } : undefined}
         style={{ opacity: fillOpacity }}
         onClick={handleClick}
+        onDblclick={handleUndblclick}
         zIndex={zIndex + 2}
       />
 
diff --git a/packages/core/src/components/CompositeLayer/FillLayer.tsx b/packages/core/src/components/CompositeLayer/FillLayer.tsx
index 03e669a..d88f5c4 100644
--- a/packages/core/src/components/CompositeLayer/FillLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/FillLayer.tsx
@@ -4,14 +4,14 @@ import { useScene } from '../../context/SceneContext';
 import { PolygonLayer } from '../Layer/PolygonLayer';
 import { LineLayer } from '../Layer/LineLayer';
 import { PointLayer } from '../Layer/PointLayer';
+import { getColorPalette, type ColorScheme } from '../../constants/colorPalettes';
 
-export type FillColorMapping = 'sequential' | 'diverging' | 'categorical';
+export type FillColorMapping = ColorScheme;
 
-export const CHOROPLETH_SEQUENTIAL_COLORS = ['#dbeafe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb'] as const;
-
-export const CHOROPLETH_DIVERGING_COLORS = ['#dc2626', '#fca5a5', '#e5e7eb', '#86efac', '#16a34a'] as const;
-
-export const CHOROPLETH_CATEGORICAL_COLORS = ['#2563eb', '#f59e0b', '#ef4444', '#10b981', '#8b5cf6', '#14b8a6', '#f97316', '#64748b'] as const;
+// Re-export for backward compatibility
+export { SEQUENTIAL_COLORS as CHOROPLETH_SEQUENTIAL_COLORS } from '../../constants/colorPalettes';
+export { DIVERGING_COLORS as CHOROPLETH_DIVERGING_COLORS } from '../../constants/colorPalettes';
+export { CATEGORICAL_COLORS as CHOROPLETH_CATEGORICAL_COLORS } from '../../constants/colorPalettes';
 
 export interface FillLayerProps extends Omit<LayerSchema, 'type' | 'source' | 'sourceType' | 'sourceConfig'> {
   source: LayerSchema['source'];
@@ -40,6 +40,8 @@ export interface FillLayerProps extends Omit<LayerSchema, 'type' | 'source' | 's
 
   onRegionClick?: (payload: LayerEventPayload) => void;
   onDrilldown?: (feature: Record<string, unknown>) => void;
+  onMouseMove?: (payload: LayerEventPayload) => void;
+  onMouseLeave?: (payload: LayerEventPayload) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onLayerCreated?: (layer: any) => void;
 
@@ -66,20 +68,22 @@ export function FillLayer({
   showStroke = true,
   strokeColor = 'rgba(255,255,255,0.30)',
   strokeWidth = 0.5,
-  hoverEffect = true,
-  clickEffect = true,
-  stickySelection = true,
-  tooltipEffect = true,
+  hoverEffect = false,
+  clickEffect = false,
+  stickySelection = false,
+  tooltipEffect = false,
   tooltipFields,
   tooltipTemplate,
   regionIdField = 'name',
   highlightStrokeColor = '#2563eb',
   highlightStrokeWidth = 2,
-  zoomToRegionOnClick = true,
+  zoomToRegionOnClick = false,
   clickZoomPadding = 40,
   clickZoomDelta = 1.2,
   onRegionClick,
   onDrilldown,
+  onMouseMove,
+  onMouseLeave,
   onLayerCreated,
   showLabel = false,
   labelField = 'name',
@@ -136,15 +140,7 @@ export function FillLayer({
 
   const mappedColorValues = useMemo(() => {
     if (colorValues) return colorValues;
-    switch (colorMapping) {
-      case 'diverging':
-        return [...CHOROPLETH_DIVERGING_COLORS];
-      case 'categorical':
-        return [...CHOROPLETH_CATEGORICAL_COLORS];
-      case 'sequential':
-      default:
-        return [...CHOROPLETH_SEQUENTIAL_COLORS];
-    }
+    return [...getColorPalette(colorMapping)];
   }, [colorValues, colorMapping]);
 
   const tooltipValueField = valueField ?? colorField ?? 'value';
@@ -154,8 +150,8 @@ export function FillLayer({
     [tooltipTemplate, tooltipNameField, tooltipValueField, percentageField],
   );
 
-  const defaultActive: ActiveConfig = { color: '#ffffff' };
-  const defaultSelect: SelectConfig = { color: '#0f172a' };
+  const defaultActive: ActiveConfig = { color: '', duration: 150 };
+  const defaultSelect: SelectConfig = { color: '#0f172a', duration: 150 };
 
   const labelSource = useMemo(
     () => buildLabelSourceFromGeoJSON(source, sourceType, labelField, regionIdField, labelAreaThreshold),
@@ -237,34 +233,27 @@ export function FillLayer({
         events={resolvedEvents}
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
+        onMouseLeave={(payload) => {
+          handleMouseLeave();
+          onMouseLeave?.(payload);
+        }}
+        onMouseMove={onMouseMove}
         onLayerCreated={onLayerCreated}
         style={{ opacity: 0.8, ...(style ?? {}) }}
       />
 
-      {showStroke && <LineLayer source={source} sourceType={sourceType} color={strokeColor} size={strokeWidth} zIndex={2} />}
+      {showStroke && <LineLayer source={source} sourceType={sourceType} color={strokeColor} size={strokeWidth} zIndex={(rest.zIndex ?? 0) + 2} />}
 
       {hoverEffect && hoveredRegionId !== null && (
-        <>
-          <LineLayer
-            source={source}
-            sourceType={sourceType}
-            color={withAlpha(highlightStrokeColor, 0.35)}
-            size={highlightStrokeWidth + 2}
-            filterField={regionIdField}
-            filterValues={[hoveredRegionId]}
-            zIndex={3}
-          />
-          <LineLayer
-            source={source}
-            sourceType={sourceType}
-            color={highlightStrokeColor}
-            size={highlightStrokeWidth}
-            filterField={regionIdField}
-            filterValues={[hoveredRegionId]}
-            zIndex={4}
-          />
-        </>
+        <LineLayer
+          source={source}
+          sourceType={sourceType}
+          color={withAlpha(highlightStrokeColor, 0.6)}
+          size={highlightStrokeWidth}
+          filterField={regionIdField}
+          filterValues={[hoveredRegionId]}
+          zIndex={(rest.zIndex ?? 0) + 3}
+        />
       )}
 
       {clickEffect && selectedRegionId !== null && (
@@ -275,7 +264,7 @@ export function FillLayer({
           size={Math.max(1.5, highlightStrokeWidth)}
           filterField={regionIdField}
           filterValues={[selectedRegionId]}
-          zIndex={5}
+          zIndex={(rest.zIndex ?? 0) + 5}
         />
       )}
 
@@ -288,6 +277,7 @@ export function FillLayer({
           shapeValues="text"
           color={labelColor}
           size={labelSize}
+          zIndex={(rest.zIndex ?? 0) + 10}
           style={{
             textAllowOverlap: false,
             stroke: '#ffffff',
diff --git a/packages/core/src/components/CompositeLayer/H3Layer.tsx b/packages/core/src/components/CompositeLayer/H3Layer.tsx
index 4b12644..40f6cb7 100644
--- a/packages/core/src/components/CompositeLayer/H3Layer.tsx
+++ b/packages/core/src/components/CompositeLayer/H3Layer.tsx
@@ -4,8 +4,10 @@ import type { LayerSchema, LayerEventPayload } from '../../schema/types';
 import { PolygonLayer } from '../Layer/PolygonLayer';
 import { LineLayer } from '../Layer/LineLayer';
 import { PointLayer } from '../Layer/PointLayer';
+import { getColorPalette, type ColorScheme } from '../../constants/colorPalettes';
 
-export const H3_SEQUENTIAL_COLORS = ['#dbeafe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb'] as const;
+// Re-export for backward compatibility
+export { SEQUENTIAL_COLORS as H3_SEQUENTIAL_COLORS } from '../../constants/colorPalettes';
 
 export interface H3DataItem {
   [key: string]: unknown;
@@ -16,6 +18,9 @@ export interface H3LayerProps
   source: H3DataItem[];
   h3Field?: string;
 
+  /** 色板预设，默认 'sequential' */
+  colorScheme?: ColorScheme;
+
   showStroke?: boolean;
   strokeColor?: string;
   strokeWidth?: number;
@@ -40,11 +45,12 @@ export function H3Layer({
   color,
   colorField,
   colorValues,
+  colorScheme = 'sequential',
   opacity = 0.8,
   showStroke = true,
   strokeColor = 'rgba(255,255,255,0.3)',
   strokeWidth = 0.5,
-  hoverEffect = true,
+  hoverEffect = false,
   clickEffect = false,
   showLabel = false,
   labelField,
@@ -116,8 +122,8 @@ export function H3Layer({
     return { type: 'FeatureCollection' as const, features };
   }, [source, h3Field, showLabel]);
 
-  const resolvedActive = active ?? (hoverEffect ? { color: '#2563eb' } : false);
-  const resolvedSelect = select ?? (clickEffect ? { color: '#1d4ed8' } : false);
+  const resolvedActive = active ?? (hoverEffect ? { color: '#2563eb', duration: 150 } : false);
+  const resolvedSelect = select ?? (clickEffect ? { color: '#1d4ed8', duration: 150 } : false);
 
   return (
     <>
@@ -127,7 +133,7 @@ export function H3Layer({
         sourceType="geojson"
         color={color}
         colorField={colorField}
-        colorValues={colorValues}
+        colorValues={colorValues ?? [...getColorPalette(colorScheme)]}
         opacity={opacity}
         active={resolvedActive}
         select={resolvedSelect}
@@ -143,6 +149,7 @@ export function H3Layer({
           sourceType="geojson"
           color={strokeColor}
           size={strokeWidth}
+          zIndex={(rest.zIndex ?? 0) + 2}
           style={{ opacity: 1 }}
         />
       )}
@@ -154,6 +161,7 @@ export function H3Layer({
           shapeValues="text"
           color={labelColor}
           size={labelSize}
+          zIndex={(rest.zIndex ?? 0) + 10}
           style={{
             textAnchor: 'center',
             textOffset: [0, 0],
diff --git a/packages/core/src/components/CompositeLayer/HexagonLayer.tsx b/packages/core/src/components/CompositeLayer/HexagonLayer.tsx
index 6a68483..b4900b9 100644
--- a/packages/core/src/components/CompositeLayer/HexagonLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/HexagonLayer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LayerSchema, LayerEventPayload } from '../../schema/types';
 import { HeatmapLayer } from '../Layer/HeatmapLayer';
+import { getColorPalette, type ColorScheme } from '../../constants/colorPalettes';
 
 /**
  * 蜂窝热力图渲染模式
@@ -36,6 +37,9 @@ export interface HexagonLayerProps
   /** hover 高亮色，默认 '#fbbf24' (secondary) */
   activeColor?: string;
 
+  /** 色板预设，默认 'sequential'。用于生成 heatmap rampColors */
+  colorScheme?: ColorScheme;
+
   onClick?: (payload: LayerEventPayload) => void;
   onMouseMove?: (payload: LayerEventPayload) => void;
   onMouseEnter?: (payload: LayerEventPayload) => void;
@@ -62,8 +66,9 @@ export function HexagonLayer({
   showStroke = false,
   strokeColor = 'rgba(255,255,255,0.3)',
   strokeWidth = 0.5,
-  hoverEffect = true,
+  hoverEffect = false,
   activeColor = '#fbbf24',
+  colorScheme = 'sequential',
   onClick,
   onMouseMove,
   onMouseEnter,
@@ -84,9 +89,16 @@ export function HexagonLayer({
   const shape = mode === '3d' ? 'hexagonColumn' : 'hexagon';
 
   // 构建样式配置
+  const palette = getColorPalette(colorScheme);
+  const rampColors: Record<number, string> = {};
+  palette.forEach((c, i) => {
+    rampColors[i / (palette.length - 1)] = c;
+  });
+
   const resolvedStyle: Record<string, unknown> = {
     coverage: 0.8,
     angle: 0,
+    rampColors,
     ...(style ?? {}),
   };
 
@@ -104,7 +116,7 @@ export function HexagonLayer({
       sourceConfig={{ ...sourceConfig, transforms }}
       shape={shape}
       style={resolvedStyle}
-      active={hoverEffect ? { color: activeColor } : undefined}
+      active={hoverEffect ? { color: activeColor, duration: 150 } : undefined}
       onClick={onClick}
       onMouseMove={onMouseMove}
       onMouseEnter={onMouseEnter}
diff --git a/packages/core/src/components/CompositeLayer/IconLayer.tsx b/packages/core/src/components/CompositeLayer/IconLayer.tsx
index 3cffc70..0691e49 100644
--- a/packages/core/src/components/CompositeLayer/IconLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/IconLayer.tsx
@@ -60,6 +60,13 @@ export interface IconLayerProps extends Omit<LayerSchema, 'type' | 'source' | 's
   onClick?: (payload: LayerEventPayload) => void;
   onMouseEnter?: (payload: LayerEventPayload) => void;
   onMouseLeave?: (payload: LayerEventPayload) => void;
+
+  /**
+   * 定位精度模式
+   * - precise: 精确地址，使用尖头 pin 图标（默认）
+   * - general: 模糊区域，使用圆形标记，避免误导用户以为精确定位
+   */
+  accuracy?: 'precise' | 'general';
 }
 
 /**
@@ -98,6 +105,7 @@ export function IconLayer({
   onClick,
   onMouseEnter,
   onMouseLeave,
+  accuracy = 'precise',
   ...rest
 }: IconLayerProps) {
   const scene = useScene();
@@ -107,6 +115,9 @@ export function IconLayer({
   const iconKeys = useMemo(() => Object.keys(iconMap), [iconMap]);
   const resolvedIconSize = size ?? iconSize;
   const resolvedLabelField = labelField ?? iconField;
+  // general 模式下使用居中锚点 + 圆形标记
+  const isGeneralMode = accuracy === 'general';
+  const effectiveIconAnchor = isGeneralMode ? 'center' : iconAnchor;
 
   // 注册图片资源
   useEffect(() => {
@@ -158,21 +169,26 @@ export function IconLayer({
         source={source}
         sourceType={sourceType}
         sourceConfig={sourceConfig}
-        shapeField={iconField}
-        shapeValues={iconKeys}
+        {...(isGeneralMode
+          ? { shape: 'circle', color: rest.color ?? '#3b82f6' }
+          : { shapeField: iconField, shapeValues: iconKeys })}
         size={resolvedIconSize}
         style={{
           ...((rest.style as Record<string, unknown>) ?? {}),
-          anchor: iconAnchor,
+          anchor: effectiveIconAnchor,
           allowOverlap: iconAllowOverlap,
-          // 图标白色描边 (Halo) 增强复杂底图辨识度
-          stroke: '#ffffff',
-          strokeWidth: 1,
-          // 轻微阴影提供物理悬浮感
-          shadowColor: 'rgba(0,0,0,0.2)',
-          shadowBlur: 4,
-          shadowOffsetX: 0,
-          shadowOffsetY: 2,
+          ...(isGeneralMode
+            ? { opacity: 0.7, stroke: '#ffffff', strokeWidth: 1.5 }
+            : {
+                // 图标白色描边 (Halo) 增强复杂底图辨识度
+                stroke: '#ffffff',
+                strokeWidth: 1,
+                // 轻微阴影提供物理悬浮感
+                shadowColor: 'rgba(0,0,0,0.2)',
+                shadowBlur: 4,
+                shadowOffsetX: 0,
+                shadowOffsetY: 2,
+              }),
         }}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
diff --git a/packages/core/src/components/CompositeLayer/RouteLayer.tsx b/packages/core/src/components/CompositeLayer/RouteLayer.tsx
index fe8e77f..c756b88 100644
--- a/packages/core/src/components/CompositeLayer/RouteLayer.tsx
+++ b/packages/core/src/components/CompositeLayer/RouteLayer.tsx
@@ -87,12 +87,6 @@ export interface RouteLayerProps {
   lineWidth?: number;
   /** 路径透明度，默认 0.9 */
   opacity?: number;
-  /** 是否显示发光效果，默认 true */
-  glow?: boolean;
-  /** 是否启用流动动画，默认 false */
-  animate?: boolean;
-  /** 动画速度，默认 1 */
-  animateSpeed?: number;
 
   // ===== 途经点视觉 =====
   /** 途经点大小，默认 14 */
@@ -109,7 +103,7 @@ export interface RouteLayerProps {
   stopNameColor?: string;
   /** 名称文字大小，默认 11 */
   stopNameSize?: number;
-  /** 停留点渲染模式，默认 'point' */
+  /** 停留点渲染模式，默认 'marker'（优先使用 marker 类型标注） */
   stopRenderer?: 'point' | 'marker' | 'icon';
   /** marker 模式下的默认变体，默认 'circle' */
   stopMarkerVariant?: MarkerVariant;
@@ -123,7 +117,7 @@ export interface RouteLayerProps {
   stopIconAnchor?: IconAnchor;
 
   // ===== 交互 =====
-  /** 是否在点击途经点时显示 Popup，默认 true */
+  /** 是否在点击途经点时显示 Popup，默认 false */
   showStopPopup?: boolean;
   /** hover 高亮色 */
   activeColor?: string;
@@ -131,6 +125,8 @@ export interface RouteLayerProps {
   onPathClick?: (payload: LayerEventPayload) => void;
   /** 途经点点击 */
   onStopClick?: (payload: LayerEventPayload) => void;
+  /** 图层层级 */
+  zIndex?: number;
 }
 
 /**
@@ -138,9 +134,7 @@ export interface RouteLayerProps {
  *
  * 遵循设计规范：
  * - 序列化途经点 (Numbered Stops)
- * - 路径发光效果
  * - 分段着色（路况/属性）
- * - 流动动画
  *
  * @example
  * ```tsx
@@ -150,8 +144,6 @@ export interface RouteLayerProps {
  *     { lng: 120.15, lat: 30.28, name: '西湖' },
  *     { lng: 120.17, lat: 30.25, name: '灵隐寺' },
  *   ]}
- *   animate
- *   glow
  * />
  * ```
  */
@@ -163,28 +155,27 @@ export function RouteLayer({
   onRouteQuery,
   onRouteResult,
   color = '#2563eb',
-  lineWidth = 4,
+  lineWidth = 3,
   opacity = 0.9,
-  glow = true,
-  animate = false,
-  animateSpeed = 1,
-  stopSize = 14,
+  stopSize = 8,
   stopColor,
   endColor = '#10b981',
   showStopIndex = true,
   showStopName = true,
   stopNameColor = '#334155',
   stopNameSize = 11,
-  stopRenderer = 'point',
+  stopRenderer = 'marker',
   stopMarkerVariant = 'circle',
   stopIconMap,
   stopIconField = 'iconValue',
   stopIconSize = 16,
   stopIconAnchor = 'bottom',
-  showStopPopup = true,
+  showStopPopup = false,
   activeColor = '#fbbf24',
   onPathClick,
   onStopClick,
+  zIndex,
+  ...rest
 }: RouteLayerProps) {
   // 交通路线查询结果
   const [routeQueryResult, setRouteQueryResult] = useState<RouteQueryResult | null>(null);
@@ -249,7 +240,7 @@ export function RouteLayer({
     return null;
   }, [effectivePath, effectiveSegments, color, lineWidth]);
 
-  // 发光层 GeoJSON（同路径但宽度更大）
+  // 是否存在分段颜色（用于主路径分段色/宽渲染）
   const hasSegmentColors = effectiveSegments && effectiveSegments.some((s) => s.color);
 
   // 途经点数据（增加序号和类型）
@@ -262,8 +253,45 @@ export function RouteLayer({
     let merged = [...stops, ...extraStops];
 
     if (effectivePathForStops && effectivePathForStops.length >= 2) {
-      const [startLng, startLat] = effectivePathForStops[0];
-      const [endLng, endLat] = effectivePathForStops[effectivePathForStops.length - 1];
+      const startCoord = effectivePathForStops[0];
+      const endCoord = effectivePathForStops[effectivePathForStops.length - 1];
+      
+      // 防御性检查：确保坐标有效
+      if (!startCoord || !endCoord || startCoord.length < 2 || endCoord.length < 2) {
+        return merged.map((stop, idx) => ({
+          ...stop,
+          index: stop.index ?? idx + 1,
+          type: stop.type ?? (idx === 0 ? 'start' : idx === merged.length - 1 ? 'end' : 'waypoint'),
+          stopColor: (stop.type === 'end' || (!stop.type && idx === merged.length - 1))
+            ? endColor
+            : (stopColor ?? color),
+          iconValue: stop.icon ?? 'marker',
+          indexLabel: String(stop.index ?? idx + 1),
+          markerColorValue: stop.markerColor ?? resolveMarkerColor(stop.type ?? (idx === 0 ? 'start' : idx === merged.length - 1 ? 'end' : 'waypoint')),
+        }));
+      }
+      
+      const [startLng, startLat] = startCoord;
+      const [endLng, endLat] = endCoord;
+      
+      // 检查坐标值是否为有效数字
+      if (typeof startLng !== 'number' || typeof startLat !== 'number' || 
+          typeof endLng !== 'number' || typeof endLat !== 'number' ||
+          !isFinite(startLng) || !isFinite(startLat) || 
+          !isFinite(endLng) || !isFinite(endLat)) {
+        return merged.map((stop, idx) => ({
+          ...stop,
+          index: stop.index ?? idx + 1,
+          type: stop.type ?? (idx === 0 ? 'start' : idx === merged.length - 1 ? 'end' : 'waypoint'),
+          stopColor: (stop.type === 'end' || (!stop.type && idx === merged.length - 1))
+            ? endColor
+            : (stopColor ?? color),
+          iconValue: stop.icon ?? 'marker',
+          indexLabel: String(stop.index ?? idx + 1),
+          markerColorValue: stop.markerColor ?? resolveMarkerColor(stop.type ?? (idx === 0 ? 'start' : idx === merged.length - 1 ? 'end' : 'waypoint')),
+        }));
+      }
+      
       const hasStart = stops.some((s) => Math.abs(s.lng - startLng) < 1e-6 && Math.abs(s.lat - startLat) < 1e-6);
       const hasEnd = stops.some((s) => Math.abs(s.lng - endLng) < 1e-6 && Math.abs(s.lat - endLat) < 1e-6);
 
@@ -324,20 +352,6 @@ export function RouteLayer({
 
   return (
     <>
-      {/* 发光层（底层，更宽更透明） */}
-      {glow && (
-        <LineLayer
-          source={pathGeoJSON}
-          sourceType="geojson"
-          shape={lineShape}
-          color={hasSegmentColors ? undefined : color}
-          colorField={hasSegmentColors ? 'color' : undefined}
-          colorValues={hasSegmentColors ? effectiveSegments!.map((s) => s.color || color) : undefined}
-          size={lineWidth * 2.5}
-          style={{ opacity: 0.15 }}
-        />
-      )}
-
       {/* 主路径层 */}
       <LineLayer
         source={pathGeoJSON}
@@ -354,20 +368,6 @@ export function RouteLayer({
         onClick={onPathClick}
       />
 
-      {/* 流动粒子层 — 白色半透明虚线沿路径流动，指示行驶方向 */}
-      {animate && (
-        <LineLayer
-          source={pathGeoJSON}
-          sourceType="geojson"
-          shape="line"
-          color="#ffffff"
-          size={Math.max(1.5, lineWidth * 0.5)}
-          style={{ opacity: 0.6, lineType: 'dash', lineDash: [8, 16] }}
-          animate={{ enable: true, speed: animateSpeed, duration: 1500 }}
-          zIndex={10}
-        />
-      )}
-
       {/* 途经点层 */}
       {stopsWithIndex.length > 0 && stopRenderer === 'point' && (
         <PointLayer
@@ -415,7 +415,7 @@ export function RouteLayer({
           size={stopNameSize}
           style={{
             textAnchor: 'top',
-            textOffset: [0, stopSize / 2 + 4],
+            textOffset: [0, -3 * stopSize],
             stroke: '#ffffff',
             strokeWidth: 2,
             fontWeight: '500',
@@ -454,7 +454,6 @@ export function RouteLayer({
           size={stopNameSize}
           style={{
             textAnchor: 'top',
-            textOffset: [0, (stopIconAnchor === 'bottom' ? stopIconSize : 0) + 14],
             stroke: '#ffffff',
             strokeWidth: 2,
             fontWeight: '500',
@@ -501,7 +500,7 @@ export function RouteLayer({
           size={stopNameSize}
           style={{
             textAnchor: 'top',
-            textOffset: [0, 18],
+            textOffset: [0, -((MARKER_SIZE_CONFIG[stopMarkerVariant]?.size ?? 18) / 2 + 4)],
             stroke: '#ffffff',
             strokeWidth: 2,
             fontWeight: '500',
@@ -534,6 +533,14 @@ function resolveMarkerColor(type: RouteStop['type']): MarkerColor {
   }
 }
 
+/** Marker 内容尺寸配置 */
+const MARKER_SIZE_CONFIG: Record<string, { size: number; fontSize: number }> = {
+  circle: { size: 18, fontSize: 12 },
+  dot: { size: 18, fontSize: 10 },
+  pin: { size: 24, fontSize: 11 },
+  icon: { size: 24, fontSize: 11 },
+};
+
 function createMarkerStopContent(
   indexLabel: string,
   fill: string,
@@ -543,25 +550,23 @@ function createMarkerStopContent(
   if (!showStopIndex) return undefined;
   if (variant !== 'circle' && variant !== 'dot') return undefined;
 
-  const size = variant === 'circle' ? 24 : 18;
-  const fontSize = variant === 'circle' ? 11 : 10;
+  const config = MARKER_SIZE_CONFIG[variant];
 
   return (
     <div
       style={{
-        width: size,
-        height: size,
+        width: config.size,
+        height: config.size,
         borderRadius: '9999px',
-        border: '2px solid #ffffff',
+        border: '1.5px solid #ffffff',
         background: fill,
         color: '#ffffff',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        fontSize,
+        fontSize: '10px',
         lineHeight: 1,
         fontWeight: 700,
-        boxShadow: '0 6px 12px rgba(0,0,0,0.14)',
       }}
     >
       {indexLabel}
diff --git a/packages/core/src/components/Control/ImageCalibrationControl/ImageCalibrationControl.tsx b/packages/core/src/components/Control/ImageCalibrationControl/ImageCalibrationControl.tsx
index 2b4ee05..96c102a 100644
--- a/packages/core/src/components/Control/ImageCalibrationControl/ImageCalibrationControl.tsx
+++ b/packages/core/src/components/Control/ImageCalibrationControl/ImageCalibrationControl.tsx
@@ -184,6 +184,8 @@ export const ImageCalibrationControl = forwardRef<ImageCalibrationHandle, ImageC
         // 所有非激活图片都应显示为静态图层（包括 idle/calibrating/confirmed）
         // 只有没有 corners 的 idle 图片才跳过（无法定位到地图）
         if (!img.corners && img.phase === 'idle') return;
+        // 其他阶段也可能 corners 为 null（尚未完成配准），跳过以避免 TS 报错
+        if (!img.corners) return;
 
         currentLayerIds.add(img.id);
 
diff --git a/packages/core/src/components/Control/MapThemeControl.tsx b/packages/core/src/components/Control/MapThemeControl.tsx
index 6e657d3..5922fd4 100644
--- a/packages/core/src/components/Control/MapThemeControl.tsx
+++ b/packages/core/src/components/Control/MapThemeControl.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { useMapControl, type ControlPosition } from '../../hooks/useMapControl';
 import { usePopperPosition } from '../../hooks/usePopperPosition';
 import { useControlContainer, ControlRegistry } from './ControlContainer';
@@ -71,10 +71,16 @@ export function MapThemeControl({
   const { mapsService, positionClassName } = useMapControl(position);
   const isInContainer = useControlContainer();
   const [open, setOpen] = useState(false);
-  const [currentValue, setCurrentValue] = useState<string>(defaultValue ?? '');
+  const [currentValue, setCurrentValue] = useState<string>(defaultValue ?? 'dark');
   const [options, setOptions] = useState<ThemeOption[]>(propOptions ?? []);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // 根据当前地图样式值判断是否为暗色主题
+  const isDarkTheme = useMemo(() => {
+    const darkKeywords = ['dark', 'darkblue', 'night', 'black'];
+    return darkKeywords.some((keyword) => currentValue.toLowerCase().includes(keyword));
+  }, [currentValue]);
+
   const { popperRef, popperClass } = usePopperPosition(position, open, containerRef);
 
   // 自动获取地图样式选项
@@ -164,8 +170,15 @@ export function MapThemeControl({
         <span className="material-symbols-outlined">palette</span>
       </button>
       {open && options.length > 0 && (
-        <div ref={popperRef} className={`l7-popper ${popperClass}`}>
-          <div className="l7-popper-content l7-theme-panel">
+        <div ref={popperRef} className={`l7-popper ${popperClass}`} data-theme={isDarkTheme ? 'dark' : 'light'} style={{ zIndex: 10001 }}>
+          <div
+            className="l7-popper-content l7-theme-panel"
+            style={isDarkTheme ? {
+              background: 'rgba(22, 32, 48, 0.95)',
+              borderColor: 'rgba(180, 197, 255, 0.08)',
+              color: '#e2e8f0',
+            } : undefined}
+          >
             <div className="l7-theme-chips">
               {options.map((opt) => {
                 const isActive = currentValue === opt.value;
@@ -176,12 +189,19 @@ export function MapThemeControl({
                     className={`l7-theme-chip${isActive ? ' l7-theme-chip--active' : ''}`}
                     onClick={() => handleSelect(opt.value)}
                     title={opt.text}
+                    style={isDarkTheme ? {
+                      background: isActive ? 'rgba(34, 211, 238, 0.15)' : '#1e2c3e',
+                      borderColor: isActive ? '#22d3ee' : 'rgba(180, 197, 255, 0.1)',
+                    } : undefined}
                   >
                     <span
                       className="l7-theme-chip__dot"
                       style={{ background: dotBg }}
                     />
-                    <span className="l7-theme-chip__label">{opt.text}</span>
+                    <span
+                      className="l7-theme-chip__label"
+                      style={isDarkTheme ? { color: '#e2e8f0' } : undefined}
+                    >{opt.text}</span>
                   </button>
                 );
               })}
diff --git a/packages/core/src/components/Control/ResetViewControl.tsx b/packages/core/src/components/Control/ResetViewControl.tsx
new file mode 100644
index 0000000..8e93401
--- /dev/null
+++ b/packages/core/src/components/Control/ResetViewControl.tsx
@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { useMapControl, type ControlPosition } from '../../hooks/useMapControl';
+import { useControlContainer, ControlRegistry } from './ControlContainer';
+
+/**
+ * ResetView 控件 — 一键重置地图到初始视图
+ *
+ * 遵循 L7 Control 规范 + Material Design 3 玻璃态风格。
+ * 点击后将地图中心、缩放级别、旋转角、俯仰角恢复到初始状态。
+ */
+export interface ResetViewControlProps {
+  /** 控件位置，默认 bottomright */
+  position?: ControlPosition;
+  /** 按钮图标，默认 Material Symbols "center_focus_strong" */
+  icon?: React.ReactNode;
+  /** 按钮标题/tooltip */
+  title?: string;
+  /** 自定义初始视图参数。不传时使用 scene 创建时的初始值 */
+  initialView?: {
+    center?: [number, number];
+    zoom?: number;
+    pitch?: number;
+    rotation?: number;
+  };
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function ResetViewControl({
+  position = 'bottomright',
+  icon,
+  title = 'Reset view',
+  initialView,
+  className,
+  style,
+}: ResetViewControlProps) {
+  const { scene, mapsService, positionClassName } = useMapControl(position);
+  const isInContainer = useControlContainer();
+
+  const handleReset = useCallback(() => {
+    if (!scene || !mapsService) return;
+
+    const center = initialView?.center ?? [104.0, 35.0];
+    const zoom = initialView?.zoom ?? 4;
+    const pitch = initialView?.pitch ?? 0;
+    const rotation = initialView?.rotation ?? 0;
+
+    scene.setCenter(center);
+    scene.setZoom(zoom);
+    scene.setPitch(pitch);
+    scene.setRotation(rotation);
+  }, [scene, mapsService, initialView]);
+
+  const controlContent = (
+    <div
+      className={`l7-control l7-control-reset l7-control--glass${className ? ` ${className}` : ''}`}
+      style={style}
+    >
+      <button
+        className="l7-button-control"
+        onClick={handleReset}
+        title={title}
+        aria-label={title}
+      >
+        {icon ?? <span className="material-symbols-outlined">center_focus_strong</span>}
+      </button>
+    </div>
+  );
+
+  if (isInContainer) return controlContent;
+
+  return (
+    <div className={`l7-control-anchor ${positionClassName}`}>
+      {controlContent}
+    </div>
+  );
+}
+
+ControlRegistry.mark(ResetViewControl);
+
+export default ResetViewControl;
diff --git a/packages/core/src/components/Interaction/Popup.tsx b/packages/core/src/components/Interaction/Popup.tsx
index 1574f2c..4b4a0b1 100644
--- a/packages/core/src/components/Interaction/Popup.tsx
+++ b/packages/core/src/components/Interaction/Popup.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useScene } from '../../context/SceneContext';
 import { useMapPosition } from '../../hooks/useMapPosition';
+import { useTheme } from '../../context/ThemeContext';
 import { cx } from '../../utils/style';
 import type { PopupSchema } from '../../schema/types';
 
@@ -78,6 +79,14 @@ export interface PopupProps extends Omit<PopupSchema, 'type' | 'content'> {
   placement?: PopupPlacement;
   /** 弹出框偏移量（像素），默认 8px，正数远离锚点 */
   offset?: number;
+  /**
+   * 布局预设 — 快速选择信息排布方式，自动映射到 size + 内部样式
+   * - simple:    纯文本/HTML，compact 尺寸
+   * - card:      标题 + 属性列表，standard 尺寸
+   * - rich:      封面图 + 标题 + 属性 + 操作按钮，detailed 尺寸
+   * 传入后仍可被 size/header/attributes/actions 单独覆盖
+   */
+  layout?: 'simple' | 'card' | 'rich';
   /** 结构化标题栏（可选，传入后覆盖简单内容模式） */
   header?: PopupHeader;
   /** 属性列表（可选，"标签-值"对齐模式） */
@@ -228,9 +237,9 @@ function PopupTip({ placement }: { placement: 'top' | 'bottom' | 'left' | 'right
   const viewBox = isVertical ? '0 0 16 8' : '0 0 8 16';
   const path = ARROW_PATHS[placement];
 
-  // 颜色与容器保持一致
-  const fillColor = 'rgba(248, 249, 255, 0.95)';
-  const strokeColor = 'rgba(195, 198, 215, 0.3)';
+  // 颜色与容器保持一致（使用 CSS 变量支持主题切换）
+  const fillColor = 'var(--color-surface)';
+  const strokeColor = 'var(--color-outline-variant)';
 
   return (
     <div className={`aimapui-popup-tip-arrow aimapui-popup-tip-arrow--${placement === 'top' ? 'bottom' : placement === 'bottom' ? 'top' : placement}`}>
@@ -385,9 +394,10 @@ export function Popup({
   latitude,
   content,
   closeButton = true,
-  size = 'standard',
+  size: sizeProp,
   placement: placementProp = 'auto',
   offset = 8,
+  layout,
   header,
   attributes,
   actions,
@@ -397,7 +407,11 @@ export function Popup({
   onClose,
   className,
 }: PopupProps) {
+  // layout 预设自动映射 size
+  const resolvedSize = sizeProp ?? (layout === 'simple' ? 'compact' : layout === 'rich' ? 'detailed' : 'standard');
+  const size = resolvedSize;
   const scene = useScene();
+  const { resolvedTheme } = useTheme();
   // 如果传入了 visibleProp，则为受控模式；否则内部管理
   const isControlled = visibleProp !== undefined;
   const [internalVisible, setInternalVisible] = useState(true);
@@ -590,34 +604,17 @@ export function Popup({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [visible, handleClose]);
 
-  // ── 点击地图空白处关闭 ──
+  // ── 点击地图空白处关闭（L7 unclick） ──
   useEffect(() => {
-    if (!visible || !container) return;
-    const handleMapClick = (e: MouseEvent) => {
-      const el = popupRef.current;
-      if (!el) return;
-      // 如果点击目标是 Popup 元素内部，不关闭
-      if (el.contains(e.target as Node)) return;
-      // 如果点击目标是 Marker 相关元素，不关闭（由 Marker 的 onClick 处理）
-      const target = e.target as HTMLElement;
-      if (target.closest('.aimapui-marker') || target.closest('[data-marker]')) return;
-      // 点击地图空白区域，关闭 Popup
+    if (!visible || !scene) return;
+    const handleUnclick = () => {
       handleClose();
     };
-
-    // 获取地图容器并监听点击事件
-    let mapContainer: HTMLElement | null = null;
-    try {
-      const mapsService = (scene as any)?.mapService;
-      if (mapsService) {
-        mapContainer = mapsService.getContainer?.() as HTMLElement;
-      }
-    } catch { /* 降级 */ }
-
-    const targetEl = mapContainer || container.parentElement || container;
-    targetEl.addEventListener('click', handleMapClick, true);
-    return () => targetEl.removeEventListener('click', handleMapClick, true);
-  }, [visible, container, scene, handleClose]);
+    scene.on('unclick', handleUnclick);
+    return () => {
+      scene.off('unclick', handleUnclick);
+    };
+  }, [visible, scene, handleClose]);
 
   // 高性能位置更新 — 地图交互时持续同步（复用 applyPositionRef，避免逻辑漂移）
   useMapPosition(scene, longitude, latitude, (x, y) => {
@@ -710,6 +707,7 @@ export function Popup({
     <div
       ref={popupRef}
       className={cx('aimapui-popup', `aimapui-popup--${size}`)}
+      data-theme={resolvedTheme}
       style={{
         position: 'absolute',
         left: 0,
@@ -717,7 +715,7 @@ export function Popup({
         transform: 'translate(-9999px, -9999px)',
         // 初始隐藏，等待 applyPosition 计算后再显示，避免 (-9999,-9999) 闪烁
         display: 'none',
-        zIndex: 30,
+        zIndex: 10000,
         pointerEvents: 'auto',
         ...wrapperStyle,
       }}
diff --git a/packages/core/src/components/Interaction/Tooltip.tsx b/packages/core/src/components/Interaction/Tooltip.tsx
index b9725bb..e4e0c39 100644
--- a/packages/core/src/components/Interaction/Tooltip.tsx
+++ b/packages/core/src/components/Interaction/Tooltip.tsx
@@ -333,7 +333,7 @@ export function Tooltip({
         transform: 'translate(-9999px, -9999px)',
         // 初始隐藏，等首帧 applyMapPosition/updateDomPosition 计算后再显示，避免闪烁
         display: 'none',
-        zIndex: 9999,
+        zIndex: 9998,
         pointerEvents: 'none',
       }}
     >
diff --git a/packages/core/src/components/Layer/PolygonLayer.tsx b/packages/core/src/components/Layer/PolygonLayer.tsx
index 6aa24b6..db3d2b2 100644
--- a/packages/core/src/components/Layer/PolygonLayer.tsx
+++ b/packages/core/src/components/Layer/PolygonLayer.tsx
@@ -10,6 +10,8 @@ export interface PolygonLayerProps
   sourceConfig?: LayerSchema['sourceConfig'];
 
   onClick?: (payload: LayerEventPayload) => void;
+  onDblclick?: (payload: LayerEventPayload) => void;
+  onUndblclick?: (payload: LayerEventPayload) => void;
   onMouseMove?: (payload: LayerEventPayload) => void;
   onMouseEnter?: (payload: LayerEventPayload) => void;
   onMouseLeave?: (payload: LayerEventPayload) => void;
@@ -25,6 +27,8 @@ export function PolygonLayer({
   sourceType,
   sourceConfig,
   onClick,
+  onDblclick,
+  onUndblclick,
   onMouseMove,
   onMouseEnter,
   onMouseLeave,
@@ -43,8 +47,8 @@ export function PolygonLayer({
   };
 
   const eventHandlers: LayerEventHandlers | undefined =
-    onClick || onMouseMove || onMouseEnter || onMouseLeave
-      ? { onClick, onMouseMove, onMouseEnter, onMouseLeave }
+    onClick || onDblclick || onUndblclick || onMouseMove || onMouseEnter || onMouseLeave
+      ? { onClick, onDblclick, onUndblclick, onMouseMove, onMouseEnter, onMouseLeave }
       : undefined;
 
   return <SchemaLayer schema={schema} scene={scene} eventHandlers={eventHandlers} onLayerCreated={onLayerCreated} />;
diff --git a/packages/core/src/components/Layer/SchemaLayer.tsx b/packages/core/src/components/Layer/SchemaLayer.tsx
index 56ffb6a..28ca9f5 100644
--- a/packages/core/src/components/Layer/SchemaLayer.tsx
+++ b/packages/core/src/components/Layer/SchemaLayer.tsx
@@ -20,7 +20,7 @@ interface LayerAdapter {
   sourceConfig: { data: unknown; options?: Record<string, unknown> };
   visual: {
     color?: { field?: string; values?: string[] | string };
-    size?: { field?: string; values?: number[] | number };
+    size?: { field?: string; values?: number[] | number; range?: [number, number] };
     shape?: { field?: string; values?: string[] | string };
     style?: Record<string, unknown>;
   };
@@ -30,6 +30,8 @@ interface LayerAdapter {
 /** 图层事件回调集合 */
 export interface LayerEventHandlers {
   onClick?: (payload: LayerEventPayload) => void;
+  onDblclick?: (payload: LayerEventPayload) => void;
+  onUndblclick?: (payload: LayerEventPayload) => void;
   onMouseMove?: (payload: LayerEventPayload) => void;
   onMouseEnter?: (payload: LayerEventPayload) => void;
   onMouseLeave?: (payload: LayerEventPayload) => void;
@@ -101,7 +103,9 @@ function buildLayer(adapter: LayerAdapter, _scene: Scene): L7Layer {
   }
 
   if (sizeConfig) {
-    if (sizeConfig.field && sizeConfig.values) {
+    if (sizeConfig.field && sizeConfig.range) {
+      layer.size(sizeConfig.field, sizeConfig.range);
+    } else if (sizeConfig.field && sizeConfig.values) {
       layer.size(sizeConfig.field, sizeConfig.values);
     } else if (sizeConfig.values !== undefined) {
       layer.size(sizeConfig.values);
@@ -295,41 +299,49 @@ export function SchemaLayer({ schema, scene, eventHandlers, onLayerCreated }: Sc
       };
 
       const needsClick = Boolean(eventHandlersRef.current?.onClick || layerEvents?.click || (popupEnabled && popupTrigger === 'click'));
+      const needsDblclick = Boolean(eventHandlersRef.current?.onDblclick);
+      const needsUndblclick = Boolean(eventHandlersRef.current?.onUndblclick);
       const needsMouseMove = Boolean(eventHandlersRef.current?.onMouseMove || layerEvents?.mousemove || (popupEnabled && popupTrigger === 'hover'));
       const needsMouseEnter = Boolean(eventHandlersRef.current?.onMouseEnter || layerEvents?.mouseenter);
       const needsMouseLeave = Boolean(eventHandlersRef.current?.onMouseLeave || layerEvents?.mouseleave || (popupEnabled && popupTrigger === 'hover'));
 
-      // L7 click 事件
+      // L7 click 事件（普通单击，与 dblclick/undblclick 互斥）
       if (needsClick) {
         layer.on('click', (evt: unknown) => {
           const payload = extractLayerPayload(layerId, schema.type, evt);
-
-          // 1. 直接回调
           eventHandlersRef.current?.onClick?.(payload);
-
-          // 2. EventBus 广播（Schema 事件标识符）
           if (layerEvents?.click) {
             eventBus.emit(layerEvents.click, payload);
           }
-
-          // 3. 内置 Popup（click）
-          if (popupTrigger === 'click') {
+          if (popupEnabled && popupTrigger === 'click') {
             showPopup(payload);
           }
         });
       }
 
+      // L7 dblclick 事件（双击）
+      if (needsDblclick) {
+        layer.on('dblclick', (evt: unknown) => {
+          const payload = extractLayerPayload(layerId, schema.type, evt);
+          eventHandlersRef.current?.onDblclick?.(payload);
+        });
+      }
+
+      // L7 undblclick 事件（双击取消后的单击确认，与 click/dblclick 互斥）
+      if (needsUndblclick) {
+        layer.on('undblclick', (evt: unknown) => {
+          const payload = extractLayerPayload(layerId, schema.type, evt);
+          eventHandlersRef.current?.onUndblclick?.(payload);
+        });
+      }
+
       // L7 mousemove 事件
       if (needsMouseMove) {
         layer.on('mousemove', (evt: unknown) => {
           const payload = extractLayerPayload(layerId, schema.type, evt);
           eventHandlersRef.current?.onMouseMove?.(payload);
-          if (popupTrigger === 'hover') {
-            showPopup(payload);
-          }
-          if (layerEvents?.mousemove) {
-            eventBus.emit(layerEvents.mousemove, payload);
-          }
+          if (popupTrigger === 'hover') showPopup(payload);
+          if (layerEvents?.mousemove) eventBus.emit(layerEvents.mousemove, payload);
         });
       }
 
@@ -349,15 +361,21 @@ export function SchemaLayer({ schema, scene, eventHandlers, onLayerCreated }: Sc
         layer.on('mouseleave', (evt: unknown) => {
           const payload = extractLayerPayload(layerId, schema.type, evt);
           eventHandlersRef.current?.onMouseLeave?.(payload);
-          if (popupTrigger === 'hover') {
-            hidePopup();
-          }
-          if (layerEvents?.mouseleave) {
-            eventBus.emit(layerEvents.mouseleave, payload);
-          }
+          if (popupTrigger === 'hover') hidePopup();
+          if (layerEvents?.mouseleave) eventBus.emit(layerEvents.mouseleave, payload);
         });
       }
 
+      // 兜底：L7 unmousemove 事件（鼠标移出图层要素时触发）
+      // 当 mouseleave 未触发时，unmousemove 可作为可靠的离开信号
+      if (needsMouseLeave && needsMouseMove) {
+        layer.on('unmousemove', (evt: unknown) => {
+          const payload = extractLayerPayload(layerId, schema.type, evt);
+          eventHandlersRef.current?.onMouseLeave?.(payload);
+          if (popupTrigger === 'hover') hidePopup();
+          if (layerEvents?.mouseleave) eventBus.emit(layerEvents.mouseleave, payload);
+        });
+      }
       // 添加到场景
       scene.addLayer(layer);
       onLayerCreated?.(layer);
@@ -382,15 +400,9 @@ export function SchemaLayer({ schema, scene, eventHandlers, onLayerCreated }: Sc
     return () => {
       destroyed = true;
       if (layerRef.current) {
-        try {
-          scene.removeLayer(layerRef.current);
-        } catch {
-          // layer 可能已被销毁
-        }
+        try { scene.removeLayer(layerRef.current); } catch { /* ignore */ }
         layerRef.current = null;
       }
-
-      // 组件卸载时清理 Popup 状态（确保 popup 消失）
       setPopupState((prev) => ({ ...prev, visible: false }));
     };
   }, [schemaSignature, scene, eventBus]);
@@ -438,10 +450,10 @@ export function SchemaLayer({ schema, scene, eventHandlers, onLayerCreated }: Sc
 }
 
 function stableStringify(value: unknown): string {
-  return JSON.stringify(sortValue(value));
+  return JSON.stringify(sortValue(value, new WeakSet()));
 }
 
-function sortValue(value: unknown): unknown {
+function sortValue(value: unknown, seen: WeakSet<object>): unknown {
   // TypedArray / ArrayBuffer 不递归，用长度做签名
   if (ArrayBuffer.isView(value)) {
     return `[TypedArray:${(value as unknown as { length: number }).length}]`;
@@ -455,15 +467,21 @@ function sortValue(value: unknown): unknown {
     if (value.length > 1000) {
       return `[Array:${value.length}]`;
     }
-    return value.map(sortValue);
+    return value.map((item) => sortValue(item, seen));
   }
 
   if (value && typeof value === 'object') {
+    // 循环引用检测：避免无限递归导致栈溢出
+    if (seen.has(value as object)) {
+      return '[Circular]';
+    }
+    seen.add(value as object);
+
     const obj = value as Record<string, unknown>;
     const sortedKeys = Object.keys(obj).sort();
     const next: Record<string, unknown> = {};
     sortedKeys.forEach((key) => {
-      next[key] = sortValue(obj[key]);
+      next[key] = sortValue(obj[key], seen);
     });
     return next;
   }
diff --git a/packages/core/src/components/Layer/adapters/common.ts b/packages/core/src/components/Layer/adapters/common.ts
index 8fc75eb..f428746 100644
--- a/packages/core/src/components/Layer/adapters/common.ts
+++ b/packages/core/src/components/Layer/adapters/common.ts
@@ -13,6 +13,8 @@ export interface ColorConfig {
 export interface SizeConfig {
   field?: string;
   values?: number[] | number;
+  /** 连续数值尺寸范围 [min, max]，与 field 配合使用 */
+  range?: [number, number];
 }
 
 export interface ShapeConfig {
@@ -50,7 +52,7 @@ export function buildColorConfig(schema: LayerSchema): ColorConfig | undefined {
  */
 export function buildSizeConfig(schema: LayerSchema): SizeConfig | undefined {
   if (schema.sizeField) {
-    return { field: schema.sizeField, values: schema.sizeValues };
+    return { field: schema.sizeField, values: schema.sizeValues, range: schema.sizeRange };
   }
   if (schema.size !== undefined) {
     return { values: schema.size };
@@ -119,7 +121,16 @@ export function buildCsvSourceConfig(schema: LayerSchema): SourceOutput {
  * 构建 GeoJSON 类型数据源配置
  */
 export function buildGeojsonSourceConfig(schema: LayerSchema): SourceOutput {
-  return { data: schema.source, options: undefined };
+  return {
+    data: schema.source,
+    options: {
+      parser: {
+        type: 'geojson',
+        // 保留所有原始 properties，确保事件回调中能获取完整 feature 数据
+        ...(schema.sourceConfig?.parser ?? {}),
+      },
+    },
+  };
 }
 
 /**
diff --git a/packages/core/src/components/MapScene/MapSceneRenderer.tsx b/packages/core/src/components/MapScene/MapSceneRenderer.tsx
index 65bd520..0af8b6b 100644
--- a/packages/core/src/components/MapScene/MapSceneRenderer.tsx
+++ b/packages/core/src/components/MapScene/MapSceneRenderer.tsx
@@ -47,6 +47,7 @@ export function MapSceneRenderer({
     const dragRotate = mapConfig.gestureConfig?.dragRotate ?? true;
 
     try {
+      // 方式1: 通过 mapService.setMapStatus (L7 内部 API)
       const mapService = (targetScene as unknown as { mapService?: { setMapStatus?: (s: Record<string, boolean>) => void; map?: any } }).mapService;
       if (mapService && typeof mapService.setMapStatus === 'function') {
         mapService.setMapStatus({
@@ -57,6 +58,20 @@ export function MapSceneRenderer({
         });
       }
 
+      // 方式2: 直接操作 L7 Scene 的交互控制器 (更可靠)
+      const interactionService = (targetScene as unknown as { interactionService?: any }).interactionService;
+      if (interactionService) {
+        if (typeof interactionService.enableDrag === 'function') {
+          dragPan ? interactionService.enableDrag() : interactionService.disableDrag();
+        }
+        if (typeof interactionService.enableZoom === 'function') {
+          pinchZoom ? interactionService.enableZoom() : interactionService.disableZoom();
+        }
+        if (typeof interactionService.enableRotate === 'function') {
+          dragRotate ? interactionService.enableRotate() : interactionService.disableRotate();
+        }
+      }
+
       // Google Maps: setMapStatus 会重新打开原生 zoomControl，
       // 在它之后强制关闭所有原生 UI 控件
       if (mapConfig.basemap === 'google' && mapService?.map) {
diff --git a/packages/core/src/components/MapScene/basemap-factory.ts b/packages/core/src/components/MapScene/basemap-factory.ts
index 1277184..d842fde 100644
--- a/packages/core/src/components/MapScene/basemap-factory.ts
+++ b/packages/core/src/components/MapScene/basemap-factory.ts
@@ -1,15 +1,18 @@
 import type { MapSchema, BasemapType } from '../../schema/types';
 import { DEFAULT_MAP } from '../../schema/defaults';
 
-// 静态导入所有底图引擎，避免运行时动态 chunk 加载失败
-import { GaodeMap } from '@antv/l7-maps/gaode';
-import { Mapbox } from '@antv/l7-maps/mapbox';
-import { TMap } from '@antv/l7-maps/tianditu';
-import { TencentMap } from '@antv/l7-maps/tencent';
-import { BaiduMap } from '@antv/l7-maps/baidu';
-import { MapLibre } from '@antv/l7-maps/maplibre';
-import { GoogleMap } from '@antv/l7-maps/google';
-import { Map } from '@antv/l7-maps/simple';
+// 底图引擎统一从已 external 的 @antv/l7 导入，避免把 @antv/l7-maps 各引擎适配层
+// （mapbox-gl / maplibre-gl / AMap loader 等）及 GLSL 着色器打包进产物
+import {
+  GaodeMap,
+  Mapbox,
+  TMap,
+  TencentMap,
+  BaiduMap,
+  MapLibre,
+  GoogleMap,
+  Map,
+} from '@antv/l7';
 
 /**
  * 底图工厂 — 根据配置创建 L7 Map 实例
diff --git a/packages/core/src/components/Mobile/BottomSheet.tsx b/packages/core/src/components/Mobile/BottomSheet.tsx
index 8e74f01..4e99d61 100644
--- a/packages/core/src/components/Mobile/BottomSheet.tsx
+++ b/packages/core/src/components/Mobile/BottomSheet.tsx
@@ -221,7 +221,7 @@ export function BottomSheet({
         width: '100%',
         height: currentHeight,
         zIndex: 1000,
-        pointerEvents: 'auto',
+        pointerEvents: 'none',
         transition: isAnimating ? 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none',
         willChange: 'height',
         touchAction: 'none',
@@ -239,6 +239,7 @@ export function BottomSheet({
           display: 'flex',
           flexDirection: 'column',
           overflow: 'hidden',
+          pointerEvents: 'auto',
         }}
       >
         {/* 拖拽手柄区域 */}
diff --git a/packages/core/src/constants/colorPalettes.ts b/packages/core/src/constants/colorPalettes.ts
new file mode 100644
index 0000000..6458316
--- /dev/null
+++ b/packages/core/src/constants/colorPalettes.ts
@@ -0,0 +1,30 @@
+/**
+ * 语义化色板预设
+ *
+ * 基于 ColorBrewer 推荐，色盲安全。
+ * 参考: https://colorbrewer2.org/
+ */
+
+export type ColorScheme = 'sequential' | 'diverging' | 'categorical';
+
+/** 顺序色板（蓝）— 适用于单调递增/递减数据 */
+export const SEQUENTIAL_COLORS = ['#dbeafe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb'] as const;
+
+/** 发散色板（红-白-绿）— 适用于有中心点的双向数据 */
+export const DIVERGING_COLORS = ['#dc2626', '#fca5a5', '#e5e7eb', '#86efac', '#16a34a'] as const;
+
+/** 分类色板 — 适用于离散类别，色盲安全 */
+export const CATEGORICAL_COLORS = ['#2563eb', '#f59e0b', '#ef4444', '#10b981', '#8b5cf6', '#14b8a6', '#f97316', '#64748b'] as const;
+
+/** 根据 colorScheme 获取对应色板 */
+export function getColorPalette(scheme: ColorScheme): readonly string[] {
+  switch (scheme) {
+    case 'diverging':
+      return DIVERGING_COLORS;
+    case 'categorical':
+      return CATEGORICAL_COLORS;
+    case 'sequential':
+    default:
+      return SEQUENTIAL_COLORS;
+  }
+}
diff --git a/packages/core/src/design/composite/route-layer.md b/packages/core/src/design/composite/route-layer.md
index f956557..c5d8804 100644
--- a/packages/core/src/design/composite/route-layer.md
+++ b/packages/core/src/design/composite/route-layer.md
@@ -12,24 +12,11 @@
 - **透明度**: 0.9，确保底图可见但不干扰路径识别
 - **线型**: 直线 (`line`) 或弧线 (`arc`)，通过 `routeType` 切换
 
-### 1.2 发光效果 (Glow)
-- **底层光晕**: 宽度为主路径的 2.5 倍，透明度 0.15
-- **作用**: 增强路径在复杂底图上的辨识度，提供视觉深度
-- **可选关闭**: 通过 `glow={false}` 禁用
-
-### 1.3 分段着色 (Segment Coloring)
+### 1.2 分段着色 (Segment Coloring)
 - **用途**: 路况（拥堵/畅通）、属性分类、时间分段
 - **实现**: 每段独立颜色 + 独立线宽
 - **优先级**: `segments` > `path`，分段数据覆盖单一路径
 
-### 1.4 流动动画 (Flow Animation)
-- **样式**: 白色半透明虚线沿路径流动，指示行驶方向
-- **虚线规格**: `[8, 16]` (dash/gap)，线宽为主路径的 0.5 倍（最小 1.5px）
-- **透明度**: 0.6
-- **速度**: 通过 `animateSpeed` 控制，默认 1
-- **持续时间**: 1500ms 循环
-- **层级**: zIndex=10，确保在最上层
-
 ---
 
 ## 2. 途经点 (Stops / Waypoints)
@@ -47,19 +34,19 @@
 | 终点 (end) | `#10b981` (Success Green) | 旅程结束，语义区分 |
 
 ### 2.3 渲染模式 (Renderer)
-支持三种途经点渲染方式：
-
-#### Point 模式（默认）
-- **圆形标记**: 直径 14px，2px 白色描边
-- **序号标签**: 白色文字居中，字号为 stopSize × 0.75（最小 10px），深色描边 1.5px
-- **名称标签**: 位于标记下方，偏移 `stopSize/2 + 4` px，2px 白色光晕
+支持三种途经点渲染方式，**默认使用 Marker 模式**（优先 marker 类型标注）：
 
-#### Marker 模式
+#### Marker 模式（默认）
 - **组件**: 使用内置 `Marker` 组件
 - **变体**: `circle` / `dot` / 其他 MarkerVariant
 - **颜色映射**: start→success, end→error, waypoint→primary
 - **自定义内容**: 支持传入 ReactNode
 
+#### Point 模式
+- **圆形标记**: 直径 14px，2px 白色描边
+- **序号标签**: 白色文字居中，字号为 stopSize × 0.75（最小 10px），深色描边 1.5px
+- **名称标签**: 位于标记下方，偏移 `stopSize/2 + 4` px，2px 白色光晕
+
 #### Icon 模式
 - **图标资源**: 通过 `stopIconMap` 映射，或使用 Maki Pin 自动生成
 - **尺寸**: 默认 16px，锚点 `bottom`
@@ -110,8 +97,6 @@
 
 `RouteLayer` 组件默认封装中已实现：
 
-- 发光底层 + 主路径双层渲染
-- 白色虚线流动动画（方向指示）
 - 三种途经点渲染模式（point/marker/icon）
 - 自动编号 + 起终点自动补全
 - 分段着色支持
@@ -126,9 +111,7 @@
     { lng: 120.15, lat: 30.28, name: '西湖' },
     { lng: 120.17, lat: 30.25, name: '灵隐寺' },
   ]}
-  animate
-  glow
-  stopRenderer="point"
+  // stopRenderer 默认 'marker'（DOM Marker 编号标注）
 />
 ```
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 4765fde..3e27609 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -121,6 +121,8 @@ export { MarkerClusterLayer } from './components/CompositeLayer/MarkerClusterLay
 export type { MarkerClusterLayerProps } from './components/CompositeLayer/MarkerClusterLayer';
 export { FillLayer } from './components/CompositeLayer/FillLayer';
 export type { FillLayerProps } from './components/CompositeLayer/FillLayer';
+export { getColorPalette, SEQUENTIAL_COLORS, DIVERGING_COLORS, CATEGORICAL_COLORS } from './constants/colorPalettes';
+export type { ColorScheme } from './constants/colorPalettes';
 export { ChinaDistrict, ADMIN_SEQUENTIAL_COLORS, DEFAULT_PROVINCE_SOURCE, DEFAULT_CITY_SOURCE, DEFAULT_DISTRICT_SOURCE } from './components/CompositeLayer/ChinaDistrict';
 export type { ChinaDistrictProps, ChinaDistrictHandle, AdministrativeLevel, DrillPathNode, BusinessDataItem } from './components/CompositeLayer/ChinaDistrict';
 export { GlyphLayer } from './components/CompositeLayer/GlyphLayer';
@@ -141,6 +143,8 @@ export type { H3LayerProps, H3DataItem } from './components/CompositeLayer/H3Lay
 // Control 组件
 export { ZoomControl } from './components/Control/ZoomControl';
 export type { ZoomControlProps } from './components/Control/ZoomControl';
+export { ResetViewControl } from './components/Control/ResetViewControl';
+export type { ResetViewControlProps } from './components/Control/ResetViewControl';
 export { ScaleControl } from './components/Control/ScaleControl';
 export type { ScaleControlProps } from './components/Control/ScaleControl';
 export { FullscreenControl } from './components/Control/FullscreenControl';
diff --git a/packages/core/src/schema/types.ts b/packages/core/src/schema/types.ts
index 3141e46..fcab069 100644
--- a/packages/core/src/schema/types.ts
+++ b/packages/core/src/schema/types.ts
@@ -60,8 +60,8 @@ export interface AnimateConfig {
   repeat?: number;
 }
 
-export type ActiveConfig = boolean | { color: string };
-export type SelectConfig = boolean | { color: string };
+export type ActiveConfig = boolean | { color: string; duration?: number };
+export type SelectConfig = boolean | { color: string; duration?: number };
 
 export interface LayerSchema {
   id?: string;
@@ -86,6 +86,8 @@ export interface LayerSchema {
   size?: number;
   sizeField?: string;
   sizeValues?: number[];
+  /** 连续数值尺寸范围 [min, max]，与 sizeField 配合使用 */
+  sizeRange?: [number, number];
 
   shape?: string;
   shapeField?: string;
diff --git a/packages/core/src/styles/tailwind.css b/packages/core/src/styles/tailwind.css
index 334bbec..b572679 100644
--- a/packages/core/src/styles/tailwind.css
+++ b/packages/core/src/styles/tailwind.css
@@ -666,10 +666,10 @@
   /* Popup 内容容器 — MD3 玻璃拟态 */
   .aimapui-popup-content {
     position: relative;
-    background: rgba(248, 249, 255, 0.95);
+    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(195, 198, 215, 0.3);
+    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
     border-radius: 12px;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     animation: aimapui-popup-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
index 14d466c..5b4ed03 100644
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
-import tailwindcss from '@tailwindcss/vite';
 import { resolve } from 'path';
 
 export default defineConfig({
@@ -11,7 +10,6 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    tailwindcss(),
     dts({
       insertTypesEntry: true,
       rollupTypes: true,
@@ -25,6 +23,7 @@ export default defineConfig({
   build: {
     emptyOutDir: false,
     assetsInlineLimit: 0,
+    minify: 'terser',
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'aimapui',
@@ -37,10 +36,12 @@ export default defineConfig({
         /^react\//,
         'react-dom',
         /^react-dom\//,
+        'react/jsx-runtime',
         'ahooks',
         'clsx',
         'geotiff',
         'supercluster',
+        'h3-js',
         '@antv/l7',
         '@antv/l7-core',
         /^@antv\/l7-core\//,
diff --git a/packages/plot/package.json b/packages/plot/package.json
index 7eba584..3e8cb8d 100644
--- a/packages/plot/package.json
+++ b/packages/plot/package.json
@@ -15,7 +15,10 @@
     },
     "./style.css": "./dist/style.css"
   },
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "rm -rf dist && vite build && vite build --config vite.config.cjs.ts",
     "build:esm": "vite build",
@@ -32,8 +35,9 @@
   },
   "devDependencies": {
     "@antv/aimapui": "workspace:*",
-    "@antv/l7": "2.28.13",
+    "@antv/l7": "2.29.1",
     "@tailwindcss/vite": "^4.0.0",
+    "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
@@ -45,12 +49,24 @@
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^4.1.8"
   },
-  "publishConfig": { "access": "public" },
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/antvis/aimapui",
     "directory": "packages/plot"
   },
-  "keywords": ["antv", "l7", "map", "bindtype", "bindtype", "bindtype", "bindtype", "bindtype", "bindtype"]
+  "keywords": [
+    "antv",
+    "l7",
+    "map",
+    "bindtype",
+    "bindtype",
+    "bindtype",
+    "bindtype",
+    "bindtype",
+    "bindtype"
+  ]
 }
diff --git a/packages/site/package.json b/packages/site/package.json
index e11d2fd..379244f 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -12,8 +12,7 @@
   "dependencies": {
     "@antv/aimapui": "workspace:*",
     "@antv/aimapui-plot": "workspace:*",
-    "@antv/l7": "2.28.13",
-    "@antv/l7-maps": "2.28.13",
+    "@antv/l7": "2.29.1",
     "ahooks": "^3.8.4",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.4",
diff --git a/packages/site/src/app/AppleMapsDemo.tsx b/packages/site/src/app/AppleMapsDemo.tsx
new file mode 100644
index 0000000..1bf2a51
--- /dev/null
+++ b/packages/site/src/app/AppleMapsDemo.tsx
@@ -0,0 +1,1418 @@
+import { useCallback, useRef, useState } from 'react';
+import type { Scene } from '@antv/l7';
+import { AiMap, Marker } from '@antv/aimapui';
+
+/* ================================================================
+   Apple Maps 风格地图 Demo
+   设计参考 Apple Maps iOS 原生应用设计规范 (.codefuse/apple.md)
+   - 地图浏览模式：Liquid Glass 浮层控件 + 蓝点 Pin 标记
+   - POI 详情面板：Bottom Sheet 半屏卡片
+   ================================================================ */
+
+// ─── Apple Maps Design Tokens ───────────────────────────────────
+const A = {
+  primary: '#0088FF',
+  primaryDark: '#0C79FE',
+  primaryAlpha: 'rgba(0, 136, 255, 0.08)',
+  primaryTinted: 'rgba(0, 136, 255, 0.12)',
+  red: '#FF383C',
+  locStart: '#FFA62B',
+  locEnd: '#FF5D00',
+  locPin: '#F19B3F',
+  locDot: '#FF5C00',
+  labelText: '#AC480C',
+  surface: '#FFFFFF',
+  surfaceLight: '#F5F6F3',
+  surfaceGray: '#E6E5E5',
+  separator: '#BDBDBD',
+  textPrimary: '#000000',
+  textSecondary: '#868782',
+  textTertiary: '#7A7B78',
+  textLink: '#0088FF',
+  textLinkEdit: '#008BFF',
+  textOnDark: '#FFFFFF',
+  glassIcon: '#211906',
+  searchIcon: '#6C6C6C',
+  searchPlaceholder: '#88898B',
+  avatarStart: '#A0C2E4',
+  avatarEnd: '#717FBE',
+  weatherIcon: '#D1D1D5',
+  glassLight: 'linear-gradient(0deg, rgba(245,245,245,0.4), rgba(245,245,245,0.4)), #0F0F0F',
+  glassPanel: 'linear-gradient(0deg, rgba(245,245,245,0.2), rgba(245,245,245,0.2)), rgba(15,15,15,0.2)',
+  glassBlend: 'normal, color-dodge' as const,
+  glassFill: 'rgba(245, 245, 245, 0.1)',
+  glassButtonBg: 'rgba(255, 255, 255, 0.85)',
+  // Tools-style light translucent glass (toolbar, temperature, search bar)
+  // No dark base, no color-dodge — just white translucent
+  toolsBg: 'rgba(245, 245, 245, 0.4)',
+  toolsFill: 'rgba(245, 245, 245, 0.1)',
+  pinGlow: 'radial-gradient(50% 50% at 50% 50%, #579DFF 0%, rgba(87, 196, 255, 0) 100%)',
+  glassShadow: '0px 4px 32px rgba(0, 0, 0, 0.16)',
+  glassShadowLight: '0px 4px 32px rgba(0, 0, 0, 0.08)',
+  pinShadow: 'drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.24))',
+  guideGray: 'linear-gradient(180deg, #E9E9E9 0%, #FDFDFC 100%)',
+  guideYellow: 'linear-gradient(180deg, #FFF6C8 0%, #FDFDFC 100%)',
+};
+
+// ─── 类型定义 ───────────────────────────────────────────────────
+interface POI {
+  id: string;
+  name: string;
+  category: string;
+  lng: number;
+  lat: number;
+  address: string;
+  phone: string;
+  status: 'Open' | 'Closed';
+  statusLabel: string;
+  walkPercent: number;
+  priceLevel: number; // 1-4 for $-$$$$
+  driveDist: string;
+  driveTime: string;
+  photos: string[];
+  ratings: { category: string; score: number; count: number }[];
+  goodToKnow: string[];
+  hours: { day: string; time: string }[];
+  todayLabel: string;
+}
+
+// ─── POI 数据（杭州地区） ────────────────────────────────────────
+const POIS: POI[] = [
+  {
+    id: 'westlake',
+    name: 'West Lake',
+    category: 'Scenic Spot · Park',
+    lng: 120.147,
+    lat: 30.243,
+    address: '1 Longjing Rd, Xihu District\nHangzhou, Zhejiang 310013',
+    phone: '+86 (571) 8717-9600',
+    status: 'Open',
+    statusLabel: 'Open 24 hours',
+    walkPercent: 92,
+    priceLevel: 1,
+    driveDist: '3.2 km',
+    driveTime: '12 min',
+    photos: [
+      'https://images.unsplash.com/photo-1599571234909-29ed5d1321d6?w=400&h=400&fit=crop',
+      'https://images.unsplash.com/photo-1580587771525-78b9f2858a22?w=400&h=400&fit=crop',
+    ],
+    ratings: [
+      { category: 'Overall', score: 98, count: 8456 },
+      { category: 'Scenery', score: 99, count: 7234 },
+      { category: 'Cleanliness', score: 95, count: 6102 },
+      { category: 'Accessibility', score: 91, count: 4890 },
+    ],
+    goodToKnow: ['Good for Kids', 'Wheelchair Accessible'],
+    hours: [
+      { day: 'Mon - Sun', time: 'Open 24 hours' },
+    ],
+    todayLabel: 'Open Now',
+  },
+  {
+    id: 'lingyin',
+    name: 'Lingyin Temple',
+    category: 'Buddhist Temple · Historic Site',
+    lng: 120.101,
+    lat: 30.242,
+    address: '1 Fayun Lane, Xihu District\nHangzhou, Zhejiang 310013',
+    phone: '+86 (571) 8796-8665',
+    status: 'Open',
+    statusLabel: 'Until 17:15',
+    walkPercent: 85,
+    priceLevel: 2,
+    driveDist: '7.8 km',
+    driveTime: '25 min',
+    photos: [
+      'https://images.unsplash.com/photo-1600269452121-4f2416e55c28?w=400&h=400&fit=crop',
+      'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=400&h=400&fit=crop',
+    ],
+    ratings: [
+      { category: 'Overall', score: 96, count: 5230 },
+      { category: 'History', score: 97, count: 4102 },
+      { category: 'Atmosphere', score: 98, count: 3890 },
+      { category: 'Facilities', score: 88, count: 3100 },
+    ],
+    goodToKnow: ['Cash Only', 'No Photos Inside Halls'],
+    hours: [
+      { day: 'Mon - Sun', time: '07:00 - 17:15' },
+    ],
+    todayLabel: 'Open Until 17:15',
+  },
+  {
+    id: 'longjing',
+    name: 'Longjing Tea Village',
+    category: 'Tea House · Cafe',
+    lng: 120.124,
+    lat: 30.221,
+    address: 'Longjing Rd, Xihu District\nHangzhou, Zhejiang 310008',
+    phone: '+86 (571) 8799-4002',
+    status: 'Open',
+    statusLabel: 'Until 18:00',
+    walkPercent: 78,
+    priceLevel: 3,
+    driveDist: '5.5 km',
+    driveTime: '18 min',
+    photos: [
+      'https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?w=400&h=400&fit=crop',
+      'https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=400&fit=crop',
+    ],
+    ratings: [
+      { category: 'Overall', score: 94, count: 3210 },
+      { category: 'Food & Drink', score: 95, count: 2800 },
+      { category: 'Service', score: 92, count: 2450 },
+      { category: 'Atmosphere', score: 97, count: 2600 },
+    ],
+    goodToKnow: ['Accepts WeChat Pay', 'Outdoor Seating'],
+    hours: [
+      { day: 'Mon - Sat', time: '09:00 - 18:00' },
+      { day: 'Sunday', time: '10:00 - 17:00' },
+    ],
+    todayLabel: 'Open Until 18:00',
+  },
+  {
+    id: 'hefang',
+    name: 'Hefang Street',
+    category: 'Shopping · Historic Street',
+    lng: 120.168,
+    lat: 30.242,
+    address: 'Hefang St, Shangcheng District\nHangzhou, Zhejiang 310002',
+    phone: '+86 (571) 8780-8851',
+    status: 'Open',
+    statusLabel: 'Until 22:00',
+    walkPercent: 88,
+    priceLevel: 2,
+    driveDist: '2.1 km',
+    driveTime: '8 min',
+    photos: [
+      'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=400&h=400&fit=crop',
+      'https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?w=400&h=400&fit=crop',
+    ],
+    ratings: [
+      { category: 'Overall', score: 91, count: 6780 },
+      { category: 'Shopping', score: 89, count: 5100 },
+      { category: 'Food & Drink', score: 93, count: 4600 },
+      { category: 'Atmosphere', score: 92, count: 4100 },
+    ],
+    goodToKnow: ['Accepts Credit Cards', 'Busy on Weekends'],
+    hours: [
+      { day: 'Mon - Thu', time: '10:00 - 21:00' },
+      { day: 'Fri - Sat', time: '10:00 - 22:00' },
+      { day: 'Sunday', time: '10:00 - 20:00' },
+    ],
+    todayLabel: 'Open Until 22:00',
+  },
+  {
+    id: 'xixi',
+    name: 'Xixi Wetland Park',
+    category: 'National Park · Wetland',
+    lng: 120.067,
+    lat: 30.27,
+    address: '518 Tianmushan Rd, Xihu District\nHangzhou, Zhejiang 310023',
+    phone: '+86 (571) 8810-6688',
+    status: 'Open',
+    statusLabel: 'Until 17:30',
+    walkPercent: 72,
+    priceLevel: 2,
+    driveDist: '12.4 km',
+    driveTime: '35 min',
+    photos: [
+      'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&h=400&fit=crop',
+      'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=400&fit=crop',
+    ],
+    ratings: [
+      { category: 'Overall', score: 93, count: 4560 },
+      { category: 'Scenery', score: 94, count: 3900 },
+      { category: 'Facilities', score: 87, count: 3200 },
+      { category: 'Accessibility', score: 85, count: 2800 },
+    ],
+    goodToKnow: ['Good for Kids', 'Boat Tours Available'],
+    hours: [
+      { day: 'Mon - Sun', time: '08:00 - 17:30' },
+    ],
+    todayLabel: 'Open Until 17:30',
+  },
+];
+
+// ─── 子组件：Liquid Glass 按钮 ──────────────────────────────────
+function GlassButton({
+  size,
+  style,
+  children,
+  onClick,
+}: {
+  size: number;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        isolation: 'isolate',
+        width: size,
+        height: size,
+        background: A.glassButtonBg,
+        boxShadow: A.glassShadow,
+        borderRadius: size / 2,
+        position: 'relative',
+        cursor: onClick ? 'pointer' : 'default',
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: A.glassLight,
+          backgroundBlendMode: A.glassBlend,
+          borderRadius: size / 2,
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
+    </div>
+  );
+}
+
+// ─── 子组件：Glass 面板 ────────────────────────────────────────
+function GlassPanel({
+  width,
+  height,
+  borderRadius,
+  style,
+  children,
+}: {
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: width ?? 'auto',
+        height: height ?? 'auto',
+        background: A.glassButtonBg,
+        boxShadow: A.glassShadow,
+        borderRadius: borderRadius ?? 24,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: A.glassPanel,
+          backgroundBlendMode: A.glassBlend,
+          backdropFilter: 'blur(16px)',
+          borderRadius: borderRadius ?? 24,
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
+    </div>
+  );
+}
+
+// ─── 子组件：温度小组件 ──────────────────────────────────────────
+function TemperatureWidget() {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 16,
+        top: 50,
+        zIndex: 1100,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '14px 0',
+        gap: 2,
+        isolation: 'isolate',
+        width: 60,
+        height: 32,
+        background: A.toolsBg,
+        boxShadow: A.glassShadow,
+        borderRadius: 12,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          left: 0, right: 0, top: '-0.09px', bottom: '0.09px',
+          background: A.toolsFill,
+          borderRadius: 12,
+        }}
+      />
+      <span
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 16,
+          fontWeight: 400,
+          color: A.weatherIcon,
+          lineHeight: '19px',
+        }}
+      >
+        ☀️
+      </span>
+      <span
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          fontFamily: "'SF Pro Rounded', -apple-system, sans-serif",
+          fontSize: 18,
+          fontWeight: 500,
+          color: A.textPrimary,
+          lineHeight: '21px',
+        }}
+      >
+        28°
+      </span>
+    </div>
+  );
+}
+
+// ─── 子组件：垂直工具栏 ──────────────────────────────────────────
+function VerticalToolbar({ onLocate }: { onLocate: () => void }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        right: 16,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        zIndex: 1100,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 14,
+        gap: 16,
+        isolation: 'isolate',
+        width: 48,
+        height: 95,
+        background: A.toolsBg,
+        boxShadow: A.glassShadow,
+        borderRadius: 24,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: A.toolsFill,
+          borderRadius: 24,
+        }}
+      />
+      {/* Explore / Look Around */}
+      <span
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 18,
+          fontWeight: 590,
+          color: A.glassIcon,
+          lineHeight: '20px',
+          letterSpacing: '-0.5px',
+        }}
+      >
+        🔭
+      </span>
+      {/* Locate me */}
+      <span
+        onClick={onLocate}
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 18,
+          fontWeight: 590,
+          color: A.primary,
+          lineHeight: '20px',
+          letterSpacing: '-0.5px',
+          cursor: 'pointer',
+        }}
+      >
+        <span className="material-symbols-outlined" style={{ fontSize: 20, color: A.primary }}>location_on</span>
+      </span>
+    </div>
+  );
+}
+
+// ─── 子组件：底部搜索栏 ──────────────────────────────────────────
+function BottomSearchBar() {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        bottom: 18,
+        zIndex: 1100,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '0 14px',
+        gap: 8,
+        width: 332,
+        height: 66,
+        background: A.toolsBg,
+        boxShadow: A.glassShadow,
+        borderRadius: 20,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: A.toolsFill,
+          borderRadius: 20,
+        }}
+      />
+      {/* Search Input */}
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '10px 12px',
+          gap: 4,
+          flex: 1,
+          height: 38,
+          background: 'rgba(120, 120, 128, 0.08)',
+          backdropFilter: 'blur(11px)',
+          borderRadius: 22,
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          {/* Search Icon */}
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <circle cx="7.5" cy="7.5" r="6" stroke={A.searchIcon} strokeWidth="1.6" />
+            <line x1="12" y1="12" x2="16" y2="16" stroke={A.searchIcon} strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          <span
+            style={{
+              fontFamily: "'SF Pro', -apple-system, sans-serif",
+              fontSize: 15,
+              fontWeight: 510,
+              color: A.searchIcon,
+              letterSpacing: '-0.5px',
+            }}
+          >
+            Search Places
+          </span>
+        </div>
+        {/* Mic Icon */}
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 15,
+            fontWeight: 590,
+            color: A.searchIcon,
+            letterSpacing: '-0.5px',
+          }}
+        >
+          🎤
+        </span>
+      </div>
+      {/* Avatar */}
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: 38,
+          height: 38,
+          background: `linear-gradient(180deg, ${A.avatarStart} 0%, ${A.avatarEnd} 100%)`,
+          borderRadius: 18,
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 18,
+            fontWeight: 700,
+            color: A.textOnDark,
+            letterSpacing: '-0.5px',
+          }}
+        >
+          L
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 子组件：POI 详情面板 ────────────────────────────────────────
+function PlaceCard({ poi, onClose }: { poi: POI; onClose: () => void }) {
+  return (
+    <>
+      {/* 半透明遮罩 */}
+      <div
+        onClick={onClose}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'rgba(0, 0, 0, 0.16)',
+          zIndex: 2000,
+        }}
+      />
+      {/* 详情面板 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '85%',
+          background: A.surfaceLight,
+          boxShadow: A.glassShadow,
+          backdropFilter: 'blur(16px)',
+          borderRadius: '36px 36px 0 0',
+          zIndex: 2001,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Fill layer */}
+        <div
+          style={{
+            position: 'absolute', inset: 0,
+            background: A.glassPanel,
+            backgroundBlendMode: A.glassBlend,
+            backdropFilter: 'blur(21px)',
+            borderRadius: '36px 36px 0 0',
+          }}
+        />
+        {/* Grabber */}
+        <div
+          style={{
+            width: 48,
+            height: 4,
+            background: 'rgba(0, 0, 0, 0.2)',
+            borderRadius: 4,
+            margin: '6px auto 0',
+            position: 'relative',
+            zIndex: 1,
+            flexShrink: 0,
+          }}
+        />
+        {/* 头部信息 */}
+        <div
+          style={{
+            position: 'relative', zIndex: 1,
+            padding: '12px 16px 0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: "'SF Pro', -apple-system, sans-serif",
+              fontSize: 19,
+              fontWeight: 700,
+              color: A.textPrimary,
+              letterSpacing: '-0.4px',
+              lineHeight: '23px',
+            }}
+          >
+            {poi.name}
+          </div>
+          <div
+            style={{
+              fontFamily: "'SF Pro', -apple-system, sans-serif",
+              fontSize: 13,
+              fontWeight: 590,
+              color: A.textSecondary,
+              letterSpacing: '-0.4px',
+              lineHeight: '16px',
+              marginTop: 2,
+            }}
+          >
+            {poi.category}
+          </div>
+        </div>
+
+        {/* 可滚动内容 */}
+        <div style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto', padding: '0 16px 80px' }}>
+          {/* Actions Row */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 8,
+              marginTop: 16,
+              marginBottom: 24,
+            }}
+          >
+            <ActionButton label="Directions" icon="directions_car" primary />
+            <ActionButton label="Call" icon="call" />
+            <ActionButton label="Website" icon="language" />
+          </div>
+
+          {/* Info Stats */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 28,
+              marginBottom: 24,
+            }}
+          >
+            <InfoStat label="Status" value={poi.statusLabel} color={poi.status === 'Closed' ? A.red : '#34C759'} />
+            <InfoStat label="Walk" value={`${poi.walkPercent}%`} icon="directions_walk" />
+            <InfoStat label="Price" value={'$'.repeat(poi.priceLevel)} />
+            <InfoStat label="Drive" value={poi.driveDist} icon="directions_car" sub={poi.driveTime} />
+          </div>
+
+          {/* Photo Gallery */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 12,
+              marginBottom: 24,
+            }}
+          >
+            {poi.photos.map((url, i) => (
+              <div
+                key={i}
+                style={{
+                  width: 176,
+                  height: 176,
+                  borderRadius: 26,
+                  background: `linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(${url})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  padding: '12px 14px',
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 17,
+                    fontWeight: 590,
+                    color: A.textOnDark,
+                    letterSpacing: '-0.8px',
+                  }}
+                >
+                  {i === 0 ? 'Atmosphere' : 'All Photos'}
+                </span>
+              </div>
+            ))}
+            {/* Add / More buttons */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: 104,
+                  height: 82,
+                  background: A.surfaceLight,
+                  borderRadius: 22,
+                  padding: 8,
+                  gap: 2,
+                }}
+              >
+                <span className="material-symbols-outlined" style={{ fontSize: 16, color: A.primary }}>add_a_photo</span>
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: A.primary,
+                    textAlign: 'center',
+                  }}
+                >
+                  Add Photo
+                </span>
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: 104,
+                  height: 82,
+                  background: A.surfaceLight,
+                  borderRadius: 22,
+                  padding: 8,
+                  gap: 2,
+                }}
+              >
+                <span className="material-symbols-outlined" style={{ fontSize: 16, color: A.primary }}>photo_library</span>
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: A.primary,
+                    textAlign: 'center',
+                  }}
+                >
+                  More Photos
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Ratings Section */}
+          <div style={{ marginBottom: 24 }}>
+            <SectionTitle title="Ratings" />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+              {poi.ratings.map((r, i) => (
+                <RatingRow key={i} category={r.category} score={r.score} count={r.count} />
+              ))}
+            </div>
+            {/* Rate Button */}
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '16px 10px',
+                marginTop: 12,
+                background: A.primaryTinted,
+                borderRadius: 26,
+                gap: 10,
+              }}
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18, color: A.primary }}>star</span>
+              <span
+                style={{
+                  fontFamily: "'SF Pro', -apple-system, sans-serif",
+                  fontSize: 17,
+                  fontWeight: 590,
+                  color: A.primary,
+                  letterSpacing: '-0.5px',
+                }}
+              >
+                Rate This Place
+              </span>
+            </div>
+          </div>
+
+          {/* Good to Know */}
+          <div style={{ marginBottom: 24 }}>
+            <SectionTitle title="Good to Know" />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+              {poi.goodToKnow.map((item, i) => (
+                <div key={i} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                  <span style={{ fontSize: 12, color: A.textPrimary }}>✓</span>
+                  <span
+                    style={{
+                      fontFamily: "'SF Pro', -apple-system, sans-serif",
+                      fontSize: 17,
+                      fontWeight: 400,
+                      color: A.textPrimary,
+                      letterSpacing: '-0.8px',
+                    }}
+                  >
+                    {item}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Hours */}
+          <div style={{ marginBottom: 24 }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+                paddingBottom: 8,
+                borderBottom: `1px solid ${A.separator}`,
+                marginBottom: 8,
+              }}
+            >
+              <span
+                style={{
+                  fontFamily: "'SF Pro', -apple-system, sans-serif",
+                  fontSize: 20,
+                  fontWeight: 590,
+                  color: A.textPrimary,
+                  letterSpacing: '-0.8px',
+                }}
+              >
+                Hours
+              </span>
+              <span
+                style={{
+                  fontFamily: "'SF Pro', -apple-system, sans-serif",
+                  fontSize: 15,
+                  fontWeight: 510,
+                  color: A.textLinkEdit,
+                  letterSpacing: '-0.4px',
+                }}
+              >
+                Edit
+              </span>
+            </div>
+            <div
+              style={{
+                fontFamily: "'SF Pro', -apple-system, sans-serif",
+                fontSize: 17,
+                fontWeight: 400,
+                color: A.red,
+                letterSpacing: '-0.4px',
+                marginBottom: 8,
+              }}
+            >
+              {poi.todayLabel}
+            </div>
+            {poi.hours.map((h, i) => (
+              <div
+                key={i}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  padding: '4px 0',
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 17,
+                    fontWeight: 400,
+                    color: A.textPrimary,
+                    letterSpacing: '-0.4px',
+                  }}
+                >
+                  {h.day}
+                </span>
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 17,
+                    fontWeight: 400,
+                    color: A.textPrimary,
+                    letterSpacing: '-0.4px',
+                  }}
+                >
+                  {h.time}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Details */}
+          <div style={{ marginBottom: 24 }}>
+            <SectionTitle title="Details" />
+            <div style={{ marginTop: 8 }}>
+              {/* Phone */}
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  paddingBottom: 8,
+                  borderBottom: `0.5px solid ${A.separator}`,
+                  marginBottom: 8,
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 15,
+                    fontWeight: 400,
+                    color: A.textSecondary,
+                    letterSpacing: '-0.4px',
+                  }}
+                >
+                  Phone
+                </span>
+                <span
+                  style={{
+                    fontFamily: "'SF Pro Display', -apple-system, sans-serif",
+                    fontSize: 17,
+                    fontWeight: 500,
+                    color: A.textLink,
+                  }}
+                >
+                  {poi.phone}
+                </span>
+              </div>
+              {/* Address */}
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-start',
+                  paddingBottom: 8,
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: "'SF Pro', -apple-system, sans-serif",
+                    fontSize: 15,
+                    fontWeight: 400,
+                    color: A.textSecondary,
+                    letterSpacing: '-0.4px',
+                  }}
+                >
+                  Address
+                </span>
+                <span
+                  style={{
+                    fontFamily: "'SF Pro Display', -apple-system, sans-serif",
+                    fontSize: 17,
+                    fontWeight: 400,
+                    color: A.textPrimary,
+                    lineHeight: '22px',
+                    textAlign: 'right' as const,
+                    maxWidth: 192,
+                  }}
+                >
+                  {poi.address}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* System Actions */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
+            <SystemActionButton label="Report an Issue" icon="report_problem" />
+            <SystemActionButton label="Add to Favorites" icon="location_on" />
+            <SystemActionButton label="Claim This Place" icon="apartment" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ─── 详情面板子组件 ─────────────────────────────────────────────
+function ActionButton({ label, icon, primary }: { label: string; icon: string; primary?: boolean }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: 8,
+        gap: 2,
+        flex: 1,
+        height: 53,
+        background: primary ? A.primary : A.primaryAlpha,
+        borderRadius: 14,
+      }}
+    >
+      <span style={{ fontSize: 16, color: primary ? A.textOnDark : A.primary }}>{icon}</span>
+      <span
+        style={{
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 13,
+          fontWeight: 700,
+          color: primary ? A.textOnDark : A.primary,
+          textAlign: 'center' as const,
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function InfoStat({ label, value, color, icon, sub }: { label: string; value: string; color?: string; icon?: string; sub?: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+      <span
+        style={{
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 13,
+          fontWeight: 590,
+          color: A.textSecondary,
+          letterSpacing: '-0.4px',
+        }}
+      >
+        {label}
+      </span>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
+        {icon && <span style={{ fontSize: 12 }}>{icon}</span>}
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 16,
+            fontWeight: sub ? 700 : 590,
+            color: color ?? A.textPrimary,
+          }}
+        >
+          {value}
+        </span>
+      </div>
+      {sub && (
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 11,
+            fontWeight: 400,
+            color: A.textSecondary,
+          }}
+        >
+          {sub}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function SectionTitle({ title }: { title: string }) {
+  return (
+    <span
+      style={{
+        fontFamily: "'SF Pro', -apple-system, sans-serif",
+        fontSize: 20,
+        fontWeight: 590,
+        color: A.textPrimary,
+        letterSpacing: '-0.8px',
+        lineHeight: '24px',
+      }}
+    >
+      {title}
+    </span>
+  );
+}
+
+function RatingRow({ category, score, count }: { category: string; score: number; count: number }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        height: 41,
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, flex: 1 }}>
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 17,
+            fontWeight: 510,
+            color: A.textPrimary,
+            letterSpacing: '-0.8px',
+          }}
+        >
+          {category}
+        </span>
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 15,
+            fontWeight: 400,
+            color: A.textSecondary,
+            letterSpacing: '-0.8px',
+          }}
+        >
+          {count} ratings
+        </span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        <span className="material-symbols-outlined" style={{ fontSize: 27, color: A.textPrimary }}>star</span>
+        <span
+          style={{
+            fontFamily: "'SF Pro', -apple-system, sans-serif",
+            fontSize: 27,
+            fontWeight: 700,
+            color: A.textPrimary,
+          }}
+        >
+          {score}%
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function SystemActionButton({ label, icon }: { label: string; icon: string }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '16px 10px',
+        gap: 10,
+        background: A.primaryTinted,
+        borderRadius: 26,
+      }}
+    >
+      <span style={{ fontSize: 18, color: A.primary, position: 'absolute', left: 24 }}>{icon}</span>
+      <span
+        style={{
+          fontFamily: "'SF Pro', -apple-system, sans-serif",
+          fontSize: 17,
+          fontWeight: 590,
+          color: A.primary,
+          letterSpacing: '-0.5px',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+// ─── 主组件 ─────────────────────────────────────────────────────
+export default function AppleMapsDemo() {
+  const sceneRef = useRef<Scene | null>(null);
+  const [selectedPoi, setSelectedPoi] = useState<POI | null>(null);
+
+  const handleSceneReady = useCallback((scene: Scene) => {
+    sceneRef.current = scene;
+    setTimeout(() => {
+      scene.fitBounds(
+        [
+          [120.05, 30.2],
+          [120.18, 30.28],
+        ],
+        { padding: { top: 80, bottom: 120, left: 60, right: 60 } },
+      );
+    }, 400);
+  }, []);
+
+  const handleLocate = useCallback(() => {
+    if (sceneRef.current) {
+      sceneRef.current.setZoomAndCenter(14, [120.15, 30.25]);
+    }
+  }, []);
+
+  return (
+    <div style={{ width: '100%', height: '100%', position: 'relative', background: A.surface, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif" }}>
+      {/* ── AiMap 地图画布 ── */}
+      <AiMap
+        autoFit={false}
+        map={{
+          basemap: 'gaode',
+          center: [120.15, 30.25],
+          zoom: 13,
+          style: 'light',
+        }}
+        onSceneReady={handleSceneReady}
+      >
+        {/* POI Markers — 橙色地点标记 */}
+        {POIS.map((poi) => (
+          <Marker
+            key={poi.id}
+            longitude={poi.lng}
+            latitude={poi.lat}
+            anchor="bottom"
+            offsets={[0, 0]}
+          >
+            <div
+              onClick={() => setSelectedPoi(poi)}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              {/* Pin Icon */}
+              <div
+                style={{
+                  width: 44,
+                  height: 55,
+                  position: 'relative',
+                  filter: A.pinShadow,
+                }}
+              >
+                {/* Pin body */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    width: 42,
+                    height: 42,
+                    left: 1,
+                    top: 0,
+                    background: `linear-gradient(180deg, ${A.locStart} 0%, ${A.locEnd} 100%)`,
+                    borderRadius: '50%',
+                    border: '2px solid #FFFFFF',
+                  }}
+                >
+                  {/* Inner icon area */}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      width: 20,
+                      height: 20,
+                      left: '50%',
+                      top: '50%',
+                      transform: 'translate(-50%, -50%)',
+                      background: 'rgba(255,255,255,0.9)',
+                      borderRadius: 4,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <span className="material-symbols-outlined" style={{ fontSize: 14 }}>location_on</span>
+                  </div>
+                </div>
+                {/* Pin bottom tip */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    width: 0,
+                    height: 0,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    bottom: 2,
+                    borderLeft: '6px solid transparent',
+                    borderRight: '6px solid transparent',
+                    borderTop: `8px solid ${A.locEnd}`,
+                  }}
+                />
+                {/* Small dot at tip */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    width: 6,
+                    height: 6,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    bottom: -2,
+                    background: A.locDot,
+                    borderRadius: '50%',
+                    border: '1.5px solid #FFFFFF',
+                  }}
+                />
+              </div>
+              {/* Name Label */}
+              <span
+                style={{
+                  fontFamily: "'SF Pro', -apple-system, sans-serif",
+                  fontSize: 11,
+                  fontWeight: 700,
+                  color: A.labelText,
+                  textAlign: 'center' as const,
+                  background: 'rgba(255,255,255,0.85)',
+                  padding: '1px 4px',
+                  borderRadius: 4,
+                  border: '1px solid rgba(255,255,255,0.9)',
+                  marginTop: 2,
+                  maxWidth: 100,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap' as const,
+                }}
+              >
+                {poi.name}
+              </span>
+            </div>
+          </Marker>
+        ))}
+
+        {/* Center Pin — 搜索蓝点 + 光晕 */}
+        <Marker longitude={120.155} latitude={30.25} anchor="center" offsets={[0, 0]}>
+          <div style={{ width: 86, height: 88, position: 'relative' }}>
+            {/* Radial Glow */}
+            <div
+              style={{
+                position: 'absolute',
+                width: 86,
+                height: 86,
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                background: A.pinGlow,
+                borderRadius: '50%',
+              }}
+            />
+            {/* Blue Dot Core */}
+            <div
+              style={{
+                position: 'absolute',
+                width: 16,
+                height: 16,
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                background: A.primaryDark,
+                border: '4px solid #FFFFFF',
+                borderRadius: '50%',
+                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+              }}
+            />
+          </div>
+        </Marker>
+      </AiMap>
+
+      {/* ── 模式 A：地图浏览覆盖层 ── */}
+      {!selectedPoi && (
+        <>
+          {/* 关闭按钮（左上角）*/}
+          <GlassButton size={44} style={{ position: 'absolute', left: 16, top: 16, zIndex: 1100 }}>
+            <span
+              style={{
+                fontFamily: "'SF Pro', -apple-system, sans-serif",
+                fontSize: 19,
+                fontWeight: 590,
+                color: A.glassIcon,
+                letterSpacing: '-0.5px',
+              }}
+            >
+              ✕
+            </span>
+          </GlassButton>
+
+          {/* 信息按钮（右上角） */}
+          <GlassButton size={44} style={{ position: 'absolute', right: 16, top: 16, zIndex: 1100 }}>
+            <span
+              style={{
+                fontFamily: "'SF Pro', -apple-system, sans-serif",
+                fontSize: 19,
+                fontWeight: 590,
+                color: A.glassIcon,
+                letterSpacing: '-0.5px',
+              }}
+            >
+              ℹ️
+            </span>
+          </GlassButton>
+
+          <TemperatureWidget />
+          <VerticalToolbar onLocate={handleLocate} />
+          <BottomSearchBar />
+        </>
+      )}
+
+      {/* ── 模式 B：POI 详情面板 ── */}
+      {selectedPoi && (
+        <PlaceCard poi={selectedPoi} onClose={() => setSelectedPoi(null)} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/CheckInMap.tsx b/packages/site/src/app/CheckInMap.tsx
index 981106d..38a7035 100644
--- a/packages/site/src/app/CheckInMap.tsx
+++ b/packages/site/src/app/CheckInMap.tsx
@@ -208,7 +208,7 @@ export default function CheckInMap() {
       </div>
 
       {/* ── UI 覆盖层 ── */}
-      <div style={{ position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', inset: 0, zIndex: 1000, pointerEvents: 'none' }}>
         {/* ── 顶部：搜索栏 + 进度 ── */}
         <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', padding: '48px 16px 0', pointerEvents: 'none', boxSizing: 'border-box' }}>
           {/* 搜索栏 */}
@@ -342,7 +342,7 @@ export default function CheckInMap() {
               bottom: bottomSheetSnap === 'collapsed' ? 108 : 16,
               left: 16,
               right: 16,
-              zIndex: 20,
+              zIndex: 1000,
               pointerEvents: 'auto',
               transition: 'bottom 0.3s ease',
             }}
diff --git a/packages/site/src/app/FootprintMap.tsx b/packages/site/src/app/FootprintMap.tsx
index 173baa0..c7377aa 100644
--- a/packages/site/src/app/FootprintMap.tsx
+++ b/packages/site/src/app/FootprintMap.tsx
@@ -360,7 +360,7 @@ export default function FootprintMap() {
         <div style={{
           position: 'absolute',
           bottom: 98, left: 16, right: 16,
-          zIndex: 40,
+          zIndex: 1000,
           transition: 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
         }}>
           <div style={{
@@ -422,7 +422,7 @@ export default function FootprintMap() {
       {/* ═══════ 默认底部信息卡（未选中时显示） ═══════ */}
       {!selectedSpot && (
         <div style={{
-          position: 'absolute', bottom: 98, left: 16, right: 16, zIndex: 40,
+          position: 'absolute', bottom: 98, left: 16, right: 16, zIndex: 1000,
         }}>
           <div style={{
             padding: 16,
diff --git a/packages/site/src/app/GoogleMapsMobileDemo.tsx b/packages/site/src/app/GoogleMapsMobileDemo.tsx
new file mode 100644
index 0000000..b4a67d5
--- /dev/null
+++ b/packages/site/src/app/GoogleMapsMobileDemo.tsx
@@ -0,0 +1,657 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Scene } from '@antv/l7';
+import { AiMap, BottomSheet, LineLayer, Marker, Popup } from '@antv/aimapui';
+
+/* ================================================================
+   Google Maps Mobile — Explore 页面 Demo
+   设计规范：.codefuse/google_page.md
+   ================================================================ */
+
+// ── Design Tokens per spec ──────────────────────────────────────
+const G = {
+  primary: '#1A73E8', secondary: '#0B57D0',
+  highlightBg: '#E3EDFF', highlightBgAlt: '#E8F0FE',
+  surface: '#FFFFFF',
+  textPrimary: '#1C1B1F', textSecondary: '#5E5E5E',
+  textTertiary: '#707070', textQuaternary: '#867F7F',
+  borderLight: '#F3F2F2', borderMedium: '#D9D9D9',
+  shadowLight: '0px 1px 2px rgba(0,0,0,0.25)',
+  shadowMedium: '0px 4px 4px rgba(0,0,0,0.25)',
+  shadowHeavy: '0px 4px 12px rgba(0,0,0,0.25)',
+  bottomNavShadow: '0px -2px 4px rgba(0,0,0,0.25)',
+  cardShadow: '-2px 0px 11px rgba(0,0,0,0.25)',
+  tabInactive: '#5E5E5E',
+  handleColor: '#C5C6CD',
+  // P0 fix: G.red was referenced but undefined
+  red: '#D93025',
+  // Route path spec: #2985FF (different from primary #1A73E8)
+  routePath: '#2985FF',
+  // List item spec colors
+  listTitle: '#404040',
+  listSubtitle: '#867F7F',
+  // FAB icon inactive
+  iconInactive: '#3F3F3F',
+};
+
+// ── Data ────────────────────────────────────────────────────────
+const PILL_FILTERS = [
+  { key: 'all', label: '全部', icon: 'explore' },
+  { key: 'restaurant', label: '餐厅', icon: 'restaurant' },
+  { key: 'cafe', label: '咖啡', icon: 'local_cafe' },
+  { key: 'hotel', label: '酒店', icon: 'hotel' },
+  { key: 'shopping', label: '购物', icon: 'shopping_bag' },
+  { key: 'gas', label: '加油站', icon: 'local_gas_station' },
+  { key: 'park', label: '公园', icon: 'park' },
+  { key: 'museum', label: '博物馆', icon: 'museum' },
+];
+
+interface PoiItem { id: string; name: string; category: string; lng: number; lat: number; rating: number; reviewCount: number; address: string; distance: string; openNow?: boolean; }
+
+const POIS: PoiItem[] = [
+  { id: '1', name: '外婆家(湖滨店)', category: 'restaurant', lng: 120.164, lat: 30.251, rating: 4.5, reviewCount: 2834, address: '杭州市上城区湖滨路 25 号', distance: '1.2 km', openNow: true },
+  { id: '2', name: '星巴克(西湖天地店)', category: 'cafe', lng: 120.159, lat: 30.244, rating: 4.3, reviewCount: 1562, address: '杭州市上城区南山路 147 号', distance: '0.8 km', openNow: true },
+  { id: '3', name: '杭州君悦酒店', category: 'hotel', lng: 120.163, lat: 30.248, rating: 4.7, reviewCount: 4218, address: '杭州市上城区湖滨路 28 号', distance: '1.5 km' },
+  { id: '4', name: '杭州大厦购物城', category: 'shopping', lng: 120.161, lat: 30.276, rating: 4.4, reviewCount: 5630, address: '杭州市拱墅区环城北路 258 号', distance: '2.8 km', openNow: true },
+  { id: '5', name: '中国石化(天目山路站)', category: 'gas', lng: 120.13, lat: 30.272, rating: 4.1, reviewCount: 892, address: '杭州市西湖区天目山路 398 号', distance: '3.2 km', openNow: true },
+  { id: '6', name: '绿荼(龙井路店)', category: 'restaurant', lng: 120.118, lat: 30.228, rating: 4.6, reviewCount: 3401, address: '杭州市西湖区龙井路 72 号', distance: '4.1 km', openNow: true },
+  { id: '7', name: '西湖风景区', category: 'park', lng: 120.141, lat: 30.241, rating: 4.8, reviewCount: 52100, address: '杭州市西湖区龙井路 1 号', distance: '0.5 km' },
+  { id: '8', name: '浙江省博物馆', category: 'museum', lng: 120.152, lat: 30.255, rating: 4.5, reviewCount: 7820, address: '杭州市西湖区孤山路 25 号', distance: '1.7 km' },
+  { id: '9', name: '中国丝绸博物馆', category: 'museum', lng: 120.159, lat: 30.228, rating: 4.4, reviewCount: 3201, address: '杭州市上城区玉皇山路 73-1 号', distance: '2.3 km' },
+  { id: '10', name: 'M Stand(武林广场店)', category: 'cafe', lng: 120.167, lat: 30.273, rating: 4.2, reviewCount: 678, address: '杭州市拱墅区武林广场 21 号', distance: '2.6 km', openNow: true },
+];
+
+const CAT_ICON: Record<string, { icon: string; color: string }> = {
+  restaurant: { icon: 'restaurant', color: '#EA4335' },
+  cafe: { icon: 'local_cafe', color: '#8E6B4F' },
+  hotel: { icon: 'hotel', color: '#1A73E8' },
+  shopping: { icon: 'shopping_bag', color: '#F9AB00' },
+  gas: { icon: 'local_gas_station', color: '#34A853' },
+  park: { icon: 'park', color: '#34A853' },
+  museum: { icon: 'museum', color: '#9C6BFF' },
+};
+
+const NAV_TABS = [
+  { key: 'explore', label: '探索', icon: 'explore' },
+  { key: 'commute', label: '通勤', icon: 'commute' },
+  { key: 'saved', label: '收藏', icon: 'bookmark' },
+  { key: 'contrib', label: '贡献', icon: 'add_location_alt' },
+  { key: 'updates', label: '更新', icon: 'notifications' },
+];
+
+// Spec constants
+const BOTTOM_NAV_H = 89;        // 53 + 36 safe area
+const CARD_COLLAPSED_H = 96;
+const CARD_EXPANDED_H = 520;
+
+// ── Zoom Buttons — spec: FAB Small Secondary (40×40, radius 44, bg #FFF, shadow light, icon 24px #3F3F3F) ──
+function ZoomButtons({ scene }: { scene: Scene | null }) {
+  const fabSmallSecondary: React.CSSProperties = {
+    width: 40, height: 40, borderRadius: 44, border: 'none', cursor: 'pointer',
+    background: G.surface, boxShadow: G.shadowLight,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <button onClick={() => scene?.setZoom(Math.min(18, scene.getZoom() + 1))} style={fabSmallSecondary}>
+        <span className="material-symbols-outlined" style={{ fontSize: 24, color: G.iconInactive }}>add</span>
+      </button>
+      <button onClick={() => scene?.setZoom(Math.max(3, scene.getZoom() - 1))} style={fabSmallSecondary}>
+        <span className="material-symbols-outlined" style={{ fontSize: 24, color: G.iconInactive }}>remove</span>
+      </button>
+    </div>
+  );
+}
+
+// ── Bottom Nav (spec: 89px, 0px -2px 4px shadow, z-index base) ──
+function BottomNav({ activeTab, onTab }: { activeTab: string; onTab: (k: string) => void }) {
+  return (
+    <div style={{
+      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 2500,
+      height: BOTTOM_NAV_H, background: G.surface,
+      boxShadow: G.bottomNavShadow,
+      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
+      padding: '4px 8px 36px', gap: 4,
+    }}>
+      {NAV_TABS.map(tab => {
+        const isActive = activeTab === tab.key;
+        return (
+          <div key={tab.key} onClick={() => onTab(tab.key)}
+            style={{
+              display: 'flex', flexDirection: 'column', alignItems: 'center',
+              gap: 4, cursor: 'pointer', width: 64, height: 49,
+              padding: 0,
+            }}>
+            <div style={{
+              display: 'flex', alignItems: 'flex-start', padding: '4px 20px', gap: 4,
+              width: 64, height: 32, borderRadius: 20,
+              background: isActive ? G.highlightBg : 'transparent',
+            }}>
+              <span className="material-symbols-outlined" style={{
+                fontSize: 24, color: isActive ? G.secondary : G.textSecondary,
+              }}>{tab.icon}</span>
+            </div>
+            <span style={{
+              fontSize: 11, fontWeight: 500, letterSpacing: '0.01em', lineHeight: '13px',
+              color: isActive ? G.secondary : G.tabInactive,
+            }}>{tab.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Business-style drawer per spec ─────────────────────────────
+function BottomCard({ filteredPois, activeFilter, selectedPoi, onSelect, selectedPoiId, onPoiClick, visible = false, onStartNavigation }: {
+  filteredPois: PoiItem[]; activeFilter: string; selectedPoi: PoiItem | null; selectedPoiId: string | null;
+  onSelect: (p: PoiItem) => void; onPoiClick: (p: PoiItem) => void; visible?: boolean; onStartNavigation?: () => void;
+}) {
+  const [activeTab, setActiveTab] = useState<'overview' | 'list'>('overview');
+
+  if (!visible) return null;
+
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, zIndex: 3100, background: G.surface, display: 'flex', flexDirection: 'column', pointerEvents: 'auto',
+    }}>
+      {/* Close Button */}
+      <div style={{ position: 'absolute', top: 52, right: 12, zIndex: 10 }}>
+        <span className="material-symbols-outlined" onClick={() => onPoiClick(selectedPoi!)} style={{ fontSize: 24, color: '#4F4F4F', cursor: 'pointer', background: G.surface, borderRadius: '50%', padding: 4, boxShadow: G.shadowLight }}>close</span>
+      </div>
+
+      {/* Scrollable Content */}
+      <div style={{ flex: 1, overflowY: 'auto', paddingTop: 52 }}>
+          {/* Bottom Sheet Handle — spec 3.12: 73×4px, #C5C6CD, radius 12px */}
+          <div style={{
+            position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
+            width: 73, height: 4, background: G.handleColor, borderRadius: 12,
+          }} />
+          {/* Title — spec: 20px/400 */}
+          <div style={{ padding: '16px 28px 0', fontSize: 20, fontWeight: 400, color: '#000', lineHeight: '23px', letterSpacing: '0.01em' }}>
+            {selectedPoi ? selectedPoi.name : '西湖风景区'}
+          </div>
+
+          {/* Address — spec: 14px, #867F7F */}
+          <div style={{ padding: '4px 28px 8px', fontSize: 14, color: '#867F7F', lineHeight: '16px' }}>
+            {selectedPoi ? selectedPoi.address : '杭州市西湖区龙井路 1 号'}
+          </div>
+
+          {/* Action Buttons row — spec exact */}
+          <div style={{ display: 'flex', gap: 4, padding: '12px 28px', flexShrink: 0, overflowX: 'auto', scrollbarWidth: 'none' }}>
+            {/* Primary button — spec: 12px 18px 12px 16px, gap 6, #1A73E8, radius 44, icon 18px, label 16px/500 */}
+            <button onClick={onStartNavigation} style={{
+              display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
+              padding: '12px 18px 12px 16px', borderRadius: 44, border: 'none', cursor: 'pointer',
+              background: G.primary, fontFamily: 'Roboto, system-ui, sans-serif',
+            }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 18, color: '#fff' }}>directions</span>
+              <span style={{ fontSize: 16, fontWeight: 500, color: '#fff', lineHeight: '19px' }}>导航</span>
+            </button>
+            {/* Secondary Call — spec: 12px 16px, gap 6, #ECF3FE, radius 44, icon 22px, label 16px/500 #0B57D0 */}
+            <button style={{
+              display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
+              padding: '12px 16px', borderRadius: 44, border: 'none', cursor: 'pointer',
+              background: '#ECF3FE', fontFamily: 'Roboto, system-ui, sans-serif',
+            }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 22, color: G.secondary }}>call</span>
+            </button>
+            {/* Secondary Save — spec: 12px 16px, gap 6, #ECF3FE, radius 44, icon 22px, label 16px/500 #0B57D0 */}
+            <button style={{
+              display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
+              padding: '12px 16px', borderRadius: 44, border: 'none', cursor: 'pointer',
+              background: '#ECF3FE', fontFamily: 'Roboto, system-ui, sans-serif',
+            }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 22, color: G.secondary }}>bookmark</span>
+              <span style={{ fontSize: 16, fontWeight: 500, color: G.secondary, lineHeight: '19px' }}>收藏</span>
+            </button>
+            {/* Secondary Share — spec: 12px 16px */}
+            <button style={{
+              display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
+              padding: '12px 16px', borderRadius: 44, border: 'none', cursor: 'pointer',
+              background: '#ECF3FE', fontFamily: 'Roboto, system-ui, sans-serif',
+            }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 22, color: G.secondary }}>share</span>
+            </button>
+          </div>
+
+          {/* Tab Bar — spec: 36px, selected=15px/600 #1761D7 + 3px highlighter, inactive=15px/500 #7F7F7F */}
+          <div style={{
+            display: 'flex', height: 36, borderBottom: '1px solid #BBBBBB', flexShrink: 0,
+            padding: '0 28px',
+          }}>
+            {(['overview', 'list'] as const).map(tab => {
+              const isActive = activeTab === tab;
+              return (
+                <div key={tab} onClick={() => setActiveTab(tab)}
+                  style={{
+                    position: 'relative', cursor: 'pointer',
+                    display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
+                    padding: '4px 4px 0', gap: 4, width: 72, height: 36,
+                  }}>
+                  <span style={{
+                    fontSize: 15, fontWeight: isActive ? 600 : 500,
+                    color: isActive ? '#1761D7' : '#7F7F7F',
+                    lineHeight: '22px', letterSpacing: isActive ? '0.2px' : undefined,
+                  }}>{tab === 'overview' ? '概览' : '列表'}</span>
+                  {isActive && (
+                    <div style={{
+                      width: 64, height: 3, background: '#1761D7',
+                      borderRadius: '4px 4px 0 0', alignSelf: 'stretch',
+                    }} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Tab Content */}
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            {activeTab === 'overview' ? (
+              /* Overview — simple info rows per spec */
+              <div style={{ padding: '12px 28px', display: 'flex', flexDirection: 'column', gap: 0 }}>
+                {selectedPoi && (
+                  <>
+                    <InfoRow label="评分" value={`${selectedPoi.rating} (${selectedPoi.reviewCount.toLocaleString()} 条评价)`} />
+                    <InfoRow label="地址" value={selectedPoi.address} />
+                    <InfoRow label="距离" value={selectedPoi.distance} />
+                    {selectedPoi.openNow && <InfoRow label="状态" value="营业中" valueColor="#34A853" />}
+                  </>
+                )}
+                {!selectedPoi && (
+                  <InfoRow label="评分" value="4.8 (52,100 条评价)" />
+                )}
+              </div>
+            ) : (
+              /* List tab — POI items per spec: 72px, 34px icon, divider #F3F2F2 */
+              <div style={{ paddingBottom: 32 }}>
+                <div style={{ padding: '8px 28px 4px', fontSize: 15, fontWeight: 500, color: '#000' }}>
+                  {activeFilter === 'all' ? '附近地点' : PILL_FILTERS.find(f => f.key === activeFilter)?.label}
+                  <span style={{ fontSize: 12, color: G.textSecondary, marginLeft: 6, fontWeight: 400 }}>{filteredPois.length} 个</span>
+                </div>
+                {filteredPois.map((poi, i) => {
+                  const cat = CAT_ICON[poi.category] ?? CAT_ICON.restaurant;
+                  return (
+                    <div key={poi.id} onClick={() => onPoiClick(poi)}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 20,
+                        height: 72, padding: '0 0 0 12px', cursor: 'pointer',
+                        borderBottom: i < filteredPois.length - 1 ? `1px solid ${G.borderLight}` : 'none',
+                        background: selectedPoiId === poi.id ? G.highlightBgAlt : 'transparent',
+                        transition: 'background 0.15s',
+                      }}>
+                      <div style={{
+                        width: 34, height: 34, borderRadius: '50%', background: G.highlightBgAlt,
+                        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                      }}>
+                        <span className="material-symbols-outlined" style={{ fontSize: 18, color: cat.color }}>{cat.icon}</span>
+                      </div>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 14, fontWeight: 400, color: G.listTitle, lineHeight: '16px', letterSpacing: '0.02em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{poi.name}</div>
+                        <div style={{ fontSize: 12, color: G.listSubtitle, display: 'flex', alignItems: 'center', gap: 4, lineHeight: '14px' }}>
+                          <span style={{ color: '#F9AB00', fontWeight: 500 }}>★ {poi.rating}</span>
+                          <span>({poi.reviewCount.toLocaleString()})</span><span>·</span><span>{poi.distance}</span>
+                          {poi.openNow && <><span>·</span><span style={{ color: '#34A853' }}>营业中</span></>}
+                        </div>
+                        <div style={{ fontSize: 12, color: G.textQuaternary, lineHeight: '18px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{poi.address}</div>
+                      </div>
+                      <span className="material-symbols-outlined" style={{ fontSize: 16, color: G.borderMedium, marginRight: 12 }}>chevron_right</span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+    </div>
+  );
+}
+
+function InfoRow({ label, value, valueColor }: { label: string; value: string; valueColor?: string }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', padding: '12px 0',
+      borderBottom: `1px solid ${G.borderLight}`,
+    }}>
+      <span style={{ fontSize: 14, color: G.textSecondary, width: 80, flexShrink: 0 }}>{label}</span>
+      <span style={{ fontSize: 14, color: valueColor ?? G.textPrimary, lineHeight: '20px' }}>{value}</span>
+    </div>
+  );
+}
+
+// 模拟定位
+const SIM_USER_LOC = { lng: 120.155, lat: 30.255 };
+
+export default function GoogleMapsMobileDemo() {
+  const sceneRef = useRef<Scene | null>(null);
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [searchFocused, setSearchFocused] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPoi, setSelectedPoi] = useState<PoiItem | null>(null);
+  const [activeTab, setActiveTab] = useState('explore');
+  const [userLoc, setUserLoc] = useState<{ lng: number; lat: number } | null>(null);
+  const [navigationMode, setNavigationMode] = useState(false);
+
+  useEffect(() => {
+    let resolved = false;
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        pos => { resolved = true; setUserLoc({ lng: pos.coords.longitude, lat: pos.coords.latitude }); },
+        () => { if (!resolved) setUserLoc(SIM_USER_LOC); },
+        { enableHighAccuracy: true, timeout: 5000 },
+      );
+    }
+    const fallback = setTimeout(() => { if (!resolved) setUserLoc(SIM_USER_LOC); }, 6000);
+    return () => clearTimeout(fallback);
+  }, []);
+
+  const filteredPois = useMemo(() => {
+    if (activeFilter === 'all') return POIS;
+    return POIS.filter(p => p.category === activeFilter);
+  }, [activeFilter]);
+
+  const searchResults = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+    const query = searchQuery.toLowerCase();
+    return POIS.filter(p =>
+      p.name.toLowerCase().includes(query) ||
+      p.address.toLowerCase().includes(query) ||
+      p.category.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+
+  const handleSceneReady = useCallback((scene: Scene) => {
+    sceneRef.current = scene;
+    setTimeout(() => {
+      scene.fitBounds(
+        [[120.095, 30.20], [120.18, 30.29]],
+        { padding: [72, 20, BOTTOM_NAV_H + CARD_COLLAPSED_H + 10, 20] },
+      );
+    }, 400);
+  }, []);
+
+  const handlePoiClick = useCallback((poi: PoiItem) => {
+    setSelectedPoi(prev => prev?.id === poi.id ? null : poi);
+    sceneRef.current?.setZoomAndCenter(15, [poi.lng, poi.lat]);
+  }, []);
+
+  const handlePoiSelect = useCallback((poi: PoiItem) => {
+    setSelectedPoi(poi);
+    sceneRef.current?.setZoomAndCenter(15, [poi.lng, poi.lat]);
+  }, []);
+
+  const handleStartNavigation = useCallback(() => {
+    if (!selectedPoi || !userLoc) return;
+    setNavigationMode(true);
+    // 调整视野以同时显示起点和终点
+    const bounds: [[number, number], [number, number]] = [
+      [Math.min(userLoc.lng, selectedPoi.lng) - 0.01, Math.min(userLoc.lat, selectedPoi.lat) - 0.01],
+      [Math.max(userLoc.lng, selectedPoi.lng) + 0.01, Math.max(userLoc.lat, selectedPoi.lat) + 0.01],
+    ];
+    sceneRef.current?.fitBounds(bounds, { padding: [80, 40, BOTTOM_NAV_H + 200, 40] });
+  }, [selectedPoi, userLoc]);
+
+  const handleExitNavigation = useCallback(() => {
+    setNavigationMode(false);
+  }, []);
+
+  // 生成模拟路线（直线 + 简单折线）
+  const routeFeature = useMemo(() => {
+    if (!navigationMode || !selectedPoi || !userLoc) return null;
+    const start = [userLoc.lng, userLoc.lat];
+    const end = [selectedPoi.lng, selectedPoi.lat];
+    const midLng = (start[0] + end[0]) / 2;
+    const midLat = (start[1] + end[1]) / 2 + 0.005;
+    return {
+      type: 'Feature' as const,
+      geometry: {
+        type: 'LineString' as const,
+        coordinates: [start, [midLng, midLat], end],
+      },
+      properties: {},
+    };
+  }, [navigationMode, selectedPoi, userLoc]);
+
+  return (
+    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', fontFamily: 'Roboto, system-ui, sans-serif', background: '#E8EAED' }}>
+      {/* Map */}
+      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
+        <AiMap autoFit={false} map={{ basemap: 'gaode', center: [120.15, 30.25], zoom: 13, style: 'normal', gestureConfig: { dragPan: true, pinchZoom: true, dragRotate: true } }} onSceneReady={handleSceneReady}>
+          {filteredPois.map(poi => {
+            const cat = CAT_ICON[poi.category] ?? CAT_ICON.restaurant;
+            return (
+              <Marker key={poi.id} longitude={poi.lng} latitude={poi.lat} anchor="bottom" offsets={[0, 0]}>
+                <div onClick={() => handlePoiClick(poi)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }}>
+                  {selectedPoi?.id === poi.id && (
+                    <div style={{ background: '#1C1B1F', color: '#fff', borderRadius: 6, padding: '3px 8px', fontSize: 11, fontWeight: 500, whiteSpace: 'nowrap', marginBottom: 4, boxShadow: G.shadowMedium }}>{poi.name}</div>
+                  )}
+                  <div style={{
+                    width: selectedPoi?.id === poi.id ? 38 : 30, height: selectedPoi?.id === poi.id ? 38 : 30,
+                    borderRadius: '50%', background: selectedPoi?.id === poi.id ? G.primary : G.surface,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'all 0.2s', boxShadow: selectedPoi?.id === poi.id ? G.shadowMedium : G.shadowLight,
+                    border: selectedPoi?.id === poi.id ? 'none' : `2px solid ${cat.color}`,
+                  }}>
+                    <span className="material-symbols-outlined" style={{ fontSize: selectedPoi?.id === poi.id ? 20 : 16, color: selectedPoi?.id === poi.id ? '#fff' : cat.color }}>{cat.icon}</span>
+                  </div>
+                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: G.primary, marginTop: 2, boxShadow: `0 0 0 2px ${G.surface}` }} />
+                </div>
+              </Marker>
+            );
+          })}
+
+          {/* User Location Marker — spec 3.10: 62×62 container, 73.5×63 cone, 22×22 blue dot with 4px white border */}
+          {userLoc && (
+            <Marker longitude={userLoc.lng} latitude={userLoc.lat} anchor="center" offsets={[0, 0]}>
+              <div style={{ pointerEvents: 'none', position: 'relative', width: 62, height: 62 }}>
+                {/* Direction cone: spec 73.5×63px at left:3.5 top:-2 */}
+                <div style={{
+                  position: 'absolute', width: 73.5, height: 63, left: 3.5, top: -2,
+                  background: 'linear-gradient(233.03deg, rgba(11,103,225,0) 42.51%, rgba(99,166,255,0.58) 98.87%)',
+                }} />
+                {/* Blue dot: 22×22 with 4px white border + shadow */}
+                <div style={{
+                  position: 'absolute', width: 22, height: 22, left: 0, top: 40.5,
+                  background: G.primary, border: '4px solid #FFFFFF',
+                  boxShadow: '0px 1px 4px rgba(0,0,0,0.25)', borderRadius: 20,
+                  boxSizing: 'border-box',
+                }} />
+              </div>
+            </Marker>
+          )}
+
+          {/* Navigation Route Line — spec 3.14: dashed 5px #2985FF */}
+          {routeFeature && (
+            <LineLayer
+              source={{ type: 'FeatureCollection', features: [routeFeature] }}
+              sourceType="geojson"
+              shape="line"
+              size={5}
+              color={G.routePath}
+              style={{ opacity: 0.9, lineType: 'dash', dashArray: [10, 6] } as Record<string, unknown>}
+              zIndex={10}
+            />
+          )}
+        </AiMap>
+      </div>
+
+      {/* ═══ Status Bar — spec: 48px, padding 18px 26px 14px 27px ═══ */}
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2000, height: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 26px 14px 27px', pointerEvents: 'none' }}>
+        <span style={{ fontSize: 17, fontWeight: 600, color: '#121212', letterSpacing: '-0.408px' }}>9:41</span>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 14, color: '#121212' }}>signal_cellular_alt</span>
+          <span className="material-symbols-outlined" style={{ fontSize: 14, color: '#121212' }}>wifi</span>
+          <span className="material-symbols-outlined" style={{ fontSize: 16, color: '#121212' }}>battery_full</span>
+        </div>
+      </div>
+
+      {/* ═══ Search Bar — spec: top: 52px, container 56px, bar 48px, radius 40 ═══ */}
+      <div style={{ position: 'absolute', top: 52, left: 0, right: 0, zIndex: 4000, height: 56, display: 'flex', flexDirection: 'column', padding: '4px 12px', pointerEvents: 'none' }}>
+        <div style={{
+          display: 'flex', alignItems: 'center',
+          padding: '8px 12px', gap: 16, flex: 1,
+          background: G.surface, boxShadow: '0px 4px 4px rgba(0,0,0,0.25)', borderRadius: 40,
+          overflow: 'hidden', pointerEvents: 'auto',
+        }}>
+          {searchFocused ? (
+            <>
+              <span className="material-symbols-outlined" style={{ fontSize: 20, color: '#4F4F4F', cursor: 'pointer', flexShrink: 0 }} onClick={() => { setSearchFocused(false); setSearchQuery(''); }}>arrow_back</span>
+              <input autoFocus value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="搜索地点" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 20, color: G.textPrimary, background: 'transparent', fontFamily: 'inherit' }} onBlur={() => { if (!searchQuery) setSearchFocused(false); }} />
+              <span className="material-symbols-outlined" style={{ fontSize: 20, color: '#4F4F4F', cursor: 'pointer', flexShrink: 0 }} onClick={() => { setSearchFocused(false); setSearchQuery(''); setSelectedPoi(null); }}>close</span>
+            </>
+          ) : (
+            <>
+              <span className="material-symbols-outlined" style={{ fontSize: 20, color: G.textTertiary, flexShrink: 0 }}>search</span>
+              <span style={{ flex: 1, fontSize: 20, color: G.textTertiary, letterSpacing: '0.01em', cursor: 'text' }} onClick={() => setSearchFocused(true)}>搜索地点</span>
+              <div style={{ width: 30, height: 30, borderRadius: 24, background: G.highlightBgAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                <span className="material-symbols-outlined" style={{ fontSize: 18, color: G.primary }}>person</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ═══ Search Results List ═══ */}
+      {searchFocused && searchQuery.trim() && (
+        <div style={{
+          position: 'absolute', top: 108, left: 12, right: 12, zIndex: 4001,
+          background: G.surface, borderRadius: 16, boxShadow: G.shadowMedium,
+          maxHeight: 'calc(100vh - 200px)', overflowY: 'auto', pointerEvents: 'auto',
+        }}>
+          {searchResults.length === 0 ? (
+            <div style={{ padding: '24px 16px', textAlign: 'center', color: G.textTertiary, fontSize: 14 }}>
+              未找到相关地点
+            </div>
+          ) : (
+            searchResults.map(poi => {
+              const cat = CAT_ICON[poi.category] ?? CAT_ICON.restaurant;
+              const isSelected = selectedPoi?.id === poi.id;
+              return (
+                <div key={poi.id} onClick={() => { handlePoiClick(poi); setSearchFocused(false); setSearchQuery(''); }}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px',
+                    cursor: 'pointer', borderBottom: `1px solid ${G.borderLight}`,
+                    background: isSelected ? G.highlightBgAlt : 'transparent',
+                  }}
+                >
+                  <div style={{
+                    width: 36, height: 36, borderRadius: '50%',
+                    background: isSelected ? G.primary : G.highlightBgAlt,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                  }}>
+                    <span className="material-symbols-outlined" style={{ fontSize: 18, color: isSelected ? '#fff' : cat.color }}>{cat.icon}</span>
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 15, fontWeight: 500, color: G.textPrimary, lineHeight: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{poi.name}</div>
+                    <div style={{ fontSize: 12, color: G.textTertiary, lineHeight: '16px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{poi.address}</div>
+                  </div>
+                  <span style={{ fontSize: 12, color: G.textQuaternary, flexShrink: 0 }}>{poi.distance}</span>
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+
+      {/* ═══ Pills — spec: top: 122px, height 40px ═══ */}
+      {!navigationMode && (
+        <div style={{
+          position: 'absolute', top: 122, left: 0, right: 0, zIndex: 2003,
+          height: 40, display: 'flex', alignItems: 'flex-start',
+          padding: '4px 0px 4px 12px', gap: 4, overflowX: 'auto', scrollbarWidth: 'none', pointerEvents: 'none',
+        }}>
+          {PILL_FILTERS.map(f => {
+            const isActive = activeFilter === f.key;
+            return (
+              <button key={f.key} onClick={() => setActiveFilter(f.key)} style={{
+                flexShrink: 0, height: 32, borderRadius: 24, border: 'none', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px 6px 8px',
+                fontSize: 15, fontWeight: 500, fontFamily: 'inherit', letterSpacing: '0.02em',
+                background: isActive ? '#1C1B1F' : G.surface,
+                color: isActive ? '#fff' : 'rgba(0,0,0,0.9)',
+                boxShadow: isActive ? undefined : '0px 1px 2px rgba(0,0,0,0.25)',
+                transition: 'all 0.15s', pointerEvents: 'auto',
+              }}>
+                <span className="material-symbols-outlined" style={{ fontSize: 20 }}>{f.icon}</span>
+                {f.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ═══ Transportation Chips — spec 3.7: shown in navigation mode ═══ */}
+      {navigationMode && (
+        <div style={{
+          position: 'absolute', top: 116, left: 0, right: 0, zIndex: 2003,
+          height: 40, display: 'flex', alignItems: 'center',
+          padding: '0 12px', gap: 16, overflowX: 'auto', scrollbarWidth: 'none', pointerEvents: 'none',
+        }}>
+          {[
+            { key: 'car', icon: 'directions_car', label: '驾车' },
+            { key: 'transit', icon: 'directions_bus', label: '公交' },
+            { key: 'walk', icon: 'directions_walk', label: '步行' },
+            { key: 'bike', icon: 'directions_bike', label: '骑行' },
+            { key: 'fly', icon: 'flight', label: '飞行' },
+          ].map((chip, i) => {
+            const isSelected = i === 0; // 默认选中驾车
+            return (
+              <button key={chip.key} style={{
+                flexShrink: 0, display: 'flex', alignItems: 'flex-end', gap: 6,
+                height: 28, padding: '4px 16px',
+                background: isSelected ? '#E9F4FF' : 'transparent',
+                border: isSelected ? '1px solid #86BAFF' : 'none',
+                borderRadius: 28, cursor: 'pointer', pointerEvents: 'auto',
+              }}>
+                <span className="material-symbols-outlined" style={{
+                  fontSize: 20, color: isSelected ? G.primary : '#151515',
+                }}>{chip.icon}</span>
+                <span style={{
+                  fontSize: 15, fontWeight: isSelected ? 500 : 400, lineHeight: '18px',
+                  color: isSelected ? G.primary : '#000000',
+                }}>{chip.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ═══ Left Column: Zoom + Locate + Directions ═══ */}
+      <div style={{
+        position: 'absolute', left: 10, bottom: BOTTOM_NAV_H + 2, zIndex: 3000,
+        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'none',
+      }}>
+        <div style={{ pointerEvents: 'auto' }}><ZoomButtons scene={sceneRef.current} /></div>
+        <button onClick={() => { if (userLoc) sceneRef.current?.setZoomAndCenter(16, [userLoc.lng, userLoc.lat]); }}
+          style={{ width: 40, height: 40, borderRadius: 44, border: 'none', cursor: 'pointer', background: G.surface, boxShadow: G.shadowLight, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'auto' }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 24, color: G.primary }}>my_location</span>
+        </button>
+        <button onClick={navigationMode ? handleExitNavigation : handleStartNavigation}
+          style={{ width: 58, height: 58, borderRadius: 44, border: 'none', cursor: 'pointer', background: navigationMode ? G.red : G.primary, boxShadow: G.shadowHeavy, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'auto' }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 26, color: '#fff' }}>{navigationMode ? 'close' : 'directions'}</span>
+        </button>
+      </div>
+
+      {/* ═══ Bottom Nav — spec: 89px, 0px -2px 4px shadow ═══ */}
+      <BottomNav activeTab={activeTab} onTab={setActiveTab} />
+
+      {/* ═══ Bottom Card — spec: -2px 0px 11px shadow ═══ */}
+      <BottomCard filteredPois={filteredPois} activeFilter={activeFilter} selectedPoi={selectedPoi} selectedPoiId={selectedPoi?.id ?? null} onSelect={handlePoiSelect} onPoiClick={handlePoiClick} visible={!!selectedPoi} onStartNavigation={handleStartNavigation} />
+
+      {/* ═══ Popup ═══ */}
+      {selectedPoi && (
+        <Popup longitude={selectedPoi.lng} latitude={selectedPoi.lat} size="standard" singleton closeButton visible onClose={() => setSelectedPoi(null)}
+          header={{ title: selectedPoi.name, statusLabel: selectedPoi.openNow ? '营业中' : undefined, statusColor: '#34A853' }}
+          attributes={[
+            { label: '评分', value: `${selectedPoi.rating} (${selectedPoi.reviewCount.toLocaleString()} 条评价)` },
+            { label: '地址', value: selectedPoi.address },
+            { label: '距离', value: selectedPoi.distance },
+          ]}
+          actions={[
+            { variant: 'primary' as const, label: '导航', onClick: () => {} },
+            { variant: 'secondary' as const, label: '收藏', onClick: () => {} },
+          ]}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/HangzhouTravelMap.tsx b/packages/site/src/app/HangzhouTravelMap.tsx
new file mode 100644
index 0000000..3f238a0
--- /dev/null
+++ b/packages/site/src/app/HangzhouTravelMap.tsx
@@ -0,0 +1,1321 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Scene } from '@antv/l7';
+import { AiMap, RouteLayer, Popup, Marker } from '@antv/aimapui';
+
+/* ================================================================
+   杭州三日游旅游地图 — Material Design 3 设计风格
+   Design Tokens: Primary #005da7, Secondary #42691a
+   ================================================================ */
+
+// ── Material Design 3 Design Tokens ──────────────────────────────
+const T = {
+  primary: '#005da7',
+  primaryContainer: '#2976c7',
+  secondary: '#42691a',
+  secondaryContainer: '#c2f191',
+  onSecondaryContainer: '#486f20',
+  background: '#f4fafd',
+  surface: '#f4fafd',
+  surfaceContainer: '#e8eff1',
+  surfaceContainerLow: '#eef5f7',
+  surfaceContainerLowest: '#ffffff',
+  surfaceContainerHighest: '#dde4e6',
+  surfaceDim: '#d4dbdd',
+  surfaceVariant: '#dde4e6',
+  surfaceBright: '#f4fafd',
+  onBackground: '#161d1f',
+  onSurface: '#161d1f',
+  onSurfaceVariant: '#414751',
+  onPrimary: '#ffffff',
+  onSecondary: '#ffffff',
+  onPrimaryFixed: '#001c39',
+  onPrimaryFixedVariant: '#004883',
+  outline: '#717783',
+  outlineVariant: '#c1c7d3',
+  error: '#ba1a1a',
+  inverseSurface: '#2b3234',
+  inverseOnSurface: '#ebf2f4',
+  tertiary: '#595c5f',
+  radius: '0.25rem',
+  radiusLg: '0.5rem',
+  radiusXl: '0.75rem',
+  radius2xl: '1rem',
+  radius3xl: '1.5rem',
+  radiusFull: '9999px',
+};
+
+// ── Data Model ───────────────────────────────────────────────────
+interface Spot {
+  id: string;
+  name: string;
+  lng: number;
+  lat: number;
+  icon: string;
+  time: string;
+  duration: string;
+  rating: number;
+  description: string;
+  image: string;
+  hasFood?: boolean;
+  photoTip?: boolean;
+}
+
+interface DayRoute {
+  day: number;
+  title: string;
+  theme: string;
+  spots: Spot[];
+}
+
+const HANGZHOU_ROUTES: DayRoute[] = [
+  {
+    day: 1,
+    title: '第一天',
+    theme: '西湖经典环游',
+    spots: [
+      {
+        id: 'd1-1',
+        name: '断桥残雪',
+        lng: 120.155,
+        lat: 30.261,
+        icon: 'landscape',
+        time: '09:00',
+        duration: '1.5h',
+        rating: 4.8,
+        description: '西湖十景之一，民间爱情传说发生地。',
+        image: 'https://images.unsplash.com/photo-1599571234909-29ed5d1321d6?w=400&h=400&fit=crop',
+      },
+      {
+        id: 'd1-2',
+        name: '郭庄 (Gusu Garden)',
+        lng: 120.143,
+        lat: 30.249,
+        icon: 'nature',
+        time: '11:30',
+        duration: '2h',
+        rating: 4.6,
+        description: '典型的江南私家园林，临湖凭眺。',
+        image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?w=400&h=400&fit=crop',
+        hasFood: true,
+      },
+      {
+        id: 'd1-3',
+        name: '雷峰塔',
+        lng: 120.149,
+        lat: 30.232,
+        icon: 'temple_buddhist',
+        time: '15:00',
+        duration: '1.5h',
+        rating: 4.7,
+        description: '俯瞰西湖全景的最佳地点，传说之地。',
+        image: 'https://images.unsplash.com/photo-1600269452121-4f2416e55c28?w=400&h=400&fit=crop',
+        photoTip: true,
+      },
+    ],
+  },
+  {
+    day: 2,
+    title: '第二天',
+    theme: '灵隐禅意之旅',
+    spots: [
+      {
+        id: 'd2-1',
+        name: '灵隐寺',
+        lng: 120.1,
+        lat: 30.24,
+        icon: 'temple_buddhist',
+        time: '08:00',
+        duration: '2h',
+        rating: 4.9,
+        description: '千年古刹，飞来峰石窟艺术精华。',
+        image: 'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=400&h=400&fit=crop',
+      },
+      {
+        id: 'd2-2',
+        name: '北高峰',
+        lng: 120.095,
+        lat: 30.248,
+        icon: 'hiking',
+        time: '10:30',
+        duration: '1.5h',
+        rating: 4.5,
+        description: '登顶俯瞰灵隐全景，可选缆车上下。',
+        image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+      },
+      {
+        id: 'd2-3',
+        name: '龙井村',
+        lng: 120.115,
+        lat: 30.225,
+        icon: 'local_cafe',
+        time: '13:00',
+        duration: '2h',
+        rating: 4.7,
+        description: '品正宗西湖龙井，春季可体验采茶。',
+        image: 'https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?w=400&h=400&fit=crop',
+        hasFood: true,
+      },
+    ],
+  },
+  {
+    day: 3,
+    title: '第三天',
+    theme: '运河与现代杭州',
+    spots: [
+      {
+        id: 'd3-1',
+        name: '京杭大运河',
+        lng: 120.13,
+        lat: 30.32,
+        icon: 'directions_boat',
+        time: '09:00',
+        duration: '1.5h',
+        rating: 4.6,
+        description: '水上巴士体验运河风光，从武林门出发。',
+        image: 'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=400&h=400&fit=crop',
+      },
+      {
+        id: 'd3-2',
+        name: '西溪湿地',
+        lng: 120.06,
+        lat: 30.27,
+        icon: 'park',
+        time: '11:30',
+        duration: '3h',
+        rating: 4.7,
+        description: '电瓶船深入湿地，看白鹭翩飞。',
+        image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&h=400&fit=crop',
+      },
+      {
+        id: 'd3-3',
+        name: '武林夜市',
+        lng: 120.165,
+        lat: 30.275,
+        icon: 'restaurant',
+        time: '16:00',
+        duration: '2h',
+        rating: 4.5,
+        description: '杭帮菜小吃一条街，片儿川必吃。',
+        image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=400&h=400&fit=crop',
+        hasFood: true,
+      },
+    ],
+  },
+];
+
+type Category = '全部' | '西湖' | '寺庙' | '历史' | '美食';
+const CATEGORIES: Category[] = ['全部', '西湖', '寺庙', '历史', '美食'];
+
+function spotsToPath(spots: Spot[]): [number, number][] {
+  return spots.map((s) => [s.lng, s.lat]);
+}
+
+function spotsToStops(spots: Spot[]) {
+  return spots.map((s, i) => ({
+    id: s.id,
+    lng: s.lng,
+    lat: s.lat,
+    name: s.name,
+    index: i,
+    icon: s.icon,
+  }));
+}
+
+const CARD_COLLAPSED_H = 130;
+const CARD_EXPANDED_H = 450;
+
+// ── TopAppBar: Search + Category Chips ───────────────────────────
+function TopAppBar({
+  activeCategory,
+  onCategoryChange,
+}: {
+  activeCategory: Category;
+  onCategoryChange: (c: Category) => void;
+}) {
+  const [searchFocused, setSearchFocused] = useState(false);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 3000,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '12px 12px 0',
+        gap: 12,
+      }}
+    >
+      {/* Search Bar */}
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '8px 16px',
+          borderRadius: 9999,
+          background: 'rgba(244, 250, 253, 0.7)',
+          backdropFilter: 'blur(16px)',
+          WebkitBackdropFilter: 'blur(16px)',
+          border: `1px solid rgba(22, 29, 31, 0.05)`,
+          boxShadow: '0px 10px 30px rgba(74, 144, 226, 0.08)',
+          transition: 'all 0.2s',
+          ...(searchFocused
+            ? {
+                boxShadow: `0px 0px 0px 2px rgba(0, 93, 167, 0.2), 0px 10px 30px rgba(74, 144, 226, 0.08)`,
+                borderColor: 'rgba(0, 93, 167, 0.3)',
+              }
+            : {}),
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+          <span
+            className="material-symbols-outlined"
+            style={{ fontSize: 22, color: T.primary }}
+          >
+            search
+          </span>
+          <input
+            type="text"
+            placeholder="搜索景点、路线..."
+            onFocus={() => setSearchFocused(true)}
+            onBlur={() => setSearchFocused(false)}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              outline: 'none',
+              flex: 1,
+              fontSize: 14,
+              fontWeight: 400,
+              color: T.onSurface,
+              fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+            }}
+          />
+        </div>
+        <button
+          style={{
+            width: 36,
+            height: 36,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            border: 'none',
+            background: 'transparent',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = 'rgba(41, 118, 199, 0.1)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = 'transparent';
+          }}
+        >
+          <span
+            className="material-symbols-outlined"
+            style={{ fontSize: 20, color: T.onSurfaceVariant }}
+          >
+            tune
+          </span>
+        </button>
+      </div>
+
+      {/* Category Chips */}
+      <div
+        style={{
+          width: '100%',
+          overflowX: 'auto',
+          scrollbarWidth: 'none',
+          display: 'flex',
+          gap: 8,
+          padding: '0 4px 4px',
+        }}
+      >
+        {CATEGORIES.map((cat) => {
+          const isActive = cat === activeCategory;
+          return (
+            <button
+              key={cat}
+              onClick={() => onCategoryChange(cat)}
+              style={{
+                flexShrink: 0,
+                padding: '6px 20px',
+                borderRadius: 9999,
+                border: isActive
+                  ? 'none'
+                  : `1px solid rgba(22, 29, 31, 0.05)`,
+                background: isActive
+                  ? T.secondary
+                  : 'rgba(244, 250, 253, 0.7)',
+                color: isActive ? T.onSecondary : T.onSurfaceVariant,
+                fontSize: 13,
+                fontWeight: 500,
+                fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                cursor: 'pointer',
+                backdropFilter: 'blur(16px)',
+                WebkitBackdropFilter: 'blur(16px)',
+                boxShadow: isActive
+                  ? '0px 2px 8px rgba(66, 105, 26, 0.3)'
+                  : '0px 1px 3px rgba(0,0,0,0.05)',
+                transition: 'all 0.2s',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {cat}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── FAB: Current Location ────────────────────────────────────────
+function LocationFab({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        position: 'absolute',
+        right: 16,
+        bottom: CARD_COLLAPSED_H + 80,
+        zIndex: 3000,
+        width: 48,
+        height: 48,
+        borderRadius: '50%',
+        border: 'none',
+        cursor: 'pointer',
+        background: T.surface,
+        color: T.primary,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0px 10px 30px rgba(74, 144, 226, 0.15)',
+        transition: 'transform 0.2s',
+      }}
+      onMouseDown={(e) => {
+        e.currentTarget.style.transform = 'scale(0.9)';
+      }}
+      onMouseUp={(e) => {
+        e.currentTarget.style.transform = 'scale(1)';
+      }}
+    >
+      <span className="material-symbols-outlined" style={{ fontSize: 22 }}>
+        my_location
+      </span>
+    </button>
+  );
+}
+
+// ── BottomSheet: Trip Plan Panel ─────────────────────────────────
+function TravelBottomSheet({
+  routes,
+  activeDay,
+  selectedSpot,
+  onDayChange,
+  onSpotSelect,
+}: {
+  routes: DayRoute[];
+  activeDay: number;
+  selectedSpot: Spot | null;
+  onDayChange: (d: number) => void;
+  onSpotSelect: (s: Spot) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const route = routes[activeDay];
+  const transform = expanded ? 'translateY(5%)' : 'translateY(62%)';
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 2500,
+        height: CARD_EXPANDED_H,
+        background: 'rgba(244, 250, 253, 0.95)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderRadius: '1.5rem 1.5rem 0 0',
+        boxShadow: '0px -10px 40px rgba(0, 0, 0, 0.08)',
+        transform,
+        transition: 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '85vh',
+      }}
+    >
+      {/* Drag Handle */}
+      <div
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          padding: '10px 0 4px',
+          cursor: 'pointer',
+          flexShrink: 0,
+        }}
+      >
+        <div
+          style={{
+            width: 48,
+            height: 4,
+            background: 'rgba(65, 71, 81, 0.2)',
+            borderRadius: 4,
+          }}
+        />
+      </div>
+
+      {/* Content */}
+      <div
+        style={{
+          padding: '0 20px 16px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 18,
+          flex: 1,
+          overflowY: 'auto',
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div>
+            <h2
+              style={{
+                fontSize: 20,
+                fontWeight: 600,
+                color: T.onSurface,
+                margin: 0,
+                fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                lineHeight: '28px',
+              }}
+            >
+              杭州三日游
+            </h2>
+            <p
+              style={{
+                fontSize: 14,
+                fontWeight: 400,
+                color: T.onSurfaceVariant,
+                margin: '2px 0 0',
+                fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+              }}
+            >
+              为您精选的深度文化路线
+            </p>
+          </div>
+          <button
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '8px 16px',
+              borderRadius: 9999,
+              border: 'none',
+              cursor: 'pointer',
+              background: T.secondaryContainer,
+              color: T.onSecondaryContainer,
+              fontSize: 13,
+              fontWeight: 500,
+              fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+              transition: 'all 0.2s',
+            }}
+          >
+            <span
+              className="material-symbols-outlined"
+              style={{ fontSize: 16, fontVariationSettings: "'FILL' 1" }}
+            >
+              play_arrow
+            </span>
+            开始行程
+          </button>
+        </div>
+
+        {/* Day Tabs */}
+        <div
+          style={{
+            display: 'flex',
+            padding: 3,
+            background: T.surfaceContainerLow,
+            borderRadius: 16,
+          }}
+        >
+          {routes.map((r, i) => {
+            const isActive = i === activeDay;
+            return (
+              <button
+                key={r.day}
+                onClick={() => onDayChange(i)}
+                style={{
+                  flex: 1,
+                  padding: '8px 0',
+                  borderRadius: 12,
+                  border: 'none',
+                  cursor: 'pointer',
+                  background: isActive ? T.surface : 'transparent',
+                  color: isActive ? T.primary : T.onSurfaceVariant,
+                  fontSize: 13,
+                  fontWeight: 500,
+                  fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                  boxShadow: isActive ? '0px 1px 3px rgba(0,0,0,0.06)' : 'none',
+                  transition: 'all 0.2s',
+                }}
+              >
+                {r.title}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Timeline Route List */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {route.spots.map((spot, i) => {
+            const isLast = i === route.spots.length - 1;
+            const isSel = selectedSpot?.id === spot.id;
+            return (
+              <div key={spot.id} style={{ position: 'relative', paddingLeft: 32 }}>
+                {/* Vertical line */}
+                {!isLast && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: 13,
+                      top: 28,
+                      width: 0,
+                      height: 'calc(100% - 16px)',
+                      borderLeft: `2px dashed rgba(0, 93, 167, 0.3)`,
+                    }}
+                  />
+                )}
+                {/* Number circle */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 6,
+                    width: 26,
+                    height: 26,
+                    borderRadius: '50%',
+                    background: T.primary,
+                    color: T.onPrimary,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 13,
+                    fontWeight: 700,
+                    boxShadow: `0 0 0 4px ${T.surface}`,
+                    zIndex: 1,
+                  }}
+                >
+                  {i + 1}
+                </div>
+                {/* Card */}
+                <div
+                  onClick={() => onSpotSelect(spot)}
+                  style={{
+                    display: 'flex',
+                    gap: 12,
+                    padding: 12,
+                    borderRadius: 16,
+                    cursor: 'pointer',
+                    background: isSel
+                      ? 'rgba(0, 93, 167, 0.04)'
+                      : T.surfaceContainerLowest,
+                    border: `1px solid ${
+                      isSel ? 'rgba(0, 93, 167, 0.2)' : 'rgba(22, 29, 31, 0.05)'
+                    }`,
+                    boxShadow: '0px 1px 3px rgba(0,0,0,0.04)',
+                    transition: 'all 0.2s',
+                    marginBottom: 4,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 64,
+                      height: 64,
+                      borderRadius: 12,
+                      overflow: 'hidden',
+                      flexShrink: 0,
+                      background: T.surfaceVariant,
+                      position: 'relative',
+                    }}
+                  >
+                    <span
+                      className="material-symbols-outlined"
+                      style={{
+                        fontSize: 28,
+                        color: T.outline,
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                      }}
+                    >
+                      image
+                    </span>
+                    <img
+                      src={spot.image}
+                      alt={spot.name}
+                      onError={(e) => {
+                        (e.target as HTMLImageElement).style.display = 'none';
+                      }}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        position: 'relative',
+                      }}
+                    />
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontSize: 14,
+                          fontWeight: 500,
+                          color: T.onSurface,
+                          fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                        }}
+                      >
+                        {spot.name}
+                      </span>
+                      <span
+                        style={{
+                          fontSize: 12,
+                          fontWeight: 600,
+                          color: T.primary,
+                          background: 'rgba(0, 93, 167, 0.08)',
+                          padding: '2px 8px',
+                          borderRadius: 9999,
+                        }}
+                      >
+                        {spot.time}
+                      </span>
+                    </div>
+                    <p
+                      style={{
+                        fontSize: 12,
+                        fontWeight: 400,
+                        color: T.onSurfaceVariant,
+                        margin: '4px 0 0',
+                        fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {spot.description}
+                    </p>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 12,
+                        marginTop: 6,
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 3,
+                          color: T.onSurfaceVariant,
+                        }}
+                      >
+                        <span
+                          className="material-symbols-outlined"
+                          style={{ fontSize: 14 }}
+                        >
+                          schedule
+                        </span>
+                        <span style={{ fontSize: 12, fontWeight: 500 }}>
+                          {spot.duration}
+                        </span>
+                      </div>
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 3,
+                        }}
+                      >
+                        <span
+                          className="material-symbols-outlined"
+                          style={{
+                            fontSize: 14,
+                            color: T.secondary,
+                            fontVariationSettings: "'FILL' 1",
+                          }}
+                        >
+                          star
+                        </span>
+                        <span
+                          style={{
+                            fontSize: 12,
+                            fontWeight: 500,
+                            color: T.secondary,
+                          }}
+                        >
+                          {spot.rating}
+                        </span>
+                      </div>
+                      {spot.hasFood && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            color: T.primary,
+                          }}
+                        >
+                          <span
+                            className="material-symbols-outlined"
+                            style={{ fontSize: 14 }}
+                          >
+                            restaurant
+                          </span>
+                          <span style={{ fontSize: 12, fontWeight: 500 }}>
+                            推荐午餐
+                          </span>
+                        </div>
+                      )}
+                      {spot.photoTip && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            color: T.onSurfaceVariant,
+                          }}
+                        >
+                          <span
+                            className="material-symbols-outlined"
+                            style={{ fontSize: 14 }}
+                          >
+                            photo_camera
+                          </span>
+                          <span style={{ fontSize: 12, fontWeight: 500 }}>
+                            落日最佳
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── BottomNav: Navigation Bar ────────────────────────────────────
+function BottomNav({ sheetExpanded }: { sheetExpanded: boolean }) {
+  const bottomOffset = sheetExpanded ? 10 : CARD_COLLAPSED_H - 100;
+
+  return (
+    <nav
+      style={{
+        position: 'absolute',
+        bottom: bottomOffset,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 3200,
+        display: 'flex',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        padding: 6,
+        width: '90%',
+        maxWidth: 360,
+        background: 'rgba(244, 250, 253, 0.7)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1px solid rgba(22, 29, 31, 0.05)',
+        borderRadius: 9999,
+        boxShadow: '0px 10px 30px rgba(74, 144, 226, 0.08)',
+        transition: 'bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+      }}
+    >
+      {/* Map Tab (Active) */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: T.secondaryContainer,
+          color: T.onSecondaryContainer,
+          borderRadius: 9999,
+          padding: '6px 20px',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+      >
+        <span
+          className="material-symbols-outlined"
+          style={{ fontSize: 20, fontVariationSettings: "'FILL' 1" }}
+        >
+          map
+        </span>
+        <span style={{ fontSize: 11, fontWeight: 600, marginTop: 1 }}>
+          地图
+        </span>
+      </div>
+      {/* Discover Tab */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: T.onSurfaceVariant,
+          borderRadius: 9999,
+          padding: '6px 20px',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+      >
+        <span className="material-symbols-outlined" style={{ fontSize: 20 }}>
+          explore
+        </span>
+        <span style={{ fontSize: 11, fontWeight: 600, marginTop: 1 }}>
+          发现
+        </span>
+      </div>
+      {/* Trip Tab */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: T.onSurfaceVariant,
+          borderRadius: 9999,
+          padding: '6px 20px',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+      >
+        <span className="material-symbols-outlined" style={{ fontSize: 20 }}>
+          event_note
+        </span>
+        <span style={{ fontSize: 11, fontWeight: 600, marginTop: 1 }}>
+          行程
+        </span>
+      </div>
+    </nav>
+  );
+}
+
+// ── Main Component ───────────────────────────────────────────────
+export default function HangzhouTravelMap() {
+  const [activeDay, setActiveDay] = useState(0);
+  const [selectedSpot, setSelectedSpot] = useState<Spot | null>(null);
+  const [activeCategory, setActiveCategory] = useState<Category>('全部');
+  const [sheetExpanded, setSheetExpanded] = useState(false);
+  const sceneRef = useRef<Scene | null>(null);
+  const route = HANGZHOU_ROUTES[activeDay];
+  const routeColor = '#005da7';
+
+  // Filter spots by category
+  const filteredSpots = route.spots.filter(
+    (s) => activeCategory === '全部' || matchesCategory(s, activeCategory),
+  );
+
+  function matchesCategory(spot: Spot, cat: Category): boolean {
+    switch (cat) {
+      case '西湖':
+        return spot.name.includes('西湖') || spot.name.includes('湖') || spot.name.includes('堤') || spot.name.includes('湿地');
+      case '寺庙':
+        return spot.name.includes('寺') || spot.name.includes('庙') || spot.name.includes('塔');
+      case '历史':
+        return spot.name.includes('古') || spot.name.includes('运河') || spot.name.includes('村');
+      case '美食':
+        return spot.name.includes('夜市') || spot.name.includes('村') || spot.hasFood === true;
+      default:
+        return true;
+    }
+  }
+
+  const handleSceneReady = useCallback((scene: Scene) => {
+    sceneRef.current = scene;
+    const spots = HANGZHOU_ROUTES[0].spots;
+    setTimeout(() => {
+      const lngs = spots.map((s) => s.lng);
+      const lats = spots.map((s) => s.lat);
+      const pad = 0.06;
+      scene.fitBounds(
+        [
+          [Math.min(...lngs) - pad, Math.min(...lats) - pad],
+          [Math.max(...lngs) + pad, Math.max(...lats) + pad],
+        ],
+        { padding: [80, 40, CARD_COLLAPSED_H + 20, 40] },
+      );
+    }, 400);
+  }, []);
+
+  const handleDayChange = useCallback(
+    (dayIndex: number) => {
+      setActiveDay(dayIndex);
+      setSelectedSpot(null);
+      const spots = HANGZHOU_ROUTES[dayIndex].spots;
+      const scene = sceneRef.current;
+      if (!scene) return;
+      const lngs = spots.map((s) => s.lng);
+      const lats = spots.map((s) => s.lat);
+      const pad = 0.06;
+      scene.fitBounds(
+        [
+          [Math.min(...lngs) - pad, Math.min(...lats) - pad],
+          [Math.max(...lngs) + pad, Math.max(...lats) + pad],
+        ],
+        { padding: [80, 40, CARD_COLLAPSED_H + 20, 40], animate: true },
+      );
+    },
+    [],
+  );
+
+  const handleSpotClick = useCallback((spot: Spot) => {
+    setSelectedSpot((prev) => (prev?.id === spot.id ? null : spot));
+    const scene = sceneRef.current;
+    if (!scene) return;
+    scene.setZoomAndCenter(14, [spot.lng, spot.lat]);
+  }, []);
+
+  const handleLocate = useCallback(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    scene.setZoomAndCenter(14, [120.145, 30.26]);
+  }, []);
+
+  // Detect sheet expansion from DOM
+  useEffect(() => {
+    const sheet = document.getElementById('travel-bottom-sheet');
+    if (!sheet) return;
+    const observer = new MutationObserver(() => {
+      const currentTransform = sheet.style.transform;
+      setSheetExpanded(currentTransform.includes('translateY(5%)'));
+    });
+    observer.observe(sheet, { attributes: true, attributeFilter: ['style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden',
+        background: T.background,
+        fontFamily: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      }}
+    >
+      {/* ── Map ── */}
+      <AiMap
+        autoFit={false}
+        map={{
+          basemap: 'gaode',
+          center: [120.145, 30.26],
+          zoom: 12,
+          style: 'light',
+        }}
+        onSceneReady={handleSceneReady}
+      >
+        {/* Route Layer */}
+        <RouteLayer
+          key={`${activeDay}-${activeCategory}`}
+          path={spotsToPath(filteredSpots)}
+          stops={spotsToStops(filteredSpots)}
+          onStopClick={(p) => {
+            const stopId = typeof p.feature?.id === 'string' ? p.feature.id : undefined;
+            const spot = route.spots.find((s) => s.id === stopId);
+            if (spot) handleSpotClick(spot);
+          }}
+          color={routeColor}
+          lineWidth={3}
+          stopSize={10}
+          stopRenderer="icon"
+          stopIconSize={24}
+          stopColor={routeColor}
+          showStopIndex={false}
+        />
+
+        {/* West Lake Pulse Marker */}
+        <Marker longitude={120.147} latitude={30.243} anchor="center" offsets={[0, 0]}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              position: 'relative',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+                background: 'rgba(0, 93, 167, 0.15)',
+                filter: 'blur(4px)',
+                animation: 'pulse 2s ease-in-out infinite',
+              }}
+            />
+            <div
+              style={{
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                background: T.primary,
+                color: T.onPrimary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: `2px solid ${T.surface}`,
+                boxShadow: '0px 2px 8px rgba(0, 93, 167, 0.4)',
+                zIndex: 1,
+              }}
+            >
+              <span
+                className="material-symbols-outlined"
+                style={{
+                  fontSize: 18,
+                  fontVariationSettings: "'FILL' 1",
+                }}
+              >
+                water_lux
+              </span>
+            </div>
+            <div
+              style={{
+                marginTop: 4,
+                padding: '2px 10px',
+                background: 'rgba(244, 250, 253, 0.9)',
+                backdropFilter: 'blur(8px)',
+                WebkitBackdropFilter: 'blur(8px)',
+                borderRadius: 9999,
+                border: '1px solid rgba(22, 29, 31, 0.05)',
+                boxShadow: '0px 1px 3px rgba(0,0,0,0.06)',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: T.onSurface,
+                  whiteSpace: 'nowrap',
+                  fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                }}
+              >
+                西湖景区
+              </span>
+            </div>
+          </div>
+        </Marker>
+
+        {/* Lingyin Temple Marker */}
+        <Marker longitude={120.1} latitude={30.24} anchor="center" offsets={[0, 0]}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <div
+              style={{
+                width: 34,
+                height: 34,
+                borderRadius: '50%',
+                background: T.secondary,
+                color: T.onSecondary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: `2px solid ${T.surface}`,
+                boxShadow: '0px 2px 8px rgba(66, 105, 26, 0.4)',
+              }}
+            >
+              <span
+                className="material-symbols-outlined"
+                style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}
+              >
+                temple_buddhist
+              </span>
+            </div>
+            <div
+              style={{
+                marginTop: 4,
+                padding: '2px 10px',
+                background: 'rgba(244, 250, 253, 0.9)',
+                backdropFilter: 'blur(8px)',
+                WebkitBackdropFilter: 'blur(8px)',
+                borderRadius: 9999,
+                border: '1px solid rgba(22, 29, 31, 0.05)',
+                boxShadow: '0px 1px 3px rgba(0,0,0,0.06)',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: T.onSurface,
+                  whiteSpace: 'nowrap',
+                  fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                }}
+              >
+                灵隐寺
+              </span>
+            </div>
+          </div>
+        </Marker>
+
+        {/* Xixi Wetland Marker */}
+        <Marker longitude={120.06} latitude={30.27} anchor="center" offsets={[0, 0]}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <div
+              style={{
+                width: 34,
+                height: 34,
+                borderRadius: '50%',
+                background: T.secondary,
+                color: T.onSecondary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: `2px solid ${T.surface}`,
+                boxShadow: '0px 2px 8px rgba(66, 105, 26, 0.4)',
+              }}
+            >
+              <span
+                className="material-symbols-outlined"
+                style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}
+              >
+                park
+              </span>
+            </div>
+            <div
+              style={{
+                marginTop: 4,
+                padding: '2px 10px',
+                background: 'rgba(244, 250, 253, 0.9)',
+                backdropFilter: 'blur(8px)',
+                WebkitBackdropFilter: 'blur(8px)',
+                borderRadius: 9999,
+                border: '1px solid rgba(22, 29, 31, 0.05)',
+                boxShadow: '0px 1px 3px rgba(0,0,0,0.06)',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: T.onSurface,
+                  whiteSpace: 'nowrap',
+                  fontFamily: "'Plus Jakarta Sans', -apple-system, sans-serif",
+                }}
+              >
+                西溪湿地
+              </span>
+            </div>
+          </div>
+        </Marker>
+      </AiMap>
+
+      {/* ── UI Overlays ── */}
+      <TopAppBar
+        activeCategory={activeCategory}
+        onCategoryChange={setActiveCategory}
+      />
+
+      <LocationFab onClick={handleLocate} />
+
+      {/* ── Bottom Sheet (with id for observer) ── */}
+      <div id="travel-bottom-sheet">
+        <TravelBottomSheet
+          routes={HANGZHOU_ROUTES}
+          activeDay={activeDay}
+          selectedSpot={selectedSpot}
+          onDayChange={handleDayChange}
+          onSpotSelect={handleSpotClick}
+        />
+      </div>
+
+      {/* ── Bottom Nav ── */}
+      <BottomNav sheetExpanded={sheetExpanded} />
+
+      {/* ── Popup ── */}
+      {selectedSpot && (
+        <Popup
+          longitude={selectedSpot.lng}
+          latitude={selectedSpot.lat}
+          size="standard"
+          singleton
+          closeButton
+          visible
+          onClose={() => setSelectedSpot(null)}
+          header={{
+            title: selectedSpot.name,
+            statusLabel: selectedSpot.duration,
+            statusColor: routeColor,
+          }}
+          attributes={[
+            {
+              label: '路线',
+              value: `Day${route.day} · ${route.theme}`,
+            },
+            { label: '贴士', value: selectedSpot.description },
+          ]}
+          actions={[
+            {
+              variant: 'primary' as const,
+              label: '导航到这里',
+              onClick: () => {},
+            },
+            {
+              variant: 'secondary' as const,
+              label: '查看详情',
+              onClick: () => {},
+            },
+          ]}
+        />
+      )}
+
+      {/* ── CSS Keyframes for pulse animation ── */}
+      <style>{`
+        @keyframes pulse {
+          0%, 100% { transform: scale(1); opacity: 0.4; }
+          50% { transform: scale(1.8); opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/InterestMap.tsx b/packages/site/src/app/InterestMap.tsx
index d036ba1..eaaf1ba 100644
--- a/packages/site/src/app/InterestMap.tsx
+++ b/packages/site/src/app/InterestMap.tsx
@@ -390,7 +390,7 @@ export default function InterestMap() {
             position: 'absolute',
             bottom: selectedShop ? 220 : 20,
             right: 12,
-            zIndex: 20,
+            zIndex: 1000,
             display: 'flex',
             flexDirection: 'column',
             gap: 10,
@@ -409,7 +409,7 @@ export default function InterestMap() {
               bottom: 0,
               left: 0,
               right: 0,
-              zIndex: 20,
+              zIndex: 1000,
             }}
           >
             <ShopCard shop={selectedShop} onClose={handleCloseCard} />
@@ -586,7 +586,7 @@ function IPSelectPanel({
   const filteredIPs = categoryTab === '全部' ? IP_LIST : IP_LIST.filter((ip) => ip.category === categoryTab);
 
   return (
-    <div style={{ position: 'absolute', inset: 0, zIndex: 100, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ position: 'absolute', inset: 0, zIndex: 1000, display: 'flex', flexDirection: 'column' }}>
       {/* 遮罩 */}
       <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)' }} onClick={onClose} />
 
@@ -711,7 +711,7 @@ function NewsTypePanel({
   const subOptions = NEWS_SUB_MAP[selectedCategory] || ['全部'];
 
   return (
-    <div style={{ position: 'absolute', inset: 0, zIndex: 100 }}>
+    <div style={{ position: 'absolute', inset: 0, zIndex: 1000 }}>
       {/* 遮罩 */}
       <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)' }} onClick={onClose} />
 
diff --git a/packages/site/src/app/MobileApp.tsx b/packages/site/src/app/MobileApp.tsx
index 28fa3ff..a63aa28 100644
--- a/packages/site/src/app/MobileApp.tsx
+++ b/packages/site/src/app/MobileApp.tsx
@@ -1,528 +1,303 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Scene } from '@antv/l7';
-import { AiMap, RouteLayer, ZoomControl, GeoLocateControl, BottomSheet } from '@antv/aimapui';
-import type { BottomSheetSnap, LayerEventPayload } from '@antv/aimapui';
+import { AiMap, RouteLayer, Popup } from '@antv/aimapui';
+
 /* ================================================================
-   杭州 3 日游旅游攻略 — 多日路线数据
+   杭州 3 日游旅游攻略 — Google Maps Mobile 设计规范
+   Design Tokens: Primary #1A73E8, Surface #FFF
    ================================================================ */
 
+// ── Google Maps Design Tokens ───────────────────────────────────
+const T = {
+  primary: '#1A73E8', secondary: '#0B57D0',
+  highlightBg: '#D3E3FD', highlightBgAlt: '#E8F0FE',
+  surface: '#FFFFFF',
+  textPrimary: '#1C1B1F', textSecondary: '#5E5E5E',
+  textTertiary: '#707070', textQuaternary: '#867F7F',
+  borderLight: '#F3F2F2', borderMedium: '#D9D9D9',
+  shadowLight: '0px 1px 2px rgba(0,0,0,0.25)',
+  shadowMedium: '0px 4px 4px rgba(0,0,0,0.25)',
+  shadowHeavy: '0px 4px 12px rgba(0,0,0,0.25)',
+  tabInactive: '#7F7F7F',
+};
+
+// ── Data ────────────────────────────────────────────────────────
 interface Spot {
-  id: string;
-  name: string;
-  lng: number;
-  lat: number;
-  icon: string;
-  duration: string;
-  tips: string;
-  image: string;
+  id: string; name: string; lng: number; lat: number; icon: string;
+  duration: string; tips: string; image: string;
 }
-
 interface DayRoute {
-  day: number;
-  title: string;
-  theme: string;
-  color: string;
-  spots: Spot[];
+  day: number; title: string; theme: string; color: string; spots: Spot[];
 }
 
 const TRAVEL_ROUTES: DayRoute[] = [
-  {
-    day: 1,
-    title: '西湖经典环游',
-    theme: '湖光山色 · 文化之旅',
-    color: '#2563eb',
-    spots: [
-      { id: 'd1-1', name: '断桥残雪', lng: 120.155, lat: 30.261, icon: 'landscape', duration: '40min', tips: '清晨人少，推荐日出前到达', image: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png' },
-      { id: 'd1-2', name: '白堤', lng: 120.152, lat: 30.257, icon: 'directions_walk', duration: '30min', tips: '沿白堤漫步至孤山，两侧桃柳交替', image: 'https://gw.alipayobjects.com/zos/rmsportal/cjHbStmRxBSLsOiZWJql.png' },
-      { id: 'd1-3', name: '苏堤春晓', lng: 120.14, lat: 30.245, icon: 'nature', duration: '1h', tips: '骑行通过六桥，感受西湖全景', image: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png' },
-      { id: 'd1-4', name: '雷峰塔', lng: 120.149, lat: 30.232, icon: 'temple_buddhist', duration: '1.5h', tips: '登塔俯瞰西湖，黄昏时分最佳', image: 'https://gw.alipayobjects.com/zos/rmsportal/IhosLpSUSQEHbuMxCbvr.png' },
-      { id: 'd1-5', name: '河坊街', lng: 120.17, lat: 30.245, icon: 'restaurant', duration: '2h', tips: '晚餐推荐知味观，叫化鸡必点', image: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQJPlMSJALyixnfogy.png' },
-    ],
-  },
-  {
-    day: 2,
-    title: '灵隐禅意之旅',
-    theme: '山林古刹 · 茶韵悠然',
-    color: '#10b981',
-    spots: [
-      { id: 'd2-1', name: '灵隐寺', lng: 120.1, lat: 30.24, icon: 'temple_buddhist', duration: '2h', tips: '上午去人少，飞来峰石窟值得细看', image: 'https://gw.alipayobjects.com/zos/rmsportal/psUFoAMjkCcjqtUCNPSB.png' },
-      { id: 'd2-2', name: '北高峰', lng: 120.095, lat: 30.248, icon: 'hiking', duration: '1.5h', tips: '灵隐后山登顶，可选缆车', image: 'https://gw.alipayobjects.com/zos/rmsportal/RmczdrAcbEOqLmHinhKB.png' },
-      { id: 'd2-3', name: '龙井村', lng: 120.115, lat: 30.225, icon: 'local_cafe', duration: '2h', tips: '品正宗西湖龙井，春季可体验采茶', image: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.png' },
-      { id: 'd2-4', name: '九溪烟树', lng: 120.115, lat: 30.205, icon: 'forest', duration: '1.5h', tips: '溪水潺潺，适合徒步纳凉', image: 'https://gw.alipayobjects.com/zos/rmsportal/ZBfODzMWLaEHkFEfJQmp.png' },
-      { id: 'd2-5', name: '宋城', lng: 120.115, lat: 30.18, icon: 'theater_comedy', duration: '3h', tips: '《宋城千古情》演出 17:30 场最佳', image: 'https://gw.alipayobjects.com/zos/rmsportal/bFJWCjZnNxMdcDCvAtmC.png' },
-    ],
-  },
-  {
-    day: 3,
-    title: '运河与现代杭州',
-    theme: '古运河 · 科技城 · 美食',
-    color: '#f59e0b',
-    spots: [
-      { id: 'd3-1', name: '京杭大运河', lng: 120.13, lat: 30.32, icon: 'directions_boat', duration: '1.5h', tips: '水上巴士体验运河风光，从武林门出发', image: 'https://gw.alipayobjects.com/zos/rmsportal/komGVRUxIAMorSZflTvl.png' },
-      { id: 'd3-2', name: '拱宸桥', lng: 120.12, lat: 30.325, icon: 'museum', duration: '1h', tips: '参观运河博物馆，了解漕运历史', image: 'https://gw.alipayobjects.com/zos/rmsportal/zlYzVCeQrTXRqpHXSfUr.png' },
-      { id: 'd3-3', name: '西溪湿地', lng: 120.06, lat: 30.27, icon: 'park', duration: '3h', tips: '电瓶船深入湿地，看白鹭翩飞', image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png' },
-      { id: 'd3-4', name: '天目里', lng: 120.08, lat: 30.285, icon: 'shopping_bag', duration: '2h', tips: '隈研吾设计的文艺综合体，茑屋书店打卡', image: 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlhEQIn.png' },
-      { id: 'd3-5', name: '武林夜市', lng: 120.165, lat: 30.275, icon: 'nightlife', duration: '2h', tips: '杭帮菜小吃一条街，片儿川必吃', image: 'https://gw.alipayobjects.com/zos/rmsportal/PvjLTFaqIVHCOacTfknB.png' },
-    ],
-  },
+  { day: 1, title: '西湖经典环游', theme: '湖光山色 · 文化之旅', color: '#2563eb', spots: [
+    { id: 'd1-1', name: '断桥残雪', lng: 120.155, lat: 30.261, icon: 'landscape', duration: '40min', tips: '清晨人少，推荐日出前到达', image: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png' },
+    { id: 'd1-2', name: '白堤', lng: 120.152, lat: 30.257, icon: 'directions_walk', duration: '30min', tips: '沿白堤漫步至孤山，两侧桃柳交替', image: 'https://gw.alipayobjects.com/zos/rmsportal/cjHbStmRxBSLsOiZWJql.png' },
+    { id: 'd1-3', name: '苏堤春晓', lng: 120.14, lat: 30.245, icon: 'nature', duration: '1h', tips: '骑行通过六桥，感受西湖全景', image: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png' },
+    { id: 'd1-4', name: '雷峰塔', lng: 120.149, lat: 30.232, icon: 'temple_buddhist', duration: '1.5h', tips: '登塔俯瞰西湖，黄昏时分最佳', image: 'https://gw.alipayobjects.com/zos/rmsportal/IhosLpSUSQEHbuMxCbvr.png' },
+    { id: 'd1-5', name: '河坊街', lng: 120.17, lat: 30.245, icon: 'restaurant', duration: '2h', tips: '晚餐推荐知味观，叫化鸡必点', image: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQJPlMSJALyixnfogy.png' },
+  ]},
+  { day: 2, title: '灵隐禅意之旅', theme: '山林古刹 · 茶韵悠然', color: '#10b981', spots: [
+    { id: 'd2-1', name: '灵隐寺', lng: 120.1, lat: 30.24, icon: 'temple_buddhist', duration: '2h', tips: '上午去人少，飞来峰石窟值得细看', image: 'https://gw.alipayobjects.com/zos/rmsportal/psUFoAMjkCcjqtUCNPSB.png' },
+    { id: 'd2-2', name: '北高峰', lng: 120.095, lat: 30.248, icon: 'hiking', duration: '1.5h', tips: '灵隐后山登顶，可选缆车', image: 'https://gw.alipayobjects.com/zos/rmsportal/RmczdrAcbEOqLmHinhKB.png' },
+    { id: 'd2-3', name: '龙井村', lng: 120.115, lat: 30.225, icon: 'local_cafe', duration: '2h', tips: '品正宗西湖龙井，春季可体验采茶', image: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.png' },
+    { id: 'd2-4', name: '九溪烟树', lng: 120.115, lat: 30.205, icon: 'forest', duration: '1.5h', tips: '溪水潺潺，适合徒步纳凉', image: 'https://gw.alipayobjects.com/zos/rmsportal/ZBfODzMWLaEHkFEfJQmp.png' },
+    { id: 'd2-5', name: '宋城', lng: 120.115, lat: 30.18, icon: 'theater_comedy', duration: '3h', tips: '《宋城千古情》演出 17:30 场最佳', image: 'https://gw.alipayobjects.com/zos/rmsportal/bFJWCjZnNxMdcDCvAtmC.png' },
+  ]},
+  { day: 3, title: '运河与现代杭州', theme: '古运河 · 科技城 · 美食', color: '#f59e0b', spots: [
+    { id: 'd3-1', name: '京杭大运河', lng: 120.13, lat: 30.32, icon: 'directions_boat', duration: '1.5h', tips: '水上巴士体验运河风光，从武林门出发', image: 'https://gw.alipayobjects.com/zos/rmsportal/komGVRUxIAMorSZflTvl.png' },
+    { id: 'd3-2', name: '拱宸桥', lng: 120.12, lat: 30.325, icon: 'museum', duration: '1h', tips: '参观运河博物馆，了解漕运历史', image: 'https://gw.alipayobjects.com/zos/rmsportal/zlYzVCeQrTXRqpHXSfUr.png' },
+    { id: 'd3-3', name: '西溪湿地', lng: 120.06, lat: 30.27, icon: 'park', duration: '3h', tips: '电瓶船深入湿地，看白鹭翩飞', image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png' },
+    { id: 'd3-4', name: '天目里', lng: 120.08, lat: 30.285, icon: 'shopping_bag', duration: '2h', tips: '隈研吾设计的文艺综合体，茑屋书店打卡', image: 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlhEQIn.png' },
+    { id: 'd3-5', name: '武林夜市', lng: 120.165, lat: 30.275, icon: 'nightlife', duration: '2h', tips: '杭帮菜小吃一条街，片儿川必吃', image: 'https://gw.alipayobjects.com/zos/rmsportal/PvjLTFaqIVHCOacTfknB.png' },
+  ]},
 ];
 
-/** 将景点数组转换为 RouteLayer 的 path 坐标数组 */
 function spotsToPath(spots: Spot[]): [number, number][] {
-  return spots.map((spot) => [spot.lng, spot.lat]);
+  return spots.map(s => [s.lng, s.lat]);
 }
-
-/** 将景点数组转换为 RouteLayer 的 stops 途经点数组 */
 function spotsToStops(spots: Spot[]) {
-  return spots.map((spot) => ({
-    id: spot.id,
-    lng: spot.lng,
-    lat: spot.lat,
-    name: spot.name,
-    icon: spot.icon,
-  }));
+  return spots.map(s => ({ id: s.id, lng: s.lng, lat: s.lat, name: s.name, icon: s.icon }));
 }
 
-/**
- * 旅游攻略地图 Demo（移动端）
- *
- * - 顶部：行程标题 + 多日标签切换
- * - 地图：展示当日路线（LineLayer）+ 景点标注（Marker）
- * - 底部：BottomSheet 抽屉展示景点卡片列表
- */
-export default function MobileApp() {
-  const [activeDay, setActiveDay] = useState(0);
-  const [selectedSpot, setSelectedSpot] = useState<Spot | null>(null);
-  const [bottomSheetSnap, setBottomSheetSnap] = useState<BottomSheetSnap>('collapsed');
-  const sceneRef = useRef<Scene | null>(null);
+const CARD_COLLAPSED_H = 104;
+const CARD_EXPANDED_H = 458;
 
-  const currentRoute = TRAVEL_ROUTES[activeDay];
+// ── Custom Zoom Buttons (Google Maps style) ─────────────────────
+function ZoomButtons({ scene }: { scene: Scene | null }) {
+  const [zoom, setZoom] = useState(12);
+  useEffect(() => {
+    if (!scene) return;
+    const onZoom = () => setZoom(scene.getZoom());
+    scene.on('zoomend', onZoom);
+    return () => { scene.off('zoomend', onZoom); };
+  }, [scene]);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', borderRadius: 12, overflow: 'hidden', background: T.surface, boxShadow: T.shadowLight }}>
+      <button onClick={() => { scene?.setZoom(Math.min(18, scene.getZoom() + 1)); }}
+        style={{ width: 40, height: 40, border: 'none', cursor: 'pointer', background: T.surface, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span className="material-symbols-outlined" style={{ fontSize: 20, color: T.textSecondary }}>add</span>
+      </button>
+      <div style={{ height: 1, background: T.borderLight }} />
+      <button onClick={() => { scene?.setZoom(Math.max(3, scene.getZoom() - 1)); }}
+        style={{ width: 40, height: 40, border: 'none', cursor: 'pointer', background: T.surface, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span className="material-symbols-outlined" style={{ fontSize: 20, color: T.textSecondary }}>remove</span>
+      </button>
+    </div>
+  );
+}
 
-  /** 根据景点坐标计算包围盒并缩放到合适视图 */
-  const fitRouteBounds = useCallback((spots: Spot[], animate = true) => {
-    const scene = sceneRef.current;
-    if (!scene || spots.length === 0) return;
+// ── Bottom Card per Google Maps spec ────────────────────────────
+function BottomCard({
+  routes, activeDay, selectedSpot, onDayChange, onSpotSelect,
+}: {
+  routes: DayRoute[]; activeDay: number; selectedSpot: Spot | null;
+  onDayChange: (d: number) => void; onSpotSelect: (s: Spot) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const route = routes[activeDay];
 
-    const lngs = spots.map((s) => s.lng);
-    const lats = spots.map((s) => s.lat);
-    const minLng = Math.min(...lngs);
-    const maxLng = Math.max(...lngs);
-    const minLat = Math.min(...lats);
-    const maxLat = Math.max(...lats);
+  return (
+    <div style={{
+      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 2501,
+      height: expanded ? CARD_EXPANDED_H : CARD_COLLAPSED_H,
+      background: T.surface, boxShadow: '-2px 0px 11px rgba(0,0,0,0.25)',
+      display: 'flex', flexDirection: 'column', padding: 12, gap: 12,
+      transition: 'height 0.3s cubic-bezier(0.4,0,0.2,1)', overflow: 'hidden',
+    }}>
+      {/* Handle */}
+      <div onMouseDown={() => setExpanded(!expanded)} style={{ display: 'flex', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
+        <div style={{ width: 73, height: 4, borderRadius: 12, background: '#C5C6CD' }} />
+      </div>
 
-    // 中心点（含 UI 偏移：为底部 BottomSheet 向上偏移）
-    const avgLng = (minLng + maxLng) / 2;
-    const avgLat = (minLat + maxLat) / 2;
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
+        <div style={{
+          width: 36, height: 36, borderRadius: 12, background: T.highlightBgAlt,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 20, color: T.primary }}>route</span>
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 15, fontWeight: 500, color: T.textPrimary }}>Day{route.day} · {route.title}</div>
+          <div style={{ fontSize: 12, color: T.textTertiary }}>{route.theme} · {route.spots.length} 个景点</div>
+        </div>
+      </div>
 
-    // 根据 Web Mercator 投影计算合适的 zoom 级别
-    // zoom z 时视口显示 H * 360 * cos(φ) / (256 * 2^z) 纬度度数
-    // 要求点位跨度占据视口的一定比例（留出 UI 空间）
-    const lngSpan = maxLng - minLng || 0.001;
-    const latSpan = maxLat - minLat || 0.001;
-    const mapHeight = window.innerHeight || 667;
-    const mapWidth = window.innerWidth || 375;
-    const fractionH = 0.4;  // 点位占视口高度 40%（留出 BottomSheet 和顶部 UI 空间）
-    const fractionW = 0.7;  // 点位占视口宽度 70%
-    const latAtCenter = avgLat * Math.PI / 180;
-    const zLat = Math.log2(fractionH * mapHeight * 360 * Math.cos(latAtCenter) / (256 * latSpan));
-    const zLng = Math.log2(fractionW * mapWidth * 360 / (256 * lngSpan));
-    const zoom = Math.max(3, Math.min(18, Math.floor(Math.min(zLat, zLng))));
+      {/* Day tabs — Google Maps pill style */}
+      <div style={{ display: 'flex', gap: 6, overflowX: 'auto', flexShrink: 0, scrollbarWidth: 'none' }}>
+        {routes.map((r, i) => {
+          const isActive = i === activeDay;
+          return (
+            <button key={r.day} onClick={() => onDayChange(i)}
+              style={{
+                flexShrink: 0, height: 30, borderRadius: 24, border: 'none',
+                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4,
+                padding: '5px 11px 5px 7px', fontSize: 11, fontWeight: 500,
+                fontFamily: 'Roboto, system-ui, sans-serif',
+                background: isActive ? T.textPrimary : T.surface,
+                color: isActive ? T.surface : T.textSecondary,
+                boxShadow: isActive ? undefined : T.shadowLight,
+                transition: 'all 0.15s',
+              }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 15 }}>looks_one</span>
+              Day{r.day}
+            </button>
+          );
+        })}
+      </div>
 
-    // 向上偏移中心点（为底部 BottomSheet 留空间，约偏移可视高度的 20%）
-    const metersPerPixel = 156543.03392 * Math.cos(latAtCenter) / Math.pow(2, zoom);
-    const pixelOffsetY = -80; // 向上 80px
-    const latOffset = pixelOffsetY * metersPerPixel / 110540;
+      {/* Spot timeline list */}
+      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+        {route.spots.map((spot, i) => {
+          const isSel = selectedSpot?.id === spot.id;
+          const isLast = i === route.spots.length - 1;
+          return (
+            <div key={spot.id} style={{ display: 'flex', gap: 12 }}>
+              {/* Timeline: number + line */}
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 28, flexShrink: 0 }}>
+                <div style={{
+                  width: 28, height: 28, borderRadius: '50%',
+                  background: isSel ? route.color : T.highlightBgAlt,
+                  color: isSel ? '#fff' : route.color,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 12, fontWeight: 700, flexShrink: 0, transition: 'all 0.2s',
+                }}>{i + 1}</div>
+                {!isLast && <div style={{ width: 2, flex: 1, minHeight: 12, background: T.borderLight, borderRadius: 1 }} />}
+              </div>
+              {/* Card */}
+              <div onClick={() => onSpotSelect(spot)}
+                style={{
+                  flex: 1, display: 'flex', gap: 10, padding: 12,
+                  borderRadius: 12, cursor: 'pointer', marginBottom: 8,
+                  background: isSel ? T.highlightBgAlt : T.surface,
+                  border: isSel ? `1.5px solid ${route.color}` : `1px solid ${T.borderLight}`,
+                  transition: 'all 0.15s',
+                }}>
+                <div style={{
+                  width: 40, height: 40, borderRadius: 12, overflow: 'hidden', flexShrink: 0,
+                  border: `1px solid ${T.borderLight}`,
+                }}>
+                  <img src={spot.image} alt={spot.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <span style={{ fontSize: 14, fontWeight: 500, color: T.textPrimary }}>{spot.name}</span>
+                    <span style={{ fontSize: 11, color: route.color, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 2 }}>
+                      <span className="material-symbols-outlined" style={{ fontSize: 12 }}>schedule</span>
+                      {spot.duration}
+                    </span>
+                  </div>
+                  <div style={{ fontSize: 12, color: T.textTertiary, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {spot.tips}
+                  </div>
+                </div>
+                <span className="material-symbols-outlined" style={{ fontSize: 16, color: T.borderMedium, flexShrink: 0 }}>chevron_right</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
 
-    try {
-      scene.setZoomAndCenter(zoom, [avgLng, avgLat + latOffset]);
-    } catch {
-      try { scene.setCenter([avgLng, avgLat + latOffset]); scene.setZoom(zoom); } catch { /* ignore */ }
-    }
-  }, []);
+// ── Main ────────────────────────────────────────────────────────
+export default function MobileApp() {
+  const [activeDay, setActiveDay] = useState(0);
+  const [selectedSpot, setSelectedSpot] = useState<Spot | null>(null);
+  const sceneRef = useRef<Scene | null>(null);
+  const route = TRAVEL_ROUTES[activeDay];
 
-  /** 场景就绪回调 */
   const handleSceneReady = useCallback((scene: Scene) => {
     sceneRef.current = scene;
-    // 初始加载时适配第一天路线
-    setTimeout(() => fitRouteBounds(TRAVEL_ROUTES[0].spots, false), 300);
-  }, [fitRouteBounds]);
-
-  const handleSpotClick = useCallback((spot: Spot) => {
-    setSelectedSpot(spot);
+    const spots = TRAVEL_ROUTES[0].spots;
+    setTimeout(() => {
+      const lngs = spots.map(s => s.lng), lats = spots.map(s => s.lat);
+      const pad = 0.05;
+      scene.fitBounds(
+        [[Math.min(...lngs) - pad, Math.min(...lats) - pad], [Math.max(...lngs) + pad, Math.max(...lats) + pad]],
+        { padding: [80, 40, CARD_COLLAPSED_H + 20, 40] },
+      );
+    }, 400);
   }, []);
 
-  const handleStopClick = useCallback((payload: LayerEventPayload) => {
-    const stopId = typeof payload.feature?.id === 'string' ? payload.feature.id : undefined;
-    const stopName = typeof payload.feature?.name === 'string' ? payload.feature.name : undefined;
-    const spot = currentRoute.spots.find((item) => item.id === stopId)
-      ?? currentRoute.spots.find((item) => item.name === stopName);
-
-    if (spot) {
-      handleSpotClick(spot);
-    }
-  }, [currentRoute.spots, handleSpotClick]);
-
   const handleDayChange = useCallback((dayIndex: number) => {
     setActiveDay(dayIndex);
     setSelectedSpot(null);
-    // 切换路线时，fitBounds 到新路线的景点范围
-    fitRouteBounds(TRAVEL_ROUTES[dayIndex].spots, true);
-  }, [fitRouteBounds]);
+    const spots = TRAVEL_ROUTES[dayIndex].spots;
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const lngs = spots.map(s => s.lng), lats = spots.map(s => s.lat);
+    const pad = 0.05;
+    scene.fitBounds(
+      [[Math.min(...lngs) - pad, Math.min(...lats) - pad], [Math.max(...lngs) + pad, Math.max(...lats) + pad]],
+      { padding: [80, 40, CARD_COLLAPSED_H + 20, 40], animate: true },
+    );
+  }, []);
+
+  const handleSpotClick = useCallback((spot: Spot) => {
+    setSelectedSpot(prev => prev?.id === spot.id ? null : spot);
+    const scene = sceneRef.current;
+    if (!scene) return;
+    scene.setZoomAndCenter(14, [spot.lng, spot.lat]);
+  }, []);
 
   return (
-    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
-      {/* 全屏地图 */}
+    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', fontFamily: 'Roboto, system-ui, sans-serif', background: '#E8EAED' }}>
+      {/* Map */}
       <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
-        <AiMap
-          autoFit
-          map={{
-            basemap: 'gaode',
-            center: [120.13, 30.25],
-            zoom: 12,
-            style: 'light',
-          }}
-          onSceneReady={handleSceneReady}
-        >
-          <ZoomControl position="rightcenter" />
-          <GeoLocateControl position="rightcenter" />
-
-          {/* 当日路线（路径图层） */}
+        <AiMap autoFit={false} map={{ basemap: 'gaode', center: [120.13, 30.25], zoom: 12, style: 'light' }} onSceneReady={handleSceneReady}>
           <RouteLayer
-            key={currentRoute.day}
-            path={spotsToPath(currentRoute.spots)}
-            stops={spotsToStops(currentRoute.spots)}
-            onStopClick={handleStopClick}
-            color={currentRoute.color}
+            key={route.day}
+            path={spotsToPath(route.spots)}
+            stops={spotsToStops(route.spots)}
+            onStopClick={(p) => {
+    const stopId = typeof p.feature?.id === 'string' ? p.feature.id : undefined;
+    const spot = route.spots.find(s => s.id === stopId);
+    if (spot) handleSpotClick(spot);
+  }}
+            color={route.color}
             lineWidth={3}
-            glow
             stopSize={10}
             stopRenderer="icon"
             stopIconSize={24}
-            stopIconColor={currentRoute.color}
+            stopColor={route.color}
             showStopIndex={false}
           />
         </AiMap>
       </div>
 
-      {/* UI 覆盖层 */}
-      <div style={{ position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none' }}>
-        {/* 顶部：行程标题 + 日期切换 */}
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            zIndex: 10,
-            padding: '12px 16px',
-            pointerEvents: 'none',
-            boxSizing: 'border-box',
-          }}
-        >
-          {/* 标题栏 */}
-          <div
-            className="glass-panel"
-            style={{
-              padding: '12px 16px',
-              borderRadius: 16,
-              boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
-              pointerEvents: 'auto',
-              marginBottom: 8,
-            }}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span className="material-symbols-outlined" style={{ color: 'var(--color-primary)', fontSize: 22 }}>
-                travel_explore
-              </span>
-              <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--color-on-surface)' }}>
-                杭州 3 日游攻略
-              </span>
-              <span style={{ fontSize: 12, color: 'var(--color-on-surface-variant)', marginLeft: 'auto' }}>
-                {TRAVEL_ROUTES.reduce((sum, route) => sum + route.spots.length, 0)} 个景点
-              </span>
-            </div>
-          </div>
-
-          {/* 日期切换标签 */}
-          <div
-            style={{
-              display: 'flex',
-              gap: 8,
-              pointerEvents: 'auto',
-              overflowX: 'auto',
-              scrollbarWidth: 'none',
-              msOverflowStyle: 'none',
-            }}
-          >
-            {TRAVEL_ROUTES.map((route, index) => {
-              const isActive = index === activeDay;
-              return (
-                <button
-                  key={route.day}
-                  onClick={() => handleDayChange(index)}
-                  style={{
-                    padding: '8px 16px',
-                    borderRadius: 12,
-                    border: isActive ? `2px solid ${route.color}` : '1px solid rgba(195, 198, 215, 0.4)',
-                    background: isActive ? route.color : 'rgba(248, 249, 255, 0.85)',
-                    backdropFilter: 'blur(8px)',
-                    color: isActive ? '#fff' : 'var(--color-on-surface)',
-                    fontSize: 13,
-                    fontWeight: 600,
-                    cursor: 'pointer',
-                    whiteSpace: 'nowrap',
-                    transition: 'all 0.2s ease',
-                    boxShadow: isActive ? `0 2px 12px ${route.color}40` : '0 1px 4px rgba(0,0,0,0.06)',
-                    flexShrink: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 6,
-                  }}
-                >
-                  <span style={{ fontSize: 11, opacity: 0.9 }}>Day{route.day}</span>
-                  {route.title}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* 选中景点的浮动卡片 */}
-        {selectedSpot && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 100,
-              left: 16,
-              right: 16,
-              zIndex: 20,
-              pointerEvents: 'auto',
-            }}
-          >
-            <div
-              className="glass-panel"
-              style={{
-                padding: 16,
-                borderRadius: 20,
-                boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
-                border: `1px solid ${currentRoute.color}30`,
-              }}
-            >
-              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
-                {/* 景点图片 */}
-                <div
-                  style={{
-                    width: 64,
-                    height: 64,
-                    borderRadius: 16,
-                    overflow: 'hidden',
-                    flexShrink: 0,
-                    border: `2px solid ${currentRoute.color}30`,
-                  }}
-                >
-                  <img
-                    src={selectedSpot.image}
-                    alt={selectedSpot.name}
-                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                  />
-                </div>
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-                    <h3 style={{ fontSize: 17, fontWeight: 700, color: 'var(--color-on-surface)', margin: 0 }}>
-                      {selectedSpot.name}
-                    </h3>
-                    <span
-                      style={{
-                        fontSize: 11,
-                        padding: '2px 8px',
-                        borderRadius: 6,
-                        background: `${currentRoute.color}20`,
-                        color: currentRoute.color,
-                        fontWeight: 600,
-                      }}
-                    >
-                      {selectedSpot.duration}
-                    </span>
-                  </div>
-                  <p style={{ fontSize: 13, color: 'var(--color-on-surface-variant)', margin: '4px 0 0', lineHeight: 1.5 }}>
-                    💡 {selectedSpot.tips}
-                  </p>
-                </div>
-                <button
-                  onClick={() => setSelectedSpot(null)}
-                  style={{
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    padding: 4,
-                    borderRadius: 999,
-                    color: 'var(--color-on-surface-variant)',
-                    flexShrink: 0,
-                  }}
-                >
-                  <span className="material-symbols-outlined" style={{ fontSize: 20 }}>close</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* 底部抽屉：路线详情 */}
-        <BottomSheet
-          defaultSnap="collapsed"
-          collapsedHeight={96}
-          halfRatio={0.5}
-          expandedRatio={0.85}
-          onSnapChange={setBottomSheetSnap}
-        >
-          {/* 抽屉标题 */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-            <div>
-              <h3 style={{ fontSize: 18, fontWeight: 700, color: 'var(--color-on-surface)', margin: 0 }}>
-                Day{currentRoute.day} · {currentRoute.title}
-              </h3>
-              <p style={{ fontSize: 13, color: 'var(--color-on-surface-variant)', margin: '4px 0 0' }}>
-                {currentRoute.theme} · {currentRoute.spots.length} 个景点
-              </p>
-            </div>
-            <div
-              style={{
-                width: 36,
-                height: 36,
-                borderRadius: 12,
-                background: `${currentRoute.color}15`,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <span className="material-symbols-outlined" style={{ color: currentRoute.color, fontSize: 20 }}>
-                route
-              </span>
-            </div>
-          </div>
-
-          {/* 景点时间轴列表 */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, paddingBottom: 32, marginTop: 12 }}>
-            {currentRoute.spots.map((spot, index) => {
-              const isSelected = selectedSpot?.id === spot.id;
-              const isLast = index === currentRoute.spots.length - 1;
+      {/* Right FAB column */}
+      <div style={{ position: 'absolute', right: 10, bottom: CARD_COLLAPSED_H + 12, zIndex: 2000, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+        <ZoomButtons scene={sceneRef.current} />
+        <button onClick={() => { if (!selectedSpot) return; sceneRef.current?.setZoomAndCenter(14, [selectedSpot.lng, selectedSpot.lat]); }}
+          style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', cursor: 'pointer', background: T.surface, boxShadow: T.shadowLight, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 20, color: T.textSecondary }}>my_location</span>
+        </button>
+      </div>
 
-              return (
-                <div key={spot.id} style={{ display: 'flex', gap: 12, position: 'relative' }}>
-                  {/* 时间轴线 */}
-                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 28, flexShrink: 0 }}>
-                    {/* 序号圆点 */}
-                    <div
-                      style={{
-                        width: 28,
-                        height: 28,
-                        borderRadius: '50%',
-                        background: isSelected ? currentRoute.color : `${currentRoute.color}20`,
-                        color: isSelected ? '#fff' : currentRoute.color,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontSize: 13,
-                        fontWeight: 700,
-                        flexShrink: 0,
-                        transition: 'all 0.2s',
-                      }}
-                    >
-                      {index + 1}
-                    </div>
-                    {/* 连接线 */}
-                    {!isLast && (
-                      <div
-                        style={{
-                          width: 2,
-                          flex: 1,
-                          minHeight: 16,
-                          background: `${currentRoute.color}30`,
-                          borderRadius: 1,
-                        }}
-                      />
-                    )}
-                  </div>
+      {/* Bottom Card */}
+      <BottomCard routes={TRAVEL_ROUTES} activeDay={activeDay} selectedSpot={selectedSpot} onDayChange={handleDayChange} onSpotSelect={handleSpotClick} />
 
-                  {/* 景点卡片 */}
-                  <div
-                    onClick={() => handleSpotClick(spot)}
-                    style={{
-                      flex: 1,
-                      padding: 14,
-                      borderRadius: 16,
-                      border: isSelected ? `2px solid ${currentRoute.color}` : '1px solid rgba(195, 198, 215, 0.25)',
-                      background: isSelected ? `${currentRoute.color}08` : 'rgba(248, 249, 255, 0.6)',
-                      cursor: 'pointer',
-                      transition: 'all 0.2s ease',
-                      marginBottom: 10,
-                    }}
-                  >
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                      <div
-                        style={{
-                          width: 44,
-                          height: 44,
-                          borderRadius: 12,
-                          overflow: 'hidden',
-                          flexShrink: 0,
-                          border: `2px solid ${isSelected ? currentRoute.color : 'rgba(195, 198, 215, 0.3)'}`,
-                        }}
-                      >
-                        <img
-                          src={spot.image}
-                          alt={spot.name}
-                          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                        />
-                      </div>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                          <h4 style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-on-surface)', margin: 0 }}>
-                            {spot.name}
-                          </h4>
-                          <span
-                            style={{
-                              fontSize: 11,
-                              color: currentRoute.color,
-                              fontWeight: 500,
-                              display: 'flex',
-                              alignItems: 'center',
-                              gap: 2,
-                            }}
-                          >
-                            <span className="material-symbols-outlined" style={{ fontSize: 14 }}>schedule</span>
-                            {spot.duration}
-                          </span>
-                        </div>
-                        <p
-                          style={{
-                            fontSize: 12,
-                            color: 'var(--color-on-surface-variant)',
-                            margin: '4px 0 0',
-                            lineHeight: 1.4,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                          }}
-                        >
-                          {spot.tips}
-                        </p>
-                      </div>
-                      <span
-                        className="material-symbols-outlined"
-                        style={{ color: 'var(--color-on-surface-variant)', fontSize: 18, flexShrink: 0 }}
-                      >
-                        chevron_right
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </BottomSheet>
-      </div>
+      {/* Popup on selected spot */}
+      {selectedSpot && (
+        <Popup
+          longitude={selectedSpot.lng} latitude={selectedSpot.lat}
+          size="standard" singleton closeButton visible
+          onClose={() => setSelectedSpot(null)}
+          header={{ title: selectedSpot.name, statusLabel: selectedSpot.duration, statusColor: route.color }}
+          attributes={[
+            { label: '路线', value: `Day${route.day} · ${route.title}` },
+            { label: '贴士', value: selectedSpot.tips },
+          ]}
+          actions={[
+            { variant: 'primary' as const, label: '导航到这里', onClick: () => {} },
+            { variant: 'secondary' as const, label: '查看详情', onClick: () => {} },
+          ]}
+        />
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/site/src/app/PcApp.tsx b/packages/site/src/app/PcApp.tsx
index 5cb6430..b2afeb5 100644
--- a/packages/site/src/app/PcApp.tsx
+++ b/packages/site/src/app/PcApp.tsx
@@ -508,7 +508,7 @@ export default function PcApp() {
             top: 80,
             left: sidebarWidth,
             right: 0,
-            zIndex: 800,
+            zIndex: 1000,
             display: 'flex',
             justifyContent: 'center',
             pointerEvents: 'none',
diff --git a/packages/site/src/app/SearchBarDemo.tsx b/packages/site/src/app/SearchBarDemo.tsx
index 4740c56..e14092c 100644
--- a/packages/site/src/app/SearchBarDemo.tsx
+++ b/packages/site/src/app/SearchBarDemo.tsx
@@ -26,7 +26,7 @@ export default function SearchBarDemo() {
           top: 16,
           left: 16,
           right: 16,
-          zIndex: 10,
+          zIndex: 1000,
         }}
       >
         <SearchBar
diff --git a/packages/site/src/app/TyphoonMap.tsx b/packages/site/src/app/TyphoonMap.tsx
new file mode 100644
index 0000000..980e6f5
--- /dev/null
+++ b/packages/site/src/app/TyphoonMap.tsx
@@ -0,0 +1,6 @@
+/* ================================================================
+   台风路径地图 — 重定向到 typhoon/ 子目录
+   所有代码已拆分至 packages/site/src/app/typhoon/
+   ================================================================ */
+
+export { default } from './typhoon';
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/Info.tsx b/packages/site/src/app/typhoon/Info.tsx
new file mode 100644
index 0000000..5a1a504
--- /dev/null
+++ b/packages/site/src/app/typhoon/Info.tsx
@@ -0,0 +1,12 @@
+/* ================================================================
+   小信息行列组件
+   ================================================================ */
+
+export default function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div style={{ fontSize: 9, color: 'rgba(148,163,184,0.6)' }}>{label}</div>
+      <div style={{ fontSize: 12, color: '#e2e8f0', fontWeight: 600 }}>{value}</div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/LegendPanel.tsx b/packages/site/src/app/typhoon/LegendPanel.tsx
new file mode 100644
index 0000000..5318879
--- /dev/null
+++ b/packages/site/src/app/typhoon/LegendPanel.tsx
@@ -0,0 +1,129 @@
+/* ================================================================
+   图例面板
+   含风圈开关、登陆点、预报台、台风等级、风圈等级、警戒线、
+   降雨等级、雷达反射率
+   ================================================================ */
+
+import { LegendCategories } from '@antv/aimapui';
+import type { LandPoint } from './types';
+import {
+  C, GRADE_LABELS, GRADE_COLORS, WIND_LEVEL_KEY, WIND_LEVEL_COLOR,
+  AGENCIES, AGENCY_COLOR, WARNING_LINE_COLORS,
+} from './constants';
+
+interface LegendPanelProps {
+  showWindCircles: boolean;
+  legendExpanded: boolean;
+  landMarks: LandPoint[];
+  isMobile: boolean;
+  onToggleLegend: () => void;
+  onToggleWindCircles: () => void;
+}
+
+export default function LegendPanel({
+  showWindCircles, legendExpanded, landMarks, isMobile,
+  onToggleLegend, onToggleWindCircles,
+}: LegendPanelProps) {
+  return (
+    <div style={{
+      padding: isMobile ? '8px 10px' : '10px 12px', background: C.panel, backdropFilter: 'blur(12px)',
+      border: `1px solid ${C.border}`, borderRadius: isMobile ? '10px 0 0 10px' : 10,
+      maxHeight: isMobile ? 'none' : (legendExpanded ? 320 : 40),
+      maxWidth: isMobile ? 220 : 'none',
+      overflowY: 'auto', transition: isMobile ? 'transform 0.3s ease' : 'max-height 0.3s',
+      transform: isMobile ? (legendExpanded ? 'translateX(0)' : 'translateX(calc(100% - 36px))') : 'none',
+    }}>
+      <div onClick={onToggleLegend} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', paddingBottom: legendExpanded ? 8 : 0, minWidth: isMobile ? 36 : 'auto' }}>
+        <span style={{ fontSize: 11, fontWeight: 700, color: '#f1f5f9', whiteSpace: 'nowrap' }}>{isMobile && !legendExpanded ? '' : '图例'}</span>
+        <span className="material-symbols-outlined" style={{ fontSize: 14, color: C.muted, transition: 'transform 0.3s', transform: legendExpanded ? (isMobile ? 'rotate(0deg)' : 'rotate(180deg)') : (isMobile ? 'rotate(180deg)' : 'rotate(0deg)') }}>{isMobile ? 'chevron_left' : 'expand_more'}</span>
+      </div>
+      {legendExpanded && (
+        <>
+          {/* 风圈开关 */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <span style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase' }}>风圈</span>
+            <input type="checkbox" checked={showWindCircles} onChange={onToggleWindCircles} style={{ accentColor: C.accent, cursor: 'pointer' }} />
+          </div>
+          {/* 登陆点 */}
+          {landMarks.length > 0 && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+              <img src="https://mdn.alipayobjects.com/huamei_b5qxsh/afts/img/A*ADaqSZdQm0wAAAAAPSAAAAgAerZ5AQ/original" alt="" style={{ width: 12, height: 15 }} />
+              <span style={{ fontSize: 11, color: '#cbd5e1' }}>登陆点</span>
+            </div>
+          )}
+          {/* 预报台 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4, marginBottom: 8 }}>
+            <div style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>预报台</div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+              {AGENCIES.map(a => (
+                <div key={a} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '2px 6px', borderRadius: 4, background: 'rgba(255,255,255,0.05)' }}>
+                  <div style={{ width: 12, height: 0, borderTop: `2px dashed ${AGENCY_COLOR[a]}`, opacity: 0.8 }} />
+                  <span style={{ fontSize: 10, color: '#94a3b8' }}>{a}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 台风等级 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4, marginBottom: 8 }}>
+            <LegendCategories type="categories" title="台风等级" labels={GRADE_LABELS} colors={GRADE_COLORS} swatchShape="circle" className="[&_span.text-on-surface]:!text-[#e2e8f0]" />
+          </div>
+          {/* 风圈等级 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4, marginBottom: 8 }}>
+            <div style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>风圈等级</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+              {WIND_LEVEL_KEY.map(k => (
+                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <div style={{ width: 12, height: 12, borderRadius: '50%', background: `${WIND_LEVEL_COLOR[k]}33`, border: `1.5px solid ${WIND_LEVEL_COLOR[k]}` }} />
+                  <span style={{ fontSize: 11, color: '#cbd5e1' }}>{k} 级风圈</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 警戒线 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4, marginBottom: 8 }}>
+            <div style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>警戒线</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <div style={{ width: 20, height: 0, borderTop: `2px dashed ${WARNING_LINE_COLORS['24h']}` }} />
+                <span style={{ fontSize: 11, color: '#cbd5e1' }}>24小时警戒线</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <div style={{ width: 20, height: 0, borderTop: `2px dashed ${WARNING_LINE_COLORS['48h']}` }} />
+                <span style={{ fontSize: 11, color: '#cbd5e1' }}>48小时警戒线</span>
+              </div>
+            </div>
+          </div>
+          {/* 降雨等级 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4, marginBottom: 8 }}>
+            <div style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>降雨等级</div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 8px' }}>
+              {[
+                { label: '0-10', color: '#a5d6a7' }, { label: '10-25', color: '#66bb6a' },
+                { label: '25-50', color: '#42a5f5' }, { label: '50-100', color: '#1e88e5' },
+                { label: '100-250', color: '#e040fb' }, { label: '>250', color: '#c62828' },
+              ].map(r => (
+                <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <div style={{ width: 12, height: 12, background: r.color }} />
+                  <span style={{ fontSize: 10, color: '#cbd5e1' }}>{r.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 雷达反射率 */}
+          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 8, marginTop: 4 }}>
+            <div style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>雷达反射率 dBZ</div>
+            <div style={{ display: 'flex', gap: 1 }}>
+              {['#00bcd4', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#f44336', '#e91e63', '#9c27b0', '#673ab7'].map((c, i) => (
+                <div key={i} style={{ flex: 1, height: 8, background: c }} />
+              ))}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 2 }}>
+              <span style={{ fontSize: 9, color: C.muted }}>10</span>
+              <span style={{ fontSize: 9, color: C.muted }}>70</span>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/TECHNICAL_DOC.md b/packages/site/src/app/typhoon/TECHNICAL_DOC.md
new file mode 100644
index 0000000..67ca5cb
--- /dev/null
+++ b/packages/site/src/app/typhoon/TECHNICAL_DOC.md
@@ -0,0 +1,814 @@
+# 台风路径地图（TyphoonMap）— 技术文档
+
+> 本文档供 AI Agent 阅读，目标：根据本文档可完全还原 TyphoonMap 组件的全部功能，无需查看源码。
+
+---
+
+## 一、项目概览
+
+### 1.1 功能列表
+
+| 编号 | 功能 | 描述 |
+|------|------|------|
+| F01 | 台风列表加载 | 拉取当年所有台风列表，标注活跃台风 |
+| F02 | 台风详情加载 | 选中台风后加载其完整路径点数据 |
+| F03 | 历史轨迹 | 按台风等级分段着色显示历史路径（实线） |
+| F04 | 路径节点 | 路径上的每个观测点以小圆点标注，hover 显示 Tooltip，click 弹出 Popup |
+| F05 | 台风眼动画 | 当前台风中心显示旋转 GIF 动画 |
+| F06 | 风圈 | 显示 7/10/12 级四象限风圈（填充 + 描边 + 文字标注）|
+| F07 | 预报路径 | 多家机构（中国/日本/美国/中国台湾/中国香港）预报路径同图显示 |
+| F08 | 机构切换 | 选中某机构高亮其预报路径，其余机构半透明虚线 |
+| F09 | 预报日期标注 | 中国机构预报路径上每天标一个日期（MM/DD）|
+| F10 | 警戒线 | 显示 24/48 小时台风警戒线（固定坐标虚线 + 文字标注）|
+| F11 | 登陆点标注 | 显示台风登陆点图标 |
+| F12 | 气象图层 | 支持云图/雷达/降雨/卫星底图四种叠加层切换 |
+| F13 | 图层透明度 | 气象图层透明度滑块调节 |
+| F14 | 云图时段 | 云图支持 30min/1h/3h/6h 四档切换 |
+| F15 | 降雨时段 | 降雨支持 24h/48h/72h 三档切换 |
+| F16 | 台风信息卡 | PC 端显示当前台风基本信息卡片 |
+| F17 | 台风列表选择器 | 可展开/收起的台风列表，点击切换台风 |
+| F18 | 点位详情表 | 选中台风后可展开所有路径点的时间/强度/风速/气压表格 |
+| F19 | 图例面板 | 可折叠图例：风圈开关、登陆点、预报台、台风等级、风圈等级、警戒线、降雨等级、雷达反射率 |
+| F20 | 历史点选择 | 点击路径节点可选中历史点，风圈会随之变化，底部显示历史点提示条 |
+| F21 | 地图自适应 | 切换台风时自动 fitBounds 到台风路径范围 |
+| F22 | 移动端适配 | 支持 mobilePreview prop + useResponsive() 响应式断点 |
+| F23 | 错误兜底 | API 失败时使用内置样本数据，顶部显示"使用内置样本"标签 |
+
+### 1.2 数据源
+
+- **台风数据**: 浙江水利台风实时发布系统 `https://typhoon.slt.zj.gov.cn/Api/`
+  - `API_ACTIVITY`: 获取活跃台风列表
+  - `API_LIST(year)`: 获取某年全部台风列表
+  - `API_INFO(tfid)`: 获取单个台风详细路径数据（含预报）
+- **气象数据**: 同域 API
+  - `API_LEASTCLOUD(type)`: 云图（0.5h/1h/3h/6h）
+  - `API_LASTRADAR`: 雷达拼图
+  - `API_LEASTRAIN(hours)`: 降雨等值线（24h/48h/72h）
+  - `API_LASTWIND`: GRIB2 风场数据
+
+### 1.3 技术栈
+
+- React 18+ (functional components + hooks)
+- `@antv/aimapui`: AiMap, LineLayer, PointLayer, FillLayer, ImageLayer, Marker, Tooltip, Popup, SatelliteLayer, ZoomControl, MapThemeControl, LegendCategories, useResponsive
+- `@antv/l7`: 底层地图引擎 Scene 类型
+- 高德底图 (basemap: 'gaode')
+
+---
+
+## 二、文件结构
+
+```
+packages/site/src/app/typhoon/
+├── index.ts                  # 统一导出入口
+├── constants.ts              # 所有常量、配色、API URL、兜底数据
+├── types.ts                  # 所有 TS 接口定义
+├── api.ts                    # 气象 API 获取函数
+├── transform.ts              # 数据转换工具函数
+├── TyphoonEye.tsx            # 台风眼动画组件（未使用，保留备用）
+├── Info.tsx                  # 信息行列组件
+├── TyphoonMap.tsx            # 主组件（组装 hooks + 子组件）
+├── TyphoonMapLayers.tsx      # 地图内所有图层的子组件
+├── TyphoonInfoCard.tsx       # 台风信息卡 + 列表选择器
+├── WeatherToolbar.tsx        # 气象图层工具条
+├── LegendPanel.tsx           # 图例面板
+└── hooks/
+    ├── useTyphoonData.ts     # 台风数据获取 + 派生计算
+    ├── useWeatherData.ts     # 气象图层状态管理
+    └── useTyphoonPopup.ts    # Popup/Tooltip 交互处理
+```
+
+---
+
+## 三、常量 (`constants.ts`)
+
+### 3.1 API 端点
+
+```typescript
+const API_BASE = 'https://typhoon.slt.zj.gov.cn/Api'
+function API_LIST(year: number): string       // → /TyphoonList/{year}
+function API_INFO(tfid: string): string       // → /TyphoonInfo/{tfid}
+API_ACTIVITY: string                          // → /TyhoonActivity
+function API_LEASTCLOUD(type: number): string // → /LeastCloud?type={type}
+API_LASTRADAR: string                         // → /LastRadar
+function API_LEASTRAIN(hours: number): string // → /LeastRain/{hours}
+API_LASTWIND: string                          // → /LastWind
+```
+
+### 3.2 台风等级系统
+
+```typescript
+// 等级 Key（由弱到强排序）
+type GradeKey = 'TD' | 'TS' | 'STS' | 'TY' | 'STY' | 'SuperTY'
+
+// 中文名称 → Key 映射
+STRENGTH_TO_KEY = {
+  '热带低压': 'TD',
+  '热带风暴': 'TS',
+  '强热带风暴': 'STS',
+  '台风': 'TY',
+  '强台风': 'STY',
+  '超强台风': 'SuperTY',
+}
+
+// Key → 颜色（渐进：蓝 → 紫 → 橙 → 红）
+GRADE_COLOR = { TD:'#7dd3fc', TS:'#38bdf8', STS:'#3b82f6', TY:'#8b5cf6', STY:'#f59e0b', SuperTY:'#ef4444' }
+
+// 用于 LineLayer/PointLayer 的数组形式
+GRADE_ORDER = ['TD','TS','STS','TY','STY','SuperTY']
+GRADE_LABELS = ['热带低压','热带风暴','强热带风暴','台风','强台风','超强台风']
+GRADE_COLORS = ['#7dd3fc','#38bdf8','#3b82f6','#8b5cf6','#f59e0b','#ef4444']
+```
+
+### 3.3 风圈配色
+
+```typescript
+WIND_LEVEL_KEY = ['7', '10', '12']                        // 3个等级
+WIND_LEVEL_COLOR = { '7':'#3b82f6', '10':'#f59e0b', '12':'#ef4444' }
+```
+
+### 3.4 预报机构配色
+
+```typescript
+AGENCIES = ['中国', '中国台湾', '日本', '中国香港', '美国']
+AGENCY_COLOR = {
+  中国:'#22d3ee', 中国台湾:'#34d399', 日本:'#f472b6', 中国香港:'#fbbf24', 美国:'#a78bfa'
+}
+```
+
+### 3.5 警戒线
+
+```typescript
+// 格式 [lng, lat]，GeoJSON 标准（经度在前）
+WARNING_LINE_24H = [[127,34],[127,22],[119,18],[119,11],[113,4.5],[105,0]]
+WARNING_LINE_48H = [[132,34],[132,15],[120,0],[105,0]]
+WARNING_LINE_COLORS = { '24h':'#f59e0b', '48h':'#ef4444' }
+```
+
+### 3.6 降雨等级
+
+```typescript
+RAIN_LEVEL_LABEL = { '0':'小雨','2.5':'小雨','5':'小雨','10':'中雨','25':'大雨','50':'暴雨','100':'大暴雨','250':'特大暴雨' }
+
+function getRainLevelLabel(symbol: string): string
+// num >= 250 → '特大暴雨', >= 100 → '大暴雨', >= 50 → '暴雨', >= 25 → '大雨', >= 10 → '中雨' else '小雨'
+```
+
+### 3.7 UI 颜色常量
+
+```typescript
+const C = {
+  bg: '#0f172a',                    // 背景色
+  panel: 'rgba(15,23,42,0.82)',     // 面板背景（半透明）
+  border: 'rgba(56,189,248,0.15)',  // 面板边框
+  fg: '#e2e8f0',                    // 前景文字
+  muted: 'rgba(148,163,184,0.7)',   // 次要文字
+  accent: '#22d3ee',                // 强调色（青色）
+}
+```
+
+### 3.8 雷达瓦片常量
+
+```typescript
+// 单张大图模式边界 [westLng, southLat, eastLng, northLat]
+RADAR_FULL_EXTENT = [69.85, 12.17, 140.09, 54.33]
+
+// 四象限 tile→extent 映射 (NW, SW, NE, SE)
+RADAR_TILES = [
+  { key:'radar0_0', extent:[67.5, 36.58, 104.07, 55.77] },
+  { key:'radar0_1', extent:[67.5, 11.17, 104.07, 36.58] },
+  { key:'radar1_0', extent:[104.07, 36.58, 140.62, 55.77] },
+  { key:'radar1_1', extent:[104.07, 11.17, 140.62, 36.58] },
+]
+```
+
+### 3.9 兜底数据
+
+```typescript
+CURRENT_YEAR = new Date().getFullYear()
+FALLBACK_INFO   // TyphoonInfo — 台风"巴威"的完整模拟数据（6个路径点+3家机构预报）
+FALLBACK_LIST   // TyphoonListItem[] — 只含"巴威"一项
+```
+
+---
+
+## 四、类型定义 (`types.ts`)
+
+```typescript
+// ── API 原始数据 ──
+interface TyphoonPoint {
+  time: string          // "2026-07-10 08:00:00"
+  lng: string           // 经度，字符串格式
+  lat: string           // 纬度，字符串格式
+  strong: string        // 强度中文名："台风"/"超强台风"等
+  power: string         // 风力等级："14"
+  speed: string         // 风速 m/s："42"
+  pressure: string      // 中心气压 hPa："955"
+  movespeed?: string    // 移速 km/h
+  movedirection?: string // 移向："西北"
+  radius7?: string      // 7级风圈四象限半径："500|500|450|480"
+  radius10?: string     // 10级风圈
+  radius12?: string     // 12级风圈
+  forecast?: ForecastAgency[]  // 内嵌预报（仅在最新点存在）
+}
+
+interface ForecastAgency {
+  tm: string            // 机构名："中国"/"日本"/"美国"等
+  forecastpoints: TyphoonPoint[]  // 预报路径点
+}
+
+interface LandPoint {
+  landaddress: string
+  landtime: string
+  lng: string; lat: string
+  info: string
+  strong: string | null
+}
+
+interface TyphoonInfo {
+  tfid: string          // 台风编号 "202609"
+  name: string          // 中文名 "巴威"
+  enname: string        // 英文名 "BAVI"
+  isactive?: string     // "1"=活跃
+  starttime?: string
+  endtime?: string
+  warnlevel?: string
+  centerlng?: string
+  centerlat?: string
+  points: TyphoonPoint[] // 完整路径点数组
+  land?: LandPoint[]
+}
+
+interface TyphoonListItem {
+  tfid: string
+  name: string; enname: string
+  starttime: string; endtime: string
+  isactive: string      // "1"=活跃
+  warnlevel?: string
+}
+
+// ── 派生数据形状 ──
+interface TrackSegment {
+  path: [number, number][]  // 单个线段（通常只有2点）
+  grade: GradeKey           // 用于 LineLayer colorField 映射
+}
+// 注意：LineLayer 使用 sourceConfig.coordinates='path'，故字段名必须为 path
+
+interface TrackNode {
+  lng: number; lat: number; grade: GradeKey
+  time: string; strong: string; power: string; speed: string; pressure: string
+  index: number  // 在原始 points 数组中的索引
+}
+
+interface WindPolygon {
+  coordinates: [number, number][][]  // GeoJSON Polygon 坐标（单环）
+  level: string                      // '7'/'10'/'12'
+}
+
+// ── 气象数据 ──
+interface CloudData {
+  img: string        // data:image/png;base64,...
+  time: string       // "2026-07-11 08:00:00"
+  extent: [number, number, number, number]  // [minLng, minLat, maxLng, maxLat]
+}
+
+interface RadarTileData {
+  img: string
+  extent: [number, number, number, number]
+}
+
+interface RadarData {
+  tiles: RadarTileData[]
+  time: string
+}
+
+interface RainFeature {
+  type: 'Feature'
+  properties: { color: string; symbol: string }  // color=hex色值, symbol=降水量阈值
+  geometry: { type: 'Polygon'; coordinates: [number, number][][] }
+}
+
+interface RainData {
+  features: RainFeature[]
+  colors: string[]    // 去重后的色值列表（用于 FillLayer colorValues）
+  time: string
+  colorToSymbol: Record<string, string>
+}
+
+interface WindData {
+  imageUrl: string    // RGBA PNG，R=U分量, G=V分量
+  time: string
+  extent: [number, number, number, number]
+  uMin: number; uMax: number
+  vMin: number; vMax: number
+}
+
+// ── UI 状态 ──
+interface PopupData {
+  lng: number; lat: number
+  title: string; statusLabel: string; statusColor: string
+  attrs: PopupAttribute[]  // 来自 @antv/aimapui
+}
+
+interface TooltipState {
+  visible: boolean
+  lng: number; lat: number
+  time: string; strong: string; power: string; speed: string; pressure: string
+}
+
+interface RainTooltipState {
+  visible: boolean
+  lng: number; lat: number
+  symbol: string  // 降水量阈值
+  color: string   // hex色值
+}
+```
+
+---
+
+## 五、数据转换 (`transform.ts`)
+
+### 5.1 `parseRadii(s: string | undefined | null): [number, number, number, number]`
+
+解析四象限半径字符串 `"NE|SE|SW|NW"` → `[ne, se, sw, nw]`（单位 km）。
+空串或无效值 → 0。
+
+### 5.2 `pointGrade(p: TyphoonPoint): GradeKey`
+
+`STRENGTH_TO_KEY[p.strong] ?? 'TS'` — 将台风强度映射到等级 Key。
+
+### 5.3 `toTrackSegments(points: TyphoonPoint[]): TrackSegment[]`
+
+遍历 points 相邻两点，生成 TrackSegment 数组。跳过 NaN 坐标。
+每个 segment 的 grade 取终点（b）的等级。
+
+### 5.4 `toNodes(points: TyphoonPoint[]): TrackNode[]`
+
+将每个 TyphoonPoint 转为 TrackNode，保留原始索引。跳过 NaN 坐标。
+
+### 5.5 `destinationPoint(lng, lat, distanceKm, bearingDeg): [lng, lat]`
+
+球面几何计算：从起点沿指定方位角走 distanceKm 到达目标点。
+使用地球半径 6371km，Haversine 公式的逆运算。
+
+### 5.6 `toWindPolygons(p: TyphoonPoint | undefined): WindPolygon[]`
+
+为指定点生成 3 个风圈多边形（7/10/12 级）。
+每个风圈：分别取对应 level 的四个象限半径，用 `destinationPoint` 生成弧线段（12 步/象限），拼接成完整外环并闭合。
+
+### 5.7 `toForecastSegments(agency: ForecastAgency | undefined): TrackSegment[]`
+
+同 `toTrackSegments`，但处理 ForecastAgency 的 `forecastpoints`。
+
+---
+
+## 六、数据获取 API (`api.ts`)
+
+### 6.1 `fetchCloud(type: 0.5|1|3|6): Promise<CloudData | null>`
+
+- GET `API_LEASTCLOUD(type)`
+- 从响应中取 `cloud{typeKey}h` 作为 base64 图片，`timeStr{typeKey}h` 为时间
+- 取 `minLng/minLat/maxLng/maxLat` 作为 extent
+- 异常/缺数据 → null
+
+### 6.2 `fetchRadar(): Promise<RadarData | null>`
+
+- GET `API_LASTRADAR`
+- `radarType === '2'` → 单张大图，extent 用 `RADAR_FULL_EXTENT`
+- 否则遍历 `RADAR_TILES` 四个象限分别取图
+- 异常/缺数据 → null
+
+### 6.3 `fetchRain(hours: 24|48|72): Promise<RainData | null>`
+
+- GET `API_LEASTRAIN(hours)`
+- 解析 `contours`（双重 JSON 编码）
+- 每个等高线 { color, latAndLong, symbol } → 转换 latAndLong 中 `[lat,lng]` 为 `[lng,lat]`
+- 过滤 NaN 坐标，闭合多边形环
+- 将 RGBA 颜色转换为 hex
+- 返回 `{ features, colors, time, colorToSymbol }`
+
+### 6.4 `fetchWind(): Promise<WindData | null>`
+
+- GET `API_LASTWIND`
+- 解析 `windData`（GRIB2 JSON 数组：[U分量, V分量]）
+- 用 `windDataToImage()` 将 U/V 数值编码为 RGBA PNG（R=U, G=V, B=0, A=255 — 归一化到 0-255）
+- 返回 `{ imageUrl, time, extent }` + 固定 uMin/uMax/vMin/vMax
+
+---
+
+## 七、Hook 详解
+
+### 7.1 `useTyphoonData()` → `TyphoonDataState`
+
+**核心状态管理**：
+
+| 状态 | 类型 | 说明 |
+|------|------|------|
+| list | TyphoonListItem[] | 台风列表 |
+| activeIds | string[] | 活跃台风 tfid 数组 |
+| tfid | string | 当前选中的台风编号 |
+| info | TyphoonInfo \| null | 当前台风详情 |
+| loading | boolean | 列表加载中 |
+| error | boolean | API 失败标记 |
+| selectedAgency | string | 选中的预报机构 |
+| selectedPointIdx | number | 选中的路径点索引（-1=最新点） |
+| pointsDetailExpanded | boolean | 点位详情表格是否展开 |
+| sceneRef | RefObject&lt;Scene&gt; | L7 Scene 引用 |
+
+**数据获取流程**：
+
+1. **mount 时**：fetch `API_ACTIVITY` → 获取活跃台风 IDs；fetch `API_LIST(CURRENT_YEAR)` → 获取当年全部台风。选台风逻辑：优先选中活跃台风，否则按 `starttime` 最新排序。API 失败 → 使用 `FALLBACK_LIST` / `FALLBACK_INFO`，`error=true`。
+
+2. **tfid 变化时**：fetch `API_INFO(tfid)` → 解析 TyphoonInfo。失败 → 使用 `FALLBACK_INFO`。
+
+3. **trackSegments 变化时**：调用 `scene.fitBounds()` 将地图缩放至台风路径范围（padding=80，经纬度 padding=4）。
+
+**派生数据（useMemo）**：
+
+| 字段 | 派生逻辑 |
+|------|----------|
+| points | `info?.points ?? []` |
+| trackSegments | `toTrackSegments(points)` |
+| nodes | `toNodes(points)` |
+| currentIdx | `points.length - 1` |
+| selectedIdx | `selectedPointIdx >= 0 && < points.length ? selectedPointIdx : currentIdx` |
+| selectedPoint | `points[selectedIdx]` |
+| currentPoint | `points[currentIdx]` |
+| windPolygons | `toWindPolygons(selectedPoint)` |
+| forecastSrc | `selectedPoint?.forecast ?? currentPoint?.forecast ?? []` |
+| presentAgencies | `Set(forecastSrc.map(f => f.tm))` |
+| activeForecastSegs | selectedAgency 对应的机构预报段 |
+| otherForecastSegs | 非 selectedAgency 的机构预报段 |
+| forecastPoints | 所有预报路径点（lng/lat 已转 number） |
+| landMarks | `info?.land` 中有效坐标的登陆点 |
+
+### 7.2 `useWeatherData()` → `WeatherDataState`
+
+**状态**：
+
+| 状态 | 类型 | 默认值 |
+|------|------|--------|
+| weatherLayer | 'none'\|'cloud'\|'radar'\|'rain'\|'satellite' | 'none' |
+| weatherOpacity | number | 0.7 |
+| cloudType | 0.5\|1\|3\|6 | 1 |
+| rainHours | 24\|48\|72 | 24 |
+| cloud | CloudData\|null | null |
+| radar | RadarData\|null | null |
+| rain | RainData\|null | null |
+| satellite | boolean | false |
+| satProvider | 'gaode'\|'tianditu'\|'google' | 'gaode' |
+| satOpacity | number | 0.8 |
+| rainTooltip | RainTooltipState | {visible:false,...} |
+
+**行为**：
+
+- `weatherLayer` 切换且对应数据为 null 时 → 自动 fetch
+- `cloudType` 变化且当前在 cloud 模式 → 清空 cloud 数据（触发重新 fetch）
+- `rainHours` 变化同理
+- `handleRainTooltipMove`: 从 LayerEventPayload.feature 提取 symbol/color
+- `handleRainTooltipLeave`: 设置 visible=false
+
+### 7.3 `useTyphoonPopup(deps)` → `TyphoonPopupState`
+
+**参数**: `{ info: TyphoonInfo | null, selectedAgency: string }`
+
+**状态**:
+
+| 状态 | 说明 |
+|------|------|
+| popup | PopupData \| null（点击节点/预报线时设置） |
+| tooltip | TooltipState（hover 节点时更新） |
+
+**事件处理器**：
+
+1. **handleNodeHover**: 从 LayerEventPayload.feature 提取 time/strong/power/speed/pressure → 更新 tooltip
+
+2. **handleNodeLeave**: tooltip.visible = false
+
+3. **handleNodeClick**: 从 feature 提取完整路径点信息 → 构建 PopupData（含时间、位置、风速风力、气压、移速移向、7/10/12级风圈半径）
+
+4. **handleForecastClick**: 弹出该机构预报路径 Popup（机构名、路径类型、坐标）
+
+5. **handleForecastPointHover/Leave**: 类似 node hover
+
+6. **handleForecastPointClick**: 弹出预报点 Popup（机构、时间、位置、风速、强度、气压）
+
+---
+
+## 八、主组件 (`TyphoonMap.tsx`)
+
+### 8.1 Props
+
+```typescript
+interface TyphoonMapProps {
+  mobilePreview?: boolean  // 强制移动端模式（BlockPage 中使用）
+}
+// 默认值: {}
+```
+
+### 8.2 状态架构
+
+```
+TyphoonMap
+├── useTyphoonData()        → 台风数据 + 派生计算
+├── useWeatherData()        → 气象图层 + 降雨 tooltip
+├── useTyphoonPopup(deps)   → 节点/预报交互
+├── [listExpanded]          → 本地状态: 列表展开
+├── [legendExpanded]        → 本地状态: 图例展开
+└── [showWindCircles]       → 本地状态: 风圈开关
+```
+
+### 8.3 派生计算
+
+```typescript
+eyeColor = GRADE_COLOR[pointGrade(currentPoint)] ?? C.accent
+eyeLng = Number(currentPoint.lng)
+eyeLat = Number(currentPoint.lat)
+selectedWind = { strong, power, lng, lat, time } | null
+```
+
+### 8.4 事件粘合
+
+```typescript
+handleNodeClick = (payload) => {
+  // 更新 selectedPointIdx (影响风圈、预报数据)
+  typhoon.setSelectedPointIdx(payload.feature.index)
+  // 同时弹出 Popup
+  popup.handleNodeClick(payload)
+}
+
+handleSelectTfid = (id) => {
+  typhoon.setTfid(id)
+  typhoon.setPointsDetailExpanded(false)
+}
+```
+
+### 8.5 JSX 结构
+
+```
+<div data-theme="dark">  ← 根容器，暗色主题
+  <style> keyframes typhoon-eye-rot </style>
+
+  <AiMap basemap="gaode" center=[127.6,20.8] zoom=4 pitch=12 style={satellite?'light':'dark'}>
+    <TyphoonMapLayers />  ← 全部图层
+    <ZoomControl position="bottomleft" showZoom />
+    <MapThemeControl position="bottomleft" defaultValue="dark" />
+  </AiMap>
+
+  // ── 顶部导航条（绝对定位）
+  <div poison:absolute top=0 left=0> cyclone 图标 + "台风路径图" + 年份 + 错误标记 </div>
+
+  // ── 台风信息卡（绝对定位）
+  <TyphoonInfoCard />
+
+  // ── 气象工具条（绝对定位）
+  <WeatherToolbar />
+
+  // ── 图例面板 + 历史点提示 + 数据来源（绝对定位）
+  <LegendPanel />
+  <历史点提示条 />  ← 内联渲染
+  <数据来源文字 />
+</div>
+```
+
+---
+
+## 九、UI 子组件详解
+
+### 9.1 `TyphoonInfoCard`
+
+**Props**:
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| info | TyphoonInfo\|null | |
+| currentPoint | TyphoonPoint\|undefined | |
+| list | TyphoonListItem[] | |
+| activeIds | string[] | |
+| tfid | string | 当前选中 |
+| points | TyphoonPoint[] | |
+| loading | boolean | |
+| listExpanded | boolean | |
+| pointsDetailExpanded | boolean | |
+| isMobile | boolean | |
+| onToggleListExpanded | () => void | |
+| onTogglePointsDetail | () => void | |
+| onSelectTfid | (tfid) => void | |
+
+**渲染逻辑**：
+
+1. **PC 端（!isMobile）且 currentPoint 存在**：显示台风信息卡片
+   - 台风眼图标 + 名称/编号 + 活跃标签
+   - 强度徽章（等级色背景）+ 风力风速
+   - 6 列网格：经度、纬度、中心气压、移速、移向、时间
+
+2. **台风列表选择器**：
+   - **移动端 + 未展开**：显示圆形列表按钮（36×36）
+   - **其他情况**：显示完整列表面板
+     - 标题行：可折叠的"台风列表（N）"
+     - 列表项：绿点（活跃）/灰点 + 名称 + 编号后三位
+     - 选中项高亮（青色背景），点击选中项 → 切换点位详情展开
+     - 未展开时只显示 3 项，底部有"展开全部（N）"
+   - 选中台风 + pointsDetailExpanded 时：显示点位详情表格
+     - 4 列：时间、强度（着色）、风速、气压
+     - 表格按时间倒序排列
+
+### 9.2 `LegendPanel`
+
+**Props**:
+
+| Prop | 说明 |
+|------|------|
+| showWindCircles | 风圈开关状态 |
+| legendExpanded | 图例展开状态 |
+| landMarks | 登陆点数组 |
+| isMobile | |
+| onToggleLegend | 切换展开 |
+| onToggleWindCircles | 切换风圈 |
+
+**渲染内容**（仅展开时显示）：
+
+1. 风圈开关 checkbox
+2. 登陆点图标 + 文字（仅当 landMarks.length > 0）
+3. 预报台：5 个机构 × 颜色虚线
+4. 台风等级：`<LegendCategories />` 组件
+5. 风圈等级：3 个圆形图标 × 文字
+6. 警戒线：24h 橙色虚线 / 48h 红色虚线
+7. 降雨等级：6 种颜色块 2×3 网格
+8. 雷达反射率：12 色渐变色条 + 10/70 标注
+
+**移动端**：图例从右侧滑出（transform: translateX），切换 chevron 方向。
+
+### 9.3 `WeatherToolbar`
+
+**Props**：
+
+| Prop | 说明 |
+|------|------|
+| weatherLayer, weatherOpacity, cloudType, rainHours | 当前值 |
+| cloudTime?, radarTime?, rainTime? | 数据时间 |
+| isMobile | |
+| onSetWeatherLayer, onSetWeatherOpacity, ... | setter 回调 |
+
+**渲染**：
+
+1. 图层切换按钮组：无/云图/雷达/降雨/卫星，5 个按钮并排
+2. 选中 `satellite` → 同时 `onSetSatellite(true)`；选其他 → `onSetSatellite(false)`
+3. 下方子面板（仅当 weatherLayer !== 'none'）：
+   - cloud 模式：30m/1h/3h/6h 四档按钮
+   - rain 模式：24h/48h/72h 三档按钮
+   - 非 satellite 模式：透明度滑块（range input 0-1）
+   - 显示数据时间
+
+### 9.4 `TyphoonMapLayers`
+
+这是最复杂的子组件，接收所有数据并通过 props 控制（无内部状态）。
+
+**图层顺序（zIndex 从低到高）**：
+
+| zIndex | 图层 | 组件 |
+|--------|------|------|
+| -2 | 卫星底图 | `<SatelliteLayer>` |
+| -1 | 云图/雷达/降雨覆盖 | `<ImageLayer>` / `<FillLayer>` |
+| 0 | 风圈填充（opacity=0.25） | `<FillLayer>` |
+| 1 | 历史轨迹段 + 其他机构预报 | `<LineLayer>` |
+| 2 | 风圈描边（opacity=0.8）+ 选中机构预报 | `<LineLayer>` |
+| 3 | 警戒线 | `<LineLayer>` |
+| 4 | 警戒线文字标注 | `<PointLayer shapeValues="text">` |
+| 5 | 风圈文字标注 | `<PointLayer shapeValues="text">` |
+| 6 | 路径节点 | `<PointLayer shape="circle">` |
+| 7 | 预报路径点位 | `<PointLayer shape="circle">` |
+| 8 | 预报日期标注（MM/DD） | `<PointLayer shapeValues="text">` |
+| — | 台风眼 Marker | `<Marker>` |
+| — | 登陆点 Marker | `<Marker>` |
+| — | 节点 Tooltip | `<Tooltip variant="dark">` |
+| — | 降雨 Tooltip | `<Tooltip variant="dark">` |
+| — | 点击 Popup | `<Popup size="standard" singleton>` |
+
+**交互**：
+
+- 路径节点 (zIndex=6)：`onMouseMove → onNodeHover`, `onMouseLeave → onNodeLeave`, `onClick → onNodeClick`
+- 预报路径点 (zIndex=7)：`onMouseMove → onForecastPointHover`, `onMouseLeave → onForecastPointLeave`, `onClick → onForecastPointClick`
+- 其他机构预报线 (zIndex=1)：`onClick → onForecastClick`
+- 选中机构预报线 (zIndex=2)：`onClick → onForecastClick`
+- 降雨 FillLayer (zIndex=-1)：`onMouseMove → onRainTooltipMove`, `onMouseLeave → onRainTooltipLeave`
+- 历史轨迹段：无交互
+- Popup：`onClose → onPopupClose`
+
+**预报日期标注（内联 IIFE）**：
+
+- 取 `forecastSrc` 中机构名为"中国"的预报点
+- 按日期去重（每天只取第一个点）
+- 格式化为 MM/DD 作为文字标注
+
+**Lookup 注意**：
+
+- LineLayer 使用 `sourceConfig={{ coordinates: 'path' }}`（字段名为 `path` 不是 `coordinates`）
+- PointLayer 使用 `sourceConfig={{ x: 'lng', y: 'lat' }}`
+- GeoJSON 坐标格式为 `[lng, lat]`（经度在前）
+
+---
+
+## 十、完整数据流图
+
+```
+┌─────────────────┐
+│   TyphoonMap    │ 主组件
+├─────────────────┤
+│ isMobile (prop  │← useResponsive()
+│  + responsive)  │
+│                 │
+│ listExpanded ───┤ local state
+│ legendExpanded──┤ local state
+│ showWindCircles─┤ local state
+│                 │
+│ ┌─────────────┐ │
+│ │useTyphoonData│ │→ fetch API_ACTIVITY + API_LIST → list, activeIds, tfid
+│ │             │ │→ fetch API_INFO(tfid) → info
+│ │             │ │→ useMemo: trackSegments, nodes, windPolygons, forecast*
+│ │             │ │→ fitBounds on tfid change
+│ └─────────────┘ │
+│                 │
+│ ┌─────────────┐ │
+│ │useWeatherData│ │→ fetchCloud/Radar/Rain on layer change
+│ │             │ │→ rainTooltip state + handlers
+│ └─────────────┘ │
+│                 │
+│ ┌─────────────┐ │
+│ │usePopup      │ │→ popup, tooltip state
+│ │             │ │→ nodeHover/Click, forecastHover/Click handlers
+│ └─────────────┘ │
+└────────┬────────┘
+         │ props
+         ▼
+┌─────────────────────────────────────────────────┐
+│               子组件                             │
+├──────────────┬──────────────┬───────────────────┤
+│TyphoonMap    │TyphoonInfo   │WeatherToolbar     │
+│Layers        │Card          │+ LegendPanel      │
+│(AiMap children)(台风卡片+列表)│(气象控制+图例)    │
+└──────────────┴──────────────┴───────────────────┘
+```
+
+---
+
+## 十一、入口与注册 (`main.tsx`)
+
+```typescript
+// import
+import TyphoonMap from './app/typhoon';
+
+// 注册（devices 配置）
+{
+  name: 'TyphoonMap',
+  icon: 'cyclone',
+  component: TyphoonMap,
+  group: 'App Templates',
+  file: 'app/typhoon/TyphoonMap',
+  device: 'both',  // 支持桌面端和移动端
+}
+
+// 源码展示 glob 需包含
+'./{engine,control,marker,layer,composite,app,app/typhoon,app/typhoon/hooks}/*.tsx'
+
+// 渲染时：
+// device='mobile' → 390×844 手机框内渲染
+// device='desktop'/'both' → 全屏渲染
+// BlockPage 中 mobile preview 传入 mobilePreview prop
+```
+
+---
+
+## 十二、移动端适配规则
+
+| 场景 | 桌面端 | 移动端 |
+|------|--------|--------|
+| 顶部导航条 | width=264, padding=12×16 | width=100%, padding=8×12 |
+| 图标字号 | 22 | 18 |
+| 标题字号 | 17 | 14 |
+| 显示年份 | 是 | 否 |
+| 台风信息卡 | 显示（width=240, top=82） | 隐藏 |
+| 列表选择器 | 始终展开 | 初始为圆形按钮（36×36），点击展开 |
+| 图例面板 | 右上角，垂直折叠 | 右侧滑入，水平折叠 |
+| 气象工具条 | 右上角 | 居中横排 |
+| 历史点提示 | 右下角 | 右下角 |
+
+---
+
+## 十三、CSS 动画
+
+1. **台风眼旋转**: `@keyframes typhoon-eye-rot { to { transform: rotate(360deg) } }`，4s linear infinite
+2. **台风眼双环动画** (TyphoonEye.tsx): `@keyframes typhoon-rot` — 外环 6s 顺时针，内环 4s 逆时针
+3. **图例折叠过渡**: `transition: max-height 0.3s`（桌面） / `transition: transform 0.3s ease`（移动）
+
+---
+
+## 十四、关键边界情况处理
+
+1. **API 全部失败**: 使用 `FALLBACK_LIST` + `FALLBACK_INFO`（台风"巴威"），`error=true`，顶部显示"使用内置样本"标签
+2. **坐标 NaN**: `toTrackSegments`/`toNodes`/`fetchRain` 中均有 `Number.isFinite` 过滤
+3. **风圈半径为 0**: `toWindPolygons` 中 `radii[qi] > 0` 检查，`hasAny` 标记
+4. **预报为空**: forecastSrc 默认 `[]`，activeForecastSegs/otherForecastSegs 为空时不渲染
+5. **雷达单张模式**: `radarType === '2'` 时用 `RADAR_FULL_EXTENT` 单片渲染
+6. **无需风圈数据**: `showWindCircles` 开关控制，`windPolygons.length > 0` 时才渲染
+7. **selectedPointIdx 越界**: `selectedIdx` 计算时做了 bounds check
+8. **Polygon 闭合**: `toWindPolygons` 和 `fetchRain` 中都会检查并闭合环
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/TyphoonEye.tsx b/packages/site/src/app/typhoon/TyphoonEye.tsx
new file mode 100644
index 0000000..2b06ab8
--- /dev/null
+++ b/packages/site/src/app/typhoon/TyphoonEye.tsx
@@ -0,0 +1,27 @@
+/* ================================================================
+   台风眼旋转动画符号
+   ================================================================ */
+
+export default function TyphoonEye({ color, label }: { color: string; label: string }) {
+  return (
+    <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56 }}>
+      <div className="typhoon-spin" style={{
+        position: 'absolute', width: 56, height: 56, borderRadius: '50%',
+        border: `3px solid ${color}`, borderTopColor: 'transparent', borderRightColor: 'transparent',
+        opacity: 0.95,
+      }} />
+      <div className="typhoon-spin-rev" style={{
+        position: 'absolute', width: 38, height: 38, borderRadius: '50%',
+        border: `2px solid ${color}`, borderBottomColor: 'transparent', borderLeftColor: 'transparent',
+        opacity: 0.7,
+      }} />
+      <div style={{ width: 12, height: 12, borderRadius: '50%', background: color, boxShadow: `0 0 12px ${color}` }} />
+      <div style={{ position: 'absolute', top: -20, left: '50%', transform: 'translateX(-50%)', whiteSpace: 'nowrap', fontSize: 11, fontWeight: 700, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.9)', background: 'rgba(0,0,0,0.55)', padding: '1px 6px', borderRadius: 6 }}>{label}</div>
+      <style>{`
+        @keyframes typhoon-rot { to { transform: rotate(360deg); } }
+        .typhoon-spin { animation: typhoon-rot 6s linear infinite; }
+        .typhoon-spin-rev { animation: typhoon-rot 4s linear infinite reverse; }
+      `}</style>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/TyphoonInfoCard.tsx b/packages/site/src/app/typhoon/TyphoonInfoCard.tsx
new file mode 100644
index 0000000..27daace
--- /dev/null
+++ b/packages/site/src/app/typhoon/TyphoonInfoCard.tsx
@@ -0,0 +1,155 @@
+/* ================================================================
+   台风信息卡片 + 列表选择器
+   ================================================================ */
+
+import type { TyphoonInfo, TyphoonListItem, TyphoonPoint } from './types';
+import { GRADE_COLOR, STRENGTH_TO_KEY, C } from './constants';
+import { pointGrade } from './transform';
+import InfoItem from './Info';
+
+interface TyphoonInfoCardProps {
+  info: TyphoonInfo | null;
+  currentPoint: TyphoonPoint | undefined;
+  list: TyphoonListItem[];
+  activeIds: string[];
+  tfid: string;
+  points: TyphoonPoint[];
+  loading: boolean;
+  listExpanded: boolean;
+  pointsDetailExpanded: boolean;
+  isMobile: boolean;
+  onToggleListExpanded: () => void;
+  onTogglePointsDetail: () => void;
+  onSelectTfid: (tfid: string) => void;
+}
+
+export default function TyphoonInfoCard({
+  info, currentPoint, list, activeIds, tfid, points,
+  loading, listExpanded, pointsDetailExpanded, isMobile,
+  onToggleListExpanded, onTogglePointsDetail, onSelectTfid,
+}: TyphoonInfoCardProps) {
+  const eyeColor = currentPoint ? GRADE_COLOR[pointGrade(currentPoint)] : C.accent;
+
+  return (
+    <div style={{ position: isMobile ? 'absolute' : 'relative', top: isMobile ? 92 : undefined, right: isMobile ? 8 : undefined, zIndex: isMobile ? 1000 : undefined, display: 'flex', flexDirection: 'column', gap: 8, width: isMobile ? 'calc(100% - 16px)' : 240, maxHeight: isMobile ? 'calc(50vh - 60px)' : 'calc(100vh - 120px)' }}>
+      {/* 台风信息卡 */}
+      {currentPoint && !isMobile && (
+        <div style={{
+          padding: '12px 14px', background: C.panel, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
+          border: `1px solid ${C.border}`, borderRadius: 14, boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+            <span className="material-symbols-outlined" style={{ fontSize: 18, color: eyeColor }}>cyclone</span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 15, fontWeight: 800, color: '#f1f5f9', lineHeight: 1.2 }}>{info?.name}</div>
+              <div style={{ fontSize: 10, color: C.muted }}>{info?.enname} · {info?.tfid}</div>
+            </div>
+            {info?.isactive === '1' && (
+              <span style={{ fontSize: 9, fontWeight: 700, color: '#22c55e', background: 'rgba(34,197,94,0.15)', padding: '2px 6px', borderRadius: 6 }}>活跃</span>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 10 }}>
+            <span style={{ fontSize: 10, fontWeight: 600, color: eyeColor, background: `${eyeColor}22`, padding: '3px 8px', borderRadius: 6 }}>{currentPoint.strong}</span>
+            <span style={{ fontSize: 10, color: C.muted }}>{currentPoint.power}级 · {currentPoint.speed}m/s</span>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 10px', fontSize: 11 }}>
+            <InfoItem label="经度" value={`${Number(currentPoint.lng).toFixed(1)}°`} />
+            <InfoItem label="纬度" value={`${Number(currentPoint.lat).toFixed(1)}°`} />
+            <InfoItem label="中心气压" value={`${currentPoint.pressure}hPa`} />
+            <InfoItem label="移速" value={currentPoint.movespeed ? `${currentPoint.movespeed}km/h` : '—'} />
+            <InfoItem label="移向" value={currentPoint.movedirection || '—'} />
+            <InfoItem label="时间" value={currentPoint.time?.slice(5) || '—'} />
+          </div>
+        </div>
+      )}
+
+      {/* 台风列表选择器 */}
+      {isMobile && !listExpanded ? (
+        <div onClick={onToggleListExpanded} style={{
+          width: 36, height: 36, borderRadius: '50%', background: C.panel, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
+          border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.3)', transition: 'background 120ms',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.background = 'rgba(34,211,238,0.15)'; }}
+        onMouseLeave={e => { e.currentTarget.style.background = C.panel; }}>
+          <span className="material-symbols-outlined" style={{ fontSize: 18, color: C.accent }}>list</span>
+        </div>
+      ) : (
+        <div style={{
+          padding: '8px 10px', background: C.panel, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
+          border: `1px solid ${C.border}`, borderRadius: 12, overflowY: 'auto', minHeight: 0,
+        }}>
+          <div
+            onClick={onToggleListExpanded}
+            style={{ fontSize: 10, fontWeight: 600, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: (!listExpanded || (isMobile && !listExpanded)) ? 0 : 6, display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: 12 }}>{listExpanded ? 'expand_less' : 'expand_more'}</span>
+            台风列表（{list.length}）
+          </div>
+          {(listExpanded || !isMobile) && (
+            <>
+              {loading && <div style={{ fontSize: 11, color: C.muted, padding: '4px 0' }}>加载中…</div>}
+              {[...list].reverse().slice(0, listExpanded ? list.length : 3).map(t => {
+                const sel = t.tfid === tfid;
+                const actv = activeIds.includes(t.tfid) || t.isactive === '1';
+                return (
+                  <div key={t.tfid}>
+                    <div onClick={() => {
+                      onSelectTfid(t.tfid);
+                      if (sel) onTogglePointsDetail();
+                    }} style={{
+                      display: 'flex', alignItems: 'center', gap: 6, padding: '5px 6px', margin: '2px 0', borderRadius: 6,
+                      cursor: 'pointer', fontSize: 11,
+                      background: sel ? 'rgba(34,211,238,0.12)' : 'transparent',
+                      color: sel ? '#e0f2fe' : 'rgba(203,213,225,0.75)', fontWeight: sel ? 600 : 400,
+                      transition: 'background 120ms',
+                    }}
+                    onMouseEnter={e => { if (!sel) { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; } }}
+                    onMouseLeave={e => { if (!sel) { e.currentTarget.style.background = 'transparent'; } }}>
+                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: actv ? '#22c55e' : 'rgba(148,163,184,0.4)', boxShadow: actv ? '0 0 6px #22c55e' : 'none', flexShrink: 0 }} />
+                      <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.name}</span>
+                      <span style={{ fontSize: 9, color: C.muted, flexShrink: 0 }}>{t.tfid.slice(-3)}</span>
+                      {sel && <span className="material-symbols-outlined" style={{ fontSize: 12, color: C.muted }}>{pointsDetailExpanded ? 'expand_less' : 'expand_more'}</span>}
+                    </div>
+                    {/* 点位详情展开面板 */}
+                    {sel && pointsDetailExpanded && info?.points && (
+                      <div style={{ margin: '4px 0 8px', padding: '6px', background: 'rgba(15,23,42,0.6)', borderRadius: 8, border: `1px solid ${C.border}`, maxHeight: 200, overflowY: 'auto' }}>
+                        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 10 }}>
+                          <thead>
+                            <tr style={{ borderBottom: `1px solid ${C.border}` }}>
+                              <th style={{ padding: '4px 6px', textAlign: 'left', color: C.muted, fontWeight: 500 }}>时间</th>
+                              <th style={{ padding: '4px 6px', textAlign: 'left', color: C.muted, fontWeight: 500 }}>强度</th>
+                              <th style={{ padding: '4px 6px', textAlign: 'right', color: C.muted, fontWeight: 500 }}>风速</th>
+                              <th style={{ padding: '4px 6px', textAlign: 'right', color: C.muted, fontWeight: 500 }}>气压</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {[...points].reverse().map((p, idx) => (
+                              <tr key={idx} style={{ borderBottom: `1px solid rgba(148,163,184,0.1)` }}
+                                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(34,211,238,0.08)'; }}
+                                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
+                                <td style={{ padding: '3px 6px', color: 'rgba(203,213,225,0.9)' }}>{p.time?.slice(5, 16)}</td>
+                                <td style={{ padding: '3px 6px', color: GRADE_COLOR[STRENGTH_TO_KEY[p.strong] || 'TD'] || C.muted }}>{p.strong}</td>
+                                <td style={{ padding: '3px 6px', textAlign: 'right', color: 'rgba(203,213,225,0.9)' }}>{p.speed} m/s</td>
+                                <td style={{ padding: '3px 6px', textAlign: 'right', color: 'rgba(203,213,225,0.9)' }}>{p.pressure} hPa</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+              {!listExpanded && list.length > 3 && (
+                <div onClick={onToggleListExpanded} style={{ fontSize: 10, color: C.accent, textAlign: 'center', padding: '4px 0', cursor: 'pointer' }}>
+                  展开全部（{list.length}）
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/TyphoonMap.tsx b/packages/site/src/app/typhoon/TyphoonMap.tsx
new file mode 100644
index 0000000..f44c39a
--- /dev/null
+++ b/packages/site/src/app/typhoon/TyphoonMap.tsx
@@ -0,0 +1,190 @@
+/* ================================================================
+   台风路径地图 — 主组件
+   组装所有子组件与 hooks
+   ================================================================ */
+
+import { useMemo, useCallback, useState } from 'react';
+import { AiMap, ZoomControl, MapThemeControl, useResponsive } from '@antv/aimapui';
+import type { LayerEventPayload } from '@antv/aimapui';
+import { C, CURRENT_YEAR } from './constants';
+import { GRADE_COLOR } from './constants';
+import { pointGrade } from './transform';
+import { useTyphoonData } from './hooks/useTyphoonData';
+import { useWeatherData } from './hooks/useWeatherData';
+import { useTyphoonPopup } from './hooks/useTyphoonPopup';
+
+import TyphoonMapLayers from './TyphoonMapLayers';
+import TyphoonInfoCard from './TyphoonInfoCard';
+import WeatherToolbar from './WeatherToolbar';
+import LegendPanel from './LegendPanel';
+
+export default function TyphoonMap({ mobilePreview }: { mobilePreview?: boolean } = {}) {
+  const { isMobile: responsiveMobile } = useResponsive();
+  const isMobile = mobilePreview ?? responsiveMobile;
+
+  // ── Hooks ──
+  const typhoon = useTyphoonData();
+  const weather = useWeatherData();
+  const popup = useTyphoonPopup({
+    info: typhoon.info,
+    selectedAgency: typhoon.selectedAgency,
+  });
+
+  // ── 本地 UI 状态 ──
+  const [listExpanded, setListExpanded] = useState(false);
+  const [legendExpanded, setLegendExpanded] = useState(false);
+  const [showWindCircles, setShowWindCircles] = useState(true);
+
+  // ── 派生计算 ──
+  const eyeColor = typhoon.currentPoint ? GRADE_COLOR[pointGrade(typhoon.currentPoint)] : C.accent;
+  const selectedWind = typhoon.selectedPoint ? {
+    strong: typhoon.selectedPoint.strong,
+    power: typhoon.selectedPoint.power,
+    lng: Number(typhoon.selectedPoint.lng),
+    lat: Number(typhoon.selectedPoint.lat),
+    time: typhoon.selectedPoint.time,
+  } : null;
+
+  // ── 事件处理 ──
+  const handleNodeClick = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    if (f && typeof f.index === 'number') typhoon.setSelectedPointIdx(f.index);
+    popup.handleNodeClick(payload);
+  }, [typhoon.setSelectedPointIdx, popup.handleNodeClick]);
+
+  const handleSelectTfid = useCallback((id: string) => {
+    typhoon.setTfid(id);
+    typhoon.setPointsDetailExpanded(false);
+  }, [typhoon.setTfid, typhoon.setPointsDetailExpanded]);
+
+  return (
+    <div data-theme="dark" style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: C.bg, fontFamily: "'Inter', system-ui, sans-serif" }}>
+      <style>{`
+        @keyframes typhoon-eye-rot { to { transform: rotate(360deg); } }
+        .typhoon-eye-spin { animation: typhoon-eye-rot 4s linear infinite; }
+      `}</style>
+
+      {/* ── 地图 ── */}
+      <div style={{ position: 'absolute', inset: 0 }}>
+        <AiMap
+          map={{ basemap: 'gaode', center: [127.6, 20.8], zoom: 4, pitch: 12, style: weather.satellite ? 'light' : 'dark' }}
+          onSceneReady={typhoon.handleSceneReady}
+        >
+          <TyphoonMapLayers
+            trackSegments={typhoon.trackSegments}
+            nodes={typhoon.nodes}
+            windPolygons={typhoon.windPolygons}
+            showWindCircles={showWindCircles}
+            landMarks={typhoon.landMarks}
+            forecastSrc={typhoon.forecastSrc}
+            selectedAgency={typhoon.selectedAgency}
+            activeForecastSegs={typhoon.activeForecastSegs}
+            otherForecastSegs={typhoon.otherForecastSegs}
+            forecastPoints={typhoon.forecastPoints}
+            info={typhoon.info}
+            currentPoint={typhoon.currentPoint}
+            weatherLayer={weather.weatherLayer}
+            weatherOpacity={weather.weatherOpacity}
+            satellite={weather.satellite}
+            satProvider={weather.satProvider}
+            satOpacity={weather.satOpacity}
+            cloud={weather.cloud}
+            radar={weather.radar}
+            rain={weather.rain}
+            windField={weather.windField}
+            popup={popup.popup}
+            tooltip={popup.tooltip}
+            rainTooltip={weather.rainTooltip}
+            satelliteMode={weather.satellite}
+            onPopupClose={() => popup.setPopup(null)}
+            onNodeHover={popup.handleNodeHover}
+            onNodeLeave={popup.handleNodeLeave}
+            onNodeClick={handleNodeClick}
+            onForecastClick={popup.handleForecastClick}
+            onForecastPointHover={popup.handleForecastPointHover}
+            onForecastPointLeave={popup.handleForecastPointLeave}
+            onForecastPointClick={popup.handleForecastPointClick}
+            onRainTooltipMove={weather.handleRainTooltipMove}
+            onRainTooltipLeave={weather.handleRainTooltipLeave}
+          />
+          <ZoomControl position="bottomleft" showZoom />
+          <MapThemeControl position="bottomleft" defaultValue="dark" />
+        </AiMap>
+      </div>
+
+      {/* ════════ 顶部导航条 ════════ */}
+      <div style={{ position: 'absolute', top: 0, left: 0, width: isMobile ? '100%' : 264, zIndex: 1000, padding: isMobile ? '8px 12px' : '12px 16px', background: 'linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0) 100%)', pointerEvents: 'none' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 8 }}>
+          <span className="material-symbols-outlined" style={{ fontSize: isMobile ? 18 : 22, color: C.accent, pointerEvents: 'auto' }}>cyclone</span>
+          <span style={{ fontSize: isMobile ? 14 : 17, fontWeight: 800, color: '#f1f5f9' }}>台风路径图</span>
+          {!isMobile && <span style={{ fontSize: 11, color: C.muted, marginLeft: 6 }}>{CURRENT_YEAR} 年 西太平洋</span>}
+          {typhoon.error && (
+            <span style={{ fontSize: 10, color: '#fca5a5', background: 'rgba(239,68,68,0.12)', padding: '2px 8px', borderRadius: 6, pointerEvents: 'auto', marginLeft: 'auto' }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 11, verticalAlign: 'middle' }}>wifi_off</span> 使用内置样本
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* ═══════ 右上角面板：工具条 + 信息卡 ═══════ */}
+      <div style={{ position: 'absolute', top: isMobile ? 44 : 8, right: isMobile ? 8 : 12, zIndex: 1002, display: 'flex', flexDirection: 'column', gap: 8, pointerEvents: 'auto', alignItems: 'flex-end' }}>
+        <div style={{ pointerEvents: 'auto' }}>
+          <WeatherToolbar
+            weatherLayer={weather.weatherLayer}
+            weatherOpacity={weather.weatherOpacity}
+            cloudType={weather.cloudType}
+            rainHours={weather.rainHours}
+            cloudTime={weather.cloud?.time}
+            radarTime={weather.radar?.time}
+            rainTime={weather.rain?.time}
+            isMobile={isMobile}
+            onSetWeatherLayer={weather.setWeatherLayer}
+            onSetWeatherOpacity={weather.setWeatherOpacity}
+            onSetCloudType={weather.setCloudType}
+            onSetRainHours={weather.setRainHours}
+            onSetSatellite={weather.setSatellite}
+          />
+        </div>
+        <TyphoonInfoCard
+          info={typhoon.info}
+          currentPoint={typhoon.currentPoint}
+          list={typhoon.list}
+          activeIds={typhoon.activeIds}
+          tfid={typhoon.tfid}
+          points={typhoon.points}
+          loading={typhoon.loading}
+          listExpanded={listExpanded}
+          pointsDetailExpanded={typhoon.pointsDetailExpanded}
+          isMobile={isMobile}
+          onToggleListExpanded={() => setListExpanded(!listExpanded)}
+          onTogglePointsDetail={() => typhoon.setPointsDetailExpanded(!typhoon.pointsDetailExpanded)}
+          onSelectTfid={handleSelectTfid}
+        />
+      </div>
+
+      {/* ═══════ 图例 + 选中历史点提示 ═══════ */}
+      <div style={{ position: 'absolute', right: isMobile ? 0 : 12, bottom: isMobile ? 60 : 12, left: isMobile ? 'auto' : 'auto', zIndex: 1000, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <LegendPanel
+          showWindCircles={showWindCircles}
+          legendExpanded={legendExpanded}
+          landMarks={typhoon.landMarks}
+          isMobile={isMobile}
+          onToggleLegend={() => setLegendExpanded(!legendExpanded)}
+          onToggleWindCircles={() => setShowWindCircles(!showWindCircles)}
+        />
+        {/* 选中历史点提示 */}
+        {selectedWind && typhoon.selectedIdx !== typhoon.currentIdx && (
+          <div style={{ padding: '8px 12px', background: C.panel, backdropFilter: 'blur(12px)', border: `1px solid ${C.border}`, borderRadius: 10, fontSize: 11, color: '#cbd5e1', display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span className="material-symbols-outlined" style={{ fontSize: 14, color: '#f59e0b' }}>history</span>
+            <span>历史点 · {selectedWind.time.slice(5)} · {selectedWind.strong} {selectedWind.power}级</span>
+            <button onClick={() => typhoon.setSelectedPointIdx(-1)} style={{ marginLeft: 4, padding: 0, border: 'none', background: 'none', color: C.muted, cursor: 'pointer' }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 14 }}>close</span>
+            </button>
+          </div>
+        )}
+        {/* 数据来源 */}
+        <div style={{ fontSize: 9, color: C.muted, padding: '4px 0', textAlign: 'center' }}>数据来源:浙江水利 typhoon.slt.zj.gov.cn</div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/TyphoonMapLayers.tsx b/packages/site/src/app/typhoon/TyphoonMapLayers.tsx
new file mode 100644
index 0000000..b06ee48
--- /dev/null
+++ b/packages/site/src/app/typhoon/TyphoonMapLayers.tsx
@@ -0,0 +1,414 @@
+/* ================================================================
+   地图图层子组件
+   包含：气象覆盖层、风圈、警戒线、轨迹段、预报路径、
+         标注、Tooltip、Popup
+   ================================================================ */
+
+import { Marker, Tooltip, Popup, ImageLayer, FillLayer, LineLayer, PointLayer, SatelliteLayer } from '@antv/aimapui';
+import type { TyphoonPoint, WindPolygon, TrackNode, LandPoint, PopupData, TooltipState, RainTooltipState, WindFieldRawData } from './types';
+import WindFieldLayer from './WindFieldLayer';
+import {
+  GRADE_ORDER, GRADE_COLOR, WIND_LEVEL_KEY, WIND_LEVEL_COLOR,
+  AGENCIES, AGENCY_COLOR, WARNING_LINE_24H, WARNING_LINE_48H, WARNING_LINE_COLORS,
+  C,
+} from './constants';
+import { getRainLevelLabel } from './constants';
+import { pointGrade } from './transform';
+import type { LayerEventPayload } from '@antv/aimapui';
+
+interface TyphoonMapLayersProps {
+  // typhoon data
+  trackSegments: { path: [number, number][]; grade: string }[];
+  nodes: TrackNode[];
+  windPolygons: WindPolygon[];
+  showWindCircles: boolean;
+  landMarks: LandPoint[];
+  forecastSrc: { tm: string; forecastpoints: TyphoonPoint[] }[];
+  selectedAgency: string;
+  activeForecastSegs: { path: [number, number][]; agency: string }[];
+  otherForecastSegs: { path: [number, number][]; agency: string }[];
+  forecastPoints: { lng: number; lat: number; agency: string; time: string; strong: string; speed: string; pressure: string }[];
+  info: { name?: string; enname?: string } | null;
+  currentPoint: TyphoonPoint | undefined;
+
+  // weather
+  weatherLayer: 'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind';
+  weatherOpacity: number;
+  satellite: boolean;
+  satProvider: 'gaode' | 'tianditu' | 'google';
+  satOpacity: number;
+  cloud: { img: string; extent: [number, number, number, number] } | null;
+  radar: { tiles: { img: string; extent: [number, number, number, number] }[] } | null;
+  rain: { features: { type: 'Feature'; properties: { color: string; symbol: string }; geometry: { type: 'Polygon'; coordinates: [number, number][][] } }[]; colors: string[] } | null;
+  windField: WindFieldRawData | null;
+
+  // interactions
+  popup: PopupData | null;
+  tooltip: TooltipState;
+  rainTooltip: RainTooltipState;
+  satelliteMode: boolean;
+  onPopupClose: () => void;
+  onNodeHover: (payload: LayerEventPayload) => void;
+  onNodeLeave: () => void;
+  onNodeClick: (payload: LayerEventPayload) => void;
+  onForecastClick: (payload: LayerEventPayload) => void;
+  onForecastPointHover: (payload: LayerEventPayload) => void;
+  onForecastPointLeave: () => void;
+  onForecastPointClick: (payload: LayerEventPayload) => void;
+  onRainTooltipMove: (payload: LayerEventPayload) => void;
+  onRainTooltipLeave: () => void;
+}
+
+export default function TyphoonMapLayers({
+  trackSegments, nodes, windPolygons, showWindCircles, landMarks,
+  forecastSrc, selectedAgency, activeForecastSegs, otherForecastSegs, forecastPoints,
+  info, currentPoint,
+  weatherLayer, weatherOpacity, satellite, satProvider, satOpacity,
+  cloud, radar, rain, windField,
+  popup, tooltip, rainTooltip, satelliteMode,
+  onPopupClose, onNodeHover, onNodeLeave, onNodeClick,
+  onForecastClick, onForecastPointHover, onForecastPointLeave, onForecastPointClick,
+  onRainTooltipMove, onRainTooltipLeave,
+}: TyphoonMapLayersProps) {
+  const eyeColor = currentPoint ? GRADE_COLOR[pointGrade(currentPoint)] : C.accent;
+  const eyeLng = currentPoint ? Number(currentPoint.lng) : NaN;
+  const eyeLat = currentPoint ? Number(currentPoint.lat) : NaN;
+
+  return (
+    <>
+      {/* ⓪ 气象覆盖层 */}
+      {satellite && (<SatelliteLayer provider={satProvider} zIndex={-2} opacity={satOpacity} visible={satellite} />)}
+      {weatherLayer === 'wind' && windField && (
+        <WindFieldLayer windData={windField} visible opacity={weatherOpacity} zIndex={5} />
+      )}
+      {weatherLayer === 'cloud' && cloud && (
+        <ImageLayer
+          source={cloud.img}
+          sourceType="image"
+          sourceConfig={{ parser: { type: 'image', extent: cloud.extent } }}
+          style={{ opacity: weatherOpacity } as Record<string, unknown>}
+          zIndex={-1}
+        />
+      )}
+      {weatherLayer === 'radar' && radar && radar.tiles.map((t, i) => (
+        <ImageLayer
+          key={`radar-${i}`}
+          source={t.img}
+          sourceType="image"
+          sourceConfig={{ parser: { type: 'image', extent: t.extent } }}
+          style={{ opacity: weatherOpacity } as Record<string, unknown>}
+          zIndex={-1}
+        />
+      ))}
+      {weatherLayer === 'rain' && rain && (
+        <FillLayer
+          source={{ type: 'FeatureCollection', features: rain.features }}
+          sourceType="geojson"
+          colorField="color"
+          colorValues={rain.colors}
+          style={{ opacity: weatherOpacity } as Record<string, unknown>}
+          zIndex={-1}
+          hoverEffect={false}
+          clickEffect={false}
+          tooltipEffect={false}
+          onMouseMove={onRainTooltipMove}
+          onMouseLeave={onRainTooltipLeave}
+        />
+      )}
+
+      {/* 风圈 */}
+      {showWindCircles && windPolygons.length > 0 && (
+        <>
+          <FillLayer
+            source={{ type: 'FeatureCollection', features: windPolygons.map(w => ({ type: 'Feature' as const, properties: { level: w.level }, geometry: { type: 'Polygon' as const, coordinates: w.coordinates } })) }}
+            sourceType="geojson"
+            shape="fill"
+            colorField="level"
+            colorValues={WIND_LEVEL_KEY.map(k => WIND_LEVEL_COLOR[k])}
+            style={{ opacity: 0.25 } as Record<string, unknown>}
+            zIndex={0}
+          />
+          <LineLayer
+            source={{ type: 'FeatureCollection', features: windPolygons.map(w => ({ type: 'Feature' as const, properties: { level: w.level }, geometry: { type: 'Polygon' as const, coordinates: w.coordinates } })) }}
+            sourceType="geojson"
+            shape="line"
+            size={1}
+            colorField="level"
+            colorValues={WIND_LEVEL_KEY.map(k => WIND_LEVEL_COLOR[k])}
+            style={{ opacity: 0.8 } as Record<string, unknown>}
+            zIndex={2}
+          />
+          <PointLayer
+            source={{ type: 'FeatureCollection' as const, features: windPolygons.map(w => {
+              const coords = w.coordinates[0];
+              const midIdx = Math.floor(coords.length / 4);
+              const pt = coords[midIdx] || coords[0];
+              return {
+                type: 'Feature' as const,
+                properties: { label: `${w.level}级风圈`, level: w.level },
+                geometry: { type: 'Point' as const, coordinates: pt },
+              };
+            }) }}
+            sourceType="geojson"
+            shapeField="label"
+            shapeValues="text"
+            colorField="level"
+            colorValues={WIND_LEVEL_KEY.map(k => WIND_LEVEL_COLOR[k])}
+            size={11}
+            zIndex={5}
+            style={{
+              textAnchor: 'center',
+              textOffset: [0, -8],
+              fontWeight: 600,
+              stroke: '#0f172a',
+              strokeWidth: 3,
+            } as Record<string, unknown>}
+          />
+        </>
+      )}
+
+      {/* 警戒线 */}
+      <LineLayer
+        source={{ type: 'FeatureCollection' as const, features: [
+          { type: 'Feature' as const, properties: { type: '24h', label: '24小时警戒线' }, geometry: { type: 'LineString' as const, coordinates: WARNING_LINE_24H } },
+          { type: 'Feature' as const, properties: { type: '48h', label: '48小时警戒线' }, geometry: { type: 'LineString' as const, coordinates: WARNING_LINE_48H } },
+        ] }}
+        sourceType="geojson"
+        shape="line"
+        size={1.5}
+        colorField="type"
+        colorValues={[WARNING_LINE_COLORS['24h'], WARNING_LINE_COLORS['48h']]}
+        style={{ opacity: 0.9, lineType: 'dash', dashArray: [8, 5] } as Record<string, unknown>}
+        zIndex={3}
+      />
+      <PointLayer
+        source={{ type: 'FeatureCollection' as const, features: [
+          { type: 'Feature' as const, properties: { label: '24小时警戒线', type: '24h' }, geometry: { type: 'Point' as const, coordinates: [119, 18] } },
+          { type: 'Feature' as const, properties: { label: '48小时警戒线', type: '48h' }, geometry: { type: 'Point' as const, coordinates: [132, 15] } },
+        ] }}
+        sourceType="geojson"
+        shapeField="label"
+        shapeValues="text"
+        colorField="type"
+        colorValues={[WARNING_LINE_COLORS['24h'], WARNING_LINE_COLORS['48h']]}
+        size={12}
+        zIndex={4}
+        style={{
+          textAnchor: 'center',
+          textOffset: [0, -10],
+          fontWeight: 600,
+          stroke: '#0f172a',
+          strokeWidth: 3,
+        } as Record<string, unknown>}
+      />
+
+      {/* 历史轨迹段 */}
+      {trackSegments.length > 0 && (
+        <LineLayer
+          source={trackSegments}
+          sourceType="json"
+          sourceConfig={{ coordinates: 'path' }}
+          shape="line"
+          size={1.5}
+          colorField="grade"
+          colorValues={GRADE_ORDER.map(g => GRADE_COLOR[g])}
+          zIndex={1}
+        />
+      )}
+
+      {/* 其他机构预报（淡显） */}
+      {otherForecastSegs.length > 0 && (
+        <LineLayer
+          source={otherForecastSegs}
+          sourceType="json"
+          sourceConfig={{ coordinates: 'path' }}
+          shape="line"
+          size={2}
+          colorField="agency"
+          colorValues={AGENCIES.filter(a => a !== selectedAgency).map(a => AGENCY_COLOR[a])}
+          style={{ opacity: 0.55, lineType: 'dash', dashArray: [8, 8] } as Record<string, unknown>}
+          active={{ color: '#fff' }}
+          onClick={onForecastClick}
+          zIndex={1}
+        />
+      )}
+
+      {/* 选中机构预报（高亮） */}
+      {activeForecastSegs.length > 0 && (
+        <LineLayer
+          source={activeForecastSegs}
+          sourceType="json"
+          sourceConfig={{ coordinates: 'path' }}
+          shape="line"
+          size={2.5}
+          colorField="agency"
+          colorValues={[AGENCY_COLOR[selectedAgency]]}
+          style={{ opacity: 0.95, lineType: 'dash', dashArray: [12, 8] } as Record<string, unknown>}
+          active={{ color: '#fff' }}
+          onClick={onForecastClick}
+          zIndex={2}
+        />
+      )}
+
+      {/* 预报路径点位 */}
+      {forecastPoints.length > 0 && (
+        <PointLayer
+          source={forecastPoints}
+          sourceType="json"
+          sourceConfig={{ x: 'lng', y: 'lat' }}
+          shape="circle"
+          size={3}
+          colorField="agency"
+          colorValues={AGENCIES.map(a => AGENCY_COLOR[a])}
+          style={{ opacity: 0.7, stroke: '#fff', strokeWidth: 0.5 } as Record<string, unknown>}
+          active={{ color: '#fff' }}
+          onMouseMove={onForecastPointHover}
+          onMouseLeave={onForecastPointLeave}
+          onClick={onForecastPointClick}
+          zIndex={7}
+        />
+      )}
+
+      {/* 预报路径日期标注（仅中国机构） */}
+      {(() => {
+        const chinaPoints = forecastSrc.find(f => f.tm === '中国')?.forecastpoints ?? [];
+        const dailyLabels: { lng: number; lat: number; dateLabel: string }[] = [];
+        const seenDates = new Set<string>();
+        for (const pt of chinaPoints) {
+          const timeStr = String(pt.time ?? '');
+          const datePart = timeStr.slice(0, 10);
+          if (!datePart || seenDates.has(datePart)) continue;
+          seenDates.add(datePart);
+          const lng = Number(pt.lng), lat = Number(pt.lat);
+          if (!Number.isFinite(lng) || !Number.isFinite(lat)) continue;
+          const month = datePart.slice(5, 7);
+          const day = datePart.slice(8, 10);
+          dailyLabels.push({ lng, lat, dateLabel: `${month}/${day}` });
+        }
+        if (dailyLabels.length === 0) return null;
+        return (
+          <PointLayer
+            source={{ type: 'FeatureCollection' as const, features: dailyLabels.map(d => ({
+              type: 'Feature' as const,
+              properties: { label: d.dateLabel },
+              geometry: { type: 'Point' as const, coordinates: [d.lng, d.lat] },
+            })) }}
+            sourceType="geojson"
+            shapeField="label"
+            shapeValues="text"
+            color="#22d3ee"
+            size={11}
+            zIndex={8}
+            style={{
+              textAnchor: 'center',
+              textOffset: [0, -12],
+              fontWeight: 700,
+              stroke: '#0f172a',
+              strokeWidth: 3,
+            } as Record<string, unknown>}
+          />
+        );
+      })()}
+
+      {/* 路径节点 */}
+      {nodes.length > 0 && (
+        <PointLayer
+          source={nodes}
+          sourceType="json"
+          sourceConfig={{ x: 'lng', y: 'lat' }}
+          shape="circle"
+          size={5}
+          colorField="grade"
+          colorValues={GRADE_ORDER.map(g => GRADE_COLOR[g])}
+          active={{ color: '#fff' }}
+          onMouseMove={onNodeHover}
+          onMouseLeave={onNodeLeave}
+          onClick={onNodeClick}
+          zIndex={6}
+        />
+      )}
+
+      {/* 台风眼 */}
+      {Number.isFinite(eyeLng) && Number.isFinite(eyeLat) && (
+        <Marker
+          longitude={eyeLng}
+          latitude={eyeLat}
+          anchor="center"
+          offsets={[0, 0]}
+          content={
+            <img
+              className="typhoon-eye-spin"
+              src="https://mdn.alipayobjects.com/huamei_b5qxsh/afts/img/A*WGCYS7D5AI0AAAAAQGAAAAgAerZ5AQ/original"
+              alt="台风眼"
+              style={{ width: 40, height: 40, pointerEvents: 'none' }}
+            />
+          }
+        />
+      )}
+
+      {/* 登陆点标注 */}
+      {landMarks.map((land) => {
+        const lng = Number(land.lng), lat = Number(land.lat);
+        if (!Number.isFinite(lng) || !Number.isFinite(lat)) return null;
+        return (
+          <Marker
+            key={`${land.landtime}-${land.landaddress}`}
+            longitude={lng}
+            latitude={lat}
+            anchor="bottom"
+            offsets={[0, 0]}
+            content={
+              <img
+                src="https://mdn.alipayobjects.com/huamei_b5qxsh/afts/img/A*ADaqSZdQm0wAAAAAPSAAAAgAerZ5AQ/original"
+                alt="登陆点"
+                title={land.info}
+                style={{ width: 32, height: 40, cursor: 'pointer' }}
+              />
+            }
+          />
+        );
+      })}
+
+      {/* 节点 Tooltip */}
+      <Tooltip
+        longitude={tooltip.lng}
+        latitude={tooltip.lat}
+        variant="dark"
+        visible={tooltip.visible}
+        items={[
+          { label: '时间', value: tooltip.time },
+          { label: '强度', value: tooltip.strong },
+          { label: '风力', value: tooltip.power ? `${tooltip.power}级` : '' },
+          { label: '风速', value: tooltip.speed ? `${tooltip.speed}m/s` : '' },
+          { label: '气压', value: tooltip.pressure ? `${tooltip.pressure}hPa` : '' },
+        ]}
+      />
+
+      {/* 降雨 Tooltip */}
+      <Tooltip
+        longitude={rainTooltip.lng}
+        latitude={rainTooltip.lat}
+        variant="dark"
+        visible={rainTooltip.visible}
+        items={[
+          { label: '降水等级', value: getRainLevelLabel(rainTooltip.symbol) },
+        ]}
+      />
+
+      {/* 点击 Popup */}
+      {popup && (
+        <Popup
+          longitude={popup.lng}
+          latitude={popup.lat}
+          size="standard"
+          singleton
+          closeButton
+          visible
+          onClose={onPopupClose}
+          header={{ title: popup.title, statusLabel: popup.statusLabel, statusColor: popup.statusColor }}
+          attributes={popup.attrs}
+        />
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/WeatherToolbar.tsx b/packages/site/src/app/typhoon/WeatherToolbar.tsx
new file mode 100644
index 0000000..fb178b3
--- /dev/null
+++ b/packages/site/src/app/typhoon/WeatherToolbar.tsx
@@ -0,0 +1,114 @@
+/* ================================================================
+   气象图层工具条
+   图层切换按钮组 + 时段/透明度/时间面板
+   ================================================================ */
+
+import { C } from './constants';
+
+interface WeatherToolbarProps {
+  weatherLayer: 'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind';
+  weatherOpacity: number;
+  cloudType: 0.5 | 1 | 3 | 6;
+  rainHours: 24 | 48 | 72;
+  cloudTime?: string;
+  radarTime?: string;
+  rainTime?: string;
+  isMobile: boolean;
+  onSetWeatherLayer: (v: 'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind') => void;
+  onSetWeatherOpacity: (v: number) => void;
+  onSetCloudType: (v: 0.5 | 1 | 3 | 6) => void;
+  onSetRainHours: (v: 24 | 48 | 72) => void;
+  onSetSatellite: (v: boolean) => void;
+}
+
+export default function WeatherToolbar({
+  weatherLayer, weatherOpacity, cloudType, rainHours,
+  cloudTime, radarTime, rainTime,
+  isMobile,
+  onSetWeatherLayer, onSetWeatherOpacity, onSetCloudType, onSetRainHours, onSetSatellite,
+}: WeatherToolbarProps) {
+  const wl = weatherLayer;
+  const showTime = (wl === 'cloud' && cloudTime) || (wl === 'radar' && radarTime) || (wl === 'rain' && rainTime);
+  const timeStr = wl === 'cloud' ? cloudTime : wl === 'radar' ? radarTime : wl === 'rain' ? rainTime : undefined;
+
+  return (
+    <div style={{ position: 'relative', zIndex: 1000 }}>
+      {/* 图层切换按钮组 */}
+      <div style={{
+        padding: isMobile ? '6px 10px' : '8px 14px', background: C.panel, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
+        border: `1px solid ${C.border}`, borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+        display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 12, flexWrap: 'wrap', justifyContent: isMobile ? 'center' : 'flex-start',
+      }}>
+        <div style={{ display: 'flex', gap: 2 }}>
+          {([
+            { k: 'none', label: '无', icon: 'block' },
+            { k: 'cloud', label: '云图', icon: 'cloud' },
+            { k: 'radar', label: '雷达', icon: 'radar' },
+            { k: 'rain', label: '降雨', icon: 'rainy' },
+            { k: 'wind', label: '风场', icon: 'air' },
+            { k: 'satellite', label: '卫星', icon: 'satellite_alt' },
+          ] as { k: typeof weatherLayer; label: string; icon: string }[]).map(o => {
+            const sel = weatherLayer === o.k;
+            return (
+              <button key={o.k} onClick={() => {
+                onSetWeatherLayer(o.k as typeof weatherLayer);
+                if (o.k === 'satellite') onSetSatellite(true);
+                else if (o.k !== 'none') onSetSatellite(false);
+              }} title={o.label} style={{
+                padding: '4px 8px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                fontSize: 10, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 3,
+                transition: 'all 0.15s',
+                background: sel ? 'rgba(34,211,238,0.18)' : 'transparent',
+                color: sel ? C.accent : 'rgba(148,163,184,0.7)',
+              }}>
+                <span className="material-symbols-outlined" style={{ fontSize: 13 }}>{o.icon}</span>{o.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 下方按需显示：时段 / 透明度 / 数据时间 */}
+      {wl === 'none' ? null : (
+        <div style={{ marginTop: 4, padding: '6px 12px', background: C.panel, backdropFilter: 'blur(12px)', border: `1px solid ${C.border}`, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', alignSelf: 'flex-end' }}>
+          {wl === 'cloud' && (
+            <div style={{ display: 'flex', gap: 2 }}>
+              {([0.5, 1, 3, 6] as const).map(h => (
+                <button key={h} onClick={() => onSetCloudType(h)} style={{
+                  padding: '2px 6px', borderRadius: 4, border: 'none', cursor: 'pointer', fontSize: 9, fontWeight: 500,
+                  background: cloudType === h ? 'rgba(34,211,238,0.18)' : 'transparent',
+                  color: cloudType === h ? C.accent : 'rgba(148,163,184,0.7)',
+                }}>{h < 1 ? '30m' : `${h}h`}</button>
+              ))}
+            </div>
+          )}
+          {wl === 'rain' && (
+            <div style={{ display: 'flex', gap: 2 }}>
+              {([24, 48, 72] as const).map(h => (
+                <button key={h} onClick={() => onSetRainHours(h)} style={{
+                  padding: '2px 6px', borderRadius: 4, border: 'none', cursor: 'pointer', fontSize: 9, fontWeight: 500,
+                  background: rainHours === h ? 'rgba(34,211,238,0.18)' : 'transparent',
+                  color: rainHours === h ? C.accent : 'rgba(148,163,184,0.7)',
+                }}>{h}h</button>
+              ))}
+            </div>
+          )}
+          {wl !== 'satellite' && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ fontSize: 9, color: C.muted }}>透明度</span>
+              <input type="range" min={0} max={1} step={0.05} value={weatherOpacity} onChange={e => onSetWeatherOpacity(Number(e.target.value))}
+                style={{ width: 60, accentColor: C.accent, height: 3 }} />
+              <span style={{ fontSize: 9, color: C.muted, minWidth: 24 }}>{Math.round(weatherOpacity * 100)}%</span>
+            </div>
+          )}
+          {showTime && timeStr && (
+            <div style={{ fontSize: 9, color: C.muted, display: 'flex', alignItems: 'center', gap: 3 }}>
+              <span className="material-symbols-outlined" style={{ fontSize: 11 }}>schedule</span>
+              {timeStr}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/WindFieldLayer.tsx b/packages/site/src/app/typhoon/WindFieldLayer.tsx
new file mode 100644
index 0000000..fbb9ca0
--- /dev/null
+++ b/packages/site/src/app/typhoon/WindFieldLayer.tsx
@@ -0,0 +1,288 @@
+/* ================================================================
+   Canvas 风场图层 — 粒子动画渲染全球风场
+   数据来源: https://typhoon.slt.zj.gov.cn/Api/LastWind
+   GRIB2 U/V 分量, 360×181 网格 (1° 分辨率)
+   ================================================================ */
+
+import { useEffect, useRef, useCallback } from 'react';
+import { useScene } from '@antv/aimapui';
+import type { Scene } from '@antv/l7';
+import type { WindFieldRawData } from './types';
+
+// ── 配置常量 ──────────────────────────────────────────────────
+const PARTICLE_COUNT = 12000;
+const PARTICLE_AGE_MAX = 180;
+const SPEED_SCALE = 0.35;
+const FADE_OPACITY = 0.96;
+const LINE_WIDTH = 1.0;
+
+// 风速 → 颜色映射 (HSL)
+function windSpeedToColor(speed: number): string {
+  if (speed < 5) return `hsla(220, 80%, ${55 + speed * 3}%, 0.7)`;
+  if (speed < 15) return `hsla(${190 - (speed - 5) * 3}, 85%, 55%, 0.75)`;
+  if (speed < 30) return `hsla(${140 - (speed - 15) * 4}, 90%, 50%, 0.8)`;
+  return `hsla(${Math.max(0, 80 - (speed - 30) * 3)}, 95%, 50%, 0.85)`;
+}
+
+// ── 双线性插值获取格点值 ──────────────────────────────────────
+function interpolateValue(data: number[], nx: number, ny: number, lo1: number, la1: number, dx: number, dy: number, lng: number, lat: number): number {
+  const x = (lng - lo1) / dx;
+  const y = (la1 - lat) / dy;
+
+  const x0 = Math.floor(x);
+  const y0 = Math.floor(y);
+  const x1 = x0 + 1;
+  const y1 = y0 + 1;
+
+  if (x0 < 0 || x1 >= nx || y0 < 0 || y1 >= ny) return NaN;
+
+  const fx = x - x0;
+  const fy = y - y0;
+
+  const i00 = y0 * nx + x0;
+  const i10 = y0 * nx + x1;
+  const i01 = y1 * nx + x0;
+  const i11 = y1 * nx + x1;
+
+  return (
+    data[i00] * (1 - fx) * (1 - fy) +
+    data[i10] * fx * (1 - fy) +
+    data[i01] * (1 - fx) * fy +
+    data[i11] * fx * fy
+  );
+}
+
+// ── 粒子系统 ──────────────────────────────────────────────────
+interface Particle {
+  x: number;      // 经度
+  y: number;      // 纬度
+  age: number;
+  speed: number;
+}
+
+function createParticles(count: number, bounds: { west: number; east: number; south: number; north: number }): Particle[] {
+  const particles: Particle[] = [];
+  for (let i = 0; i < count; i++) {
+    particles.push({
+      x: bounds.west + Math.random() * (bounds.east - bounds.west),
+      y: bounds.south + Math.random() * (bounds.north - bounds.south),
+      age: Math.floor(Math.random() * PARTICLE_AGE_MAX),
+      speed: 0,
+    });
+  }
+  return particles;
+}
+
+// ── 组件 Props ────────────────────────────────────────────────
+export interface WindFieldLayerProps {
+  /** 风场原始网格数据 */
+  windData: WindFieldRawData | null;
+  /** 是否可见 */
+  visible?: boolean;
+  /** 透明度 0-1 */
+  opacity?: number;
+  /** 粒子数量 */
+  particleCount?: number;
+  /** z-index */
+  zIndex?: number;
+}
+
+export default function WindFieldLayer({
+  windData,
+  visible = true,
+  opacity = 0.8,
+  particleCount = PARTICLE_COUNT,
+  zIndex = -2,
+}: WindFieldLayerProps) {
+  const scene = useScene();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const animFrameRef = useRef<number>(0);
+  const particlesRef = useRef<Particle[]>([]);
+  const prevBoundsRef = useRef<string>('');
+
+  // 创建 Canvas 覆盖层 — 挂载到 L7 地图 Canvas 容器，确保在底图同级、所有图层下方
+  useEffect(() => {
+    if (!scene) return;
+
+    // 优先使用 L7 提供的 getMapCanvasContainer 获取底图容器
+    let targetContainer: HTMLElement | null = null;
+    try {
+      targetContainer = (scene as any).getMapCanvasContainer?.() || null;
+    } catch { /* ignore */ }
+
+    if (!targetContainer) {
+      // fallback: 查找地图 canvas 容器
+      const mapContainer = (scene as any).getContainer?.() || document.querySelector('.l7-container, .amap-container');
+      if (mapContainer) {
+        targetContainer = mapContainer.querySelector('canvas')?.parentElement || mapContainer;
+      }
+    }
+    if (!targetContainer) return;
+
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = '0';
+    canvas.style.opacity = String(opacity);
+    targetContainer.appendChild(canvas);
+    canvasRef.current = canvas;
+
+    return () => {
+      cancelAnimationFrame(animFrameRef.current);
+      if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
+      canvasRef.current = null;
+    };
+  }, [scene, opacity]);
+
+  // 动画循环
+  const animate = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !windData || !visible) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // 同步 canvas 尺寸
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    // 获取当前地图范围（兼容 L7 不同版本的 getBounds 返回格式）
+    const bounds = scene.getBounds();
+    let mapBounds: { west: number; east: number; south: number; north: number };
+    if (bounds && typeof (bounds as any).getSouthWest === 'function') {
+      const sw = (bounds as any).getSouthWest();
+      const ne = (bounds as any).getNorthEast();
+      mapBounds = { west: sw.lng, east: ne.lng, south: sw.lat, north: ne.lat };
+    } else if (Array.isArray(bounds) && bounds.length >= 2) {
+      // L7 某些版本返回 [[west,south],[east,north]] 数组
+      mapBounds = { west: bounds[0][0], south: bounds[0][1], east: bounds[1][0], north: bounds[1][1] };
+    } else {
+      // fallback: 使用 scene 的 center + zoom 估算
+      const center = scene.getCenter();
+      const zoom = scene.getZoom();
+      const span = 180 / Math.pow(2, zoom - 1);
+      mapBounds = { west: center.lng - span, east: center.lng + span, south: center.lat - span, north: center.lat + span };
+    }
+    const boundsKey = `${mapBounds.west.toFixed(2)},${mapBounds.east.toFixed(2)},${mapBounds.south.toFixed(2)},${mapBounds.north.toFixed(2)}`;
+
+    // 地图范围变化时重新生成粒子
+    if (boundsKey !== prevBoundsRef.current || particlesRef.current.length === 0) {
+      prevBoundsRef.current = boundsKey;
+      particlesRef.current = createParticles(particleCount, mapBounds);
+    }
+
+    // 淡出旧轨迹（保留背景色以增强对比）
+    ctx.globalCompositeOperation = 'destination-in';
+    ctx.fillStyle = `rgba(0,0,0,${FADE_OPACITY})`;
+    ctx.fillRect(0, 0, width, height);
+
+    // 绘制半透明背景底色，增强粒子轨迹可见性
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = 'rgba(10, 15, 30, 0.6)';
+    ctx.fillRect(0, 0, width, height);
+
+    // 绘制新轨迹段
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.lineWidth = LINE_WIDTH;
+
+    const particles = particlesRef.current;
+    const { uData, vData, nx, ny, lo1, la1, dx, dy } = windData;
+
+    for (let i = 0; i < particles.length; i++) {
+      const p = particles[i];
+
+      // 获取当前位置的风速
+      const u = interpolateValue(uData, nx, ny, lo1, la1, dx, dy, p.x, p.y);
+      const v = interpolateValue(vData, nx, ny, lo1, la1, dx, dy, p.x, p.y);
+
+      if (isNaN(u) || isNaN(v)) {
+        // 超出网格范围，重置粒子
+        p.x = mapBounds.west + Math.random() * (mapBounds.east - mapBounds.west);
+        p.y = mapBounds.south + Math.random() * (mapBounds.north - mapBounds.south);
+        p.age = 0;
+        continue;
+      }
+
+      const speed = Math.sqrt(u * u + v * v);
+      p.speed = speed;
+
+      // 将经纬度转换为屏幕像素
+      const pixelStart = scene.lngLatToContainer([p.x, p.y]);
+      if (!pixelStart) continue;
+
+      // 计算下一位置 (简单欧拉积分)
+      const dt = SPEED_SCALE;
+      const nextX = p.x + u * dt * 0.01;
+      const nextY = p.y + v * dt * 0.01;
+
+      const pixelEnd = scene.lngLatToContainer([nextX, nextY]);
+      if (!pixelEnd) continue;
+
+      // 绘制线段
+      ctx.beginPath();
+      ctx.moveTo(pixelStart.x, pixelStart.y);
+      ctx.lineTo(pixelEnd.x, pixelEnd.y);
+      ctx.strokeStyle = windSpeedToColor(speed);
+      ctx.stroke();
+
+      // 更新粒子位置
+      p.x = nextX;
+      p.y = nextY;
+      p.age++;
+
+      // 老化或超出视口则重置
+      if (
+        p.age > PARTICLE_AGE_MAX ||
+        p.x < mapBounds.west || p.x > mapBounds.east ||
+        p.y < mapBounds.south || p.y > mapBounds.north
+      ) {
+        p.x = mapBounds.west + Math.random() * (mapBounds.east - mapBounds.west);
+        p.y = mapBounds.south + Math.random() * (mapBounds.north - mapBounds.south);
+        p.age = 0;
+      }
+    }
+
+    animFrameRef.current = requestAnimationFrame(animate);
+  }, [scene, visible, particleCount, windData]);
+
+  // 启动/停止动画
+  useEffect(() => {
+    if (!visible || !windData) {
+      cancelAnimationFrame(animFrameRef.current);
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const ctx = canvas.getContext('2d');
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+      }
+      return;
+    }
+    animFrameRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(animFrameRef.current);
+  }, [visible, animate, windData]);
+
+  // 监听地图移动/缩放以重绘
+  useEffect(() => {
+    if (!scene || !visible) return;
+
+    const handleViewChange = () => {
+      prevBoundsRef.current = ''; // 强制下次帧重新检查边界
+    };
+
+    scene.on('mapmove', handleViewChange);
+    scene.on('zoomchange', handleViewChange);
+    return () => {
+      scene.off('mapmove', handleViewChange);
+      scene.off('zoomchange', handleViewChange);
+    };
+  }, [scene, visible]);
+
+  return null;
+}
diff --git a/packages/site/src/app/typhoon/api.ts b/packages/site/src/app/typhoon/api.ts
new file mode 100644
index 0000000..9c2e54b
--- /dev/null
+++ b/packages/site/src/app/typhoon/api.ts
@@ -0,0 +1,201 @@
+/* ================================================================
+   台风路径地图 — 气象数据获取 API
+   数据来源：浙江水利台风 API
+   ================================================================ */
+
+import {
+  API_LEASTCLOUD, API_LASTRADAR, API_LEASTRAIN, API_LASTWIND,
+  RADAR_FULL_EXTENT, RADAR_TILES,
+} from './constants';
+import type {
+  CloudData, RadarData, RadarTileData,
+  RainData, RainFeature,
+  WindData, WindFieldRawData,
+} from './types';
+
+// ── 云图 ──────────────────────────────────────────────────────────
+export async function fetchCloud(type: 0.5 | 1 | 3 | 6 = 1): Promise<CloudData | null> {
+  try {
+    const r = await fetch(API_LEASTCLOUD(type), { cache: 'no-store' });
+    if (!r.ok) return null;
+    const j = await r.json() as Record<string, string | undefined>;
+    const typeKey = type === 0.5 ? '05' : String(type);
+    const imgKey = `cloud${typeKey}h`;
+    const timeKey = `timeStr${typeKey}h`;
+    const img = j[imgKey]?.startsWith('data:image') ? j[imgKey] : (j[imgKey] ? `data:image/png;base64,${j[imgKey]}` : undefined);
+    if (!img) return null;
+    const minLng = Number(j.minLng), minLat = Number(j.minLat), maxLng = Number(j.maxLng), maxLat = Number(j.maxLat);
+    if (![minLng, minLat, maxLng, maxLat].every(Number.isFinite)) return null;
+    return { img, time: j[timeKey] ?? '', extent: [minLng, minLat, maxLng, maxLat] };
+  } catch { return null; }
+}
+
+// ── 雷达 ──────────────────────────────────────────────────────────
+export async function fetchRadar(): Promise<RadarData | null> {
+  try {
+    const r = await fetch(API_LASTRADAR, { cache: 'no-store' });
+    if (!r.ok) return null;
+    const j = await r.json() as Record<string, string>;
+    const synTime = j.synTime ?? '';
+    const radarType = j.radarType ?? '1';
+    if (radarType === '2' && j.radar0_0?.startsWith('data:image')) {
+      return { tiles: [{ img: j.radar0_0, extent: RADAR_FULL_EXTENT }], time: synTime };
+    }
+    const tiles: RadarTileData[] = [];
+    for (const t of RADAR_TILES) {
+      const raw = j[t.key];
+      if (!raw) continue;
+      const img = raw.startsWith('data:image') ? raw : `data:image/png;base64,${raw}`;
+      tiles.push({ img, extent: t.extent });
+    }
+    if (tiles.length === 0) return null;
+    return { tiles, time: synTime };
+  } catch { return null; }
+}
+
+// ── 降雨 ──────────────────────────────────────────────────────────
+export async function fetchRain(hours: number = 24): Promise<RainData | null> {
+  try {
+    const r = await fetch(API_LEASTRAIN(hours), { cache: 'no-store' });
+    if (!r.ok) return null;
+    const j = await r.json() as { contours?: string; time?: string };
+    const raw = typeof j.contours === 'string' ? JSON.parse(j.contours) : j.contours;
+    if (!Array.isArray(raw)) return null;
+    const features: RainFeature[] = [];
+    const colorSet = new Set<string>();
+    const colorToSymbol: Record<string, string> = {};
+    for (const c of raw as Array<{ color?: string; latAndLong?: number[][]; symbol?: string }>) {
+      const ll = c.latAndLong;
+      if (!Array.isArray(ll) || ll.length < 3) continue;
+      const ring: [number, number][] = ll.map(p => {
+        const lat = Number(p[0]), lng = Number(p[1]);
+        return [Number.isFinite(lng) && Number.isFinite(lat) ? lng : NaN, lat] as [number, number];
+      }).filter(p => Number.isFinite(p[0]) && Number.isFinite(p[1])) as [number, number][];
+      if (ring.length < 3) continue;
+      if (ring[0][0] !== ring[ring.length - 1][0] || ring[0][1] !== ring[ring.length - 1][1]) ring.push(ring[0]);
+      const rgba = String(c.color ?? '120,180,255,255').split(',').map(Number);
+      const hex = `#${rgba.slice(0, 3).map(v => Math.max(0, Math.min(255, v | 0)).toString(16).padStart(2, '0')).join('')}`;
+      colorSet.add(hex);
+      const sym = String(c.symbol ?? '0');
+      colorToSymbol[hex] = sym;
+      features.push({
+        type: 'Feature',
+        properties: { color: hex, symbol: sym },
+        geometry: { type: 'Polygon', coordinates: [ring] },
+      });
+    }
+    if (features.length === 0) return null;
+    return { features, colors: [...colorSet], time: j.time ?? '', colorToSymbol };
+  } catch { return null; }
+}
+
+// ── 风场 ──────────────────────────────────────────────────────────
+function windDataToImage(uData: number[], vData: number[], nx: number, ny: number): string {
+  const canvas = document.createElement('canvas');
+  canvas.width = nx;
+  canvas.height = ny;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) return '';
+
+  const imageData = ctx.createImageData(nx, ny);
+  const pixels = imageData.data;
+
+  let uMin = Infinity, uMax = -Infinity, vMin = Infinity, vMax = -Infinity;
+  for (let i = 0; i < uData.length; i++) {
+    const u = uData[i], v = vData[i];
+    if (u < uMin) uMin = u;
+    if (u > uMax) uMax = u;
+    if (v < vMin) vMin = v;
+    if (v > vMax) vMax = v;
+  }
+
+  const uRange = uMax - uMin || 1;
+  const vRange = vMax - vMin || 1;
+
+  for (let i = 0; i < uData.length; i++) {
+    const idx = i * 4;
+    const uNorm = ((uData[i] - uMin) / uRange) * 255;
+    const vNorm = ((vData[i] - vMin) / vRange) * 255;
+    pixels[idx] = uNorm;
+    pixels[idx + 1] = vNorm;
+    pixels[idx + 2] = 0;
+    pixels[idx + 3] = 255;
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL('image/png');
+}
+
+export async function fetchWind(): Promise<WindData | null> {
+  try {
+    const res = await fetch(API_LASTWIND, { cache: 'no-store' });
+    if (!res.ok) return null;
+
+    const json = await res.json();
+    const rawWindData = json.windData;
+
+    const windArray = typeof rawWindData === 'string' ? JSON.parse(rawWindData) : rawWindData;
+    if (!Array.isArray(windArray) || windArray.length < 2) return null;
+
+    const uItem = windArray[0];
+    const vItem = windArray[1];
+    const uHeader = uItem.header;
+    const vHeader = vItem.header;
+
+    if (uHeader.nx !== vHeader.nx || uHeader.ny !== vHeader.ny) return null;
+
+    const nx = uHeader.nx;
+    const ny = uHeader.ny;
+
+    const imageUrl = windDataToImage(uItem.data, vItem.data, nx, ny);
+    if (!imageUrl) return null;
+
+    const minLng = uHeader.lo1;
+    const maxLng = uHeader.lo2;
+    const maxLat = uHeader.la1;
+    const minLat = uHeader.la2;
+
+    return {
+      imageUrl,
+      time: json.synTime ?? '',
+      extent: [minLng, minLat, maxLng, maxLat],
+      uMin: -21.32,
+      uMax: 26.8,
+      vMin: -21.57,
+      vMax: 21.42,
+    };
+  } catch { return null; }
+}
+
+/** 获取原始 U/V 网格数据，供 Canvas 粒子风场渲染 */
+export async function fetchWindFieldRaw(): Promise<WindFieldRawData | null> {
+  try {
+    const res = await fetch(API_LASTWIND, { cache: 'no-store' });
+    if (!res.ok) return null;
+
+    const json = await res.json();
+    const rawWindData = json.windData;
+    const windArray = typeof rawWindData === 'string' ? JSON.parse(rawWindData) : rawWindData;
+    if (!Array.isArray(windArray) || windArray.length < 2) return null;
+
+    const uItem = windArray.find((g: { header?: { parameterNumberName?: string } }) =>
+      g.header?.parameterNumberName?.includes('U-component'));
+    const vItem = windArray.find((g: { header?: { parameterNumberName?: string } }) =>
+      g.header?.parameterNumberName?.includes('V-component'));
+
+    if (!uItem || !vItem) return null;
+
+    const h = uItem.header;
+    return {
+      uData: uItem.data,
+      vData: vItem.data,
+      nx: h.nx,
+      ny: h.ny,
+      lo1: h.lo1,
+      la1: h.la1,
+      dx: h.dx,
+      dy: h.dy,
+      time: json.synTime ?? '',
+    };
+  } catch { return null; }
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/constants.ts b/packages/site/src/app/typhoon/constants.ts
new file mode 100644
index 0000000..adf4fbe
--- /dev/null
+++ b/packages/site/src/app/typhoon/constants.ts
@@ -0,0 +1,144 @@
+/* ================================================================
+   台风路径地图 — 常量、配色与兜底数据
+   ================================================================ */
+
+// ── API ─────────────────────────────────────────────────────────
+export const API_BASE = 'https://typhoon.slt.zj.gov.cn/Api';
+export const API_LIST = (year: number) => `${API_BASE}/TyphoonList/${year}`;
+export const API_INFO = (tfid: string) => `${API_BASE}/TyphoonInfo/${tfid}`;
+export const API_ACTIVITY = `${API_BASE}/TyhoonActivity`;
+
+// ── 气象 API ────────────────────────────────────────────────────
+export const API_LEASTCLOUD = (type: number) => `${API_BASE}/LeastCloud?type=${type}`;
+export const API_LASTRADAR = `${API_BASE}/LastRadar`;
+export const API_LEASTRAIN = (hours: number) => `${API_BASE}/LeastRain/${hours}`;
+export const API_LASTWIND = `${API_BASE}/LastWind`;
+
+// ── 等级系统 ─────────────────────────────────────────────────────
+export type GradeKey = 'TD' | 'TS' | 'STS' | 'TY' | 'STY' | 'SuperTY';
+
+export const STRENGTH_TO_KEY: Record<string, GradeKey> = {
+  热带低压: 'TD',
+  热带风暴: 'TS',
+  强热带风暴: 'STS',
+  台风: 'TY',
+  强台风: 'STY',
+  超强台风: 'SuperTY',
+};
+
+export const GRADE_ORDER: GradeKey[] = ['TD', 'TS', 'STS', 'TY', 'STY', 'SuperTY'];
+
+export const GRADE_LABEL: Record<GradeKey, string> = {
+  TD: '热带低压', TS: '热带风暴', STS: '强热带风暴',
+  TY: '台风', STY: '强台风', SuperTY: '超强台风',
+};
+
+export const GRADE_COLOR: Record<GradeKey, string> = {
+  TD: '#7dd3fc', TS: '#38bdf8', STS: '#3b82f6', TY: '#8b5cf6', STY: '#f59e0b', SuperTY: '#ef4444',
+};
+
+export const GRADE_LABELS = GRADE_ORDER.map(g => GRADE_LABEL[g]);
+export const GRADE_COLORS = GRADE_ORDER.map(g => GRADE_COLOR[g]);
+
+// ── 风圈配色 ─────────────────────────────────────────────────────
+export const WIND_LEVEL_KEY = ['7', '10', '12'] as const;
+export const WIND_LEVEL_COLOR: Record<string, string> = { '7': '#3b82f6', '10': '#f59e0b', '12': '#ef4444' };
+
+// ── 预报机构配色 ──────────────────────────────────────────────────
+export const AGENCIES = ['中国', '中国台湾', '日本', '中国香港', '美国'] as const;
+export const AGENCY_COLOR: Record<string, string> = {
+  中国: '#22d3ee', 中国台湾: '#34d399', 日本: '#f472b6', 中国香港: '#fbbf24', 美国: '#a78bfa',
+};
+
+// ── 警戒线坐标 ────────────────────────────────────────────────────
+export const WARNING_LINE_24H: [number, number][] = [
+  [127, 34], [127, 22], [119, 18], [119, 11], [113, 4.5], [105, 0],
+];
+
+export const WARNING_LINE_48H: [number, number][] = [
+  [132, 34], [132, 15], [120, 0], [105, 0],
+];
+
+export const WARNING_LINE_COLORS = {
+  '24h': '#f59e0b',
+  '48h': '#ef4444',
+};
+
+// ── 雷达瓦片 ──────────────────────────────────────────────────────
+export const RADAR_FULL_EXTENT: [number, number, number, number] =
+  [69.85883897374661, 12.17563341623027, 140.09971829625096, 54.338914427211094];
+
+export const RADAR_TILES: { key: 'radar0_0' | 'radar0_1' | 'radar1_0' | 'radar1_1'; extent: [number, number, number, number] }[] = [
+  { key: 'radar0_0', extent: [67.5, 36.580247, 104.073486, 55.7766] },
+  { key: 'radar0_1', extent: [67.5, 11.1784, 104.073486, 36.580247] },
+  { key: 'radar1_0', extent: [104.073486, 36.580247, 140.625, 55.7766] },
+  { key: 'radar1_1', extent: [104.073486, 11.1784, 140.625, 36.580247] },
+];
+
+// ── 降雨等级 ──────────────────────────────────────────────────────
+export const RAIN_LEVEL_LABEL: Record<string, string> = {
+  '0': '小雨', '2.5': '小雨', '5': '小雨',
+  '10': '中雨', '25': '大雨', '50': '暴雨',
+  '100': '大暴雨', '250': '特大暴雨',
+};
+
+export function getRainLevelLabel(symbol: string): string {
+  const num = Number(symbol);
+  if (!Number.isFinite(num)) return symbol || '—';
+  if (num >= 250) return '特大暴雨';
+  if (num >= 100) return '大暴雨';
+  if (num >= 50) return '暴雨';
+  if (num >= 25) return '大雨';
+  if (num >= 10) return '中雨';
+  return '小雨';
+}
+
+// ── 兜底数据 ──────────────────────────────────────────────────────
+import type { TyphoonInfo, TyphoonListItem } from './types';
+
+export const CURRENT_YEAR = new Date().getFullYear();
+
+export const FALLBACK_INFO: TyphoonInfo = {
+  tfid: '202609', name: '巴威', enname: 'BAVI', isactive: '1',
+  starttime: '2026-07-02 08:00:00', endtime: '2026-07-10 08:00:00',
+  centerlng: '127.60', centerlat: '20.80', warnlevel: 'white', land: [],
+  points: [
+    { time: '2026-07-04 02:00:00', lng: '149.00', lat: '14.10', strong: '超强台风', power: '17', speed: '58', pressure: '925', movespeed: '26', movedirection: '西北', radius7: '320|300|300|280', radius10: '120|110|110|100', radius12: '50|45|45|40' },
+    { time: '2026-07-06 08:00:00', lng: '144.80', lat: '15.10', strong: '超强台风', power: '17', speed: '60', pressure: '920', movespeed: '20', movedirection: '西北', radius7: '350|320|320|300', radius10: '140|120|120|110', radius12: '60|50|50|45' },
+    { time: '2026-07-08 08:00:00', lng: '137.50', lat: '16.80', strong: '超强台风', power: '17', speed: '57', pressure: '925', movespeed: '18', movedirection: '西北', radius7: '400|380|360|350', radius10: '180|150|150|140', radius12: '80|60|60|55' },
+    { time: '2026-07-09 11:00:00', lng: '129.50', lat: '18.40', strong: '超强台风', power: '16', speed: '52', pressure: '935', movespeed: '19', movedirection: '西北', radius7: '500|500|500|500', radius10: '300|280|300|280', radius12: '180|120|180|120' },
+    { time: '2026-07-10 02:00:00', lng: '128.20', lat: '19.90', strong: '强台风', power: '14', speed: '45', pressure: '945', movespeed: '20', movedirection: '西北', radius7: '500|500|450|480', radius10: '300|280|300|280', radius12: '180|120|180|120' },
+    { time: '2026-07-10 08:00:00', lng: '127.60', lat: '20.80', strong: '强台风', power: '14', speed: '42', pressure: '955', movespeed: '19', movedirection: '北西', radius7: '500|500|450|480', radius10: '300|280|300|280', radius12: '130|110|130|110',
+      forecast: [
+        { tm: '中国', forecastpoints: [
+          { time: '2026-07-10 08:00:00', lng: '127.60', lat: '20.80', strong: '强台风', power: '14', speed: '42', pressure: '955' },
+          { time: '2026-07-10 20:00:00', lng: '126.20', lat: '22.40', strong: '台风', power: '13', speed: '40', pressure: '960' },
+          { time: '2026-07-11 08:00:00', lng: '122.80', lat: '24.60', strong: '台风', power: '12', speed: '35', pressure: '970' },
+          { time: '2026-07-11 20:00:00', lng: '120.10', lat: '26.90', strong: '强热带风暴', power: '10', speed: '25', pressure: '985' },
+        ] },
+        { tm: '日本', forecastpoints: [
+          { time: '2026-07-10 08:00:00', lng: '127.60', lat: '20.80', strong: '强台风', power: '14', speed: '42', pressure: '955' },
+          { time: '2026-07-11 08:00:00', lng: '123.50', lat: '24.00', strong: '台风', power: '12', speed: '33', pressure: '975' },
+          { time: '2026-07-12 08:00:00', lng: '119.80', lat: '27.50', strong: '强热带风暴', power: '11', speed: '30', pressure: '980' },
+        ] },
+        { tm: '美国', forecastpoints: [
+          { time: '2026-07-10 08:00:00', lng: '127.60', lat: '20.80', strong: '强台风', power: '14', speed: '42', pressure: '955' },
+          { time: '2026-07-11 08:00:00', lng: '124.00', lat: '24.40', strong: '台风', power: '12', speed: '34', pressure: '972' },
+        ] },
+      ] },
+  ],
+};
+
+export const FALLBACK_LIST: TyphoonListItem[] = [
+  { tfid: '202609', name: '巴威', enname: 'BAVI', starttime: '2026-07-02 08:00:00', endtime: '2026-07-10 08:00:00', isactive: '1', warnlevel: 'white' },
+];
+
+// ── UI 颜色常量 ────────────────────────────────────────────────────
+export const C = {
+  bg: '#0f172a',
+  panel: 'rgba(15,23,42,0.82)',
+  border: 'rgba(56,189,248,0.15)',
+  fg: '#e2e8f0',
+  muted: 'rgba(148,163,184,0.7)',
+  accent: '#22d3ee',
+};
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/hooks/useTyphoonData.ts b/packages/site/src/app/typhoon/hooks/useTyphoonData.ts
new file mode 100644
index 0000000..19e251f
--- /dev/null
+++ b/packages/site/src/app/typhoon/hooks/useTyphoonData.ts
@@ -0,0 +1,228 @@
+/* ================================================================
+   台风数据获取钩子
+   管理：台风列表、活跃状态、选中台风详情、派生数据
+   ================================================================ */
+
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import type { Scene } from '@antv/l7';
+import type {
+  TyphoonListItem, TyphoonInfo, TyphoonPoint,
+  TrackSegment, TrackNode, WindPolygon, LandPoint,
+} from '../types';
+import type { GradeKey } from '../constants';
+import {
+  API_ACTIVITY, API_LIST, API_INFO,
+  FALLBACK_LIST, FALLBACK_INFO, CURRENT_YEAR,
+  AGENCIES, AGENCY_COLOR,
+} from '../constants';
+import { toTrackSegments, toNodes, toWindPolygons, toForecastSegments } from '../transform';
+
+export interface TyphoonDataState {
+  // raw data
+  list: TyphoonListItem[];
+  activeIds: string[];
+  tfid: string;
+  info: TyphoonInfo | null;
+  loading: boolean;
+  error: boolean;
+
+  // selection
+  selectedPointIdx: number;
+  selectedAgency: string;
+  pointsDetailExpanded: boolean;
+
+  // derived
+  points: TyphoonPoint[];
+  trackSegments: TrackSegment[];
+  nodes: TrackNode[];
+  currentIdx: number;
+  selectedIdx: number;
+  selectedPoint: TyphoonPoint | undefined;
+  currentPoint: TyphoonPoint | undefined;
+  windPolygons: WindPolygon[];
+
+  // forecast
+  forecastSrc: { tm: string; forecastpoints: TyphoonPoint[] }[];
+  presentAgencies: Set<string>;
+  activeForecastSegs: { path: [number, number][]; agency: string }[];
+  otherForecastSegs: { path: [number, number][]; agency: string }[];
+  forecastPoints: { lng: number; lat: number; agency: string; time: string; strong: string; speed: string; pressure: string }[];
+
+  // land
+  landMarks: LandPoint[];
+
+  // setters
+  setTfid: (v: string) => void;
+  setSelectedPointIdx: (v: number) => void;
+  setSelectedAgency: (v: string) => void;
+  setPointsDetailExpanded: (v: boolean) => void;
+
+  // scene
+  sceneRef: React.MutableRefObject<Scene | null>;
+  handleSceneReady: (scene: Scene) => () => void;
+}
+
+export function useTyphoonData(): TyphoonDataState {
+  // ── 基础状态 ──
+  const [list, setList] = useState<TyphoonListItem[]>([]);
+  const [activeIds, setActiveIds] = useState<string[]>([]);
+  const [tfid, setTfid] = useState<string>('');
+  const [info, setInfo] = useState<TyphoonInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const [selectedAgency, setSelectedAgency] = useState<string>('中国');
+  const [selectedPointIdx, setSelectedPointIdx] = useState<number>(-1);
+  const [pointsDetailExpanded, setPointsDetailExpanded] = useState(false);
+
+  const sceneRef = useRef<Scene | null>(null);
+
+  // ── 1. 拉取当年台风列表 ──
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      let active: string[] = [];
+      try {
+        const ar = await fetch(API_ACTIVITY, { cache: 'no-store' });
+        if (ar.ok) {
+          const aj = await ar.json() as TyphoonListItem[];
+          active = (Array.isArray(aj) ? aj : []).map(t => t.tfid);
+        }
+      } catch { /* ignore */ }
+      try {
+        const r = await fetch(API_LIST(CURRENT_YEAR), { cache: 'no-store' });
+        if (!r.ok) throw new Error('list');
+        const j = (await r.json()) as TyphoonListItem[];
+        if (cancelled) return;
+        const arr = Array.isArray(j) ? j : [];
+        if (arr.length === 0) throw new Error('empty');
+        setList(arr);
+        setActiveIds(active);
+        const chosen = active[0] ?? [...arr].sort((a, b) => (b.starttime || '').localeCompare(a.starttime || ''))[0]?.tfid;
+        setTfid(chosen ?? arr[0].tfid);
+        setError(false);
+      } catch {
+        if (cancelled) return;
+        setList(FALLBACK_LIST);
+        setActiveIds(['202609']);
+        setTfid('202609');
+        setError(true);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  // ── 2. 选中 tfid → 拉取详情 ──
+  useEffect(() => {
+    if (!tfid) return;
+    let cancelled = false;
+    (async () => {
+      if (tfid === FALLBACK_INFO.tfid) setInfo(FALLBACK_INFO);
+      try {
+        const r = await fetch(API_INFO(tfid), { cache: 'no-store' });
+        if (!r.ok) throw new Error('info');
+        const j = (await r.json()) as TyphoonInfo;
+        if (cancelled) return;
+        if (j && Array.isArray(j.points) && j.points.length > 0) {
+          setInfo(j);
+          setError(false);
+        } else {
+          throw new Error('empty');
+        }
+      } catch {
+        if (cancelled) return;
+        setInfo(FALLBACK_INFO);
+        setError(true);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [tfid]);
+
+  // ── 3. 派生数据 ──
+  const points = info?.points ?? [];
+  const trackSegments = useMemo(() => toTrackSegments(points), [points]);
+  const nodes = useMemo(() => toNodes(points), [points]);
+  const currentIdx = points.length - 1;
+  const selectedIdx = selectedPointIdx >= 0 && selectedPointIdx < points.length ? selectedPointIdx : currentIdx;
+  const selectedPoint = points[selectedIdx];
+  const currentPoint = points[currentIdx];
+
+  const windPolygons = useMemo(() => toWindPolygons(selectedPoint), [selectedPoint]);
+
+  const forecastSrc = useMemo(
+    () => selectedPoint?.forecast ?? currentPoint?.forecast ?? [],
+    [selectedPoint, currentPoint],
+  );
+  const presentAgencies = useMemo(() => new Set(forecastSrc.map(f => f.tm)), [forecastSrc]);
+
+  const activeForecastSegs = useMemo(() => {
+    const a = forecastSrc.find(f => f.tm === selectedAgency);
+    return toForecastSegments(a).map(s => ({ path: s.path, agency: selectedAgency }));
+  }, [forecastSrc, selectedAgency]);
+
+  const otherForecastSegs = useMemo(() => {
+    const out: { path: [number, number][]; agency: string }[] = [];
+    for (const a of forecastSrc) {
+      if (a.tm === selectedAgency) continue;
+      for (const seg of toForecastSegments(a)) out.push({ path: seg.path, agency: a.tm });
+    }
+    return out;
+  }, [forecastSrc, selectedAgency]);
+
+  const forecastPoints = useMemo(() => {
+    const pts: { lng: number; lat: number; agency: string; time: string; strong: string; speed: string; pressure: string }[] = [];
+    for (const a of forecastSrc) {
+      for (const pt of a.forecastpoints ?? []) {
+        const lng = Number(pt.lng), lat = Number(pt.lat);
+        if (Number.isFinite(lng) && Number.isFinite(lat)) {
+          pts.push({ lng, lat, agency: a.tm, time: String(pt.time ?? ''), strong: String(pt.strong ?? ''), speed: String(pt.speed ?? ''), pressure: String(pt.pressure ?? '') });
+        }
+      }
+    }
+    return pts;
+  }, [forecastSrc]);
+
+  const landMarks = useMemo(() => {
+    const lands = info?.land ?? [];
+    return lands.filter(l => {
+      const lng = Number(l.lng), lat = Number(l.lat);
+      return Number.isFinite(lng) && Number.isFinite(lat);
+    });
+  }, [info]);
+
+  // ── Scene ready ──
+  const handleSceneReady = useCallback((scene: Scene) => {
+    sceneRef.current = scene;
+    return () => {};
+  }, []);
+
+  // ── fitBounds ──
+  useEffect(() => {
+    const scene = sceneRef.current;
+    if (!scene || trackSegments.length === 0) return;
+    const coords = points.map(p => [Number(p.lng), Number(p.lat)] as [number, number]).filter(c => Number.isFinite(c[0]) && Number.isFinite(c[1]));
+    if (coords.length === 0) return;
+    const lngs = coords.map(c => c[0]), lats = coords.map(c => c[1]);
+    const pad = 4;
+    scene.fitBounds(
+      [[Math.min(...lngs) - pad, Math.min(...lats) - pad], [Math.max(...lngs) + pad, Math.max(...lats) + pad]],
+      { padding: [80, 80, 80, 80] },
+    );
+    setSelectedPointIdx(-1);
+  }, [tfid, trackSegments.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    list, activeIds, tfid, info, loading, error,
+    selectedPointIdx, selectedAgency, pointsDetailExpanded,
+    points, trackSegments, nodes,
+    currentIdx, selectedIdx, selectedPoint, currentPoint,
+    windPolygons,
+    forecastSrc, presentAgencies, activeForecastSegs, otherForecastSegs, forecastPoints,
+    landMarks,
+    setTfid, setSelectedPointIdx, setSelectedAgency, setPointsDetailExpanded,
+    sceneRef, handleSceneReady,
+  };
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/hooks/useTyphoonPopup.ts b/packages/site/src/app/typhoon/hooks/useTyphoonPopup.ts
new file mode 100644
index 0000000..efc2f8d
--- /dev/null
+++ b/packages/site/src/app/typhoon/hooks/useTyphoonPopup.ts
@@ -0,0 +1,137 @@
+/* ================================================================
+   Popup/Tooltip 交互钩子
+   管理：节点/预报 hover & click 事件、Popup/Tooltip 状态
+   ================================================================ */
+
+import { useState, useCallback, useRef } from 'react';
+import type { LayerEventPayload, PopupAttribute } from '@antv/aimapui';
+import type { TyphoonInfo, PopupData, TooltipState } from '../types';
+import { GRADE_COLOR, STRENGTH_TO_KEY, AGENCY_COLOR } from '../constants';
+
+export interface TyphoonPopupState {
+  popup: PopupData | null;
+  tooltip: TooltipState;
+
+  setPopup: (v: PopupData | null) => void;
+
+  handleNodeHover: (payload: LayerEventPayload) => void;
+  handleNodeLeave: () => void;
+  handleNodeClick: (payload: LayerEventPayload) => void;
+
+  handleForecastClick: (payload: LayerEventPayload) => void;
+  handleForecastPointHover: (payload: LayerEventPayload) => void;
+  handleForecastPointLeave: () => void;
+  handleForecastPointClick: (payload: LayerEventPayload) => void;
+}
+
+export function useTyphoonPopup(
+  deps: { info: TyphoonInfo | null; selectedAgency: string },
+): TyphoonPopupState {
+  const { info, selectedAgency } = deps;
+  const [popup, setPopup] = useState<PopupData | null>(null);
+  const [tooltip, setTooltip] = useState<TooltipState>({ visible: false, lng: 0, lat: 0, time: '', strong: '', power: '', speed: '', pressure: '' });
+  const hoverRef = useRef<{ lng: number; lat: number; time: string; strong: string; power: string; speed: string; pressure: string } | null>(null);
+
+  // ── 节点交互 ──
+  const handleNodeHover = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    if (!f) return;
+    hoverRef.current = {
+      lng: payload.lng, lat: payload.lat,
+      time: String(f.time ?? ''), strong: String(f.strong ?? ''), power: String(f.power ?? ''),
+      speed: String(f.speed ?? ''), pressure: String(f.pressure ?? ''),
+    };
+    setTooltip({ visible: true, ...hoverRef.current });
+  }, []);
+
+  const handleNodeLeave = useCallback(() => setTooltip(t => ({ ...t, visible: false })), []);
+
+  const handleNodeClick = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    if (!f) return;
+    const lng = payload.lng, lat = payload.lat;
+    const strong = String(f.strong ?? ''), power = String(f.power ?? ''), speed = String(f.speed ?? ''),
+      pressure = String(f.pressure ?? ''), time = String(f.time ?? ''),
+      movespeed = String(f.movespeed ?? ''), movedirection = String(f.movedirection ?? ''),
+      radius7 = String(f.radius7 ?? ''), radius10 = String(f.radius10 ?? ''), radius12 = String(f.radius12 ?? '');
+    const key = STRENGTH_TO_KEY[strong] ?? 'TS';
+    const formatRadius = (r: string) => {
+      if (!r || r === 'undefined') return '—';
+      const vals = r.split('|').map(Number).filter(Number.isFinite);
+      if (vals.length === 0) return '—';
+      const min = Math.min(...vals), max = Math.max(...vals);
+      return min === max ? `${min}公里` : `${min}-${max}公里`;
+    };
+    setPopup({
+      lng, lat,
+      title: info?.name ? `${info.name}(${info.enname})` : '台风',
+      statusLabel: strong,
+      statusColor: GRADE_COLOR[key],
+      attrs: [
+        { label: '时间', value: time.slice(0, 16).replace('T', ' ') || '—' },
+        { label: '中心位置', value: `${Number(lng).toFixed(2)}° / ${Number(lat).toFixed(2)}°` },
+        { label: '风速风力', value: speed && power ? `${speed}米/秒，${power}级(${strong})` : '—', valueColor: GRADE_COLOR[key] },
+        { label: '中心气压', value: pressure ? `${pressure}百帕` : '—' },
+        { label: '移速移向', value: movespeed && movedirection ? `${movespeed}公里/小时，${movedirection}` : '—' },
+        { label: '七级半径', value: formatRadius(radius7) },
+        { label: '十级半径', value: formatRadius(radius10) },
+        { label: '十二级半径', value: formatRadius(radius12) },
+      ],
+    });
+  }, [info]);
+
+  // ── 预报交互 ──
+  const handleForecastClick = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    const agencyName = String(f?.agency ?? selectedAgency);
+    setPopup({
+      lng: payload.lng, lat: payload.lat,
+      title: `${agencyName} 预报路径`, statusLabel: '预报', statusColor: AGENCY_COLOR[agencyName],
+      attrs: [
+        { label: '机构', value: agencyName },
+        { label: '路径类型', value: '预报(虚线)' },
+        { label: '经度', value: `${Number(payload.lng).toFixed(1)}°` },
+        { label: '纬度', value: `${Number(payload.lat).toFixed(1)}°` },
+      ],
+    });
+  }, [selectedAgency]);
+
+  const handleForecastPointHover = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    if (!f) return;
+    hoverRef.current = {
+      lng: payload.lng, lat: payload.lat,
+      time: String(f.time ?? ''), strong: String(f.strong ?? ''), power: '',
+      speed: String(f.speed ?? ''), pressure: String(f.pressure ?? ''),
+    };
+    setTooltip({ visible: true, ...hoverRef.current });
+  }, []);
+
+  const handleForecastPointLeave = useCallback(() => setTooltip(t => ({ ...t, visible: false })), []);
+
+  const handleForecastPointClick = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    if (!f) return;
+    const agencyName = String(f.agency ?? '');
+    const time = String(f.time ?? ''), strong = String(f.strong ?? ''),
+      speed = String(f.speed ?? ''), pressure = String(f.pressure ?? '');
+    setPopup({
+      lng: payload.lng, lat: payload.lat,
+      title: `${agencyName} 预报点`, statusLabel: strong || '预报', statusColor: AGENCY_COLOR[agencyName] ?? '#22d3ee',
+      attrs: [
+        { label: '机构', value: agencyName },
+        { label: '时间', value: time.slice(0, 16).replace('T', ' ') || '—' },
+        { label: '中心位置', value: `${Number(payload.lng).toFixed(2)}° / ${Number(payload.lat).toFixed(2)}°` },
+        { label: '风速', value: speed ? `${speed}米/秒` : '—' },
+        { label: '强度', value: strong || '—' },
+        { label: '中心气压', value: pressure ? `${pressure}百帕` : '—' },
+      ],
+    });
+  }, []);
+
+  return {
+    popup, tooltip, setPopup,
+    handleNodeHover, handleNodeLeave, handleNodeClick,
+    handleForecastClick, handleForecastPointHover, handleForecastPointLeave, handleForecastPointClick,
+  };
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/hooks/useWeatherData.ts b/packages/site/src/app/typhoon/hooks/useWeatherData.ts
new file mode 100644
index 0000000..86e9b70
--- /dev/null
+++ b/packages/site/src/app/typhoon/hooks/useWeatherData.ts
@@ -0,0 +1,95 @@
+/* ================================================================
+   气象图层数据获取钩子
+   管理：图层切换、云图/雷达/降雨状态、透明度
+   ================================================================ */
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { CloudData, RadarData, RainData, RainTooltipState, WindFieldRawData } from '../types';
+import { fetchCloud, fetchRadar, fetchRain, fetchWindFieldRaw } from '../api';
+import type { LayerEventPayload } from '@antv/aimapui';
+
+export interface WeatherDataState {
+  weatherLayer: 'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind';
+  weatherOpacity: number;
+  cloudType: 0.5 | 1 | 3 | 6;
+  rainHours: 24 | 48 | 72;
+  cloud: CloudData | null;
+  radar: RadarData | null;
+  rain: RainData | null;
+  satellite: boolean;
+  satProvider: 'gaode' | 'tianditu' | 'google';
+  satOpacity: number;
+  windField: WindFieldRawData | null;
+
+  rainTooltip: RainTooltipState;
+
+  setWeatherLayer: (v: 'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind') => void;
+  setWeatherOpacity: (v: number) => void;
+  setCloudType: (v: 0.5 | 1 | 3 | 6) => void;
+  setRainHours: (v: 24 | 48 | 72) => void;
+  setSatellite: (v: boolean) => void;
+  setSatProvider: (v: 'gaode' | 'tianditu' | 'google') => void;
+  setSatOpacity: (v: number) => void;
+
+  handleRainTooltipMove: (payload: LayerEventPayload) => void;
+  handleRainTooltipLeave: () => void;
+}
+
+export function useWeatherData(): WeatherDataState {
+  const [weatherLayer, setWeatherLayer] = useState<'none' | 'cloud' | 'radar' | 'rain' | 'satellite' | 'wind'>('none');
+  const [weatherOpacity, setWeatherOpacity] = useState(0.7);
+  const [cloudType, setCloudType] = useState<0.5 | 1 | 3 | 6>(1);
+  const [rainHours, setRainHours] = useState<24 | 48 | 72>(24);
+  const [cloud, setCloud] = useState<CloudData | null>(null);
+  const [radar, setRadar] = useState<RadarData | null>(null);
+  const [rain, setRain] = useState<RainData | null>(null);
+  const [satellite, setSatellite] = useState(false);
+  const [satProvider, setSatProvider] = useState<'gaode' | 'tianditu' | 'google'>('gaode');
+  const [satOpacity, setSatOpacity] = useState(0.8);
+  const [windField, setWindField] = useState<WindFieldRawData | null>(null);
+
+  const [rainTooltip, setRainTooltip] = useState<RainTooltipState>({ visible: false, lng: 0, lat: 0, symbol: '', color: '' });
+
+  // ── 气象图层按需拉取 ──
+  useEffect(() => {
+    if (weatherLayer === 'cloud' && !cloud) {
+      fetchCloud(cloudType).then(d => { if (d) setCloud(d); });
+    } else if (weatherLayer === 'radar' && !radar) {
+      fetchRadar().then(d => { if (d) setRadar(d); });
+    } else if (weatherLayer === 'rain' && !rain) {
+      fetchRain(rainHours).then(d => { if (d) setRain(d); });
+    } else if (weatherLayer === 'wind' && !windField) {
+      fetchWindFieldRaw().then(d => { if (d) setWindField(d); });
+    }
+  }, [weatherLayer, cloudType, rainHours, cloud, radar, rain, windField]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── 云图时段切换 ──
+  useEffect(() => { if (weatherLayer === 'cloud') setCloud(null); }, [cloudType]);
+
+  // ── 降雨时段切换 ──
+  useEffect(() => { if (weatherLayer === 'rain') setRain(null); }, [rainHours]);
+
+  const handleRainTooltipMove = useCallback((payload: LayerEventPayload) => {
+    const f = payload.feature as Record<string, unknown> | undefined;
+    const symbol = String(f?.symbol ?? '');
+    setRainTooltip({
+      visible: true,
+      lng: payload.lng, lat: payload.lat,
+      symbol,
+      color: String(f?.color ?? ''),
+    });
+  }, []);
+
+  const handleRainTooltipLeave = useCallback(() => {
+    setRainTooltip((prev) => ({ ...prev, visible: false }));
+  }, []);
+
+  return {
+    weatherLayer, weatherOpacity, cloudType, rainHours,
+    cloud, radar, rain, satellite, satProvider, satOpacity, windField,
+    rainTooltip,
+    setWeatherLayer, setWeatherOpacity, setCloudType, setRainHours,
+    setSatellite, setSatProvider, setSatOpacity,
+    handleRainTooltipMove, handleRainTooltipLeave,
+  };
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/index.ts b/packages/site/src/app/typhoon/index.ts
new file mode 100644
index 0000000..5b5c2ad
--- /dev/null
+++ b/packages/site/src/app/typhoon/index.ts
@@ -0,0 +1,8 @@
+/* ================================================================
+   台风路径地图 — 导出入口
+   保留原 import 路径兼容：import TyphoonMap from './TyphoonMap'
+   现在位于 typhoon/ 子目录，通过此文件转发
+   ================================================================ */
+
+export { default as default } from './TyphoonMap';
+export { default as TyphoonMap } from './TyphoonMap';
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/transform.ts b/packages/site/src/app/typhoon/transform.ts
new file mode 100644
index 0000000..adeee63
--- /dev/null
+++ b/packages/site/src/app/typhoon/transform.ts
@@ -0,0 +1,117 @@
+/* ================================================================
+   台风路径地图 — 数据转换工具
+   ================================================================ */
+
+import type { TyphoonPoint, ForecastAgency, TrackSegment, TrackNode, WindPolygon } from './types';
+import { STRENGTH_TO_KEY, type GradeKey } from './constants';
+
+// ── 四象限半径解析 ───────────────────────────────────────────
+export function parseRadii(s: string | undefined | null): [number, number, number, number] {
+  if (!s) return [0, 0, 0, 0];
+  const parts = s.split('|');
+  const n = (v?: string) => {
+    const num = Number(v);
+    return Number.isFinite(num) && num > 0 ? num : 0;
+  };
+  return [n(parts[0]), n(parts[1]), n(parts[2]), n(parts[3])];
+}
+
+// ── 等级 ─────────────────────────────────────────────────────
+export function pointGrade(p: TyphoonPoint): GradeKey {
+  return STRENGTH_TO_KEY[p.strong] ?? 'TS';
+}
+
+// ── 轨迹段 ───────────────────────────────────────────────────
+export function toTrackSegments(points: TyphoonPoint[]): TrackSegment[] {
+  const segs: TrackSegment[] = [];
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1], b = points[i];
+    const aLng = Number(a.lng), aLat = Number(a.lat), bLng = Number(b.lng), bLat = Number(b.lat);
+    if (![aLng, aLat, bLng, bLat].every(Number.isFinite)) continue;
+    segs.push({ path: [[aLng, aLat], [bLng, bLat]], grade: pointGrade(b) });
+  }
+  return segs;
+}
+
+// ── 路径节点 ─────────────────────────────────────────────────
+export function toNodes(points: TyphoonPoint[]): TrackNode[] {
+  return points
+    .map((p, i) => {
+      const lng = Number(p.lng), lat = Number(p.lat);
+      if (!Number.isFinite(lng) || !Number.isFinite(lat)) return null;
+      return { lng, lat, grade: pointGrade(p), time: p.time, strong: p.strong, power: p.power, speed: p.speed, pressure: p.pressure, index: i };
+    })
+    .filter(Boolean) as TrackNode[];
+}
+
+// ── 球面几何：从起点沿方位角走指定距离 ──────────────────────
+export function destinationPoint(
+  startLng: number, startLat: number, distanceKm: number, bearingDeg: number,
+): [number, number] {
+  const R = 6371;
+  const dR = distanceKm / R;
+  const lat1 = (startLat * Math.PI) / 180;
+  const lng1 = (startLng * Math.PI) / 180;
+  const bearing = (bearingDeg * Math.PI) / 180;
+  const lat2 = Math.asin(
+    Math.sin(lat1) * Math.cos(dR) +
+    Math.cos(lat1) * Math.sin(dR) * Math.cos(bearing),
+  );
+  const lng2 = lng1 + Math.atan2(
+    Math.sin(bearing) * Math.sin(dR) * Math.cos(lat1),
+    Math.cos(dR) - Math.sin(lat1) * Math.sin(lat2),
+  );
+  return [(lng2 * 180) / Math.PI, (lat2 * 180) / Math.PI];
+}
+
+// ── 四象限风圈 → GeoJSON Polygon ────────────────────────────
+export function toWindPolygons(p: TyphoonPoint | undefined): WindPolygon[] {
+  if (!p) return [];
+  const lng = Number(p.lng), lat = Number(p.lat);
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) return [];
+  const out: WindPolygon[] = [];
+  const QUADRANT_ANGLES: [number, number][] = [[0, 90], [90, 180], [180, 270], [270, 360]];
+  const buildArc = (radiusKm: number, startDeg: number, endDeg: number): [number, number][] => {
+    const points: [number, number][] = [];
+    const steps = Math.max(12, Math.round((endDeg - startDeg) / 3));
+    for (let i = 0; i <= steps; i++) {
+      const bearing = startDeg + (endDeg - startDeg) * (i / steps);
+      points.push(destinationPoint(lng, lat, radiusKm, bearing));
+    }
+    return points;
+  };
+  const pushLevel = (level: string, radii: [number, number, number, number]) => {
+    const ring: [number, number][] = [];
+    let hasAny = false;
+    for (let qi = 0; qi < 4; qi++) {
+      if (radii[qi] > 0) {
+        hasAny = true;
+        const [startDeg, endDeg] = QUADRANT_ANGLES[qi];
+        ring.push(...buildArc(radii[qi], startDeg, endDeg));
+      }
+    }
+    if (!hasAny || ring.length < 3) return;
+    if (ring[0][0] !== ring[ring.length - 1][0] || ring[0][1] !== ring[ring.length - 1][1]) {
+      ring.push(ring[0]);
+    }
+    out.push({ coordinates: [ring], level });
+  };
+  pushLevel('7', parseRadii(p.radius7));
+  pushLevel('10', parseRadii(p.radius10));
+  pushLevel('12', parseRadii(p.radius12));
+  return out;
+}
+
+// ── 预报路径段 ───────────────────────────────────────────────
+export function toForecastSegments(agency: ForecastAgency | undefined): TrackSegment[] {
+  if (!agency) return [];
+  const pts = agency.forecastpoints;
+  const segs: TrackSegment[] = [];
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1], b = pts[i];
+    const aLng = Number(a.lng), aLat = Number(a.lat), bLng = Number(b.lng), bLat = Number(b.lat);
+    if (![aLng, aLat, bLng, bLat].every(Number.isFinite)) continue;
+    segs.push({ path: [[aLng, aLat], [bLng, bLat]], grade: pointGrade(b) });
+  }
+  return segs;
+}
\ No newline at end of file
diff --git a/packages/site/src/app/typhoon/types.ts b/packages/site/src/app/typhoon/types.ts
new file mode 100644
index 0000000..fe33adf
--- /dev/null
+++ b/packages/site/src/app/typhoon/types.ts
@@ -0,0 +1,133 @@
+/* ================================================================
+   台风路径地图 — 类型定义
+   ================================================================ */
+
+import type { GradeKey } from './constants';
+import type { PopupAttribute } from '@antv/aimapui';
+
+// ── 台风数据 ─────────────────────────────────────────────────────
+export interface TyphoonPoint {
+  time: string;
+  lng: string;
+  lat: string;
+  strong: string;
+  power: string;
+  speed: string;
+  pressure: string;
+  movespeed?: string;
+  movedirection?: string;
+  radius7?: string;
+  radius10?: string;
+  radius12?: string;
+  forecast?: ForecastAgency[];
+}
+
+export interface ForecastAgency {
+  tm: string;
+  forecastpoints: TyphoonPoint[];
+}
+
+export interface LandPoint {
+  landaddress: string;
+  landtime: string;
+  lng: string;
+  lat: string;
+  info: string;
+  strong: string | null;
+}
+
+export interface TyphoonInfo {
+  tfid: string;
+  name: string;
+  enname: string;
+  isactive?: string;
+  starttime?: string;
+  endtime?: string;
+  warnlevel?: string;
+  centerlng?: string;
+  centerlat?: string;
+  points: TyphoonPoint[];
+  land?: LandPoint[];
+}
+
+export interface TyphoonListItem {
+  tfid: string;
+  name: string;
+  enname: string;
+  starttime: string;
+  endtime: string;
+  isactive: string;
+  warnlevel?: string;
+}
+
+// ── 派生数据形状 ─────────────────────────────────────────────────
+export interface TrackSegment { path: [number, number][]; grade: GradeKey; }
+export interface TrackNode { lng: number; lat: number; grade: GradeKey; time: string; strong: string; power: string; speed: string; pressure: string; index: number; }
+export interface WindPolygon { coordinates: [number, number][][]; level: string; }
+
+// ── 气象数据 ─────────────────────────────────────────────────────
+export interface CloudData { img: string; time: string; extent: [number, number, number, number]; }
+export interface RadarTileData { img: string; extent: [number, number, number, number]; }
+export interface RadarData { tiles: RadarTileData[]; time: string; }
+export interface RainFeature { type: 'Feature'; properties: { color: string; symbol: string }; geometry: { type: 'Polygon'; coordinates: [number, number][][] } }
+export interface RainData { features: RainFeature[]; colors: string[]; time: string; colorToSymbol: Record<string, string>; }
+
+export interface WindData {
+  imageUrl: string;
+  time: string;
+  extent: [number, number, number, number];
+  uMin: number; uMax: number;
+  vMin: number; vMax: number;
+}
+
+/** Canvas 粒子风场所需的原始 U/V 网格数据 */
+export interface WindFieldRawData {
+  uData: number[];
+  vData: number[];
+  nx: number;
+  ny: number;
+  lo1: number;
+  la1: number;
+  dx: number;
+  dy: number;
+  time: string;
+}
+
+export interface WindGribHeader {
+  nx: number; ny: number;
+  lo1: number; la1: number;
+  dx: number; dy: number;
+  parameterNumberName: string;
+  parameterUnit: string;
+}
+
+export interface WindGribResponse {
+  header: WindGribHeader;
+  data: number[];
+}
+
+// ── UI 状态 ──────────────────────────────────────────────────────
+export interface PopupData {
+  lng: number; lat: number;
+  title: string; statusLabel: string; statusColor: string;
+  attrs: PopupAttribute[];
+}
+
+export interface TooltipState {
+  visible: boolean;
+  lng: number;
+  lat: number;
+  time: string;
+  strong: string;
+  power: string;
+  speed: string;
+  pressure: string;
+}
+
+export interface RainTooltipState {
+  visible: boolean;
+  lng: number;
+  lat: number;
+  symbol: string;
+  color: string;
+}
\ No newline at end of file
diff --git a/packages/site/src/composite/MarkerCluster.tsx b/packages/site/src/composite/MarkerCluster.tsx
index 0fd915e..91798e4 100644
--- a/packages/site/src/composite/MarkerCluster.tsx
+++ b/packages/site/src/composite/MarkerCluster.tsx
@@ -92,9 +92,9 @@ export default function Demo33MarkerCluster() {
             // eslint-disable-next-line no-console
             console.log('点击点位:', point.properties?.name);
           }}
-          onClusterClick={(cluster: any, leaves: any[]) => {
+          onClusterClick={(cluster: any, leaves?: any[]) => {
             // eslint-disable-next-line no-console
-            console.log('点击聚合点:', leaves.length, '个要素');
+            console.log('点击聚合点:', leaves?.length ?? 0, '个要素');
           }}
         />
       </AiMap>
diff --git a/packages/site/src/composite/RouteLayer.tsx b/packages/site/src/composite/RouteLayer.tsx
index 1dcd851..368b483 100644
--- a/packages/site/src/composite/RouteLayer.tsx
+++ b/packages/site/src/composite/RouteLayer.tsx
@@ -55,10 +55,10 @@ const day1Stops = [
 ];
 
 const day2Stops = [
-  { lng: 120.0990, lat: 30.2400, name: '灵隐寺', markerVariant: 'pin' as const, markerColor: 'success' as const },
-  { lng: 120.1050, lat: 30.2450, name: '飞来峰', markerVariant: 'circle' as const, markerColor: 'warning' as const },
-  { lng: 120.1000, lat: 30.2550, name: '北高峰', markerVariant: 'dot' as const, markerColor: 'primary' as const },
-  { lng: 120.0700, lat: 30.2700, name: '西溪湿地', markerVariant: 'pin' as const, markerColor: 'error' as const },
+  { lng: 120.0990, lat: 30.2400, name: '灵隐寺' },
+  { lng: 120.1050, lat: 30.2450, name: '飞来峰' },
+  { lng: 120.1000, lat: 30.2550, name: '北高峰' },
+  { lng: 120.0700, lat: 30.2700, name: '西溪湿地' },
 ];
 
 const day3Stops = [
@@ -87,42 +87,29 @@ export default function RouteLayerDemo() {
           style: 'light',
         }}
       >
-        {/* Day 1 — 西湖环线 */}
+        {/* Day 1 — 西湖环线（point 渲染，显式指定） */}
         <RouteLayer
           path={day1Path}
           stops={day1Stops}
           color={DAY_COLORS.day1}
-          lineWidth={2}
-          glow
-          animate
-          stopSize={8}
           stopRenderer="point"
         />
 
-        {/* Day 2 — 灵隐-西溪 */}
+        {/* Day 2 — 灵隐-西溪（marker 渲染，组件默认值） */}
         <RouteLayer
           path={day2Path}
           stops={day2Stops}
           color={DAY_COLORS.day2}
-          lineWidth={2}
-          glow
-          stopSize={8}
-          endColor={DAY_COLORS.day2}
           stopRenderer="marker"
-          stopMarkerVariant="circle"
         />
 
-        {/* Day 3 — 钱塘江-滨江 */}
+        {/* Day 3 — 钱塘江-滨江（icon 渲染） */}
         <RouteLayer
+          showStopIndex={false}
           path={day3Path}
           stops={day3Stops}
           color={DAY_COLORS.day3}
-          lineWidth={2}
-          glow
-          stopSize={8}
-          endColor={DAY_COLORS.day3}
           stopRenderer="icon"
-          stopIconSize={28}
         />
 
         <ZoomControl position="bottomright" />
diff --git a/packages/site/src/docs/DocsPage.tsx b/packages/site/src/docs/DocsPage.tsx
index ff335c4..c3fe376 100644
--- a/packages/site/src/docs/DocsPage.tsx
+++ b/packages/site/src/docs/DocsPage.tsx
@@ -18,7 +18,6 @@ interface DocsPageProps {
   onToggleTheme: () => void;
   onNavigateHome: () => void;
   onNavigateDemo: () => void;
-  onNavigateDesign: () => void;
   onNavigateBlock: () => void;
   onNavigateSkill?: () => void;
   docsMap: Record<string, string>; // id → markdown content
diff --git a/packages/site/src/docs/content/composite-layers/h3-layer.md b/packages/site/src/docs/content/composite-layers/h3-layer.md
new file mode 100644
index 0000000..cdbfa09
--- /dev/null
+++ b/packages/site/src/docs/content/composite-layers/h3-layer.md
@@ -0,0 +1,180 @@
+# H3Layer
+
+H3 六边形网格图层，基于 [Uber H3](https://h3geo.org/) 空间索引系统，将 H3 cell index 转换为六边形多边形并渲染。适合已有 H3 编码数据的可视化场景（如出行 OD 分析、网格化指标展示），与 [HexagonLayer](./hexagon-layer) 不同的是，H3Layer 直接使用 H3 索引而非经纬度聚合，网格层级由 H3 分辨率决定。
+
+> **何时选择：** 数据已包含 H3 索引（如 `85440637fffffff`）、需要跨数据集对齐网格时用 H3Layer；原始数据为经纬度点、需要前端聚合时用 [HexagonLayer](./hexagon-layer)；只需展示平滑密度趋势时用 [HeatmapLayer](../layers/heatmap-layer)。
+
+## 导入
+
+```tsx
+import { H3Layer } from '@antv/aimapui'
+```
+
+## Props
+
+H3Layer 继承 [LayerSchema 公共属性](../layers/point-layer#公共属性)，此处仅列出专有属性和重定义属性。`sourceType` 已固定为 `'geojson'`（内部自动将 H3 索引转换为 GeoJSON Feature），不可更改。
+
+### 数据源
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `source` | `H3DataItem[]` | **必填** | H3 数据数组，每项须包含 H3 索引字段（字段名由 `h3Field` 指定），其余字段作为属性透传至 GeoJSON Feature |
+| `h3Field` | `string` | `'h3'` | 数据中 H3 索引字段的名称，如 `'h3_index'`、`'hex_id'` 等 |
+
+### 颜色映射
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `color` | `string` | - | 固定填充色，未设置 `colorField` 时生效 |
+| `colorField` | `string` | - | 颜色映射字段，通常为数据中的数值字段（如 `'value'`） |
+| `colorValues` | `string[]` | - | 自定义色板，如 `['#DBEAFE', '#3B82F6', '#1E3A8A']`；不传时使用 `colorScheme` 对应的内置色板 |
+| `colorScheme` | `ColorScheme` | `'sequential'` | 内置色板预设，可选 `'sequential'`、`'diverging'` 等 |
+
+### 边线配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `showStroke` | `boolean` | `true` | 是否显示六边形边线，关闭后格子间无描边 |
+| `strokeColor` | `string` | `'rgba(255,255,255,0.3)'` | 边线颜色 |
+| `strokeWidth` | `number` | `0.5` | 边线宽度（像素） |
+
+### 标签配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `showLabel` | `boolean` | `false` | 是否在六边形中心显示文字标签 |
+| `labelField` | `string` | - | 标签文字来源字段，如 `'name'`、`'value'`；`showLabel` 为 `true` 且该字段有值时才显示 |
+| `labelColor` | `string` | `'#333'` | 标签文字颜色 |
+| `labelSize` | `number` | `12` | 标签文字大小（像素） |
+
+### 交互效果
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `hoverEffect` | `boolean` | `false` | 是否启用 hover 高亮效果，开启后鼠标悬停时六边形高亮为 `#2563eb` |
+| `clickEffect` | `boolean` | `false` | 是否启用点击选中效果，开启后点击时六边形高亮为 `#1d4ed8` |
+
+### 事件
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `onClick` | `(payload: [LayerEventPayload](../layers/point-layer#layereventpayload)) => void` | 六边形点击回调，`feature.properties` 中包含原始数据字段及 `_h3Index` |
+| `onMouseMove` | `(payload: LayerEventPayload) => void` | 鼠标在六边形上移动 |
+| `onMouseEnter` | `(payload: LayerEventPayload) => void` | 鼠标进入六边形 |
+| `onMouseLeave` | `(payload: LayerEventPayload) => void` | 鼠标离开六边形 |
+
+### 公共属性（继承自 LayerSchema）
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `visible` | `boolean` | `true` | 图层可见性 |
+| `opacity` | `number` | `0.8` | 不透明度 (0~1) |
+| `blend` | `'normal' \| 'additive' \| 'subtractive' \| 'max'` | `'normal'` | 混合模式 |
+| `zIndex` | `number` | `0` | 图层层级，边线层自动 `+2`，标签层自动 `+10` |
+| `minZoom` | `number` | - | 最小可见缩放级别 |
+| `maxZoom` | `number` | - | 最大可见缩放级别 |
+| `autoFit` | `boolean` | `false` | 数据加载后是否自动适配视图范围 |
+| `active` | `boolean \| { color: string }` | - | hover 高亮配置，未设置时由 `hoverEffect` 控制 |
+| `select` | `boolean \| { color: string }` | - | 选中态配置，未设置时由 `clickEffect` 控制 |
+| `name` | `string` | - | 图层名称 |
+| `id` | `string` | 自动生成 | 图层唯一标识 |
+
+### 样式（style 对象）
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `style` | `object` | - | 多边形样式，透传给底层 PolygonLayer，可配置 `opacity` 等属性 |
+
+## 示例
+
+### 基础用法 -- H3 网格指标可视化
+
+```tsx
+import { AiMap, H3Layer } from '@antv/aimapui'
+
+// 数据包含 H3 索引和数值指标
+const h3Data = [
+  { h3: '85440637fffffff', value: 42 },
+  { h3: '85440633fffffff', value: 18 },
+  { h3: '85440631fffffff', value: 87 },
+  { h3: '8544063bfffffff', value: 55 },
+]
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [116.4, 39.9], zoom: 8 }}>
+  <H3Layer
+    source={h3Data}
+    colorField="value"
+    colorValues={['#DBEAFE', '#3B82F6', '#1E3A8A']}
+  />
+</AiMap>
+```
+
+### 自定义 h3Field 字段名
+
+数据中 H3 索引字段不是默认的 `'h3'` 时，通过 `h3Field` 指定：
+
+```tsx
+const data = [
+  { hex_id: '85440637fffffff', population: 1200 },
+  { hex_id: '85440633fffffff', population: 800 },
+]
+
+<H3Layer
+  source={data}
+  h3Field="hex_id"
+  colorField="population"
+  colorScheme="sequential"
+/>
+```
+
+### 开启边线、标签和交互
+
+```tsx
+<H3Layer
+  source={h3Data}
+  colorField="value"
+  showStroke
+  strokeColor="rgba(255,255,255,0.5)"
+  strokeWidth={1}
+  showLabel
+  labelField="value"
+  labelColor="#333"
+  labelSize={14}
+  hoverEffect
+  clickEffect
+  onClick={(payload) => {
+    console.log('H3:', payload.feature.properties._h3Index)
+    console.log('Value:', payload.feature.properties.value)
+  }}
+/>
+```
+
+### 使用内置色板
+
+不传 `colorValues` 时，使用 `colorScheme` 对应的内置色板：
+
+```tsx
+<H3Layer
+  source={h3Data}
+  colorField="value"
+  colorScheme="sequential"
+  opacity={0.9}
+/>
+```
+
+## 注意事项
+
+- H3Layer 仅接收包含 H3 索引的数据数组，不接受经纬度点数据；若原始数据为经纬度，需先使用 `h3-js` 的 `latLngToCell` 转换为 H3 索引，或使用 [HexagonLayer](./hexagon-layer) 进行前端聚合
+- 无效的 H3 索引（`isValidCell` 校验失败）会被自动过滤，不会渲染也不会报错
+- H3 网格的分辨率（粒度）由索引本身决定（0~15 级，数字越大格子越小），不同分辨率的数据可以混合渲染
+- `hoverEffect` 和 `clickEffect` 是 `active` / `select` 的便捷封装；若同时传入 `active` 和 `hoverEffect`，`active` 优先生效
+- 边线层（LineLayer）和标签层（PointLayer）的 `zIndex` 分别在基础值上 `+2` 和 `+10`，确保标签始终显示在最上层
+- 数据量较大时（超过 5 万个 H3 cell），建议关闭 `showLabel` 和 `showStroke` 以提升渲染性能
+
+## 相关组件
+
+- [HexagonLayer](./hexagon-layer) -- 经纬度点数据的六边形聚合图层，适合原始点数据的前端聚合
+- [HeatmapLayer](../layers/heatmap-layer) -- 平滑热力渐变，适合展示密度趋势
+- [BubbleLayer](./bubble-layer) -- 圆形气泡图层，适合分级统计
+- [PolygonLayer](../layers/polygon-layer) -- H3Layer 内部使用的多边形渲染图层
+- [PointLayer](../layers/point-layer) -- 基础散点/文本图层，H3Layer 内部用于标签渲染
diff --git a/packages/site/src/docs/content/composite-layers/route-layer.md b/packages/site/src/docs/content/composite-layers/route-layer.md
index 57b391c..0744db0 100644
--- a/packages/site/src/docs/content/composite-layers/route-layer.md
+++ b/packages/site/src/docs/content/composite-layers/route-layer.md
@@ -1,12 +1,13 @@
 # RouteLayer
 
-路线图组件，支持编号站点、发光路径、分段着色和流动动画。支持多种路径模式：直线、弧线、步行、骑行、驾车、公交等。
+路径地图复合图层，用于在地图上绘制带编号站点的路线。内置三种站点渲染模式（圆点 / Marker / 图标）、分段着色（路况可视化）、弧线长距离路径，以及步行 / 骑行 / 驾车 / 公交四种交通路线查询——只需传入站点列表和查询回调，组件自动完成路径规划与渲染。
+
+> **何时选择：** 需要绘制带编号途经点的路线（旅行线路、物流配送、导航轨迹等）时用 RouteLayer；只需简单连线、不需要站点标注时用 [LineLayer](../layers/line-layer)；只需 OD 弧线流向时用 [ArcFlowLayer](./arc-flow-layer)。
 
 ## 导入
 
 ```tsx
-import { RouteLayer } from '@antv/aimapui'
-import '@antv/aimapui/style.css'
+import { RouteLayer } from '@antv/aimapui';
 ```
 
 ## Props
@@ -14,43 +15,63 @@ import '@antv/aimapui/style.css'
 ### 路径与数据
 
 | 属性 | 类型 | 默认值 | 说明 |
-|------|------|-------|------|
-| `path` | `[number, number][]` | - | 路径坐标点数组 `[lng, lat]` |
-| `segments` | `RouteSegment[]` | - | 路径分段配置，每段可独立设置颜色 |
-| `stops` | `RouteStop[]` | - | 站点列表 |
-| `routeType` | `RouteType` | `'straight'` | 路径类型 |
-| `onRouteQuery` | `(params: RouteQueryParams) => Promise<RouteQueryResult>` | - | 交通路线查询回调 |
-| `onRouteResult` | `(result: RouteQueryResult) => void` | - | 路线查询完成回调 |
+|------|------|--------|------|
+| `path` | `[number, number][]` | - | 路径坐标数组 `[lng, lat]`，`straight` / `arc` 模式下必填 |
+| `segments` | [RouteSegment](#routesegment) | - | 分段路径，每段可独立设置颜色和宽度（优先级高于 `path`） |
+| `stops` | [RouteStop](#routestop) | `[]` | 途经点列表，自动补全路径首尾为起终点 |
+| `routeType` | [RouteType](#routetype--路径模式) | `'straight'` | 路径类型 |
+| `onRouteQuery` | `(params: RouteQueryParams) => Promise<RouteQueryResult>` | - | 交通路线查询回调，`routeType` 为 `walking/cycling/driving/transit` 时使用 |
+| `onRouteResult` | `(result: RouteQueryResult) => void` | - | 路线查询完成后的回调，可用于获取距离、时长等信息 |
 
 ### 路径视觉
 
 | 属性 | 类型 | 默认值 | 说明 |
-|------|------|-------|------|
+|------|------|--------|------|
 | `color` | `string` | `'#2563eb'` | 路径颜色 |
-| `lineWidth` | `number` | `4` | 路径宽度（px） |
-| `opacity` | `number` | `0.9` | 路径不透明度 |
-| `glow` | `boolean` | `true` | 发光效果 |
-| `animate` | `boolean` | `false` | 流动动画 |
-| `animateSpeed` | `number` | `1` | 动画速度 |
+| `lineWidth` | `number` | `3` | 路径宽度（px） |
+| `opacity` | `number` | `0.9` | 路径不透明度（0~1） |
 
 ### 站点视觉
 
 | 属性 | 类型 | 默认值 | 说明 |
-|------|------|-------|------|
-| `stopSize` | `number` | `14` | 站点圆点大小（px） |
+|------|------|--------|------|
+| `stopSize` | `number` | `8` | 站点圆点大小（px），仅 `stopRenderer='point'` 时生效 |
 | `stopColor` | `string` | 跟随路径色 | 中间站点颜色 |
 | `endColor` | `string` | `'#10b981'` | 终点站点颜色 |
 | `showStopIndex` | `boolean` | `true` | 是否显示站点序号 |
-| `stopRenderer` | `'point' \| 'marker' \| 'icon'` | `'point'` | 停留点渲染模式 |
-| `stopMarkerVariant` | `'pin' \| 'circle' \| 'icon' \| 'dot'` | `'circle'` | marker 模式下的默认形态 |
-| `stopIconMap` | `Record<string, string>` | - | icon 模式下的图标资源映射 |
+| `showStopName` | `boolean` | `true` | 是否显示站点名称 |
+| `stopNameColor` | `string` | `'#334155'` | 站点名称文字颜色 |
+| `stopNameSize` | `number` | `11` | 站点名称文字大小（px） |
+
+### 站点渲染模式
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `stopRenderer` | `'point' \| 'marker' \| 'icon'` | `'marker'` | 站点渲染模式：默认 `marker`（DOM Marker 编号标注），`point` 为圆点序号、`icon` 为图片图标 |
+| `stopMarkerVariant` | `MarkerVariant` | `'circle'` | `marker` 模式下的默认形态（`circle` / `dot` / `pin` / `icon`） |
+| `stopIconMap` | `Record<string, string>` | - | `icon` 模式下的图标资源映射；不传时基于站点 `icon` 字段自动生成 Maki Pin 图标 |
+| `stopIconField` | `string` | `'iconValue'` | `icon` 模式下的图标字段名 |
+| `stopIconSize` | `number` | `16` | `icon` 模式下的图标尺寸（px） |
+| `stopIconAnchor` | `IconAnchor` | `'bottom'` | `icon` 模式下的图标锚点位置 |
+
+### 交互
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `showStopPopup` | `boolean` | `false` | 点击站点时是否弹出内置 Popup |
 | `activeColor` | `string` | `'#fbbf24'` | 悬停高亮颜色 |
-| `onPathClick` | `(e: LayerEventPayload) => void` | - | 路径点击事件 |
-| `onStopClick` | `(e: LayerEventPayload) => void` | - | 站点点击事件 |
+| `onPathClick` | `(payload: LayerEventPayload) => void` | - | 路径点击事件 |
+| `onStopClick` | `(payload: LayerEventPayload) => void` | - | 站点点击事件 |
+
+### 公共属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `zIndex` | `number` | - | 图层层级 |
 
 ## RouteType — 路径模式
 
-| 值 | 说明 | 是否需要 onRouteQuery |
+| 值 | 说明 | 是否需要 `onRouteQuery` |
 |------|------|------|
 | `'straight'` | 直线连接坐标点（默认） | 否，使用 `path` |
 | `'arc'` | 弧线连接，适合长距离路线（如航线） | 否，使用 `path` |
@@ -59,76 +80,83 @@ import '@antv/aimapui/style.css'
 | `'driving'` | 驾车路线 | 是 |
 | `'transit'` | 公交路线 | 是 |
 
-## RouteQueryParams
+## Types
 
-交通路线查询时传给 `onRouteQuery` 的参数，RouteLayer 自动从 stops 的首尾提取起终点。
+### RouteStop
 
 ```typescript
-interface RouteQueryParams {
-  origin: [number, number];
-  destination: [number, number];
-  waypoints?: [number, number][];
-  routeType: 'walking' | 'cycling' | 'driving' | 'transit';
+interface RouteStop {
+  lng: number;            // 经度
+  lat: number;            // 纬度
+  name: string;           // 名称
+  index?: number;         // 序号（不传则自动递增）
+  type?: 'start' | 'end' | 'waypoint'; // 类型，不传则自动推断
+  icon?: string;          // 图标名，stopRenderer='icon' 时使用
+  markerVariant?: MarkerVariant;  // marker 模式下的自定义变体
+  markerColor?: MarkerColor;      // marker 模式下的语义颜色
 }
 ```
 
-## RouteQueryResult
-
-`onRouteQuery` 的返回值，至少返回 `path`。
+### RouteSegment
 
 ```typescript
-interface RouteQueryResult {
-  path: [number, number][];           // 必填：路径坐标
-  segments?: RouteSegment[];          // 可选：分段路径（如路况着色）
-  stops?: RouteStop[];                // 可选：补充站点（如公交换乘站）
-  info?: {
-    distance?: number;                // 距离（米）
-    duration?: number;                // 时长（秒）
-    description?: string;             // 路线描述
-  };
+interface RouteSegment {
+  coordinates: [number, number][]; // 坐标序列 [[lng, lat], ...]
+  color?: string;                  // 分段颜色（如路况着色）
+  width?: number;                  // 分段宽度
 }
 ```
 
-## RouteSegment
+### RouteQueryParams
+
+交通路线查询时组件传给 `onRouteQuery` 的参数，自动从 `stops` 的首尾提取起终点。
 
 ```typescript
-interface RouteSegment {
-  coordinates: [number, number][];
-  color?: string;
-  width?: number;
+interface RouteQueryParams {
+  origin: [number, number];        // 起点坐标
+  destination: [number, number];   // 终点坐标
+  waypoints?: [number, number][];  // 途经点坐标
+  routeType: 'walking' | 'cycling' | 'driving' | 'transit';
 }
 ```
 
-## RouteStop
+### RouteQueryResult
+
+`onRouteQuery` 的返回值，至少返回 `path`。
 
 ```typescript
-interface RouteStop {
-  lng: number;
-  lat: number;
-  name: string;
-  index?: number;
-  type?: 'start' | 'end' | 'waypoint';
-  icon?: string;
-  markerVariant?: 'pin' | 'circle' | 'icon' | 'dot';
-  markerColor?: 'primary' | 'success' | 'warning' | 'error';
+interface RouteQueryResult {
+  path: [number, number][];        // 必填：完整路径坐标
+  segments?: RouteSegment[];       // 可选：分段路径（如路况着色）
+  stops?: RouteStop[];             // 可选：补充站点（如公交换乘站）
+  info?: {
+    distance?: number;             // 距离（米）
+    duration?: number;             // 时长（秒）
+    description?: string;          // 路线描述
+  };
 }
 ```
 
 ## 示例
 
-### 基础路线图
+### 基础用法 — 带编号站点的直线路线
+
+> 默认 `stopRenderer='marker'`，途经点以 DOM Marker 编号标注，无需显式配置即可获得语义化起终点配色。
 
 ```tsx
 <AiMap autoFit map={{ basemap: 'gaode', center: [118, 36], zoom: 6 }}>
   <RouteLayer
-    path={[[116.397, 39.908], [117.200, 39.084], [121.473, 31.230]]}
+    path={[
+      [116.397, 39.908],
+      [117.200, 39.084],
+      [121.473, 31.230],
+    ]}
     stops={[
       { lng: 116.397, lat: 39.908, name: '北京' },
       { lng: 117.200, lat: 39.084, name: '天津' },
       { lng: 121.473, lat: 31.230, name: '上海' },
     ]}
     color="#3B82F6"
-    glow
     showStopIndex
   />
 </AiMap>
@@ -136,9 +164,15 @@ interface RouteStop {
 
 ### 弧线模式（航线）
 
+长距离路线使用弧线连接，视觉效果更自然。
+
 ```tsx
 <RouteLayer
-  path={[[116.4, 39.9], [121.5, 31.2], [113.3, 23.1]]}
+  path={[
+    [116.4, 39.9],
+    [121.5, 31.2],
+    [113.3, 23.1],
+  ]}
   stops={[
     { lng: 116.4, lat: 39.9, name: '北京' },
     { lng: 121.5, lat: 31.2, name: '上海' },
@@ -146,14 +180,30 @@ interface RouteStop {
   ]}
   routeType="arc"
   color="#8b5cf6"
-  glow
-  animate
+/>
+```
+
+### 分段着色（路况可视化）
+
+使用 `segments` 传入分段路径数据，每段可独立设置颜色和宽度，适合展示道路拥堵情况。
+
+```tsx
+<RouteLayer
+  segments={[
+    { coordinates: [[116.397, 39.908], [117.0, 39.5]], color: '#22c55e', width: 4 },
+    { coordinates: [[117.0, 39.5], [118.5, 36.0]], color: '#f59e0b', width: 4 },
+    { coordinates: [[118.5, 36.0], [121.473, 31.230]], color: '#ef4444', width: 4 },
+  ]}
+  stops={[
+    { lng: 116.397, lat: 39.908, name: '北京' },
+    { lng: 121.473, lat: 31.230, name: '上海' },
+  ]}
 />
 ```
 
 ### 驾车路线查询
 
-通过 `onRouteQuery` 回调对接外部路径规划 API（如高德、MapNova），RouteLayer 自动从 stops 提取起终点调用回调。
+通过 `onRouteQuery` 回调对接外部路径规划 API（如高德、MapNova），组件自动从 `stops` 提取起终点并调用回调获取路径。
 
 ```tsx
 <RouteLayer
@@ -164,7 +214,9 @@ interface RouteStop {
   ]}
   routeType="driving"
   onRouteQuery={async ({ origin, destination, waypoints, routeType }) => {
-    const res = await fetch(`/api/route?type=${routeType}&origin=${origin}&dest=${destination}`);
+    const res = await fetch(
+      `/api/route?type=${routeType}&origin=${origin}&dest=${destination}`
+    );
     const data = await res.json();
     return {
       path: data.coordinates,
@@ -175,8 +227,6 @@ interface RouteStop {
     console.log(`距离: ${result.info?.distance}m, 时长: ${result.info?.duration}s`);
   }}
   color="#10b981"
-  glow
-  animate
 />
 ```
 
@@ -195,7 +245,7 @@ interface RouteStop {
     const result = await queryTransitRoute(params);
     return {
       path: result.path,
-      stops: result.transferStops,  // 换乘站自动合并
+      stops: result.transferStops,
       info: result.info,
     };
   }}
@@ -203,10 +253,57 @@ interface RouteStop {
 />
 ```
 
+### Marker 模式（默认）
+
+`marker` 为默认渲染模式，使用 DOM Marker 渲染站点，支持 `circle`、`dot`、`pin`、`icon` 等变体；以下示例显式切换变体。
+
+```tsx
+<RouteLayer
+  path={pathCoords}
+  stops={stops}
+  stopRenderer="marker"
+  stopMarkerVariant="circle"
+  color="#2563eb"
+  showStopPopup
+/>
+```
+
+### Icon 图标模式
+
+使用图片图标渲染站点，不传 `stopIconMap` 时自动生成 Maki Pin 图标。
+
+```tsx
+<RouteLayer
+  path={pathCoords}
+  stops={[
+    { lng: 116.397, lat: 39.908, name: '北京', icon: 'airport' },
+    { lng: 121.473, lat: 31.230, name: '上海', icon: 'building' },
+    { lng: 113.264, lat: 23.129, name: '广州', icon: 'park' },
+  ]}
+  stopRenderer="icon"
+  stopIconSize={20}
+  stopIconAnchor="bottom"
+  color="#8b5cf6"
+/>
+```
+
 ## 注意事项
 
-> `routeType` 为 `walking/cycling/driving/transit` 时，`path` 由回调返回，不需要手动传入；仅需传入 `stops` 标注起终点和途经点。
->
-> `glow` 会在路径下方叠加发光效果，使路线在深色底图上更醒目。
->
-> `showStopIndex` 为 `true` 时，`point` 模式在站点中心绘制编号；`marker/icon` 模式以标签方式补充显示。
+> 💡 **停留点默认 `stopRenderer='marker'`**（DOM Marker 编号标注）。如需纯 L7 圆点性能模式可显式设 `stopRenderer='point'`，需要图片图标时设 `stopRenderer='icon'`。
+
+> 💡 `routeType` 为 `walking/cycling/driving/transit` 时，路径由 `onRouteQuery` 回调返回，不需要手动传入 `path`；仅需传入 `stops` 标注起终点和途经点。
+
+> 💡 `stops` 列表可以不包含路径的首尾坐标，组件会自动将路径起终点补充为「起点」和「终点」站点。
+
+> 💡 `showStopIndex` 为 `true` 时，`point` 模式在站点圆心绘制编号；`marker` 和 `icon` 模式以标签方式补充显示。
+
+> ⚠️ `segments` 优先级高于 `path`——当两者同时传入时，使用 `segments` 渲染路径并支持分段着色。
+
+> ⚠️ `icon` 模式下如不传 `stopIconMap`，组件会基于站点的 `icon` 字段自动生成 Maki Pin 图标，无需手动准备图标资源。
+
+## 相关组件
+
+- [LineLayer](../layers/line-layer) — 基础线图层，适合不需要站点标注的简单连线
+- [ArcFlowLayer](./arc-flow-layer) — OD 弧线流向图层，适合城市间流量可视化
+- [PointLayer](../layers/point-layer) — 基础点图层
+- [Marker](../interaction/marker) — DOM Marker 组件，RouteLayer 的 `marker` 模式底层基于此实现
diff --git a/packages/site/src/docs/content/container/aimap.md b/packages/site/src/docs/content/container/aimap.md
index 6e25b4e..c2ec829 100644
--- a/packages/site/src/docs/content/container/aimap.md
+++ b/packages/site/src/docs/content/container/aimap.md
@@ -175,7 +175,7 @@ const cities = [
 当项目已安装 L7 底图引擎包，或需要跳过动态 import（SSR、微前端等场景）时，可通过 `engine` 直接传入引擎构造函数：
 
 ```tsx
-import { GaodeMap } from '@antv/l7-maps/gaode';
+import { GaodeMap } from '@antv/l7';
 import { AiMap, PointLayer, ZoomControl } from '@antv/aimapui';
 
 <AiMap
diff --git a/packages/site/src/docs/content/controls/annotation-control.md b/packages/site/src/docs/content/controls/annotation-control.md
new file mode 100644
index 0000000..069ff6f
--- /dev/null
+++ b/packages/site/src/docs/content/controls/annotation-control.md
@@ -0,0 +1,214 @@
+# AnnotationControl
+
+地图标注控件，支持交互式标注地图元素，提供标记、高亮、文本、便签、链接、图片、视频共 7 种标注工具。
+
+> 仅需简单点位展示时考虑 Marker；需要只读展示矢量数据时使用 PointLayer / LineLayer / PolygonLayer；需要在地图上自由标注、添加多媒体备注时使用本控件。
+
+## 导入
+
+```tsx
+import { AnnotationControl } from '@antv/aimapui';
+import type { AnnotationControlHandle, AnnotationControlProps, AnnotationMode } from '@antv/aimapui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| position | `ControlPosition` | `'topright'` | 工具栏在地图中的位置 |
+| defaultFeatures | `AnnotationFeature[]` | `[]` | 默认标注数据（非受控模式） |
+| features | `AnnotationFeature[]` | - | 标注数据（受控模式，传入后进入受控状态） |
+| tools | `AnnotationToolMode[]` | 全部工具 | 工具栏中展示的工具列表 |
+| styles | `AnnotationStyleConfig` | - | 标注样式配置 |
+| onUpload | `(file: File) => Promise<string>` | - | 图片 / 视频文件上传回调，返回资源 URL |
+| className | `string` | - | 控件容器的自定义类名 |
+| style | `React.CSSProperties` | - | 控件容器的自定义样式 |
+| onAnnotationCreate | `(feature: AnnotationFeature) => void` | - | 标注创建完成时触发 |
+| onAnnotationUpdate | `(feature: AnnotationFeature) => void` | - | 标注更新时触发 |
+| onAnnotationDelete | `(feature: AnnotationFeature) => void` | - | 标注删除时触发 |
+| onAnnotationSelect | `(feature: AnnotationFeature \| null) => void` | - | 选中 / 取消选中标注时触发 |
+| onModeChange | `(mode: AnnotationMode) => void` | - | 当前工具模式切换时触发 |
+| onChange | `(features: AnnotationFeature[]) => void` | - | 标注数据变化时触发 |
+
+### AnnotationMode
+
+标注模式，决定当前激活的工具。
+
+```ts
+type AnnotationMode =
+  | 'select'      // 选择模式（默认）
+  | 'marker'      // 标记
+  | 'highlighter' // 高亮笔
+  | 'text'        // 文本
+  | 'note'        // 便签
+  | 'link'        // 链接
+  | 'image'       // 图片
+  | 'video'       // 视频
+  | 'none';       // 无工具
+```
+
+### AnnotationToolMode
+
+工具栏中可选的工具模式，不包含 `select` 和 `none`。
+
+```ts
+type AnnotationToolMode = 'marker' | 'highlighter' | 'text' | 'note' | 'link' | 'image' | 'video';
+```
+
+### AnnotationFeature
+
+标注要素，基于 GeoJSON Feature 扩展，`properties` 中包含 `annotationType` 字段用于区分标注类型。
+
+```ts
+interface AnnotationFeature extends GeoJSON.Feature {
+  id: string;
+  properties: AnnotationProperties;
+}
+```
+
+### AnnotationProperties
+
+标注属性联合类型，根据 `annotationType` 区分。
+
+| annotationType | 属性类型 | 说明 |
+|----------------|----------|------|
+| `marker` | `MarkerAnnotationProperties` | 点位标记，包含坐标与样式 |
+| `highlighter` | `HighlighterAnnotationProperties` | 高亮笔，包含自由绘制的坐标串、颜色、线宽、透明度 |
+| `text` | `TextAnnotationProperties` | 文本标注，包含内容、字号、颜色 |
+| `note` | `NoteAnnotationProperties` | 便签，包含标题、正文、颜色 |
+| `link` | `LinkAnnotationProperties` | 链接，包含 URL、描述文本 |
+| `image` | `ImageAnnotationProperties` | 图片，包含图片 URL、尺寸 |
+| `video` | `VideoAnnotationProperties` | 视频，包含视频 URL、尺寸 |
+
+### AnnotationControlHandle
+
+通过 `ref` 获取的组件实例，提供命令式 API。
+
+| 方法 | 类型 | 说明 |
+|------|------|------|
+| setMode | `(mode: AnnotationMode) => void` | 切换当前标注模式 |
+| addAnnotation | `(feature: AnnotationFeature) => void` | 添加一条标注 |
+| updateAnnotation | `(id: string, properties: Partial<AnnotationProperties>) => void` | 更新指定标注的属性 |
+| deleteAnnotation | `(id: string) => void` | 删除指定标注 |
+| clearAll | `() => void` | 清空所有标注 |
+| getAnnotations | `() => AnnotationFeature[]` | 获取当前所有标注数据 |
+| selectAnnotation | `(id: string) => void` | 选中指定标注 |
+
+## 示例
+
+### 基础用法
+
+最简单的用法，直接渲染控件即可使用全部 7 种标注工具。
+
+```tsx
+import { Map, AnnotationControl } from '@antv/aimapui';
+
+export default () => (
+  <Map>
+    <AnnotationControl />
+  </Map>
+);
+```
+
+### 指定工具列表
+
+通过 `tools` 属性控制工具栏中展示的工具。
+
+```tsx
+import { Map, AnnotationControl } from '@antv/aimapui';
+
+export default () => (
+  <Map>
+    <AnnotationControl tools={['marker', 'text', 'highlighter']} />
+  </Map>
+);
+```
+
+### 受控模式
+
+传入 `features` 进入受控模式，配合 `onChange` 管理标注数据。
+
+```tsx
+import { Map, AnnotationControl } from '@antv/aimapui';
+import { useState } from 'react';
+import type { AnnotationFeature } from '@antv/aimapui';
+
+export default () => {
+  const [features, setFeatures] = useState<AnnotationFeature[]>([]);
+
+  return (
+    <Map>
+      <AnnotationControl
+        features={features}
+        onChange={setFeatures}
+        onAnnotationCreate={(f) => console.log('created', f)}
+        onAnnotationDelete={(f) => console.log('deleted', f)}
+      />
+    </Map>
+  );
+};
+```
+
+### 使用 ref 命令式操作
+
+通过 `ref` 获取 `AnnotationControlHandle`，在外部触发标注操作。
+
+```tsx
+import { Map, AnnotationControl } from '@antv/aimapui';
+import { useRef } from 'react';
+import type { AnnotationControlHandle } from '@antv/aimapui';
+
+export default () => {
+  const ref = useRef<AnnotationControlHandle>(null);
+
+  return (
+    <Map>
+      <AnnotationControl ref={ref} />
+      <button onClick={() => ref.current?.setMode('marker')}>切换为标记模式</button>
+      <button onClick={() => ref.current?.clearAll()}>清空标注</button>
+    </Map>
+  );
+};
+```
+
+### 图片 / 视频上传
+
+标注类型为 `image` 或 `video` 时需要提供 `onUpload` 回调以处理文件上传。
+
+```tsx
+import { Map, AnnotationControl } from '@antv/aimapui';
+
+export default () => {
+  const handleUpload = async (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await fetch('/api/upload', { method: 'POST', body: formData });
+    const { url } = await res.json();
+    return url;
+  };
+
+  return (
+    <Map>
+      <AnnotationControl
+        tools={['marker', 'image', 'video']}
+        onUpload={handleUpload}
+      />
+    </Map>
+  );
+};
+```
+
+## 注意事项
+
+1. **受控与非受控**：传入 `features` 时进入受控模式，需通过 `onChange` 同步数据；否则使用内部状态管理，可通过 `defaultFeatures` 设置初始值。
+2. **编辑方式差异**：文本（`text`）和链接（`link`）类型直接在地图上内联编辑；其余类型（`marker`、`highlighter`、`note`、`image`、`video`）通过双击弹出编辑器。
+3. **高亮笔渲染**：`highlighter` 类型使用 HighlighterLayer 进行自由绘制渲染，性能较好，适合大面积涂抹标注。
+4. **上传回调**：使用 `image` 或 `video` 工具时，必须提供 `onUpload` 回调，否则文件无法上传。
+5. **工具栏位置**：工具栏默认显示在地图右上角（`topright`），样式面板默认显示在左上角（`topleft`），可通过 `position` 调整工具栏位置。
+
+## 相关组件
+
+- [DrawControl](./draw-control) — 矢量绘制控件，支持点、线、面、矩形、圆形等几何图形绘制
+- [Marker](../overlay/marker) — 轻量级点标记组件，适合少量固定点位展示
+- [PointLayer](../layer/point-layer) — 海量点图层，适合大规模点位数据的只读渲染
+- [Popup](../overlay/popup) — 地图气泡组件，可用于自定义标注内容的展示
diff --git a/packages/site/src/docs/content/controls/legend-control.md b/packages/site/src/docs/content/controls/legend-control.md
new file mode 100644
index 0000000..3678a7f
--- /dev/null
+++ b/packages/site/src/docs/content/controls/legend-control.md
@@ -0,0 +1,114 @@
+# LegendControl
+
+图例容器控件，将自定义图例内容放置在地图角落的毛玻璃容器中。本身不渲染任何图例，仅作为布局容器使用。
+
+> **何时选择：** 需要将 LegendCategories、LegendRamp 等图例组件固定在地图某个角落时用 LegendControl；图例已经通过其他 UI 布局（如侧边栏）展示时不需要此控件；只需展示品牌 Logo 时用 [LogoControl](./logo-control)。
+
+## 导入
+
+```tsx
+import { LegendControl } from '@antv/aimapui'
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `position` | [ControlPosition](#controlposition) | `'bottomleft'` | 控件在地图上的位置 |
+| `className` | `string` | - | 自定义 CSS 类名，用于覆盖容器样式 |
+| `style` | `React.CSSProperties` | - | 自定义行内样式 |
+| `children` | `React.ReactNode` | - | 图例内容，通常传入 LegendCategories、LegendRamp 等图例组件，也可传入任意自定义 React 节点 |
+
+### ControlPosition
+
+```typescript
+type ControlPosition =
+  | 'topleft' | 'topright'
+  | 'bottomleft' | 'bottomright'
+  | 'topcenter' | 'bottomcenter'
+  | 'lefttop' | 'leftbottom'
+  | 'righttop' | 'rightbottom'
+  | 'leftcenter' | 'rightcenter'
+```
+
+## 示例
+
+### 基础用法 — 分类图例
+
+将分类图例放在地图左下角，容器自动应用毛玻璃效果：
+
+```tsx
+import { AiMap, LegendControl, LegendCategories } from '@antv/aimapui'
+
+const categories = [
+  { label: '商业区', color: '#e6553a' },
+  { label: '住宅区', color: '#3a8ee6' },
+  { label: '工业区', color: '#f5c842' },
+  { label: '绿地', color: '#4caf50' },
+]
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [116.397, 39.908], zoom: 11 }}>
+  <LegendControl position="bottomleft">
+    <LegendCategories title="用地类型" items={categories} />
+  </LegendControl>
+</AiMap>
+```
+
+### 连续色带图例 — 温度分布
+
+搭配 LegendRamp 展示连续数值型数据的色带图例：
+
+```tsx
+import { AiMap, LegendControl, LegendRamp } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [121.473, 31.230], zoom: 8 }}>
+  <LegendControl position="bottomleft">
+    <LegendRamp
+      title="气温 (°C)"
+      min={-10}
+      max={40}
+      colors={['#313695', '#4575b4', '#fee090', '#d73027', '#a50026']}
+    />
+  </LegendControl>
+</AiMap>
+```
+
+### 自定义图例内容 — 多块组合
+
+`children` 支持任意 React 节点，可以将多个图例块组合在一起：
+
+```tsx
+import { AiMap, LegendControl, LegendCategories, LegendRamp } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [113.26, 23.13], zoom: 10 }}>
+  <LegendControl position="bottomleft" style={{ maxWidth: 220 }}>
+    <LegendCategories
+      title="POI 类型"
+      items={[
+        { label: '餐饮', color: '#e6553a' },
+        { label: '购物', color: '#3a8ee6' },
+      ]}
+    />
+    <div style={{ borderTop: '1px solid #eee', margin: '8px 0' }} />
+    <LegendRamp
+      title="人口密度"
+      min={0}
+      max={10000}
+      colors={['#f7fbff', '#08306b']}
+    />
+  </LegendControl>
+</AiMap>
+```
+
+## 注意事项
+
+- LegendControl 本身不渲染任何图例内容，只是一个带毛玻璃背景的布局容器；需要搭配具体的图例组件（LegendCategories、LegendRamp 等）或自定义内容使用
+- `children` 为 `undefined` 或 `null` 时容器仍然渲染，但内容为空，建议条件性挂载：`{showLegend && <LegendControl>...</LegendControl>}`
+- 容器默认使用 `l7-control--glass` 毛玻璃样式，在暗色和亮色底图上均有良好表现；如需完全自定义外观可通过 `className` 覆盖
+- 多个控件放在同一位置时会依次堆叠，注意与 LogoControl、ScaleControl 等控件的布局冲突
+
+## 相关组件
+
+- [LogoControl](./logo-control) — Logo 展示控件，同样放在地图角落但用于品牌标识
+- [LayerSwitchControl](./layer-switch-control) — 图层切换控件，切换图层时图例通常需要同步更新
+- [ScaleControl](./scale-control) — 比例尺控件，常与图例放在同一侧
diff --git a/packages/site/src/docs/content/controls/logo-control.md b/packages/site/src/docs/content/controls/logo-control.md
new file mode 100644
index 0000000..ee49e76
--- /dev/null
+++ b/packages/site/src/docs/content/controls/logo-control.md
@@ -0,0 +1,105 @@
+# LogoControl
+
+品牌 Logo 展示控件，在地图角落水平排列一个或多个 Logo 图片，支持点击跳转到指定链接。
+
+> **何时选择：** 需要在地图上展示项目/公司/合作方品牌标识时用 LogoControl；需要放置图例内容时用 [LegendControl](./legend-control)；需要功能性按钮（缩放、全屏等）时用对应专用控件。
+
+## 导入
+
+```tsx
+import { LogoControl } from '@antv/aimapui'
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `logos` | [LogoItem[]](#logoitem) | **必填** | Logo 列表，按数组顺序水平排列。至少传入一项 |
+| `position` | [ControlPosition](#controlposition) | `'bottomleft'` | 控件在地图上的位置 |
+| `className` | `string` | - | 自定义 CSS 类名，用于覆盖控件样式 |
+| `style` | `React.CSSProperties` | - | 自定义行内样式 |
+
+### LogoItem
+
+| 字段 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `src` | `string` | **必填** | Logo 图片 URL，支持 PNG / SVG 等浏览器可识别的格式 |
+| `alt` | `string` | `''` | 图片的 `alt` 属性，用于无障碍读屏和图片加载失败时的占位文字 |
+| `href` | `string` | - | 点击 Logo 跳转的链接地址。不传时 Logo 不可点击，仅作为展示用途 |
+| `width` | `number` | `24` | Logo 图片宽度（px），高度按比例自动缩放 |
+
+### ControlPosition
+
+```typescript
+type ControlPosition =
+  | 'topleft' | 'topright'
+  | 'bottomleft' | 'bottomright'
+  | 'topcenter' | 'bottomcenter'
+  | 'lefttop' | 'leftbottom'
+  | 'righttop' | 'rightbottom'
+  | 'leftcenter' | 'rightcenter'
+```
+
+## 示例
+
+### 基础用法 — 单 Logo 展示
+
+在地图左下角展示一个品牌 Logo，点击可跳转到官网：
+
+```tsx
+import { AiMap, LogoControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [116.397, 39.908], zoom: 10 }}>
+  <LogoControl
+    logos={[
+      { src: '/logo.png', alt: 'AntV', href: 'https://antv.antgroup.com', width: 80 },
+    ]}
+  />
+</AiMap>
+```
+
+### 多 Logo 并排 — 合作方联合展示
+
+多个合作方 Logo 水平排列，适合联合项目、多机构背书场景：
+
+```tsx
+import { AiMap, LogoControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [121.473, 31.230], zoom: 11 }}>
+  <LogoControl
+    position="bottomleft"
+    logos={[
+      { src: '/logo-antv.svg', alt: 'AntV', href: 'https://antv.antgroup.com', width: 64 },
+      { src: '/logo-university.png', alt: 'XX大学', width: 48 },
+      { src: '/logo-institute.svg', alt: 'XX研究院', href: 'https://example.org', width: 56 },
+    ]}
+  />
+</AiMap>
+```
+
+### 自定义样式 — 带背景色的 Logo 栏
+
+通过 `style` 为 Logo 区域添加背景色和内边距，使其在卫星图等复杂底图上更醒目：
+
+```tsx
+<LogoControl
+  position="bottomleft"
+  logos={[
+    { src: '/logo-white.svg', alt: '品牌名', width: 72 },
+  ]}
+  style={{ background: 'rgba(0,0,0,0.6)', padding: '6px 12px', borderRadius: 4 }}
+/>
+```
+
+## 注意事项
+
+- `logos` 为必填项，传空数组时控件不渲染任何内容
+- `href` 不传时 Logo 仅展示不可点击，不会包裹 `<a>` 标签
+- `width` 只控制宽度，高度由浏览器按图片原始比例自动计算；建议提供宽高比合理的图片以避免变形
+- 多个 Logo 水平排列，间距由控件内部样式控制；如需调整间距可通过 `className` 覆盖
+
+## 相关组件
+
+- [LegendControl](./legend-control) — 图例容器控件，同样放在地图角落但用于承载图例内容
+- [ScaleControl](./scale-control) — 比例尺控件，常与 Logo 放在同一行
+- [ResetViewControl](./reset-view-control) — 重置视图控件，常放在 Logo 附近的角落
diff --git a/packages/site/src/docs/content/controls/reset-view-control.md b/packages/site/src/docs/content/controls/reset-view-control.md
new file mode 100644
index 0000000..0492eec
--- /dev/null
+++ b/packages/site/src/docs/content/controls/reset-view-control.md
@@ -0,0 +1,103 @@
+# ResetViewControl
+
+一键重置地图到初始视图的控件，点击按钮后地图平滑回到预设的中心点、缩放级别、倾斜角和旋转角。
+
+> **何时选择：** 用户在地图上反复拖拽、缩放后需要快速回到默认视角时用 ResetViewControl；需要定位到用户当前位置时用 [GeoLocateControl](./geo-locate-control)；需要缩放操作用 [ZoomControl](./zoom-control)。
+
+## 导入
+
+```tsx
+import { ResetViewControl } from '@antv/aimapui'
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `position` | [ControlPosition](#controlposition) | `'bottomright'` | 控件在地图上的位置 |
+| `icon` | `React.ReactNode` | Material Symbols `center_focus_strong` 图标 | 按钮内容，可传文本或自定义图标组件 |
+| `title` | `string` | `'Reset view'` | 按钮的 `title` 属性（hover 提示） |
+| `initialView` | [InitialView](#initialview) | - | 重置目标视图。不传时回退到地图初始化时的 center / zoom / pitch / rotation；传入后以该值为准 |
+| `className` | `string` | - | 自定义 CSS 类名，用于覆盖控件样式 |
+| `style` | `React.CSSProperties` | - | 自定义行内样式 |
+
+### InitialView
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `center` | `[number, number]` | 目标中心点 `[lng, lat]`，不传则保持当前中心点不变 |
+| `zoom` | `number` | 目标缩放级别，不传则保持当前缩放不变 |
+| `pitch` | `number` | 目标倾斜角（度），不传则保持当前倾斜角不变 |
+| `rotation` | `number` | 目标旋转角（度），不传则保持当前旋转角不变 |
+
+### ControlPosition
+
+```typescript
+type ControlPosition =
+  | 'topleft' | 'topright'
+  | 'bottomleft' | 'bottomright'
+  | 'topcenter' | 'bottomcenter'
+  | 'lefttop' | 'leftbottom'
+  | 'righttop' | 'rightbottom'
+  | 'leftcenter' | 'rightcenter'
+```
+
+## 示例
+
+### 基础用法 — 一键回到默认视角
+
+不传 `initialView` 时，点击按钮回到地图初始化时的视图状态，适合大屏监控、数据看板等需要快速归位的场景：
+
+```tsx
+import { AiMap, ResetViewControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [116.397, 39.908], zoom: 10 }}>
+  <ResetViewControl />
+</AiMap>
+```
+
+### 指定初始视图 — 园区巡检场景
+
+为地图设置一个固定的巡检起始视角，无论用户拖到哪里，点击按钮都会回到指定的中心点和缩放级别：
+
+```tsx
+import { AiMap, ResetViewControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [120.15, 30.28], zoom: 15, pitch: 60 }}>
+  <ResetViewControl
+    position="bottomright"
+    title="回到园区俯瞰视角"
+    initialView={{
+      center: [120.15, 30.28],
+      zoom: 17,
+      pitch: 60,
+      rotation: 0,
+    }}
+  />
+</AiMap>
+```
+
+### 自定义按钮图标
+
+替换默认图标为文字或自定义 React 节点，适合品牌化定制场景：
+
+```tsx
+<ResetViewControl
+  position="bottomright"
+  icon="重置"
+  title="重置地图视图"
+/>
+```
+
+## 注意事项
+
+- 点击后通过 `scene.setCenter` / `setZoom` / `setPitch` / `setRotation` 逐一设置，地图会平滑过渡到目标视图
+- `initialView` 中未传的字段保持当前值不变，不会强制重置为零或默认值
+- 控件默认使用毛玻璃样式（`l7-control--glass`），如需覆盖可通过 `className` 自定义
+- 默认图标依赖 Material Symbols Outlined 字体，确保项目引入了该字体资源；未引入时按钮会显示为空白，此时需手动传入 `icon`
+
+## 相关组件
+
+- [ZoomControl](./zoom-control) — 缩放控件，手动调整缩放级别
+- [GeoLocateControl](./geo-locate-control) — 定位控件，回到用户当前位置而非预设视角
+- [FullscreenControl](./fullscreen-control) — 全屏切换控件，常与重置控件放在同一角落
diff --git a/packages/site/src/docs/content/controls/satellite-layer-control.md b/packages/site/src/docs/content/controls/satellite-layer-control.md
new file mode 100644
index 0000000..c323a9a
--- /dev/null
+++ b/packages/site/src/docs/content/controls/satellite-layer-control.md
@@ -0,0 +1,122 @@
+# SatelliteLayerControl
+
+卫星影像图层控制面板，点击按钮弹出 Popper 面板，支持切换卫星图源、开关显隐和调节透明度。
+
+> **何时选择：** 需要在地图上叠加卫星影像底图并允许用户控制时用 SatelliteLayerControl；只需切换标准/暗色等矢量底图主题时用 [MapThemeControl](./map-theme-control)；只需控制业务图层的显隐时用 [LayerSwitchControl](./layer-switch-control)。
+
+## 导入
+
+```tsx
+import { SatelliteLayerControl } from '@antv/aimapui'
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `position` | [ControlPosition](#controlposition) | `'topright'` | 控件在地图上的位置 |
+| `activeProvider` | [SatelliteProvider](#satelliteprovider) | `'gaode'` | 当前激活的卫星图源。切换后地图叠加的卫星瓦片来源随之改变 |
+| `visible` | `boolean` | `true` | 卫星图层是否可见，控制面板中开关的初始状态 |
+| `opacity` | `number` | `1` | 卫星图层透明度，范围 0~1。1 为全不透明，0 为全透明 |
+| `onProviderChange` | `(provider: SatelliteProvider) => void` | - | 切换卫星图源后的回调，`provider` 为新选中的图源标识 |
+| `onVisibleChange` | `(visible: boolean) => void` | - | 显隐切换回调，`visible` 为切换后的状态 |
+| `onOpacityChange` | `(opacity: number) => void` | - | 透明度变化回调，`opacity` 为新值（0~1） |
+| `providers` | [SatelliteProvider[]](#satelliteprovider) | `['gaode', 'tianditu', 'google']` | 面板中可选的卫星图源列表，按数组顺序展示。传入子集可隐藏不需要的选项 |
+| `className` | `string` | - | 自定义 CSS 类名，用于覆盖控件样式 |
+| `style` | `React.CSSProperties` | - | 自定义行内样式 |
+
+### SatelliteProvider
+
+```typescript
+type SatelliteProvider = 'gaode' | 'tianditu' | 'google'
+```
+
+| 值 | 图源 | 说明 |
+|----|------|------|
+| `'gaode'` | 高德卫星 | 国内首选，瓦片加载稳定 |
+| `'tianditu'` | 天地图卫星 | 国家地理信息公共服务平台，适合政务场景 |
+| `'google'` | Google 卫星 | 全球覆盖，海外区域清晰度更高，国内访问可能受限 |
+
+### ControlPosition
+
+```typescript
+type ControlPosition =
+  | 'topleft' | 'topright'
+  | 'bottomleft' | 'bottomright'
+  | 'topcenter' | 'bottomcenter'
+  | 'lefttop' | 'leftbottom'
+  | 'righttop' | 'rightbottom'
+  | 'leftcenter' | 'rightcenter'
+```
+
+## 示例
+
+### 基础用法 — 默认卫星图控制
+
+点击按钮弹出面板，默认提供高德/天地图/Google 三个图源切换，同时支持显隐和透明度调节：
+
+```tsx
+import { AiMap, SatelliteLayerControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [116.397, 39.908], zoom: 10 }}>
+  <SatelliteLayerControl />
+</AiMap>
+```
+
+### 限定图源 — 仅高德和天地图
+
+内网或政务场景下 Google 图源不可用，只展示国内可选图源：
+
+```tsx
+import { AiMap, SatelliteLayerControl } from '@antv/aimapui'
+
+<AiMap autoFit map={{ basemap: 'gaode', center: [121.473, 31.230], zoom: 11 }}>
+  <SatelliteLayerControl
+    providers={['gaode', 'tianditu']}
+    activeProvider="tianditu"
+    onProviderChange={(provider) => console.log('切换图源：', provider)}
+  />
+</AiMap>
+```
+
+### 受控模式 — 外部同步状态
+
+将卫星图状态提升到父组件，实现与其他 UI（如侧边栏图层列表）联动：
+
+```tsx
+import { useState } from 'react'
+import { AiMap, SatelliteLayerControl } from '@antv/aimapui'
+
+function SatelliteDemo() {
+  const [provider, setProvider] = useState('gaode')
+  const [visible, setVisible] = useState(true)
+  const [opacity, setOpacity] = useState(1)
+
+  return (
+    <AiMap autoFit map={{ basemap: 'gaode', center: [113.26, 23.13], zoom: 10 }}>
+      <SatelliteLayerControl
+        activeProvider={provider}
+        visible={visible}
+        opacity={opacity}
+        onProviderChange={setProvider}
+        onVisibleChange={setVisible}
+        onOpacityChange={setOpacity}
+      />
+    </AiMap>
+  )
+}
+```
+
+## 注意事项
+
+- 卫星图源切换会重新加载瓦片，有短暂白屏属于正常现象；`onProviderChange` 在图源实际生效后触发
+- Google 图源在国内网络环境下可能加载缓慢或失败，建议根据项目部署环境通过 `providers` 过滤可选图源
+- `opacity` 设为 0 时卫星图层全透明但仍参与渲染，如不需要卫星图应通过 `visible` 关闭以节省资源
+- 控件通常与 SatelliteLayer 组件配合使用：SatelliteLayerControl 负责交互，SatelliteLayer 负责实际的瓦片加载和渲染
+- 面板通过点击按钮弹出（Popper），点击面板外区域自动关闭
+
+## 相关组件
+
+- [MapThemeControl](./map-theme-control) — 底图主题切换，切换标准/暗色等矢量底图而非卫星影像
+- [LayerSwitchControl](./layer-switch-control) — 业务图层开关，控制业务图层而非卫星底图
+- [FullscreenControl](./fullscreen-control) — 全屏控件，全屏查看卫星图效果
diff --git a/packages/site/src/docs/content/getting-started.md b/packages/site/src/docs/content/getting-started.md
index 86ea65d..38a6693 100644
--- a/packages/site/src/docs/content/getting-started.md
+++ b/packages/site/src/docs/content/getting-started.md
@@ -12,9 +12,9 @@ AiMapUI 提供两种使用方式，按需选择：
 ### 方式一：npm 包安装（推荐）
 
 ```bash
-npm install @antv/aimapui @antv/l7 @antv/l7-maps material-symbols
+npm install @antv/aimapui @antv/l7 material-symbols
 # 或
-pnpm add @antv/aimapui @antv/l7 @antv/l7-maps material-symbols
+pnpm add @antv/aimapui @antv/l7 material-symbols
 ```
 
 安装完成后，在入口文件引入样式（图标字体已通过 CDN 内置，无需额外安装）：
@@ -70,7 +70,7 @@ npx aimapui init -y
 CLI 模式下，**仍需手动安装 L7 引擎和外设依赖**（CLI 只负责拷贝组件源码）：
 
 ```bash
-pnpm add @antv/l7 @antv/l7-maps react react-dom clsx
+pnpm add @antv/l7 react react-dom clsx
 ```
 
 #### 3. 添加组件
@@ -165,7 +165,7 @@ AiMapUI 支持两种底图加载方式：
 如果你的项目已经安装了 L7 底图引擎，或者需要跳过动态 import（如 SSR、微前端、构建工具兼容性等场景），可以通过 `engine` 直接传入地图引擎构造函数：
 
 ```tsx
-import { GaodeMap } from '@antv/l7-maps/gaode';
+import { GaodeMap } from '@antv/l7';
 
 <AiMap map={{ engine: GaodeMap, center: [116, 39], zoom: 10 }} />
 ```
diff --git a/packages/site/src/engine/TiandituMap.tsx b/packages/site/src/engine/TiandituMap.tsx
index ba6309d..7717917 100644
--- a/packages/site/src/engine/TiandituMap.tsx
+++ b/packages/site/src/engine/TiandituMap.tsx
@@ -38,7 +38,7 @@ const TIANDITU_THEME_OPTIONS: ThemeOption[] = [
 /**
  * 天地图 — 使用天地图原生引擎
  *
- * 通过 @antv/l7-maps 的 TMap（天地图引擎）直接加载天地图底图
+ * 通过 TMap（天地图引擎，由 @antv/l7 统一 re-export）直接加载天地图底图
  * 使用 MapThemeControl 支持五种底图切换：矢量底图、卫星影像、混合底图、地形底图、地形混合
  * 包含：放大缩小、定位、比例尺、主题切换
  */
diff --git a/packages/site/src/home/BlockDemoPage.tsx b/packages/site/src/home/BlockDemoPage.tsx
index d86ba7c..5a5cde1 100644
--- a/packages/site/src/home/BlockDemoPage.tsx
+++ b/packages/site/src/home/BlockDemoPage.tsx
@@ -20,7 +20,6 @@ interface BlockDemoPageProps {
   onNavigateHome: () => void;
   onNavigateDemo: () => void;
   onNavigateDocs: () => void;
-  onNavigateDesign: () => void;
   onNavigateBlock: () => void;
   onNavigateSkill?: () => void;
   markdownToHtml: (md: string) => string;
diff --git a/packages/site/src/home/BlockPage.tsx b/packages/site/src/home/BlockPage.tsx
index fdcf707..9ea6f2f 100644
--- a/packages/site/src/home/BlockPage.tsx
+++ b/packages/site/src/home/BlockPage.tsx
@@ -18,7 +18,6 @@ interface BlockPageProps {
   onNavigateHome: () => void;
   onNavigateDemo: () => void;
   onNavigateDocs: () => void;
-  onNavigateDesign: () => void;
   onNavigateBlock: () => void;
   onNavigateSkill?: () => void;
   initialDemoIndex?: number;
@@ -29,6 +28,7 @@ export default function BlockPage({ demos, theme, sourceModules, onToggleTheme,
   const isDark = theme === 'dark';
   const [current, setCurrent] = React.useState(initialDemoIndex);
   const [showPanel, setShowPanel] = React.useState(false);
+  const [previewDevice, setPreviewDevice] = React.useState<'mobile' | 'desktop'>('desktop');
 
   const handleDemoChange = (idx: number) => {
     setCurrent(idx);
@@ -111,11 +111,28 @@ export default function BlockPage({ demos, theme, sourceModules, onToggleTheme,
 
         {/* 中间内容区 */}
         <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-          {demo?.device === 'mobile' ? (
+          {/* 设备切换按钮（仅 device=both 时显示） */}
+          {demo?.device === 'both' && (
+            <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', zIndex: 10, display: 'flex', gap: 2, background: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)', borderRadius: 8, padding: 2 }}>
+              {(['desktop', 'mobile'] as const).map(d => (
+                <button key={d} onClick={() => setPreviewDevice(d)} style={{
+                  padding: '4px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 11, fontWeight: 500,
+                  display: 'flex', alignItems: 'center', gap: 4, transition: 'all 0.15s',
+                  background: previewDevice === d ? (isDark ? 'rgba(255,255,255,0.12)' : '#fff') : 'transparent',
+                  color: previewDevice === d ? c.fg : c.muted,
+                  boxShadow: previewDevice === d ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                }}>
+                  <span className="material-symbols-outlined" style={{ fontSize: 14 }}>{d === 'mobile' ? 'smartphone' : 'desktop_windows'}</span>
+                  {d === 'mobile' ? '移动端' : '桌面端'}
+                </button>
+              ))}
+            </div>
+          )}
+          {(demo?.device === 'mobile' || (demo?.device === 'both' && previewDevice === 'mobile')) ? (
             <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: c.bg }}>
               <div style={{ width: 390, height: 844, maxHeight: 'calc(100% - 40px)', borderRadius: 20, overflow: 'hidden', border: `2px solid ${c.border}`, position: 'relative' }}>
                 <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
-                  {DemoComponent && <DemoComponent />}
+                  {DemoComponent && <DemoComponent mobilePreview />}
                 </div>
               </div>
             </div>
diff --git a/packages/site/src/home/DesignPage.tsx b/packages/site/src/home/DesignPage.tsx
deleted file mode 100644
index b55893c..0000000
--- a/packages/site/src/home/DesignPage.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import React from 'react';
-import NavBar from './NavBar';
-
-function MarkdownActions({ markdown, isDark }: { markdown: string; isDark: boolean }) {
-  const [copied, setCopied] = React.useState(false);
-
-  const handleViewMarkdown = () => {
-    const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    window.open(url, '_blank');
-  };
-
-  const handleCopyForLLM = () => {
-    const doCopy = (text: string) => {
-      if (navigator.clipboard?.writeText) {
-        return navigator.clipboard.writeText(text);
-      }
-      const ta = document.createElement('textarea');
-      ta.value = text;
-      ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0';
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand('copy');
-      document.body.removeChild(ta);
-      return Promise.resolve();
-    };
-    doCopy(markdown).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  const linkStyle: React.CSSProperties = {
-    cursor: 'pointer', fontSize: 12, fontWeight: 400,
-    color: '#2563eb', background: 'none', border: 'none', padding: 0,
-    transition: 'opacity 150ms',
-  };
-
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
-      <button onClick={handleViewMarkdown} style={linkStyle} onMouseEnter={e => e.currentTarget.style.opacity = '0.7'} onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
-        以 Markdown 格式查看
-      </button>
-      <button onClick={handleCopyForLLM} style={{ ...linkStyle, color: copied ? '#16a34a' : '#2563eb' }} onMouseEnter={e => { if (!copied) e.currentTarget.style.opacity = '0.7'; }} onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
-        {copied ? '已复制' : '复制给 LLM'}
-      </button>
-    </div>
-  );
-}
-
-interface DesignDoc {
-  id: string;
-  name: string;
-  icon: string;
-  group: string;
-  content: string;
-  htmlDemo: string;
-}
-
-interface DesignPageProps {
-  docs: DesignDoc[];
-  groups: string[];
-  theme: 'light' | 'dark';
-  initialDocIndex?: number;
-  onDocChange?: (docId: string) => void;
-  onToggleTheme: () => void;
-  onNavigateHome: () => void;
-  onNavigateDemo: () => void;
-  onNavigateDocs: () => void;
-  onNavigateBlock: () => void;
-  onNavigateSkill?: () => void;
-  markdownToHtml: (md: string) => string;
-}
-
-export default function DesignPage({ docs, groups, theme, initialDocIndex = 0, onDocChange, onToggleTheme, onNavigateHome, onNavigateDemo, onNavigateDocs, onNavigateBlock, onNavigateSkill, markdownToHtml }: DesignPageProps) {
-  const isDark = theme === 'dark';
-  const [currentDoc, setCurrentDoc] = React.useState(initialDocIndex);
-  const [showSource, setShowSource] = React.useState(false);
-  const iframeRef = React.useRef<HTMLIFrameElement>(null);
-
-  // URL 变化时同步更新选中文档
-  React.useEffect(() => {
-    setCurrentDoc(initialDocIndex);
-  }, [initialDocIndex]);
-
-  // 注入 data-theme 到 srcDoc，确保首帧渲染就使用正确主题
-  const injectTheme = (html: string, dark: boolean): string => {
-    const themeAttr = dark ? 'dark' : 'light';
-    return html.replace(/<html(\s[^>]*)?>/i, `<html$1 data-theme="${themeAttr}">`);
-  };
-
-  // 同步主题到 iframe（切换主题时动态更新，避免重新加载）
-  React.useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    try {
-      const doc = iframe.contentDocument;
-      if (doc?.documentElement) {
-        doc.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-      }
-    } catch (_) { /* cross-origin guard */ }
-  }, [isDark]);
-
-  const handleSelectDoc = (index: number) => {
-    setCurrentDoc(index);
-    const doc = docs[index];
-    if (doc && onDocChange) {
-      onDocChange(doc.id);
-    }
-  };
-
-  const c = {
-    bg: isDark ? '#000000' : '#ffffff',
-    fg: isDark ? '#fafafa' : '#171717',
-    subtle: isDark ? '#111111' : '#fafafa',
-    border: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
-    secondary: isDark ? '#888888' : '#666666',
-    muted: isDark ? '#666666' : '#999999',
-    cardBg: isDark ? '#0a0a0a' : '#ffffff',
-    navBg: isDark ? 'rgba(0,0,0,0.85)' : 'rgba(255,255,255,0.85)',
-    sidebarBg: isDark ? '#0a0a0a' : '#ffffff',
-    activeItem: isDark ? 'rgba(255,255,255,0.06)' : '#fafafa',
-  };
-
-  const selectedDoc = docs[currentDoc];
-
-  return (
-    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: c.bg, fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif" }}>
-      {/* ══════ Navigation ══════ */}
-      <NavBar
-        theme={theme}
-        activePage="design"
-        onLogoClick={onNavigateHome}
-        onNavigateDemos={onNavigateDemo}
-        onNavigateDocs={onNavigateDocs}
-        onNavigateDesign={() => {}}
-        onNavigateBlock={onNavigateBlock}
-        onNavigateSkill={onNavigateSkill}
-        onToggleTheme={onToggleTheme}
-      />
-
-      {/* ══════ Content ══════ */}
-      <div style={{ flex: 1, display: 'flex', overflow: 'hidden', maxWidth: 1440, margin: '0 auto', width: '100%', padding: '0 48px' }}>
-        {/* Sidebar */}
-        <aside style={{ width: 220, minWidth: 220, flexShrink: 0, overflowY: 'auto', padding: '24px 0', userSelect: 'none' }}>
-          {groups.map((group) => {
-            const groupIcon: Record<string, string> = { '应用模板': 'widgets', '点位标注': 'location_on', '复合图层': 'bubble_chart', '交互组件': 'gesture', '控件': 'tune', '基础图层': 'layers' };
-            return (
-              <div key={group} style={{ marginBottom: 8 }}>
-                <div style={{ padding: '4px 16px 8px', fontSize: 10, fontWeight: 600, color: c.muted, letterSpacing: '0.06em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <span className="material-symbols-outlined" style={{ fontSize: 13, opacity: 0.5 }}>{groupIcon[group] || 'folder'}</span>
-                  {group}
-                </div>
-                {docs
-                  .map((doc, index) => ({ ...doc, index }))
-                  .filter((doc) => doc.group === group)
-                  .map((doc) => {
-                    const isActive = doc.index === currentDoc;
-                    return (
-                      <div
-                        key={doc.id}
-                        onClick={() => handleSelectDoc(doc.index)}
-                        style={{
-                          display: 'flex', alignItems: 'center', gap: 10,
-                          padding: '9px 16px', margin: '2px 6px', borderRadius: 6,
-                          cursor: 'pointer', fontSize: 13, fontWeight: isActive ? 500 : 400,
-                          color: isActive ? c.fg : c.secondary,
-                          background: isActive ? c.activeItem : 'transparent',
-                          transition: 'background 120ms, color 120ms',
-                        }}
-                        onMouseEnter={(e) => { if (!isActive) { e.currentTarget.style.background = c.activeItem; e.currentTarget.style.color = c.fg; } }}
-                        onMouseLeave={(e) => { if (!isActive) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = c.secondary; } }}
-                      >
-                        <span className="material-symbols-outlined" style={{ fontSize: 17, opacity: isActive ? 1 : 0.4 }}>{doc.icon}</span>
-                        <span>{doc.name}</span>
-                      </div>
-                    );
-                  })}
-              </div>
-            );
-          })}
-        </aside>
-
-        {/* Main Content */}
-        <main style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-          {/* HTML Demo 内容 */}
-          {selectedDoc ? (
-            selectedDoc.htmlDemo ? (
-              <iframe
-                ref={iframeRef}
-                srcDoc={injectTheme(selectedDoc.htmlDemo, isDark)}
-                style={{ width: '100%', height: '100%', border: 'none', background: isDark ? '#000' : '#fff' }}
-                title={`${selectedDoc.name} Demo`}
-                sandbox="allow-scripts allow-same-origin"
-              />
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: c.muted }}>
-                <span className="material-symbols-outlined" style={{ fontSize: 32, marginBottom: 12 }}>construction</span>
-                <div style={{ fontSize: 14 }}>暂无 HTML Demo</div>
-              </div>
-            )
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: c.muted }}>
-              <span className="material-symbols-outlined" style={{ fontSize: 32, marginRight: 8 }}>description</span>
-              暂无设计规范文档
-            </div>
-          )}
-
-        </main>
-
-        {/* 右侧源码切换按钮（fixed 定位在页面最右侧居中） */}
-        {selectedDoc && (
-          <button
-            onClick={() => setShowSource(!showSource)}
-            style={{
-              position: 'fixed', right: showSource ? 660 : 0, top: '50%', transform: 'translateY(-50%)',
-              zIndex: 60, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
-              width: 28, padding: '12px 0', borderRadius: '6px 0 0 6px', border: 'none',
-              background: isDark ? '#1a1a1a' : '#f0f0f0',
-              color: isDark ? '#ccc' : '#444', cursor: 'pointer',
-              transition: 'all 200ms ease',
-              boxShadow: isDark ? '-2px 0 8px rgba(0,0,0,0.3)' : '-2px 0 8px rgba(0,0,0,0.06)',
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.background = isDark ? '#333' : '#e0e0e0'; e.currentTarget.style.color = isDark ? '#fff' : '#000'; }}
-            onMouseLeave={(e) => { e.currentTarget.style.background = isDark ? '#1a1a1a' : '#f0f0f0'; e.currentTarget.style.color = isDark ? '#ccc' : '#444'; }}
-            title={showSource ? '收起源码' : '展开源码'}
-          >
-            <span className="pulse-hint" style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.05em', writingMode: 'vertical-rl' }}>查看规范定义</span>
-          </button>
-        )}
-
-        {/* 右侧 Markdown 源码面板（fixed 定位） */}
-        {showSource && selectedDoc && (
-          <div style={{ position: 'fixed', right: 0, top: 64, bottom: 0, width: 660, zIndex: 55, background: c.cardBg, borderLeft: `1px solid ${c.border}`, display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: isDark ? '-4px 0 24px rgba(0,0,0,0.4)' : '-4px 0 24px rgba(0,0,0,0.08)' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px', borderBottom: `1px solid ${c.border}` }}>
-              <span className="material-symbols-outlined" style={{ fontSize: 14, color: c.fg }}>description</span>
-              <span style={{ fontSize: 11, fontWeight: 600, color: c.fg, letterSpacing: 0.3 }}>设计规范</span>
-              <div style={{ flex: 1 }} />
-              <MarkdownActions markdown={selectedDoc.content} isDark={isDark} />
-              <button
-                onClick={() => setShowSource(false)}
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 6, border: 'none', background: 'transparent', color: c.muted, cursor: 'pointer', transition: 'all 150ms' }}
-                onMouseEnter={(e) => { e.currentTarget.style.color = c.fg; }}
-                onMouseLeave={(e) => { e.currentTarget.style.color = c.muted; }}
-              >
-                <span className="material-symbols-outlined" style={{ fontSize: 16 }}>close</span>
-              </button>
-            </div>
-            <div className="md-prose" data-theme={isDark ? 'dark' : 'light'} style={{ flex: 1, overflowY: 'auto', padding: '24px 32px' }}>
-              <style dangerouslySetInnerHTML={{ __html: `
-                .md-prose { font-size: 14px; line-height: 1.8; }
-                .md-prose[data-theme="light"] { color: #1f2328; }
-                .md-prose[data-theme="dark"] { color: #e6edf3; }
-                .md-prose h1 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
-                .md-prose h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; padding-bottom: 8px; }
-                .md-prose h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
-                .md-prose[data-theme="light"] h1,
-                .md-prose[data-theme="light"] h2,
-                .md-prose[data-theme="light"] h3 { color: #1f2328; }
-                .md-prose[data-theme="light"] h2 { border-bottom: 1px solid #d1d9e0; }
-                .md-prose[data-theme="dark"] h1,
-                .md-prose[data-theme="dark"] h2,
-                .md-prose[data-theme="dark"] h3 { color: #e6edf3; }
-                .md-prose[data-theme="dark"] h2 { border-bottom: 1px solid #30363d; }
-                .md-prose p { margin: 8px 0; font-size: 14px; line-height: 1.8; }
-                .md-prose[data-theme="light"] p { color: #1f2328; }
-                .md-prose[data-theme="dark"] p { color: #c9d1d9; }
-                .md-prose strong { font-weight: 600; }
-                .md-prose[data-theme="light"] strong { color: #1f2328; }
-                .md-prose[data-theme="dark"] strong { color: #e6edf3; }
-                .md-prose ul { list-style: disc; padding-left: 24px; margin: 10px 0; }
-                .md-prose li { margin: 4px 0; font-size: 14px; line-height: 1.8; }
-                .md-prose[data-theme="light"] li { color: #1f2328; }
-                .md-prose[data-theme="dark"] li { color: #c9d1d9; }
-                .md-prose hr { border: none; margin: 20px 0; }
-                .md-prose[data-theme="light"] hr { border-top: 1px solid #d1d9e0; }
-                .md-prose[data-theme="dark"] hr { border-top: 1px solid #30363d; }
-                .md-prose .md-inline-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
-                .md-prose[data-theme="light"] .md-inline-code { background: #eff1f3; color: #0550ae; }
-                .md-prose[data-theme="dark"] .md-inline-code { background: #161b22; color: #79c0ff; }
-                .md-prose .md-code-block { border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 14px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; }
-                .md-prose[data-theme="light"] .md-code-block { background: #f6f8fa; border: 1px solid #d1d9e0; color: #1f2328; }
-                .md-prose[data-theme="dark"] .md-code-block { background: #161b22; border: 1px solid #30363d; color: #e6edf3; }
-                .md-prose .md-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
-                .md-prose .md-table th { text-align: left; font-weight: 600; padding: 8px 12px; font-size: 12px; }
-                .md-prose .md-table td { padding: 7px 12px; }
-                .md-prose[data-theme="light"] .md-table th { border-bottom: 2px solid #d1d9e0; color: #1f2328; background: #f6f8fa; }
-                .md-prose[data-theme="light"] .md-table td { border-bottom: 1px solid #eaecf0; color: #1f2328; }
-                .md-prose[data-theme="dark"] .md-table th { border-bottom: 2px solid #30363d; color: #58a6ff; background: rgba(22,27,34,0.5); }
-                .md-prose[data-theme="dark"] .md-table td { border-bottom: 1px solid #21262d; color: #c9d1d9; }
-              ` }} />
-              <div dangerouslySetInnerHTML={{ __html: markdownToHtml(selectedDoc.content) }} />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/site/src/home/HomePage.tsx b/packages/site/src/home/HomePage.tsx
index d693ded..98eaec3 100644
--- a/packages/site/src/home/HomePage.tsx
+++ b/packages/site/src/home/HomePage.tsx
@@ -3,7 +3,6 @@ import NavBar from './NavBar';
 
 interface HomePageProps {
   onNavigate: (demoIndex: number) => void;
-  onNavigateDesign: () => void;
   onNavigateBlock: () => void;
   onNavigateSkill?: () => void;
   onNavigateDocs: () => void;
diff --git a/packages/site/src/home/NavBar.tsx b/packages/site/src/home/NavBar.tsx
index 742224d..c27c90d 100644
--- a/packages/site/src/home/NavBar.tsx
+++ b/packages/site/src/home/NavBar.tsx
@@ -8,17 +8,16 @@ interface NavItem {
 
 interface NavBarProps {
   theme: 'light' | 'dark';
-  activePage: 'home' | 'demos' | 'docs' | 'design' | 'block' | 'skill';
+  activePage: 'home' | 'demos' | 'docs' | 'block' | 'skill';
   onLogoClick: () => void;
   onNavigateDemos: () => void;
   onNavigateDocs: () => void;
-  onNavigateDesign: () => void;
   onNavigateBlock?: () => void;
   onNavigateSkill?: () => void;
   onToggleTheme: () => void;
 }
 
-export default function NavBar({ theme, activePage, onLogoClick, onNavigateDemos, onNavigateDocs, onNavigateDesign, onNavigateBlock, onNavigateSkill, onToggleTheme }: NavBarProps) {
+export default function NavBar({ theme, activePage, onLogoClick, onNavigateDemos, onNavigateDocs, onNavigateBlock, onNavigateSkill, onToggleTheme }: NavBarProps) {
   const isDark = theme === 'dark';
 
   const c = {
@@ -33,7 +32,6 @@ export default function NavBar({ theme, activePage, onLogoClick, onNavigateDemos
     { label: 'Docs', active: activePage === 'docs', action: onNavigateDocs },
     { label: 'Components', active: activePage === 'demos', action: onNavigateDemos },
     { label: 'Blocks', active: activePage === 'block', action: onNavigateBlock || (() => {}) },
-    { label: 'Design', active: activePage === 'design', action: onNavigateDesign },
     { label: 'Skill', active: activePage === 'skill', action: onNavigateSkill || (() => {}) },
   ];
 
diff --git a/packages/site/src/home/SkillPage.tsx b/packages/site/src/home/SkillPage.tsx
index 46bce14..0c894fa 100644
--- a/packages/site/src/home/SkillPage.tsx
+++ b/packages/site/src/home/SkillPage.tsx
@@ -8,7 +8,6 @@ interface SkillPageProps {
   onNavigateHome: () => void;
   onNavigateDemo: () => void;
   onNavigateDocs: () => void;
-  onNavigateDesign: () => void;
   onNavigateBlock: () => void;
   skillDocsMap?: Record<string, string>;
 }
diff --git a/packages/site/src/layer/AdministrativeMap.tsx b/packages/site/src/layer/AdministrativeMap.tsx
index b1eaed0..ac6f399 100644
--- a/packages/site/src/layer/AdministrativeMap.tsx
+++ b/packages/site/src/layer/AdministrativeMap.tsx
@@ -158,7 +158,7 @@ export default function AdministrativeMap() {
 
         <div style={{ fontSize: 10, color: '#94a3b8' }}>
           当前层级: <strong style={{ color: '#475569' }}>{currentLevel === 'province' ? '省' : currentLevel === 'city' ? '市' : '县'}</strong>
-          {drillEnabled && ' | 点击区域下钻'}
+          {drillEnabled && ' | 单击下钻，双击上卷'}
         </div>
       </div>
 
diff --git a/packages/site/src/main.tsx b/packages/site/src/main.tsx
index 6adee19..f4d26aa 100644
--- a/packages/site/src/main.tsx
+++ b/packages/site/src/main.tsx
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import { marked } from 'marked';
 import '../../core/src/styles/tailwind.css';
 import HomePage from './home/HomePage';
-import DesignPage from './home/DesignPage';
 import NavBar from './home/NavBar';
 import DocsPage from './docs/DocsPage';
 import BlockPage from './home/BlockPage';
@@ -51,6 +50,10 @@ import PcApp from './app/PcApp';
 import ImmersiveTravelMap from './app/ImmersiveTravelMap';
 import InterestMap from './app/InterestMap';
 import FlightRouteMap from './app/FlightRouteMap';
+import TyphoonMap from './app/typhoon';
+import GoogleMapsMobileDemo from './app/GoogleMapsMobileDemo';
+import AppleMapsDemo from './app/AppleMapsDemo';
+import HangzhouTravelMap from './app/HangzhouTravelMap';
 
 // ── 复合图层 ──
 import BubbleLayer from './composite/BubbleLayer';
@@ -103,19 +106,7 @@ import MobileToolbarDemo from './app/MobileToolbarDemo';
 import MobileSheetLegendDemo from './app/MobileSheetLegendDemo';
 
 const sourceModules = import.meta.glob(
-  ['./{engine,control,marker,layer,composite,app}/*.tsx', './{engine,control,marker,layer,composite,app}/*.md'],
-  { query: '?raw', eager: true }
-) as Record<string, { default: string }>;
-
-// 设计规范文档 — 从 src/design/ 子目录加载 (.md + .html)
-// 注意：src/design 是指向 ../../core/src/design 的软链接（vite import.meta.glob 不支持跨 package 路径）
-const designMdModules = import.meta.glob(
-  './design/{app,composite,marker,control,layer,block}/*.md',
-  { query: '?raw', eager: true }
-) as Record<string, { default: string }>;
-
-const designHtmlModules = import.meta.glob(
-  './design/{app,composite,marker,control,layer,block}/*.html',
+  ['./{engine,control,marker,layer,composite,app,app/typhoon,app/typhoon/hooks}/*.tsx', './{engine,control,marker,layer,composite,app,app/typhoon,app/typhoon/hooks}/*.md'],
   { query: '?raw', eager: true }
 ) as Record<string, { default: string }>;
 
@@ -150,86 +141,6 @@ for (const [path, mod] of Object.entries(skillMdModules)) {
   }
 }
 
-// 解析设计规范文件列表（按目录分组）
-const designNameMap: Record<string, string> = {
-  'bubble-map': '气泡图',
-  'choropleth-map': '分级统计图',
-  'marker-cluster': '标注聚合',
-  'popup': '弹出框',
-  'tooltip': '轻提示',
-  'map-controls': '地图控件',
-  'path-route-map': '路径与轨迹',
-  'arc-flow-map': '弧线与流向',
-  'hexbin-map': '蜂窝热力图',
-  'mobile-app': '移动端应用',
-  'pc-app': 'PC 端应用',
-  'large-screen': '大屏指挥中心',
-  'legend': '地图图例',
-  'icon-layer': '图片标注图层',
-  'icon-font-layer': '字体图标图层',
-  'immersive-travel-map': '沉浸式旅游足迹地图',
-  'administrative-layer': '行政区划',
-  'hierarchy-layout': '控件层级布局',
-  'text-layer': '文本图层',
-  'advanced-route-map': '路径地图',
-  'geometric-point-map': '点图层',
-  'raster-layer': '栅格图层',
-  'block-layout': 'Block 布局设计',
-};
-const designIconMap: Record<string, string> = {
-  'bubble-map': 'bubble_chart',
-  'choropleth-map': 'map',
-  'marker-cluster': 'scatter_plot',
-  'popup': 'chat_bubble',
-  'tooltip': 'info',
-  'map-controls': 'tune',
-  'path-route-map': 'route',
-  'arc-flow-map': 'south_east',
-  'hexbin-map': 'hexagon',
-  'mobile-app': 'smartphone',
-  'pc-app': 'desktop_windows',
-  'large-screen': 'monitor',
-  'legend': 'label',
-  'icon-layer': 'image',
-  'icon-font-layer': 'font_download',
-  'immersive-travel-map': 'photo_camera',
-  'administrative-layer': 'public',
-  'hierarchy-layout': 'layers',
-  'text-layer': 'text_fields',
-  'advanced-route-map': 'route',
-  'geometric-point-map': 'location_on',
-  'raster-layer': 'grid_on',
-  'block-layout': 'view_comfy',
-};
-// 目录名 → 中文分组名（与 demo 分组一致）
-const designCategoryMap: Record<string, string> = {
-  app: '应用模板',
-  composite: '复合图层',
-  marker: '点位标注',
-  control: '控件',
-  engine: '地图引擎',
-  layer: '基础图层',
-  block: '应用模板',
-};
-
-const designDocs = Object.entries(designMdModules).map(([path, mod]) => {
-  const parts = path.split('/');
-  const dirName = parts[parts.length - 2] ?? '';  // 子目录名，如 app / composite / marker / control / layer
-  const filename = parts.pop()?.replace('.md', '') ?? '';
-  const htmlPath = path.replace('.md', '.html');
-  const htmlContent = designHtmlModules[htmlPath]?.default ?? '';
-  return {
-    id: filename,
-    name: designNameMap[filename] || filename,
-    icon: designIconMap[filename] || 'description',
-    group: designCategoryMap[dirName] || dirName,
-    content: mod.default,
-    htmlDemo: htmlContent,
-  };
-});
-
-const designGroups = [...new Set(designDocs.map((d) => d.group))];
-
 // ── Markdown → HTML 转换器（基于 marked，输出使用 CSS 类名以适配亮/暗主题） ──
 function markdownToHtml(md: string): string {
   const renderer = new marked.Renderer();
@@ -253,6 +164,10 @@ const demos = [
   { name: 'ImmersiveTravelMap', icon: 'photo_camera', component: ImmersiveTravelMap, group: 'App Templates', file: 'app/ImmersiveTravelMap', device: 'desktop' },
   { name: 'InterestMap', icon: 'interests', component: InterestMap, group: 'App Templates', file: 'app/InterestMap', device: 'mobile' },
   { name: 'FlightRouteMap', icon: 'flight', component: FlightRouteMap, group: 'App Templates', file: 'app/FlightRouteMap', device: 'mobile' },
+  { name: 'TyphoonMap', icon: 'cyclone', component: TyphoonMap, group: 'App Templates', file: 'app/typhoon/TyphoonMap', device: 'both' },
+  { name: 'GoogleMapsMobile', icon: 'map', component: GoogleMapsMobileDemo, group: 'App Templates', file: 'app/GoogleMapsMobileDemo', device: 'mobile' },
+  { name: 'AppleMaps', icon: 'map', component: AppleMapsDemo, group: 'App Templates', file: 'app/AppleMapsDemo', device: 'mobile' },
+  { name: 'HangzhouTravelMap', icon: 'travel_explore', component: HangzhouTravelMap, group: 'App Templates', file: 'app/HangzhouTravelMap', device: 'mobile' },
 
 
   // ── Point Markers ──────────────────────────────
@@ -349,7 +264,7 @@ const groups = [...new Set(componentDemos.map((d) => d.group))];
 const blockDemos = demos.filter(d => d.group === 'App Templates');
 
 // 从 URL 获取当前页面状态（支持 path 和 hash 两种模式）
-const getPageFromUrl = (): { page: 'home' | 'demo' | 'design' | 'docs' | 'block' | 'block-design' | 'skill'; demoIndex: number } => {
+const getPageFromUrl = (): { page: 'home' | 'demo' | 'docs' | 'block' | 'skill'; demoIndex: number } => {
   // 优先读 pathname（预渲染 SEO 模式），fallback 到 hash（开发兼容）
   const pathname = window.location.pathname.replace(/^\//, '').replace(/\/$/, '');
   const hash = window.location.hash.slice(1);
@@ -357,16 +272,6 @@ const getPageFromUrl = (): { page: 'home' | 'demo' | 'design' | 'docs' | 'block'
 
   if (!route || route === 'home' || route === 'index.html') return { page: 'home', demoIndex: 0 };
   if (route === 'block' || route === 'block/') return { page: 'block', demoIndex: 0 };
-  if (route === 'block-design' || route.startsWith('block-design/')) {
-    const designId = route.replace(/^block-design\/?/, '');
-    const designIndex = designId ? designDocs.findIndex((d) => d.id === designId) : 0;
-    return { page: 'block-design', demoIndex: designIndex >= 0 ? designIndex : 0 };
-  }
-  if (route === 'design' || route.startsWith('design/')) {
-    const designId = route.replace(/^design\/?/, '');
-    const designIndex = designId ? designDocs.findIndex((d) => d.id === designId) : 0;
-    return { page: 'design', demoIndex: designIndex >= 0 ? designIndex : 0 };
-  }
   if (route === 'docs' || route.startsWith('docs/')) return { page: 'docs', demoIndex: 0 };
   if (route === 'skill' || route === 'skill/') return { page: 'skill', demoIndex: 0 };
 
@@ -389,7 +294,7 @@ const getPageFromUrl = (): { page: 'home' | 'demo' | 'design' | 'docs' | 'block'
 };
 
 function App() {
-  const [currentPage, setCurrentPage] = React.useState<'home' | 'demo' | 'design' | 'docs' | 'block' | 'block-design' | 'skill'>(() => getPageFromUrl().page);
+  const [currentPage, setCurrentPage] = React.useState<'home' | 'demo' | 'docs' | 'block' | 'skill'>(() => getPageFromUrl().page);
   const [current, setCurrent] = React.useState(() => getPageFromUrl().demoIndex);
   const [showPanel, setShowPanel] = React.useState(false);
   // 全局 UI 主题
@@ -507,7 +412,7 @@ function App() {
           onDocChange={(docId: string) => navigateTo(`design/${docId}`)}
           onToggleTheme={() => setAppTheme((t) => t === 'light' ? 'dark' : 'light')}
           onNavigateHome={() => { setCurrentPage('home'); navigateTo(''); }}
-          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(7); navigateTo('demo/' + demos[7].file); }}
+          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(13); navigateTo('demo/' + demos[13].file); }}
           onNavigateDocs={() => { setCurrentPage('docs'); navigateTo('docs'); }}
           onNavigateBlock={() => { setCurrent(0); setCurrentPage('block'); navigateTo('block'); }}
           onNavigateSkill={() => { setCurrentPage('skill'); navigateTo('skill'); }}
@@ -527,9 +432,8 @@ function App() {
           sourceModules={sourceModules}
           onToggleTheme={() => setAppTheme((t) => t === 'light' ? 'dark' : 'light')}
           onNavigateHome={() => { setCurrentPage('home'); navigateTo(''); }}
-          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(7); navigateTo('demo/' + demos[7].file); }}
+          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(13); navigateTo('demo/' + demos[13].file); }}
           onNavigateDocs={() => { setCurrentPage('docs'); navigateTo('docs'); }}
-          onNavigateDesign={() => { setCurrentPage('design'); navigateTo('design'); }}
           onNavigateBlock={() => { setCurrent(0); setCurrentPage('block'); navigateTo('block'); }}
           onNavigateSkill={() => { setCurrentPage('skill'); navigateTo('skill'); }}
           initialDemoIndex={current}
@@ -539,29 +443,6 @@ function App() {
     );
   }
 
-  // Block-design 页面渲染（带 HTML Demo 的设计规范风格）
-  if (currentPage === 'block-design') {
-    return (
-      <div data-theme={appTheme} style={{ width: '100%', height: '100%', fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif" }}>
-        <BlockDemoPage
-          docs={designDocs}
-          groups={designGroups}
-          theme={appTheme}
-          initialDocIndex={current}
-          onDocChange={(docId: string) => navigateTo('block-design/' + docId)}
-          onToggleTheme={() => setAppTheme((t) => t === 'light' ? 'dark' : 'light')}
-          onNavigateHome={() => { setCurrentPage('home'); navigateTo(''); }}
-          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(7); navigateTo('demo/' + demos[7].file); }}
-          onNavigateDocs={() => { setCurrentPage('docs'); navigateTo('docs'); }}
-          onNavigateDesign={() => { setCurrentPage('design'); navigateTo('design'); }}
-          onNavigateBlock={() => { setCurrent(0); setCurrentPage('block'); navigateTo('block'); }}
-          onNavigateSkill={() => { setCurrentPage('skill'); navigateTo('skill'); }}
-          markdownToHtml={markdownToHtml}
-        />
-      </div>
-    );
-  }
-
   // 组件文档页面渲染
   if (currentPage === 'docs') {
     return (
@@ -570,7 +451,7 @@ function App() {
           theme={appTheme}
           onToggleTheme={() => setAppTheme((t) => t === 'light' ? 'dark' : 'light')}
           onNavigateHome={() => { setCurrentPage('home'); navigateTo(''); }}
-          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(7); navigateTo('demo/' + demos[7].file); }}
+          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(13); navigateTo('demo/' + demos[13].file); }}
           onNavigateDesign={() => { setCurrentPage('design'); navigateTo('design'); }}
           onNavigateBlock={() => { setCurrent(0); setCurrentPage('block'); navigateTo('block'); }}
           onNavigateSkill={() => { setCurrentPage('skill'); navigateTo('skill'); }}
@@ -590,7 +471,7 @@ function App() {
           theme={appTheme}
           onToggleTheme={() => setAppTheme((t) => t === 'light' ? 'dark' : 'light')}
           onNavigateHome={() => { setCurrentPage('home'); navigateTo(''); }}
-          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(7); navigateTo('demo/' + demos[7].file); }}
+          onNavigateDemo={() => { setCurrentPage('demo'); setCurrent(13); navigateTo('demo/' + demos[13].file); }}
           onNavigateDocs={() => { setCurrentPage('docs'); navigateTo('docs'); }}
           onNavigateDesign={() => { setCurrentPage('design'); navigateTo('design'); }}
           onNavigateBlock={() => { setCurrent(0); setCurrentPage('block'); navigateTo('block'); }}
diff --git a/packages/site/src/vite-env.d.ts b/packages/site/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/packages/site/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/site/vite.config.ts b/packages/site/vite.config.ts
index 1b1b38b..d79cc6a 100644
--- a/packages/site/vite.config.ts
+++ b/packages/site/vite.config.ts
@@ -19,7 +19,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
-      // 直接引用 core 源码，避免需要先构建 core 包
+      // 直接引用源码，避免需要先构建对应包（CI 全新 checkout 仓库内无 dist）
+      // 注意 plot 别名须在 core 之前，避免前缀歧义
+      '@antv/aimapui-plot': resolve(__dirname, '../plot/src/index.ts'),
       '@antv/aimapui': resolve(__dirname, '../core/src/index.ts'),
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c922ec2..53c0bc3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       tsx:
         specifier: ^4.22.3
-        version: 4.22.3
+        version: 4.23.1
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
@@ -23,7 +23,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^20.0.0
-        version: 20.19.41
+        version: 20.19.43
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
@@ -31,11 +31,8 @@ importers:
   packages/core:
     dependencies:
       '@antv/l7':
-        specifier: 2.28.13
-        version: 2.28.13
-      '@antv/l7-maps':
-        specifier: 2.28.13
-        version: 2.28.13
+        specifier: 2.29.1
+        version: 2.29.1
       ahooks:
         specifier: ^3.8.4
         version: 3.9.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -47,32 +44,38 @@ importers:
         version: 3.0.5
       h3-js:
         specifier: ^4.4.0
-        version: 4.4.0
+        version: 4.5.0
       supercluster:
         specifier: ^8.0.1
         version: 8.0.1
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.3.2
+        version: 4.3.3
       '@tailwindcss/vite':
         specifier: ^4.0.0
-        version: 4.3.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.3.3(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
+      '@types/geojson':
+        specifier: ^7946.0.16
+        version: 7946.0.16
       '@types/react':
         specifier: ^18.3.12
-        version: 18.3.29
+        version: 18.3.31
       '@types/react-dom':
         specifier: ^18.3.1
-        version: 18.3.7(@types/react@18.3.29)
+        version: 18.3.7(@types/react@18.3.31)
       '@types/supercluster':
         specifier: ^7.1.3
         version: 7.1.3
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.7.0(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.5.0(postcss@8.5.15)
+        version: 10.5.4(postcss@8.5.19)
       postcss:
         specifier: ^8.4.49
-        version: 8.5.15
+        version: 8.5.19
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -81,19 +84,19 @@ importers:
         version: 18.3.1(react@18.3.1)
       tailwindcss:
         specifier: ^4.0.0
-        version: 4.3.0
+        version: 4.3.3
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+        version: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
       vite-plugin-dts:
         specifier: ^4.3.0
-        version: 4.5.4(@types/node@20.19.41)(rollup@4.60.4)(typescript@5.9.3)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.5.4(@types/node@20.19.43)(rollup@4.62.2)(typescript@5.9.3)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       vitest:
         specifier: ^4.1.8
-        version: 4.1.8(@types/node@20.19.41)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.1.10(@types/node@20.19.43)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
 
   packages/plot:
     devDependencies:
@@ -101,20 +104,23 @@ importers:
         specifier: workspace:*
         version: link:../core
       '@antv/l7':
-        specifier: 2.28.13
-        version: 2.28.13
+        specifier: 2.29.1
+        version: 2.29.1
       '@tailwindcss/vite':
         specifier: ^4.0.0
-        version: 4.3.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.3.3(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
+      '@types/geojson':
+        specifier: ^7946.0.16
+        version: 7946.0.16
       '@types/react':
         specifier: ^18.3.12
-        version: 18.3.29
+        version: 18.3.31
       '@types/react-dom':
         specifier: ^18.3.1
-        version: 18.3.7(@types/react@18.3.29)
+        version: 18.3.7(@types/react@18.3.31)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.7.0(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -123,19 +129,19 @@ importers:
         version: 18.3.1(react@18.3.1)
       tailwindcss:
         specifier: ^4.0.0
-        version: 4.3.0
+        version: 4.3.3
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+        version: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
       vite-plugin-dts:
         specifier: ^4.3.0
-        version: 4.5.4(@types/node@20.19.41)(rollup@4.60.4)(typescript@5.9.3)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.5.4(@types/node@20.19.43)(rollup@4.62.2)(typescript@5.9.3)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       vitest:
         specifier: ^4.1.8
-        version: 4.1.8(@types/node@20.19.41)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.1.10(@types/node@20.19.43)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
 
   packages/site:
     dependencies:
@@ -146,11 +152,8 @@ importers:
         specifier: workspace:*
         version: link:../plot
       '@antv/l7':
-        specifier: 2.28.13
-        version: 2.28.13
-      '@antv/l7-maps':
-        specifier: 2.28.13
-        version: 2.28.13
+        specifier: 2.29.1
+        version: 2.29.1
       ahooks:
         specifier: ^3.8.4
         version: 3.9.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -159,7 +162,7 @@ importers:
         version: 11.11.1
       marked:
         specifier: ^18.0.4
-        version: 18.0.4
+        version: 18.0.6
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -175,37 +178,41 @@ importers:
         version: 5.2.8
       '@tailwindcss/vite':
         specifier: ^4.0.0
-        version: 4.3.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.3.3(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       '@types/marked':
         specifier: ^6.0.0
         version: 6.0.0
       '@types/react':
         specifier: ^18.3.12
-        version: 18.3.29
+        version: 18.3.31
       '@types/react-dom':
         specifier: ^18.3.1
-        version: 18.3.7(@types/react@18.3.29)
+        version: 18.3.7(@types/react@18.3.31)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
+        version: 4.7.0(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
       material-symbols:
         specifier: ^0.44.9
-        version: 0.44.10
+        version: 0.44.12
       tailwindcss:
         specifier: ^4.0.0
-        version: 4.3.0
+        version: 4.3.3
       tsx:
         specifier: ^4.22.3
-        version: 4.22.3
+        version: 4.23.1
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+        version: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@amap/amap-jsapi-loader@1.0.1':
     resolution: {integrity: sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==}
 
@@ -215,35 +222,35 @@ packages:
   '@antv/g-device-api@1.6.13':
     resolution: {integrity: sha512-lTvlSHYDZyWJnAR1W8DOQLwUo32VpRopbS/BPQqStcOV6FqaC+u5YjT50KbJ+oBWcorpzfknhICRwEA3Xm8t9Q==}
 
-  '@antv/l7-component@2.28.13':
-    resolution: {integrity: sha512-+qG7o/E6/QzbSkfzSU92p+kdkQYpEWWgRsKyzaGppl97KW5b0+sKSW2kj/xUAVTxEChCi9ObRV61+2ocpqCLFw==}
+  '@antv/l7-component@2.29.1':
+    resolution: {integrity: sha512-QFCMOuEPZEOb5pLjq/KnxRmrgz/YZ70o3eopcSVHGxLNe/9xGSLczPwe8NiMYQhKdw+EAUTn1RU1nmddtZoc/Q==}
 
-  '@antv/l7-core@2.28.13':
-    resolution: {integrity: sha512-cFBhhjR3/HFtEM0NIgch8IET5+ToCOacTaqTIH9+g68up7VBeUT6xTxNJ7ieK2dVZgqM2RJQVSz7HwRA96gB/g==}
+  '@antv/l7-core@2.29.1':
+    resolution: {integrity: sha512-vNbrcULfbubFxTPkxyiNVzG+6ExjEeWIeJN2XtHDlvA5FNF/jMdIR3Ky5t36qCfDwvgYjd9pQKwHQPhQTMzxew==}
 
-  '@antv/l7-layers@2.28.13':
-    resolution: {integrity: sha512-n98/UDXLm1GhindnxJnuuPVqLbtxMxlM1JjrzgG00Yke2TOc2XK2p3aH14l0oOy7rnnLCw1BoXCUbEGekXBvqw==}
+  '@antv/l7-layers@2.29.1':
+    resolution: {integrity: sha512-Nuawrq9t9IAVdTmj4p7s4U6KKURtRsen2fBCwds/mfdrSWCOV+3HHi0kRBLvUgwlG/a7Abyu85HdwTgUvXeBAg==}
 
-  '@antv/l7-map@2.28.13':
-    resolution: {integrity: sha512-kT7J94LuYeZyoytdLpUCe790o/Blk0z609W53S9CUUSFUd/UCdDERgIYtbX71Rk4gZLOBoc9fi0MMUhZOi7JHg==}
+  '@antv/l7-map@2.29.1':
+    resolution: {integrity: sha512-14Sw7vdrybmNPIgANmyGK204PMoyiGBLMKdJkJMKUZ+x5YQGDEUuNtF8DgtPN2TX7hA+XryE5fUawmNukEKfsw==}
 
-  '@antv/l7-maps@2.28.13':
-    resolution: {integrity: sha512-FzkZM1bxs4JG1kh+U9JFLgEqrVma4Ne5UC9V/k7+bQ6t5aK9LMZpSTURnltOErpxwLIm0N4exqNvug4LNXfOIg==}
+  '@antv/l7-maps@2.29.1':
+    resolution: {integrity: sha512-doHYbCXnqLVAFsVJOQL1t8x1Vykj2oXFo/HT38ScV0Tc8CTgwitKoB+4nImMFauJ1a1WMTiXyNB6SMjA5Vu4mQ==}
 
-  '@antv/l7-renderer@2.28.13':
-    resolution: {integrity: sha512-u9CJCNaTHcIyRwXQzNcrJNilGw4JuGRc1bfGb5+kx0N0vzReECnPDZpHr/D2i8SxvYALTFE0ktGg75vw86akzQ==}
+  '@antv/l7-renderer@2.29.1':
+    resolution: {integrity: sha512-qT+5zRHpQL9DbPlHEV1TGiK7pNF8RWMciSTBMMW2mtmvdUSw/KO3vRabPILqMjotw8msZVKS4cuE4YnTEed+Gg==}
 
-  '@antv/l7-scene@2.28.13':
-    resolution: {integrity: sha512-gVgJrU0PbHrNlAlcS6FFO8/6zIX447w1d8xH2R8pREwbwjP2KRCoYXNl/9rAz2Vx+wl7z2SRiuqTv87hOz2crA==}
+  '@antv/l7-scene@2.29.1':
+    resolution: {integrity: sha512-H5+dqKpK7lyhHhWB/n1tLhItDLyxWgRKN404S8rxilDakfBt8v7hga4ubWH9Aek1Hudk3mx1XB8bETp9TtMhlQ==}
 
-  '@antv/l7-source@2.28.13':
-    resolution: {integrity: sha512-ohWTRx5hILLE9vpDE71NmC6RE7KoN7Fsha2aMvXJs8lK6iM+0foWfRcvZLuWHeF/hbNH5/brZ4SVRVHJV+R/rw==}
+  '@antv/l7-source@2.29.1':
+    resolution: {integrity: sha512-4m9YQ/lW842ecR0a3OJ5gVZQaSz4O2lQ0MeyJsWySebvASDeSqyzWQ62I/oT9D7GaJO2wXsi0aZOa/bstU+ueg==}
 
-  '@antv/l7-utils@2.28.13':
-    resolution: {integrity: sha512-0NDJ7dm3X6CsPBiBSejumfQS82vo/eRxcQHAQ2/csouUHovKJTBqbOt4IG70xdLS/zitarwHE6JidIfkP8Rl4Q==}
+  '@antv/l7-utils@2.29.1':
+    resolution: {integrity: sha512-9bYkluX+NTF54AvV+fFe2UyRUEJNIm6/YaSF/8pqms+4/W4eCT3KMpdRunOSBGIjJv7hLYPYKFWNsvcl6I8mEQ==}
 
-  '@antv/l7@2.28.13':
-    resolution: {integrity: sha512-Xx9n9SezHVXe6v1jbh6lCFbb8VCuAl3YmWYMLYhJ31P/Rlm+7hB6oPHSZ8WrP6YfPa0qMrs2xcaEJsZn0wIV7Q==}
+  '@antv/l7@2.29.1':
+    resolution: {integrity: sha512-ZXSUcuKw73fb32a/04ive+a21heEm5cuOOWdmrc0kOvQ15OWRfuXRg5DdpoutDNtDNo2Nq+rUT8jTvX24Q+XYw==}
 
   '@antv/util@3.3.11':
     resolution: {integrity: sha512-FII08DFM4ABh2q5rPYdr0hMtKXRgeZazvXaFYCs7J7uTcWDHUhczab2qOCJLNDugoj8jFag1djb7wS9ehaRYBg==}
@@ -341,8 +348,8 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.28.0':
-    resolution: {integrity: sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==}
+  '@esbuild/aix-ppc64@0.28.1':
+    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
@@ -353,8 +360,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.28.0':
-    resolution: {integrity: sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==}
+  '@esbuild/android-arm64@0.28.1':
+    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
@@ -365,8 +372,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.28.0':
-    resolution: {integrity: sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==}
+  '@esbuild/android-arm@0.28.1':
+    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
@@ -377,8 +384,8 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.28.0':
-    resolution: {integrity: sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==}
+  '@esbuild/android-x64@0.28.1':
+    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
@@ -389,8 +396,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.28.0':
-    resolution: {integrity: sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==}
+  '@esbuild/darwin-arm64@0.28.1':
+    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
@@ -401,8 +408,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.28.0':
-    resolution: {integrity: sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==}
+  '@esbuild/darwin-x64@0.28.1':
+    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
@@ -413,8 +420,8 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.28.0':
-    resolution: {integrity: sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==}
+  '@esbuild/freebsd-arm64@0.28.1':
+    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
@@ -425,8 +432,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.28.0':
-    resolution: {integrity: sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==}
+  '@esbuild/freebsd-x64@0.28.1':
+    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
@@ -437,8 +444,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.28.0':
-    resolution: {integrity: sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==}
+  '@esbuild/linux-arm64@0.28.1':
+    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
@@ -449,8 +456,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.28.0':
-    resolution: {integrity: sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==}
+  '@esbuild/linux-arm@0.28.1':
+    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
@@ -461,8 +468,8 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.28.0':
-    resolution: {integrity: sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==}
+  '@esbuild/linux-ia32@0.28.1':
+    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
@@ -473,8 +480,8 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.28.0':
-    resolution: {integrity: sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==}
+  '@esbuild/linux-loong64@0.28.1':
+    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
@@ -485,8 +492,8 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.28.0':
-    resolution: {integrity: sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==}
+  '@esbuild/linux-mips64el@0.28.1':
+    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
@@ -497,8 +504,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.28.0':
-    resolution: {integrity: sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==}
+  '@esbuild/linux-ppc64@0.28.1':
+    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
@@ -509,8 +516,8 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.28.0':
-    resolution: {integrity: sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==}
+  '@esbuild/linux-riscv64@0.28.1':
+    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
@@ -521,8 +528,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.28.0':
-    resolution: {integrity: sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==}
+  '@esbuild/linux-s390x@0.28.1':
+    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
@@ -533,8 +540,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.28.0':
-    resolution: {integrity: sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==}
+  '@esbuild/linux-x64@0.28.1':
+    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
@@ -545,8 +552,8 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.28.0':
-    resolution: {integrity: sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==}
+  '@esbuild/netbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
@@ -557,8 +564,8 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.28.0':
-    resolution: {integrity: sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==}
+  '@esbuild/netbsd-x64@0.28.1':
+    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
@@ -569,8 +576,8 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.28.0':
-    resolution: {integrity: sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==}
+  '@esbuild/openbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
@@ -581,8 +588,8 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.28.0':
-    resolution: {integrity: sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==}
+  '@esbuild/openbsd-x64@0.28.1':
+    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
@@ -593,8 +600,8 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/openharmony-arm64@0.28.0':
-    resolution: {integrity: sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==}
+  '@esbuild/openharmony-arm64@0.28.1':
+    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
@@ -605,8 +612,8 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.28.0':
-    resolution: {integrity: sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==}
+  '@esbuild/sunos-x64@0.28.1':
+    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
@@ -617,8 +624,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.28.0':
-    resolution: {integrity: sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==}
+  '@esbuild/win32-arm64@0.28.1':
+    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
@@ -629,8 +636,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.28.0':
-    resolution: {integrity: sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==}
+  '@esbuild/win32-ia32@0.28.1':
+    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
@@ -641,8 +648,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.28.0':
-    resolution: {integrity: sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==}
+  '@esbuild/win32-x64@0.28.1':
+    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -676,9 +683,9 @@ packages:
   '@mapbox/geojson-types@1.0.2':
     resolution: {integrity: sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==}
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2':
-    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
-    engines: {node: '>= 0.6'}
+  '@mapbox/jsonlint-lines-primitives@2.0.3':
+    resolution: {integrity: sha512-0SElaV0uMxEnxzBhhX9WTuPyUeMsAN/SS0i16tjuba4/mio63MG9khjC1a0JAiPGXAwvwm4UfHJURCN7nyudQg==}
+    engines: {node: '>= 22'}
 
   '@mapbox/mapbox-gl-supported@1.5.0':
     resolution: {integrity: sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==}
@@ -714,11 +721,11 @@ packages:
     resolution: {integrity: sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw==}
     hasBin: true
 
-  '@microsoft/api-extractor-model@7.33.8':
-    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
+  '@microsoft/api-extractor-model@7.33.10':
+    resolution: {integrity: sha512-uPUK17xGxeQ3av6TN7awp+dTTSTvx8fZC0XFL1gyt7hFapYuxND3XLXH8vkmI7UjfW92oogzFAFqHSifmJROaw==}
 
-  '@microsoft/api-extractor@7.58.7':
-    resolution: {integrity: sha512-yK6OycD46gIzLRpj6ueVUWPk1ACSpkN1LBo05gY1qPTylbWyUCanXfH7+VgkI5LJrJoRSQR5F04XuCffCXLOBw==}
+  '@microsoft/api-extractor@7.58.11':
+    resolution: {integrity: sha512-ngeL7gd6HYwmq9VRWBh4mUBSM6mXlIK5hwyVXxJ9go5Xf70ohx9M57t+8LIgZTARmsyN5sk/q+RUBkD9Bgq5yA==}
     hasBin: true
 
   '@microsoft/tsdoc-config@0.18.1':
@@ -733,8 +740,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -742,146 +749,146 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.60.4':
-    resolution: {integrity: sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==}
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.60.4':
-    resolution: {integrity: sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==}
+  '@rollup/rollup-android-arm64@4.62.2':
+    resolution: {integrity: sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.60.4':
-    resolution: {integrity: sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==}
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    resolution: {integrity: sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.60.4':
-    resolution: {integrity: sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==}
+  '@rollup/rollup-darwin-x64@4.62.2':
+    resolution: {integrity: sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.60.4':
-    resolution: {integrity: sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==}
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    resolution: {integrity: sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.60.4':
-    resolution: {integrity: sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==}
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    resolution: {integrity: sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
-    resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    resolution: {integrity: sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
-    resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==}
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    resolution: {integrity: sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.60.4':
-    resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==}
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    resolution: {integrity: sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.60.4':
-    resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==}
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    resolution: {integrity: sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.60.4':
-    resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==}
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    resolution: {integrity: sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-loong64-musl@4.60.4':
-    resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==}
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    resolution: {integrity: sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==}
     cpu: [loong64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
-    resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==}
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    resolution: {integrity: sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-musl@4.60.4':
-    resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==}
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    resolution: {integrity: sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==}
     cpu: [ppc64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
-    resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==}
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    resolution: {integrity: sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.60.4':
-    resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==}
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    resolution: {integrity: sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.60.4':
-    resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==}
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    resolution: {integrity: sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.60.4':
-    resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==}
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.60.4':
-    resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==}
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    resolution: {integrity: sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openbsd-x64@4.60.4':
-    resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==}
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    resolution: {integrity: sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==}
     cpu: [x64]
     os: [openbsd]
 
-  '@rollup/rollup-openharmony-arm64@4.60.4':
-    resolution: {integrity: sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==}
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    resolution: {integrity: sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.60.4':
-    resolution: {integrity: sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==}
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    resolution: {integrity: sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.60.4':
-    resolution: {integrity: sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==}
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    resolution: {integrity: sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.60.4':
-    resolution: {integrity: sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==}
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.60.4':
-    resolution: {integrity: sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==}
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    resolution: {integrity: sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==}
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/node-core-library@5.23.1':
-    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
+  '@rushstack/node-core-library@5.23.3':
+    resolution: {integrity: sha512-f6uuza7Um65bwsIJgf0MRs7IPA5IG+A+zs1AYGQvpZmLjtTGdfHowhQw4kwF0pPhJCrU4UHNhK8Qa6tLygYZCA==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
@@ -899,83 +906,83 @@ packages:
   '@rushstack/rig-package@0.7.3':
     resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
 
-  '@rushstack/terminal@0.24.0':
-    resolution: {integrity: sha512-8ZQS4MMaGsv27EXCBiH7WMPkRZrffeDoIevs6z9TM5dzqiY6+Hn4evfK/G+gvgBTjfvfkHIZPQQmalmI2sM4TQ==}
+  '@rushstack/terminal@0.24.2':
+    resolution: {integrity: sha512-KB7PpvzDyKMw/RGU3TxOwxTs3OwZ4gq6+WHlTJN/JfQH4ezliNtWIqver78jTaAJyz/ZAAlJGH7a/M1WyFLFSw==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.3.9':
-    resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==}
+  '@rushstack/ts-command-line@5.3.12':
+    resolution: {integrity: sha512-Vg2n24arSf7JvUNga2DMHYTbxnVq9L5OtVCp4Gfr8YC/kmL/bmdR8FQhGcpMzMYNY9Vdw3+TaimG11Sf+z1Tpw==}
 
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@tailwindcss/node@4.3.0':
-    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
 
-  '@tailwindcss/oxide-android-arm64@4.3.0':
-    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.3.0':
-    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.3.0':
-    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.3.0':
-    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
-    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
     engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
-    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
-    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
-    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
-    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
-    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -986,24 +993,27 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
-    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
-    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.3.0':
-    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
     engines: {node: '>= 20'}
 
-  '@tailwindcss/vite@4.3.0':
-    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
+  '@tailwindcss/postcss@4.3.3':
+    resolution: {integrity: sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==}
+
+  '@tailwindcss/vite@4.3.3':
+    resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
@@ -1052,9 +1062,6 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
@@ -1074,8 +1081,8 @@ packages:
     resolution: {integrity: sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==}
     deprecated: This is a stub types definition. marked provides its own type definitions, so you do not need this installed.
 
-  '@types/node@20.19.41':
-    resolution: {integrity: sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==}
+  '@types/node@20.19.43':
+    resolution: {integrity: sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==}
 
   '@types/pbf@3.0.5':
     resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
@@ -1088,8 +1095,8 @@ packages:
     peerDependencies:
       '@types/react': ^18.0.0
 
-  '@types/react@18.3.29':
-    resolution: {integrity: sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==}
+  '@types/react@18.3.31':
+    resolution: {integrity: sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==}
 
   '@types/supercluster@7.1.3':
     resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
@@ -1100,11 +1107,11 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@vitest/expect@4.1.8':
-    resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
+  '@vitest/expect@4.1.10':
+    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
 
-  '@vitest/mocker@4.1.8':
-    resolution: {integrity: sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==}
+  '@vitest/mocker@4.1.10':
+    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1114,20 +1121,20 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@4.1.8':
-    resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
+  '@vitest/pretty-format@4.1.10':
+    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
 
-  '@vitest/runner@4.1.8':
-    resolution: {integrity: sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==}
+  '@vitest/runner@4.1.10':
+    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
 
-  '@vitest/snapshot@4.1.8':
-    resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
+  '@vitest/snapshot@4.1.10':
+    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
 
-  '@vitest/spy@4.1.8':
-    resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
+  '@vitest/spy@4.1.10':
+    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
 
-  '@vitest/utils@4.1.8':
-    resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
+  '@vitest/utils@4.1.10':
+    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
 
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
@@ -1138,11 +1145,11 @@ packages:
   '@volar/typescript@2.4.28':
     resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
 
-  '@vue/compiler-core@3.5.35':
-    resolution: {integrity: sha512-BUmHaR1J+O+CKZ9uJucdVTEr1LHsdyvv7vG3eNRhK3CczEHeMd/LtsHAuD7PbrxvI2envCY2v7HI1vC1aBRzKw==}
+  '@vue/compiler-core@3.5.40':
+    resolution: {integrity: sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==}
 
-  '@vue/compiler-dom@3.5.35':
-    resolution: {integrity: sha512-k+bprkXxuqhVajgTx5mUHuir7TwQzUKOWR40ng1ncAqQRPnrLngGGgqVEEhOnTMlc8btHYVKmrP8s5Qyg0hvYA==}
+  '@vue/compiler-dom@3.5.40':
+    resolution: {integrity: sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==}
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -1155,14 +1162,14 @@ packages:
       typescript:
         optional: true
 
-  '@vue/shared@3.5.35':
-    resolution: {integrity: sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA==}
+  '@vue/shared@3.5.40':
+    resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}
 
-  '@webgpu/types@0.1.70':
-    resolution: {integrity: sha512-LFiNHHKMvmAEvwVew3JLJmTdShhbdwRFSImUshGhE2mGE8ybQzIo63l5uRp+YKnNx+8Qno8Kf6gN+DKMreIJCA==}
+  '@webgpu/types@0.1.71':
+    resolution: {integrity: sha512-mMy8/ODcKhab808co15eW+yN+HgXoQxRQHTiBV9Mrvl1r0ufnid7YOcI+gi4eUWSWl9ezD6TW2KXccrL8HCh2A==}
 
-  acorn@8.16.0:
-    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -1191,6 +1198,9 @@ packages:
   ajv@8.18.0:
     resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
   alien-signals@0.4.14:
     resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
@@ -1212,8 +1222,8 @@ packages:
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
-  autoprefixer@10.5.0:
-    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
+  autoprefixer@10.5.4:
+    resolution: {integrity: sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -1226,20 +1236,20 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
-  baseline-browser-mapping@2.10.32:
-    resolution: {integrity: sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==}
+  baseline-browser-mapping@2.10.43:
+    resolution: {integrity: sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  brace-expansion@2.1.1:
-    resolution: {integrity: sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==}
+  brace-expansion@2.1.2:
+    resolution: {integrity: sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==}
 
-  brace-expansion@5.0.6:
-    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
+  brace-expansion@5.0.7:
+    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
     engines: {node: 18 || 20 || >=22}
 
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+  browserslist@4.28.6:
+    resolution: {integrity: sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -1249,8 +1259,8 @@ packages:
   bytewise@1.1.0:
     resolution: {integrity: sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==}
 
-  caniuse-lite@1.0.30001793:
-    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
+  caniuse-lite@1.0.30001806:
+    resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}
 
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
@@ -1308,11 +1318,11 @@ packages:
   earcut@2.2.4:
     resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
 
-  electron-to-chromium@1.5.364:
-    resolution: {integrity: sha512-G/dYE3+AYhyHwzTwg8UbnXf7zqMERYh7l2jJ3QujhFsH8agSYwtnGAR2aZ7f0AakIKJXd5En/Hre4igIUrdlYw==}
+  electron-to-chromium@1.5.393:
+    resolution: {integrity: sha512-kiDJdIUawuEIcp9XoICKp1iTYDEbgguIPq526N1Q7jIQDeQ3CqoMx71025PI/7E48Ddtw2HuWsVjY7afEgNxmg==}
 
-  enhanced-resolve@5.22.1:
-    resolution: {integrity: sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww==}
+  enhanced-resolve@5.24.2:
+    resolution: {integrity: sha512-rpsZEGT1jFuve6QlpyRp9ckQ+kN61hvF9BzCPyMdaKTm8UJce96KBn3sorXOFXlzjPrs3Vc4T1NsSroZ3PxlFw==}
     engines: {node: '>=10.13.0'}
 
   entities@7.0.1:
@@ -1323,16 +1333,16 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@2.1.0:
-    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+  es-module-lexer@2.3.1:
+    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
 
   esbuild@0.25.12:
     resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  esbuild@0.28.0:
-    resolution: {integrity: sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==}
+  esbuild@0.28.1:
+    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1352,12 +1362,12 @@ packages:
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
-  expect-type@1.3.0:
-    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
     engines: {node: '>=12.0.0'}
 
-  exsolve@1.0.8:
-    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+  exsolve@1.1.0:
+    resolution: {integrity: sha512-D+42+T12DdIlJM3uepa55qGiL3sYdLBOxIl2ifQCzCHz4c7eiolaHsi3BIqEr7JxBzxv2pYZQX9kw16ziMcEmw==}
 
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -1370,8 +1380,8 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-uri@3.1.2:
-    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+  fast-uri@3.1.3:
+    resolution: {integrity: sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==}
 
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
@@ -1388,8 +1398,8 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
-  fs-extra@11.3.5:
-    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+  fs-extra@11.3.6:
+    resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
     engines: {node: '>=14.14'}
 
   fsevents@2.3.3:
@@ -1432,8 +1442,8 @@ packages:
   grid-index@1.1.0:
     resolution: {integrity: sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==}
 
-  h3-js@4.4.0:
-    resolution: {integrity: sha512-DvJh07MhGgY2KcC4OeZc8SSyA+ZXpdvoh6uCzGpoKvWtZxJB+g6VXXC1+eWYkaMIsLz7J/ErhOalHCpcs1KYog==}
+  h3-js@4.5.0:
+    resolution: {integrity: sha512-uKmdPc+DuarnR+XqZxEuWOMw7KzzKROrx3MLeJpFnMOs78S9M5eZ+X5RieS9UcSFQqbeXzbfWuX/W9Pyajinqw==}
     engines: {node: '>=4', npm: '>=3', yarn: '>=1.3.0'}
 
   hammerjs@2.0.8:
@@ -1500,9 +1510,8 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  js-cookie@3.0.7:
-    resolution: {integrity: sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==}
-    engines: {node: '>=20'}
+  js-cookie@3.0.8:
+    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -1641,13 +1650,13 @@ packages:
     resolution: {integrity: sha512-krg2KFIdOpLPngONDhP6ixCoWl5kbdMINP0moMSJFVX7wX1Clm2M9hlNKXS8vBGlVWwR5R3ZfI6IPrYz7c+aCQ==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
 
-  marked@18.0.4:
-    resolution: {integrity: sha512-c/BTaKzg0G6ezQx97DAkYU7k0HM6ys0FqYeKBL6hlBByZwy+ycA1+f0vDdjMHKKeEjdgkx0GOv9Il6D+85cOqA==}
+  marked@18.0.6:
+    resolution: {integrity: sha512-MrV5puXBfuiy6wl6DLaq3BtIJQAJToAd5zt/ZKhRfGRAuFPALE7/4Y7jnxRQoEgK/pBgurGqLyAuRgZ2xOjr6w==}
     engines: {node: '>= 20'}
     hasBin: true
 
-  material-symbols@0.44.10:
-    resolution: {integrity: sha512-N/sAHC6C6s/cBG+o64tjosppMw2sC/rqo4AhANG4GTpH2E0X1VaIy5P77Rehk1NcPg22JRIbr9aKQkbX/a8REQ==}
+  material-symbols@0.44.12:
+    resolution: {integrity: sha512-lZkS9BwISNU2Jbup+IlwZrr9z1oAK6zx38qPpe7mNzkXwiIEnQaxPz1Sf3bNZ0MX15LNlJQNjKI3MWLgmo83+Q==}
 
   minimatch@10.2.3:
     resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
@@ -1672,21 +1681,21 @@ packages:
   murmurhash-js@1.0.0:
     resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
 
-  nanoid@3.3.12:
-    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  node-releases@2.0.46:
-    resolution: {integrity: sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==}
+  node-releases@2.0.51:
+    resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
     engines: {node: '>=18'}
 
-  obug@2.1.2:
-    resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
+  obug@2.1.4:
+    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
 
-  pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+  pako@2.2.0:
+    resolution: {integrity: sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==}
 
   parse-headers@2.0.6:
     resolution: {integrity: sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A==}
@@ -1707,8 +1716,8 @@ packages:
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@4.0.4:
-    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
   pkg-types@1.3.1:
@@ -1726,8 +1735,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.15:
-    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+  postcss@8.5.19:
+    resolution: {integrity: sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   potpack@1.0.2:
@@ -1765,9 +1774,6 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
-  regl@1.6.1:
-    resolution: {integrity: sha512-7Z9rmpEqmLNwC9kCYCyfyu47eWZaQWeNpwZfwz99QueXN8B/Ow40DB0N+OeUeM/yu9pZAB01+JgJ+XghGveVoA==}
-
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -1786,8 +1792,8 @@ packages:
   robust-predicates@3.0.3:
     resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
 
-  rollup@4.60.4:
-    resolution: {integrity: sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==}
+  rollup@4.62.2:
+    resolution: {integrity: sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -1851,8 +1857,8 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@4.1.0:
-    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
 
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@@ -1872,8 +1878,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tailwindcss@4.3.0:
-    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
 
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
@@ -1900,8 +1906,8 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tsx@4.22.3:
-    resolution: {integrity: sha512-mdoNxBC/cSQObGGVQ5Bpn5i+yv7j68gk3Nfm3wFjcJg3Z0Mix9jzAFfP12prmm5eVGmDKtp0yyArrs0Q+8gZHg==}
+  tsx@4.23.1:
+    resolution: {integrity: sha512-GQHnkIfxyx1wYCOS/wonik5MVRZU9hi1TEZmzGZSCJB1y9YgoZ8H6itNE/u4suE+yLmOzuE4E5S4TZ/ZX2wcWQ==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -1949,8 +1955,8 @@ packages:
       vite:
         optional: true
 
-  vite@6.4.2:
-    resolution: {integrity: sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==}
+  vite@6.4.3:
+    resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -1989,20 +1995,20 @@ packages:
       yaml:
         optional: true
 
-  vitest@4.1.8:
-    resolution: {integrity: sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==}
+  vitest@4.1.10:
+    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.8
-      '@vitest/browser-preview': 4.1.8
-      '@vitest/browser-webdriverio': 4.1.8
-      '@vitest/coverage-istanbul': 4.1.8
-      '@vitest/coverage-v8': 4.1.8
-      '@vitest/ui': 4.1.8
+      '@vitest/browser-playwright': 4.1.10
+      '@vitest/browser-preview': 4.1.10
+      '@vitest/browser-webdriverio': 4.1.10
+      '@vitest/coverage-istanbul': 4.1.10
+      '@vitest/coverage-v8': 4.1.10
+      '@vitest/ui': 4.1.10
       happy-dom: '*'
       jsdom: '*'
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2059,6 +2065,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@amap/amap-jsapi-loader@1.0.1': {}
 
   '@antv/async-hook@2.2.9':
@@ -2068,24 +2076,24 @@ snapshots:
   '@antv/g-device-api@1.6.13':
     dependencies:
       '@antv/util': 3.3.11
-      '@webgpu/types': 0.1.70
+      '@webgpu/types': 0.1.71
       eventemitter3: 5.0.4
       gl-matrix: 3.4.4
       tslib: 2.8.1
 
-  '@antv/l7-component@2.28.13':
+  '@antv/l7-component@2.29.1':
     dependencies:
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-layers': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-layers': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       eventemitter3: 4.0.7
       supercluster: 7.1.5
 
-  '@antv/l7-core@2.28.13':
+  '@antv/l7-core@2.29.1':
     dependencies:
       '@antv/async-hook': 2.2.9
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       '@mapbox/tiny-sdf': 1.2.5
       '@turf/helpers': 6.5.0
@@ -2094,13 +2102,13 @@ snapshots:
       hammerjs: 2.0.8
       viewport-mercator-project: 6.2.3
 
-  '@antv/l7-layers@2.28.13':
+  '@antv/l7-layers@2.29.1':
     dependencies:
       '@antv/async-hook': 2.2.9
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-maps': 2.28.13
-      '@antv/l7-source': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-maps': 2.29.1
+      '@antv/l7-source': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       '@mapbox/martini': 0.2.0
       '@turf/clone': 6.5.0
@@ -2112,21 +2120,21 @@ snapshots:
       eventemitter3: 4.0.7
       gl-matrix: 3.4.4
 
-  '@antv/l7-map@2.28.13':
+  '@antv/l7-map@2.29.1':
     dependencies:
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/unitbezier': 0.0.1
       eventemitter3: 4.0.7
       gl-matrix: 3.4.4
 
-  '@antv/l7-maps@2.28.13':
+  '@antv/l7-maps@2.29.1':
     dependencies:
       '@amap/amap-jsapi-loader': 1.0.1
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-map': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-map': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       eventemitter3: 4.0.7
       gl-matrix: 3.4.4
@@ -2135,30 +2143,29 @@ snapshots:
       pmtiles: 2.11.0
       viewport-mercator-project: 6.2.3
 
-  '@antv/l7-renderer@2.28.13':
+  '@antv/l7-renderer@2.29.1':
     dependencies:
       '@antv/g-device-api': 1.6.13
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
-      regl: 1.6.1
 
-  '@antv/l7-scene@2.28.13':
+  '@antv/l7-scene@2.29.1':
     dependencies:
-      '@antv/l7-component': 2.28.13
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-layers': 2.28.13
-      '@antv/l7-maps': 2.28.13
-      '@antv/l7-renderer': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-component': 2.29.1
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-layers': 2.29.1
+      '@antv/l7-maps': 2.29.1
+      '@antv/l7-renderer': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       eventemitter3: 4.0.7
 
-  '@antv/l7-source@2.28.13':
+  '@antv/l7-source@2.29.1':
     dependencies:
       '@antv/async-hook': 2.2.9
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
       '@mapbox/geojson-rewind': 0.5.2
       '@mapbox/vector-tile': 1.3.1
@@ -2170,7 +2177,7 @@ snapshots:
       pbf: 3.3.0
       supercluster: 7.1.5
 
-  '@antv/l7-utils@2.28.13':
+  '@antv/l7-utils@2.29.1':
     dependencies:
       '@babel/runtime': 7.29.7
       '@turf/bbox': 6.5.0
@@ -2180,15 +2187,15 @@ snapshots:
       eventemitter3: 4.0.7
       gl-matrix: 3.4.4
 
-  '@antv/l7@2.28.13':
+  '@antv/l7@2.29.1':
     dependencies:
-      '@antv/l7-component': 2.28.13
-      '@antv/l7-core': 2.28.13
-      '@antv/l7-layers': 2.28.13
-      '@antv/l7-maps': 2.28.13
-      '@antv/l7-scene': 2.28.13
-      '@antv/l7-source': 2.28.13
-      '@antv/l7-utils': 2.28.13
+      '@antv/l7-component': 2.29.1
+      '@antv/l7-core': 2.29.1
+      '@antv/l7-layers': 2.29.1
+      '@antv/l7-maps': 2.29.1
+      '@antv/l7-scene': 2.29.1
+      '@antv/l7-source': 2.29.1
+      '@antv/l7-utils': 2.29.1
       '@babel/runtime': 7.29.7
 
   '@antv/util@3.3.11':
@@ -2237,7 +2244,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      browserslist: 4.28.2
+      browserslist: 4.28.6
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -2314,157 +2321,157 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/aix-ppc64@0.28.0':
+  '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
   '@esbuild/android-arm64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm64@0.28.0':
+  '@esbuild/android-arm64@0.28.1':
     optional: true
 
   '@esbuild/android-arm@0.25.12':
     optional: true
 
-  '@esbuild/android-arm@0.28.0':
+  '@esbuild/android-arm@0.28.1':
     optional: true
 
   '@esbuild/android-x64@0.25.12':
     optional: true
 
-  '@esbuild/android-x64@0.28.0':
+  '@esbuild/android-x64@0.28.1':
     optional: true
 
   '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.28.0':
+  '@esbuild/darwin-arm64@0.28.1':
     optional: true
 
   '@esbuild/darwin-x64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.28.0':
+  '@esbuild/darwin-x64@0.28.1':
     optional: true
 
   '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.28.0':
+  '@esbuild/freebsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.28.0':
+  '@esbuild/freebsd-x64@0.28.1':
     optional: true
 
   '@esbuild/linux-arm64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.28.0':
+  '@esbuild/linux-arm64@0.28.1':
     optional: true
 
   '@esbuild/linux-arm@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm@0.28.0':
+  '@esbuild/linux-arm@0.28.1':
     optional: true
 
   '@esbuild/linux-ia32@0.25.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.28.0':
+  '@esbuild/linux-ia32@0.28.1':
     optional: true
 
   '@esbuild/linux-loong64@0.25.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.28.0':
+  '@esbuild/linux-loong64@0.28.1':
     optional: true
 
   '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.28.0':
+  '@esbuild/linux-mips64el@0.28.1':
     optional: true
 
   '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.28.0':
+  '@esbuild/linux-ppc64@0.28.1':
     optional: true
 
   '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.28.0':
+  '@esbuild/linux-riscv64@0.28.1':
     optional: true
 
   '@esbuild/linux-s390x@0.25.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.28.0':
+  '@esbuild/linux-s390x@0.28.1':
     optional: true
 
   '@esbuild/linux-x64@0.25.12':
     optional: true
 
-  '@esbuild/linux-x64@0.28.0':
+  '@esbuild/linux-x64@0.28.1':
     optional: true
 
   '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.28.0':
+  '@esbuild/netbsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/netbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.28.0':
+  '@esbuild/netbsd-x64@0.28.1':
     optional: true
 
   '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.28.0':
+  '@esbuild/openbsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/openbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.28.0':
+  '@esbuild/openbsd-x64@0.28.1':
     optional: true
 
   '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.28.0':
+  '@esbuild/openharmony-arm64@0.28.1':
     optional: true
 
   '@esbuild/sunos-x64@0.25.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.28.0':
+  '@esbuild/sunos-x64@0.28.1':
     optional: true
 
   '@esbuild/win32-arm64@0.25.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.28.0':
+  '@esbuild/win32-arm64@0.28.1':
     optional: true
 
   '@esbuild/win32-ia32@0.25.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.28.0':
+  '@esbuild/win32-ia32@0.28.1':
     optional: true
 
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@esbuild/win32-x64@0.28.0':
+  '@esbuild/win32-x64@0.28.1':
     optional: true
 
   '@fontsource/inter@5.2.8': {}
@@ -2497,7 +2504,7 @@ snapshots:
 
   '@mapbox/geojson-types@1.0.2': {}
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+  '@mapbox/jsonlint-lines-primitives@2.0.3': {}
 
   '@mapbox/mapbox-gl-supported@1.5.0(mapbox-gl@1.13.3)':
     dependencies:
@@ -2523,30 +2530,30 @@ snapshots:
 
   '@maplibre/maplibre-gl-style-spec@19.3.3':
     dependencies:
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/unitbezier': 0.0.1
       json-stringify-pretty-compact: 3.0.0
       minimist: 1.2.8
       rw: 1.3.3
       sort-object: 3.0.3
 
-  '@microsoft/api-extractor-model@7.33.8(@types/node@20.19.41)':
+  '@microsoft/api-extractor-model@7.33.10(@types/node@20.19.43)':
     dependencies:
       '@microsoft/tsdoc': 0.16.0
       '@microsoft/tsdoc-config': 0.18.1
-      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.41)
+      '@rushstack/node-core-library': 5.23.3(@types/node@20.19.43)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.58.7(@types/node@20.19.41)':
+  '@microsoft/api-extractor@7.58.11(@types/node@20.19.43)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.33.8(@types/node@20.19.41)
+      '@microsoft/api-extractor-model': 7.33.10(@types/node@20.19.43)
       '@microsoft/tsdoc': 0.16.0
       '@microsoft/tsdoc-config': 0.18.1
-      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.41)
+      '@rushstack/node-core-library': 5.23.3(@types/node@20.19.43)
       '@rushstack/rig-package': 0.7.3
-      '@rushstack/terminal': 0.24.0(@types/node@20.19.41)
-      '@rushstack/ts-command-line': 5.3.9(@types/node@20.19.41)
+      '@rushstack/terminal': 0.24.2(@types/node@20.19.43)
+      '@rushstack/ts-command-line': 5.3.12(@types/node@20.19.43)
       diff: 8.0.4
       minimatch: 10.2.3
       resolve: 1.22.12
@@ -2569,122 +2576,122 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
-  '@rollup/pluginutils@5.3.0(rollup@4.60.4)':
+  '@rollup/pluginutils@5.4.0(rollup@4.62.2)':
     dependencies:
       '@types/estree': 1.0.9
       estree-walker: 2.0.2
-      picomatch: 4.0.4
+      picomatch: 4.0.5
     optionalDependencies:
-      rollup: 4.60.4
+      rollup: 4.62.2
 
-  '@rollup/rollup-android-arm-eabi@4.60.4':
+  '@rollup/rollup-android-arm-eabi@4.62.2':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.60.4':
+  '@rollup/rollup-android-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.60.4':
+  '@rollup/rollup-darwin-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.60.4':
+  '@rollup/rollup-darwin-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.60.4':
+  '@rollup/rollup-freebsd-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.60.4':
+  '@rollup/rollup-freebsd-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.60.4':
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-musl@4.60.4':
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.60.4':
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.60.4':
+  '@rollup/rollup-linux-x64-musl@4.62.2':
     optional: true
 
-  '@rollup/rollup-openbsd-x64@4.60.4':
+  '@rollup/rollup-openbsd-x64@4.62.2':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.60.4':
+  '@rollup/rollup-openharmony-arm64@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.60.4':
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.60.4':
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
     optional: true
 
-  '@rushstack/node-core-library@5.23.1(@types/node@20.19.41)':
+  '@rushstack/node-core-library@5.23.3(@types/node@20.19.43)':
     dependencies:
-      ajv: 8.18.0
-      ajv-draft-04: 1.0.0(ajv@8.18.0)
-      ajv-formats: 3.0.1(ajv@8.18.0)
-      fs-extra: 11.3.5
+      ajv: 8.20.0
+      ajv-draft-04: 1.0.0(ajv@8.20.0)
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      fs-extra: 11.3.6
       import-lazy: 4.0.0
       jju: 1.4.0
       resolve: 1.22.12
       semver: 7.7.4
     optionalDependencies:
-      '@types/node': 20.19.41
+      '@types/node': 20.19.43
 
-  '@rushstack/problem-matcher@0.2.1(@types/node@20.19.41)':
+  '@rushstack/problem-matcher@0.2.1(@types/node@20.19.43)':
     optionalDependencies:
-      '@types/node': 20.19.41
+      '@types/node': 20.19.43
 
   '@rushstack/rig-package@0.7.3':
     dependencies:
       jju: 1.4.0
       resolve: 1.22.12
 
-  '@rushstack/terminal@0.24.0(@types/node@20.19.41)':
+  '@rushstack/terminal@0.24.2(@types/node@20.19.43)':
     dependencies:
-      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.41)
-      '@rushstack/problem-matcher': 0.2.1(@types/node@20.19.41)
+      '@rushstack/node-core-library': 5.23.3(@types/node@20.19.43)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@20.19.43)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 20.19.41
+      '@types/node': 20.19.43
 
-  '@rushstack/ts-command-line@5.3.9(@types/node@20.19.41)':
+  '@rushstack/ts-command-line@5.3.12(@types/node@20.19.43)':
     dependencies:
-      '@rushstack/terminal': 0.24.0(@types/node@20.19.41)
+      '@rushstack/terminal': 0.24.2(@types/node@20.19.43)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -2693,73 +2700,81 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@tailwindcss/node@4.3.0':
+  '@tailwindcss/node@4.3.3':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.22.1
+      enhanced-resolve: 5.24.2
       jiti: 2.7.0
       lightningcss: 1.32.0
       magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.3.0
+      tailwindcss: 4.3.3
 
-  '@tailwindcss/oxide-android-arm64@4.3.0':
+  '@tailwindcss/oxide-android-arm64@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.3.0':
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
     optional: true
 
-  '@tailwindcss/oxide@4.3.0':
+  '@tailwindcss/oxide@4.3.3':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.3.0
-      '@tailwindcss/oxide-darwin-arm64': 4.3.0
-      '@tailwindcss/oxide-darwin-x64': 4.3.0
-      '@tailwindcss/oxide-freebsd-x64': 4.3.0
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
-      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
-      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
-      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
-      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
-      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
-
-  '@tailwindcss/vite@4.3.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))':
-    dependencies:
-      '@tailwindcss/node': 4.3.0
-      '@tailwindcss/oxide': 4.3.0
-      tailwindcss: 4.3.0
-      vite: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/postcss@4.3.3':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      postcss: 8.5.19
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/vite@4.3.3(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))':
+    dependencies:
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      tailwindcss: 4.3.3
+      vite: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
 
   '@turf/bbox-polygon@6.5.0':
     dependencies:
@@ -2825,8 +2840,6 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/estree@1.0.8': {}
-
   '@types/estree@1.0.9': {}
 
   '@types/geojson@7946.0.16': {}
@@ -2843,9 +2856,9 @@ snapshots:
 
   '@types/marked@6.0.0':
     dependencies:
-      marked: 18.0.4
+      marked: 18.0.6
 
-  '@types/node@20.19.41':
+  '@types/node@20.19.43':
     dependencies:
       undici-types: 6.21.0
 
@@ -2853,11 +2866,11 @@ snapshots:
 
   '@types/prop-types@15.7.15': {}
 
-  '@types/react-dom@18.3.7(@types/react@18.3.29)':
+  '@types/react-dom@18.3.7(@types/react@18.3.31)':
     dependencies:
-      '@types/react': 18.3.29
+      '@types/react': 18.3.31
 
-  '@types/react@18.3.29':
+  '@types/react@18.3.31':
     dependencies:
       '@types/prop-types': 15.7.15
       csstype: 3.2.3
@@ -2866,7 +2879,7 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.16
 
-  '@vitejs/plugin-react@4.7.0(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))':
+  '@vitejs/plugin-react@4.7.0(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
@@ -2874,48 +2887,48 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+      vite: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@4.1.8':
+  '@vitest/expect@4.1.10':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.8
-      '@vitest/utils': 4.1.8
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.8(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))':
+  '@vitest/mocker@4.1.10(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))':
     dependencies:
-      '@vitest/spy': 4.1.8
+      '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+      vite: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
 
-  '@vitest/pretty-format@4.1.8':
+  '@vitest/pretty-format@4.1.10':
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.8':
+  '@vitest/runner@4.1.10':
     dependencies:
-      '@vitest/utils': 4.1.8
+      '@vitest/utils': 4.1.10
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.1.8':
+  '@vitest/snapshot@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.1.8
-      '@vitest/utils': 4.1.8
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/utils': 4.1.10
       magic-string: 0.30.21
       pathe: 2.0.3
 
-  '@vitest/spy@4.1.8': {}
+  '@vitest/spy@4.1.10': {}
 
-  '@vitest/utils@4.1.8':
+  '@vitest/utils@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.1.8
+      '@vitest/pretty-format': 4.1.10
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
@@ -2931,18 +2944,18 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue/compiler-core@3.5.35':
+  '@vue/compiler-core@3.5.40':
     dependencies:
       '@babel/parser': 7.29.7
-      '@vue/shared': 3.5.35
+      '@vue/shared': 3.5.40
       entities: 7.0.1
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.35':
+  '@vue/compiler-dom@3.5.40':
     dependencies:
-      '@vue/compiler-core': 3.5.35
-      '@vue/shared': 3.5.35
+      '@vue/compiler-core': 3.5.40
+      '@vue/shared': 3.5.40
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -2952,9 +2965,9 @@ snapshots:
   '@vue/language-core@2.2.0(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.28
-      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-dom': 3.5.40
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.35
+      '@vue/shared': 3.5.40
       alien-signals: 0.4.14
       minimatch: 9.0.9
       muggle-string: 0.4.1
@@ -2962,11 +2975,11 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  '@vue/shared@3.5.35': {}
+  '@vue/shared@3.5.40': {}
 
-  '@webgpu/types@0.1.70': {}
+  '@webgpu/types@0.1.71': {}
 
-  acorn@8.16.0: {}
+  acorn@8.17.0: {}
 
   ahooks@3.9.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -2974,7 +2987,7 @@ snapshots:
       '@types/js-cookie': 3.0.6
       dayjs: 1.11.21
       intersection-observer: 0.12.2
-      js-cookie: 3.0.7
+      js-cookie: 3.0.8
       lodash: 4.18.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2983,18 +2996,25 @@ snapshots:
       screenfull: 5.2.0
       tslib: 2.8.1
 
-  ajv-draft-04@1.0.0(ajv@8.18.0):
+  ajv-draft-04@1.0.0(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
-  ajv-formats@3.0.1(ajv@8.18.0):
+  ajv-formats@3.0.1(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
   ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.2
+      fast-uri: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.3
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -3012,36 +3032,36 @@ snapshots:
 
   async@3.2.6: {}
 
-  autoprefixer@10.5.0(postcss@8.5.15):
+  autoprefixer@10.5.4(postcss@8.5.19):
     dependencies:
-      browserslist: 4.28.2
-      caniuse-lite: 1.0.30001793
+      browserslist: 4.28.6
+      caniuse-lite: 1.0.30001806
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.15
+      postcss: 8.5.19
       postcss-value-parser: 4.2.0
 
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
 
-  baseline-browser-mapping@2.10.32: {}
+  baseline-browser-mapping@2.10.43: {}
 
-  brace-expansion@2.1.1:
+  brace-expansion@2.1.2:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.6:
+  brace-expansion@5.0.7:
     dependencies:
       balanced-match: 4.0.4
 
-  browserslist@4.28.2:
+  browserslist@4.28.6:
     dependencies:
-      baseline-browser-mapping: 2.10.32
-      caniuse-lite: 1.0.30001793
-      electron-to-chromium: 1.5.364
-      node-releases: 2.0.46
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+      baseline-browser-mapping: 2.10.43
+      caniuse-lite: 1.0.30001806
+      electron-to-chromium: 1.5.393
+      node-releases: 2.0.51
+      update-browserslist-db: 1.2.3(browserslist@4.28.6)
 
   bytewise-core@1.2.3:
     dependencies:
@@ -3052,7 +3072,7 @@ snapshots:
       bytewise-core: 1.2.3
       typewise: 1.0.3
 
-  caniuse-lite@1.0.30001793: {}
+  caniuse-lite@1.0.30001806: {}
 
   chai@6.2.2: {}
 
@@ -3086,9 +3106,9 @@ snapshots:
 
   earcut@2.2.4: {}
 
-  electron-to-chromium@1.5.364: {}
+  electron-to-chromium@1.5.393: {}
 
-  enhanced-resolve@5.22.1:
+  enhanced-resolve@5.24.2:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.3
@@ -3097,7 +3117,7 @@ snapshots:
 
   es-errors@1.3.0: {}
 
-  es-module-lexer@2.1.0: {}
+  es-module-lexer@2.3.1: {}
 
   esbuild@0.25.12:
     optionalDependencies:
@@ -3128,34 +3148,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.12
       '@esbuild/win32-x64': 0.25.12
 
-  esbuild@0.28.0:
+  esbuild@0.28.1:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.28.0
-      '@esbuild/android-arm': 0.28.0
-      '@esbuild/android-arm64': 0.28.0
-      '@esbuild/android-x64': 0.28.0
-      '@esbuild/darwin-arm64': 0.28.0
-      '@esbuild/darwin-x64': 0.28.0
-      '@esbuild/freebsd-arm64': 0.28.0
-      '@esbuild/freebsd-x64': 0.28.0
-      '@esbuild/linux-arm': 0.28.0
-      '@esbuild/linux-arm64': 0.28.0
-      '@esbuild/linux-ia32': 0.28.0
-      '@esbuild/linux-loong64': 0.28.0
-      '@esbuild/linux-mips64el': 0.28.0
-      '@esbuild/linux-ppc64': 0.28.0
-      '@esbuild/linux-riscv64': 0.28.0
-      '@esbuild/linux-s390x': 0.28.0
-      '@esbuild/linux-x64': 0.28.0
-      '@esbuild/netbsd-arm64': 0.28.0
-      '@esbuild/netbsd-x64': 0.28.0
-      '@esbuild/openbsd-arm64': 0.28.0
-      '@esbuild/openbsd-x64': 0.28.0
-      '@esbuild/openharmony-arm64': 0.28.0
-      '@esbuild/sunos-x64': 0.28.0
-      '@esbuild/win32-arm64': 0.28.0
-      '@esbuild/win32-ia32': 0.28.0
-      '@esbuild/win32-x64': 0.28.0
+      '@esbuild/aix-ppc64': 0.28.1
+      '@esbuild/android-arm': 0.28.1
+      '@esbuild/android-arm64': 0.28.1
+      '@esbuild/android-x64': 0.28.1
+      '@esbuild/darwin-arm64': 0.28.1
+      '@esbuild/darwin-x64': 0.28.1
+      '@esbuild/freebsd-arm64': 0.28.1
+      '@esbuild/freebsd-x64': 0.28.1
+      '@esbuild/linux-arm': 0.28.1
+      '@esbuild/linux-arm64': 0.28.1
+      '@esbuild/linux-ia32': 0.28.1
+      '@esbuild/linux-loong64': 0.28.1
+      '@esbuild/linux-mips64el': 0.28.1
+      '@esbuild/linux-ppc64': 0.28.1
+      '@esbuild/linux-riscv64': 0.28.1
+      '@esbuild/linux-s390x': 0.28.1
+      '@esbuild/linux-x64': 0.28.1
+      '@esbuild/netbsd-arm64': 0.28.1
+      '@esbuild/netbsd-x64': 0.28.1
+      '@esbuild/openbsd-arm64': 0.28.1
+      '@esbuild/openbsd-x64': 0.28.1
+      '@esbuild/openharmony-arm64': 0.28.1
+      '@esbuild/sunos-x64': 0.28.1
+      '@esbuild/win32-arm64': 0.28.1
+      '@esbuild/win32-ia32': 0.28.1
+      '@esbuild/win32-x64': 0.28.1
 
   escalade@3.2.0: {}
 
@@ -3169,9 +3189,9 @@ snapshots:
 
   eventemitter3@5.0.4: {}
 
-  expect-type@1.3.0: {}
+  expect-type@1.4.0: {}
 
-  exsolve@1.0.8: {}
+  exsolve@1.1.0: {}
 
   extend-shallow@2.0.1:
     dependencies:
@@ -3184,17 +3204,17 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-uri@3.1.2: {}
+  fast-uri@3.1.3: {}
 
-  fdir@6.5.0(picomatch@4.0.4):
+  fdir@6.5.0(picomatch@4.0.5):
     optionalDependencies:
-      picomatch: 4.0.4
+      picomatch: 4.0.5
 
   fflate@0.8.3: {}
 
   fraction.js@5.3.4: {}
 
-  fs-extra@11.3.5:
+  fs-extra@11.3.6:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.2.1
@@ -3213,7 +3233,7 @@ snapshots:
     dependencies:
       '@petamoriken/float16': 3.9.3
       lerc: 3.0.0
-      pako: 2.1.0
+      pako: 2.2.0
       parse-headers: 2.0.6
       quick-lru: 6.1.2
       web-worker: 1.5.0
@@ -3236,7 +3256,7 @@ snapshots:
 
   grid-index@1.1.0: {}
 
-  h3-js@4.4.0: {}
+  h3-js@4.5.0: {}
 
   hammerjs@2.0.8: {}
 
@@ -3280,7 +3300,7 @@ snapshots:
 
   jju@1.4.0: {}
 
-  js-cookie@3.0.7: {}
+  js-cookie@3.0.8: {}
 
   js-tokens@4.0.0: {}
 
@@ -3381,7 +3401,7 @@ snapshots:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
       '@mapbox/geojson-types': 1.0.2
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3)
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/tiny-sdf': 1.2.5
@@ -3405,7 +3425,7 @@ snapshots:
   maplibre-gl@3.6.2:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.3
       '@mapbox/point-geometry': 0.1.0
       '@mapbox/tiny-sdf': 2.2.0
       '@mapbox/unitbezier': 0.0.1
@@ -3430,23 +3450,23 @@ snapshots:
       tinyqueue: 2.0.3
       vt-pbf: 3.1.3
 
-  marked@18.0.4: {}
+  marked@18.0.6: {}
 
-  material-symbols@0.44.10: {}
+  material-symbols@0.44.12: {}
 
   minimatch@10.2.3:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.7
 
   minimatch@9.0.9:
     dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.1.2
 
   minimist@1.2.8: {}
 
   mlly@1.8.2:
     dependencies:
-      acorn: 8.16.0
+      acorn: 8.17.0
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.4
@@ -3457,13 +3477,13 @@ snapshots:
 
   murmurhash-js@1.0.0: {}
 
-  nanoid@3.3.12: {}
+  nanoid@3.3.16: {}
 
-  node-releases@2.0.46: {}
+  node-releases@2.0.51: {}
 
-  obug@2.1.2: {}
+  obug@2.1.4: {}
 
-  pako@2.1.0: {}
+  pako@2.2.0: {}
 
   parse-headers@2.0.6: {}
 
@@ -3480,7 +3500,7 @@ snapshots:
 
   picocolors@1.1.1: {}
 
-  picomatch@4.0.4: {}
+  picomatch@4.0.5: {}
 
   pkg-types@1.3.1:
     dependencies:
@@ -3491,7 +3511,7 @@ snapshots:
   pkg-types@2.3.1:
     dependencies:
       confbox: 0.2.4
-      exsolve: 1.0.8
+      exsolve: 1.1.0
       pathe: 2.0.3
 
   pmtiles@2.11.0:
@@ -3505,9 +3525,9 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.15:
+  postcss@8.5.19:
     dependencies:
-      nanoid: 3.3.12
+      nanoid: 3.3.16
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -3537,8 +3557,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  regl@1.6.1: {}
-
   require-from-string@2.0.2: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -3556,35 +3574,35 @@ snapshots:
 
   robust-predicates@3.0.3: {}
 
-  rollup@4.60.4:
+  rollup@4.62.2:
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
     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
+      '@rollup/rollup-android-arm-eabi': 4.62.2
+      '@rollup/rollup-android-arm64': 4.62.2
+      '@rollup/rollup-darwin-arm64': 4.62.2
+      '@rollup/rollup-darwin-x64': 4.62.2
+      '@rollup/rollup-freebsd-arm64': 4.62.2
+      '@rollup/rollup-freebsd-x64': 4.62.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.2
+      '@rollup/rollup-linux-arm64-gnu': 4.62.2
+      '@rollup/rollup-linux-arm64-musl': 4.62.2
+      '@rollup/rollup-linux-loong64-gnu': 4.62.2
+      '@rollup/rollup-linux-loong64-musl': 4.62.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.2
+      '@rollup/rollup-linux-ppc64-musl': 4.62.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.2
+      '@rollup/rollup-linux-riscv64-musl': 4.62.2
+      '@rollup/rollup-linux-s390x-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-musl': 4.62.2
+      '@rollup/rollup-openbsd-x64': 4.62.2
+      '@rollup/rollup-openharmony-arm64': 4.62.2
+      '@rollup/rollup-win32-arm64-msvc': 4.62.2
+      '@rollup/rollup-win32-ia32-msvc': 4.62.2
+      '@rollup/rollup-win32-x64-gnu': 4.62.2
+      '@rollup/rollup-win32-x64-msvc': 4.62.2
       fsevents: 2.3.3
 
   rw@1.3.3: {}
@@ -3635,7 +3653,7 @@ snapshots:
 
   stackback@0.0.2: {}
 
-  std-env@4.1.0: {}
+  std-env@4.2.0: {}
 
   string-argv@0.3.2: {}
 
@@ -3653,7 +3671,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwindcss@4.3.0: {}
+  tailwindcss@4.3.3: {}
 
   tapable@2.3.3: {}
 
@@ -3663,8 +3681,8 @@ snapshots:
 
   tinyglobby@0.2.17:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
 
   tinyqueue@2.0.3: {}
 
@@ -3672,9 +3690,9 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsx@4.22.3:
+  tsx@4.23.1:
     dependencies:
-      esbuild: 0.28.0
+      esbuild: 0.28.1
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -3699,9 +3717,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
+  update-browserslist-db@1.2.3(browserslist@4.28.6):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.6
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -3710,10 +3728,10 @@ snapshots:
       '@babel/runtime': 7.29.7
       gl-matrix: 3.4.4
 
-  vite-plugin-dts@4.5.4(@types/node@20.19.41)(rollup@4.60.4)(typescript@5.9.3)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)):
+  vite-plugin-dts@4.5.4(@types/node@20.19.43)(rollup@4.62.2)(typescript@5.9.3)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)):
     dependencies:
-      '@microsoft/api-extractor': 7.58.7(@types/node@20.19.41)
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.4)
+      '@microsoft/api-extractor': 7.58.11(@types/node@20.19.43)
+      '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
       '@volar/typescript': 2.4.28
       '@vue/language-core': 2.2.0(typescript@5.9.3)
       compare-versions: 6.1.1
@@ -3723,51 +3741,51 @@ snapshots:
       magic-string: 0.30.21
       typescript: 5.9.3
     optionalDependencies:
-      vite: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+      vite: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3):
+  vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1):
     dependencies:
       esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-      postcss: 8.5.15
-      rollup: 4.60.4
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+      postcss: 8.5.19
+      rollup: 4.62.2
       tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 20.19.41
+      '@types/node': 20.19.43
       fsevents: 2.3.3
       jiti: 2.7.0
       lightningcss: 1.32.0
-      tsx: 4.22.3
-
-  vitest@4.1.8(@types/node@20.19.41)(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)):
-    dependencies:
-      '@vitest/expect': 4.1.8
-      '@vitest/mocker': 4.1.8(vite@6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3))
-      '@vitest/pretty-format': 4.1.8
-      '@vitest/runner': 4.1.8
-      '@vitest/snapshot': 4.1.8
-      '@vitest/spy': 4.1.8
-      '@vitest/utils': 4.1.8
-      es-module-lexer: 2.1.0
-      expect-type: 1.3.0
+      tsx: 4.23.1
+
+  vitest@4.1.10(@types/node@20.19.43)(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)):
+    dependencies:
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(vite@6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1))
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.3.1
+      expect-type: 1.4.0
       magic-string: 0.30.21
-      obug: 2.1.2
+      obug: 2.1.4
       pathe: 2.0.3
-      picomatch: 4.0.4
-      std-env: 4.1.0
+      picomatch: 4.0.5
+      std-env: 4.2.0
       tinybench: 2.9.0
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 6.4.2(@types/node@20.19.41)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)
+      vite: 6.4.3(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.19.41
+      '@types/node': 20.19.43
     transitivePeerDependencies:
       - msw
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 4d846bc..84466b0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - packages/*
-
+allowBuilds:
+  esbuild: true
diff --git a/scripts/generate-static-html.ts b/scripts/generate-static-html.ts
index 69df182..c1b4784 100644
--- a/scripts/generate-static-html.ts
+++ b/scripts/generate-static-html.ts
@@ -26,6 +26,7 @@ const demoRoutes: Array<{ file: string; name: string; group: string; description
   { file: 'app/InterestMap', name: 'InterestMap 兴趣地图', group: '应用模板', description: '兴趣点标注地图' },
   { file: 'app/FlightRouteMap', name: 'FlightRouteMap 航线地图', group: '应用模板', description: '航班飞行路线可视化' },
   { file: 'app/DarkThemeMap', name: 'DarkThemeMap 暗色主题', group: '应用模板', description: '暗色主题地图模板' },
+  { file: 'app/TyphoonMap', name: 'TyphoonMap 台风地图', group: '应用模板', description: '台风路径与风圈可视化（数据来源：浙江水利）' },
   // 复合图层
   { file: 'composite/BubbleLayer', name: 'BubbleLayer 气泡图', group: '复合图层', description: '数据驱动的气泡标注可视化' },
   { file: 'composite/IconLabel', name: 'IconLabel 图片标注', group: '复合图层', description: '自定义图片标注图层' },
diff --git a/skills/aimapui/SKILL.md b/skills/aimapui/SKILL.md
index 541944e..b592e3f 100644
--- a/skills/aimapui/SKILL.md
+++ b/skills/aimapui/SKILL.md
@@ -1,26 +1,26 @@
 ---
 name: aimapui
-description: React map visualization library @antv/aimapui. Use whenever the user wants to create maps, map layers, geographic visualizations, or map controls — covers AiMap container, 6 base layers, 12 composite layers, 13 controls, interactions, legends, mobile components, and schema-driven mode. Schema-driven, L7-based.
-version: 0.3.3
+description: React map visualization library @antv/aimapui. Use whenever the user wants to create maps, map layers, geographic visualizations, or map controls — covers AiMap container, 6 base layers, 12 composite layers, 15 controls, interactions, legends, mobile components, and schema-driven mode. Schema-driven, L7-based.
+version: 0.4.4
 ---
 
 # aimapui
 
-**触发条件：** 用户需要创建地图、地图可视化、地理数据展示时，必须使用此 skill。覆盖 AiMap 容器、6 种基础图层（Point/Line/Polygon/Heatmap/Raster/Image）、12 种复合图层（行政区划下钻/气泡/路径/弧线流向/图标/字标/聚合/蜂窝/填充/卫星/GeoTIFF/H3）、13 种控件。特殊控件：DrawControl（交互绘制）、ImageCalibrationControl（图片配准/地图校准）、AnnotationControl（标注）。
+**触发条件：** 用户需要创建地图、地图可视化、地理数据展示时，必须使用此 skill。覆盖 AiMap 容器、6 种基础图层（Point/Line/Polygon/Heatmap/Raster/Image）、12 种复合图层（行政区划下钻/气泡/路径/弧线流向/图标/字标/聚合/蜂窝/填充/卫星/GeoTIFF/H3）、15 种控件。特殊控件：DrawControl（交互绘制）、ImageCalibrationControl（图片配准/地图校准）、AnnotationControl（标注）。
 
 ## Version
 
-见 frontmatter `version` 字段。当前：`@antv/aimapui` / `@antv/aimapui-cli` → **0.3.3**
+见 frontmatter `version` 字段。当前：`@antv/aimapui` / `@antv/aimapui-cli` → **0.4.4**
 
 ## Install
 
 ```bash
-npm install @antv/aimapui @antv/l7 @antv/l7-maps
+npm install @antv/aimapui @antv/l7
 # or
-pnpm add @antv/aimapui @antv/l7 @antv/l7-maps
+pnpm add @antv/aimapui @antv/l7
 ```
 
-> **注意:** `@antv/l7` 版本必须 **≥ 2.28.14**，低于此版本会导致部分功能异常（如控件渲染、动态 import 等）。
+> **注意:** `@antv/l7` 版本必须 **≥ 2.29.1**，低于此版本会导致部分功能异常（如控件渲染、动态 import 等）。
 ```
 
 > **注意:** 使用组件前必须引入样式文件 `import '@antv/aimapui/style.css'`，否则控件、弹窗、图例等样式不生效。
@@ -29,7 +29,6 @@ pnpm add @antv/aimapui @antv/l7 @antv/l7-maps
 
 ```html
 <script src="https://unpkg.com/@antv/l7"></script>
-<script src="https://unpkg.com/@antv/l7-maps"></script>
 <script src="https://unpkg.com/@antv/aimapui/dist/index.iife.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/@antv/aimapui/dist/style.css" />
 ```
@@ -55,16 +54,18 @@ import '@antv/aimapui/style.css';
 ## Architecture
 
 - **AiMap** — Container component, manages Scene/Map lifecycle; supports `autoFit` for automatic viewport fitting
-- **Layers** — 6 base types: `PointLayer`, `LineLayer`, `PolygonLayer`, `HeatmapLayer`, `RasterLayer`, `ImageLayer`
+- **Layers** — 6 base types: `PointLayer`, `LineLayer`, `PolygonLayer`, `HeatmapLayer`, `RasterLayer`, `ImageLayer`。⚠️ **必须用 aimapui 封装的 React 组件**（声明式、生命周期托管、含 schema/autoFit/EventBus）；**禁止绕过去 `new` L7 同名图层类 + `scene.addLayer()` 重新实现**（这 6 个类名与 L7 同名，`from '@antv/l7'` 会拿到原生图层类）
 - **Composite Layers** — Business-ready (12 types): `BubbleLayer`, `RouteLayer`, `ArcFlowLayer`, `IconLayer`, `GlyphLayer`, `ChinaDistrict`, `MarkerClusterLayer`, `HexagonLayer`, `FillLayer`, `SatelliteLayer`, `TiffRasterLayer`, `H3Layer`
-- **Controls** — `ZoomControl`, `ScaleControl`, `FullscreenControl`, `GeoLocateControl`, `MapThemeControl`, `MouseLocationControl`, `ExportImageControl`, `LayerSwitchControl`, `LegendControl`, `LogoControl`, `DrawControl`, `ImageCalibrationControl`, `AnnotationControl` (13 types, 12 positions)
+- **Controls** — `ZoomControl`, `ResetViewControl`, `ScaleControl`, `FullscreenControl`, `GeoLocateControl`, `MapThemeControl`, `MouseLocationControl`, `ExportImageControl`, `LayerSwitchControl`, `LegendControl`, `LogoControl`, `SatelliteLayerControl`, `DrawControl`, `ImageCalibrationControl`, `AnnotationControl` (15 types, 12 positions)
 - **Interactions** — `Marker`, `Popup`, `Tooltip` + Maki icon utilities (`makiIconUrl`, `makiPinUrl`, `createMakiIconMap`, `createMakiPinMap`, `MAKI_ICONS`, `MAKI_ICON_NAMES`)
 - **Legends** — `LegendCategories`, `LegendRamp`, `LegendDiverging`, `LegendThreshold`, `LegendSize`, `LegendLineWidth`, `LegendProportion`, `LegendIcon` (8 types)
 - **Mobile** — `BottomSheet`, `MobileToolbar`, `MobileSheetLegend`, `SearchBar`
-- **Hooks** — `useResponsive`, `useScene`, `useMapPosition`, `useEventBus`, `useTheme`
+- **Hooks** — `useResponsive`, `useScene`, `useMapPosition`, `useMapControl`, `useEventBus`, `useTheme`
+  - ⚠️ `useScene()` / `onSceneReady` 拿到的是 L7 `Scene`，可用 `setCenter/setZoom/setPitch/setRotation/setZoomAndCenter/fitBounds/panTo/zoomIn/zoomOut` 等通用方法；**没有** `flyTo`、`easeTo`、`jumpTo` 等 mapbox/maplibre 原生方法（调用会报 `is not a function`）。「定点飞行」用 `scene.setZoomAndCenter(zoom, [lng, lat])` 或 `setCenter+setZoom` 组合。详见 [aimap-container.md](references/core/aimap-container.md) 的 *Scene 操作方法* 小节。
 - **Utilities** — `ErrorBoundary`, `ResponsiveProvider`, `ThemeProvider`, `EventBus`
 - **Schema Mode** — Render entire map from a single `AiMapSchema` JSON object
 - **Build Formats** — ESM, CJS, IIFE (CDN), TypeScript declarations
+- **@antv/aimapui-plot** — Separate package for tactical plot/bindtype components (`PlotControl`, `PlotToolbar`)
 
 ## Reference Docs (load as needed)
 
@@ -92,6 +93,7 @@ import '@antv/aimapui/style.css';
 
 | 错误 | 现象 | 解决方案 |
 |------|------|---------|
+| **绕过 aimapui 直接调 L7 图层** | 不用 aimapui 的 React 图层组件，而是 `import { PointLayer } from '@antv/l7'` + `new PointLayer(...)` + `scene.addLayer(...)` 重新实现 —— 重复造轮子、丢失 schema/autoFit/EventBus/响应式/生命周期托管；且这 6 个类名与 aimapui 同名，`from` 错就会落到 L7 原生图层类 | **必须** `import { PointLayer } from '@antv/aimapui'` 用声明式组件；`@antv/l7` 只用于底图引擎（`GaodeMap` 等）和 `Scene` 类型 |
 | 未引入 style.css | 控件/弹窗/图例样式丢失 | `import '@antv/aimapui/style.css'`（CDN 用 `<link>`） |
 | 容器无高度 | 地图不显示 | 确保父容器有明确高度，或给 AiMap 设置 `style={{ height: '100vh' }}` |
 | map 与 schema 同时传入 | 报错或地图异常 | 只传一个，两者互斥 |
@@ -138,7 +140,7 @@ const schema = { map: { basemap: 'gaode', center: [121,31], zoom: 12 }, layers:
 |------|-----------|-----------|
 | ChinaDistrict | [china-district.md](references/composite/china-district.md) | 行政区划下钻 + 业务数据色阶绑定 |
 | BubbleLayer | [bubble-layer.md](references/composite/bubble-layer.md) | 气泡大小编码数值 |
-| RouteLayer | [route-layer.md](references/composite/route-layer.md) | 路径地图（静态/驾车/步行/骑行/公交） |
+| RouteLayer | [route-layer.md](references/composite/route-layer.md) | 路径地图（默认 Marker 编号标注，支持 point/marker/icon 模式；静态/驾车/步行/骑行/公交） |
 | ArcFlowLayer | [arc-flow-layer.md](references/composite/arc-flow-layer.md) | OD 弧线流向动画 |
 | IconLayer | [icon-layer.md](references/composite/icon-layer.md) | 自定义图片图标 + Maki 内置图标 |
 | GlyphLayer | [glyph-layer.md](references/composite/glyph-layer.md) | 图标字体标注（Material Symbols） |
diff --git a/skills/aimapui/references/composite/china-district.md b/skills/aimapui/references/composite/china-district.md
index f00de73..4f721fe 100644
--- a/skills/aimapui/references/composite/china-district.md
+++ b/skills/aimapui/references/composite/china-district.md
@@ -58,17 +58,30 @@ import { ChinaDistrict, ADMIN_SEQUENTIAL_COLORS } from '@antv/aimapui';
 | `clickSelect` | `boolean` | — | 点击选中 |
 | `showTooltip` | `boolean` | — | Tooltip 显示 |
 | `tooltipFields` | `string[]` | `[labelField, valueField]` | Tooltip 自定义字段 |
-| `onRegionClick` | `(feature, level) => void` | — | 区域点击事件 |
+| `onRegionClick` | `(feature, level) => void` | — | 区域单击事件 |
+| `onRegionDblclick` | `(feature, level) => void` | — | 区域双击事件（双击触发上卷时也会回调） |
 | `zIndex` | `number` | — | 图层 zIndex |
 
+## 交互模型
+
+| 手势 | 行为 |
+|------|------|
+| 单击（click） | 下钻进入下一级（省→市→县） |
+| 双击（dblclick） | 上卷返回上一级 |
+| 面包屑点击 | 跳转到指定层级 |
+
+> L7 中 `click` 和 `dblclick` 是原生支持的事件，两者互斥。
+
+> 使用 L7 的 `undblclick` 事件（确认单击，排除双击的第一下）避免 click/dblclick 歧义；
+> `dblclick` 直接上卷，无需额外确认。
+
 ## 命令式 API（ref）
 
 | Method | Description |
 |--------|-------------|
-| `drillDown(pathNode)` | 下钻到指定区域 |
 | `drillUp()` | 上钻一级 |
-| `resetDrill()` | 重置下钻路径回到省级 |
-| `getCurrentLevel()` | 获取当前层级 |
+| `drillUpTo(targetIndex)` | 上钻到指定层级（面包屑索引用） |
+| `getDrillPath()` | 获取当前下钻路径 |
 
 ## GeoJSON Matchable Fields
 
diff --git a/skills/aimapui/references/composite/index.md b/skills/aimapui/references/composite/index.md
index 7f367c4..6bddaf1 100644
--- a/skills/aimapui/references/composite/index.md
+++ b/skills/aimapui/references/composite/index.md
@@ -2,6 +2,8 @@
 
 复合图层是基于基础图层组合的高级业务组件，内置设计规范和最佳实践。
 
+> **所有可视化图层必须从 `@antv/aimapui` 引入**，禁止直接使用 `@antv/l7` 原生图层类。基础图层与 L7 同名的重名陷阱详见 [基础图层文档](../layers/index.md) 的 ⚠️ 小节。
+
 ## Available Layers
 
 | Layer | File | Description |
diff --git a/skills/aimapui/references/composite/route-layer.md b/skills/aimapui/references/composite/route-layer.md
index 105fa8d..243bb22 100644
--- a/skills/aimapui/references/composite/route-layer.md
+++ b/skills/aimapui/references/composite/route-layer.md
@@ -1,13 +1,15 @@
 # RouteLayer — 路径地图
 
-序列化途经点 + 发光效果 + 分段着色 + 流动动画 + 多路径模式（直线/弧线/交通路线）。
+序列化途经点 + 分段着色 + 多路径模式（直线/弧线/交通路线）。
+
+> **停留点渲染：** 默认使用 `marker` 类型标注（`stopRenderer='marker'`），通过内置 `Marker` 组件渲染编号/语义色站点；仅在需要纯 L7 圆点或图片图标时再显式切换为 `point` / `icon`。
 
 ## Examples
 
 ```tsx
 import { RouteLayer } from '@antv/aimapui';
 
-// 基础用法：静态路径
+// 基础用法：静态路径（停留点默认 marker 标注）
 <RouteLayer
   path={[[120.15, 30.28], [120.17, 30.25], [120.20, 30.22]]}
   stops={[
@@ -16,8 +18,6 @@ import { RouteLayer } from '@antv/aimapui';
   ]}
   color="#2563eb"
   lineWidth={4}
-  glow={true}
-  animate={true}
   showStopIndex={true}
   endColor="#10b981"
   onPathClick={(p) => console.log(p)}
@@ -64,9 +64,6 @@ import { RouteLayer } from '@antv/aimapui';
 | `color` | `string` | `'#2563eb'` | 路径颜色 |
 | `lineWidth` | `number` | `4` | 路径宽度 |
 | `opacity` | `number` | `0.9` | 路径透明度 |
-| `glow` | `boolean` | `true` | 是否显示发光效果 |
-| `animate` | `boolean` | `false` | 是否启用流动动画 |
-| `animateSpeed` | `number` | `1` | 动画速度 |
 | `stopSize` | `number` | `14` | 途经点大小 |
 | `stopColor` | `string` | 跟随路径色 | 途经点颜色 |
 | `endColor` | `string` | `'#10b981'` | 终点颜色 |
@@ -74,13 +71,13 @@ import { RouteLayer } from '@antv/aimapui';
 | `showStopName` | `boolean` | `true` | 是否显示途经点名称 |
 | `stopNameColor` | `string` | `'#334155'` | 名称文字颜色 |
 | `stopNameSize` | `number` | `11` | 名称文字大小 |
-| `stopRenderer` | `'point' \| 'marker' \| 'icon'` | `'point'` | 停留点渲染模式 |
+| `stopRenderer` | `'point' \| 'marker' \| 'icon'` | `'marker'` | 停留点渲染模式（默认 marker，优先使用 marker 类型标注） |
 | `stopMarkerVariant` | `MarkerVariant` | `'circle'` | marker 模式下的默认变体 |
 | `stopIconMap` | `Record<string, string>` | — | icon 模式下的图标资源映射 |
 | `stopIconField` | `string` | `'iconValue'` | icon 模式下的图标字段名 |
 | `stopIconSize` | `number` | `16` | icon 模式下的图标尺寸 |
 | `stopIconAnchor` | `IconAnchor` | `'bottom'` | icon 模式下的图标锚点 |
-| `showStopPopup` | `boolean` | `true` | 点击途经点时是否显示 Popup |
+| `showStopPopup` | `boolean` | `false` | 点击途经点时是否显示 Popup |
 | `activeColor` | `string` | `'#fbbf24'` | hover 高亮色 |
 | `onPathClick` | `(payload) => void` | — | 路径点击回调 |
 | `onStopClick` | `(payload) => void` | — | 途经点点击回调 |
diff --git a/skills/aimapui/references/controls/controls.md b/skills/aimapui/references/controls/controls.md
index b53998a..709dad8 100644
--- a/skills/aimapui/references/controls/controls.md
+++ b/skills/aimapui/references/controls/controls.md
@@ -13,6 +13,7 @@
 
 - [ControlPosition 类型](#controlposition-类型)
 - [ZoomControl — 缩放控件](#zoomcontrol--缩放控件)
+- [ResetViewControl — 重置视图](#resetviewcontrol--重置视图)
 - [ScaleControl — 比例尺](#scalecontrol--比例尺)
 - [FullscreenControl — 全屏控件](#fullscreencontrol--全屏控件)
 - [GeoLocateControl — 定位控件](#geolocatecontrol--定位控件)
@@ -66,6 +67,31 @@ import { ZoomControl } from '@antv/aimapui';
 
 ## ScaleControl — 比例尺
 
+## ResetViewControl — 重置视图
+
+一键重置地图到初始视图（中心、缩放级别、旋转角、俯仰角）。
+
+默认位置：`bottomright`
+
+```tsx
+import { ResetViewControl } from '@antv/aimapui';
+
+<ResetViewControl
+  position="bottomright"
+  title="重置视图"
+  initialView={{ center: [121.4, 31.2], zoom: 12, pitch: 0, rotation: 0 }}
+/>
+```
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `position` | `ControlPosition` | `'bottomright'` | 控件位置 |
+| `icon` | `ReactNode` | Material `center_focus_strong` | 按钮图标 |
+| `title` | `string` | `'Reset view'` | 按钮提示 |
+| `initialView` | `{ center?, zoom?, pitch?, rotation? }` | — | 自定义初始视图，不传时使用地图创建时的值 |
+
+## ScaleControl — 比例尺
+
 默认位置：`bottomleft`
 
 ```tsx
diff --git a/skills/aimapui/references/core/aimap-container.md b/skills/aimapui/references/core/aimap-container.md
index b582a33..590c31f 100644
--- a/skills/aimapui/references/core/aimap-container.md
+++ b/skills/aimapui/references/core/aimap-container.md
@@ -96,7 +96,7 @@ import { AiMap } from '@antv/aimapui';
 当项目已安装 L7 底图引擎，或需要跳过动态 import（SSR、微前端等）时，可通过 `engine` 直接传入引擎构造函数：
 
 ```tsx
-import { GaodeMap } from '@antv/l7-maps/gaode';
+import { GaodeMap } from '@antv/l7';
 
 <AiMap map={{ engine: GaodeMap, center: [116, 39], zoom: 10 }}>
   <PointLayer source={data} />
@@ -131,6 +131,61 @@ AiMap 内部创建了 5 个 Context：
 
 子组件通过 `useScene()` / `useEventBus()` / `useResponsive()` 等 Hook 获取。
 
+## Scene 操作方法
+
+通过 `onSceneReady` 回调或 `useScene()` Hook 拿到 L7 的 `Scene` 实例后，即可编程式控制地图视角。
+
+```tsx
+import { AiMap, useScene } from '@antv/aimapui';
+import type { Scene } from '@antv/l7';  // Scene 类型由 @antv/l7 提供，aimapui 未 re-export
+
+// 方式一：回调
+<AiMap map={{ basemap: 'gaode' }} onSceneReady={(scene: Scene) => {
+  // scene 即 L7 Scene 实例
+}} />
+
+// 方式二：子组件内 Hook
+function MyController() {
+  const scene = useScene();
+  if (!scene) return null;
+  return <button onClick={() => scene.zoomIn()}>放大</button>;
+}
+```
+
+### 可用方法（L7 Scene 通用，跨底图引擎均支持）
+
+| 方法 | 说明 |
+|------|------|
+| `setCenter([lng, lat], opts?)` | 设置中心点 |
+| `setZoom(zoom)` / `zoomIn()` / `zoomOut()` | 缩放 |
+| `setPitch(pitch)` | 俯仰角 |
+| `setRotation(rotation)` | 旋转角 |
+| `setZoomAndCenter(zoom, [lng, lat])` | 同时设置缩放与中心点（定点飞行推荐） |
+| `fitBounds([[minLng,minLat],[maxLng,maxLat]], opts?)` | 适配到边界矩形 |
+| `panTo([lng, lat])` / `panBy(x, y)` | 平移 |
+| `getCenter()` / `getZoom()` / `getPitch()` / `getRotation()` / `getBounds()` | 读取当前视角 |
+| `setMapStyle(style)` / `setMapStatus(opts)` | 切换底图样式 / 地图状态 |
+| `addLayer(layer)` / `removeLayer(layer)` | 图层增删（通常由图层组件托管，无需手动调） |
+| `lngLatToPixel` / `pixelToLngLat` / `containerToLngLat` / `lngLatToContainer` | 坐标互转 |
+
+### ⚠️ 不存在的方法
+
+L7 的 `Scene` 是统一抽象层，**没有** `flyTo`、`easeTo`、`jumpTo` 等 mapbox / maplibre 原生 `Map` 实例方法。直接调用会报 `TypeError: scene.flyTo is not a function`。
+
+```ts
+// ❌ 错误 — L7 Scene 没有 flyTo
+scene.flyTo({ center: [120, 30], zoom: 14 });
+
+// ✅ 正确一 — setZoomAndCenter（一行搞定定点缩放，跨引擎通用）
+scene.setZoomAndCenter(14, [120, 30]);
+
+// ✅ 正确二 — setCenter + setZoom 组合
+scene.setCenter([120, 30]);
+scene.setZoom(14);
+```
+
+> 如需"打开即看到全部数据"，优先用 `<AiMap autoFit>`（内部自动 `fitBounds`），无需手动操作 Scene。
+
 ## 事件 Payload
 
 ```typescript
diff --git a/skills/aimapui/references/core/basemap-factory.md b/skills/aimapui/references/core/basemap-factory.md
index 86ba3f7..68fc539 100644
--- a/skills/aimapui/references/core/basemap-factory.md
+++ b/skills/aimapui/references/core/basemap-factory.md
@@ -91,15 +91,16 @@ terrain → 'terrain'
 
 内部通过轮询等待原生 `google.maps.Map` 实例就绪后，拦截 `setOptions` 调用，过滤原生 UI 字段。
 
-## 动态导入
+## 底图引擎导入
 
-所有底图模块通过 `await import('@antv/l7-maps')` 动态导入，未使用的底图不会进入最终打包。
+所有底图引擎（`GaodeMap` / `Mapbox` / `TMap` / `TencentMap` / `BaiduMap` / `MapLibre` / `GoogleMap` / `Map`）统一从 `@antv/l7` 静态导入：
 
 ```ts
-// 示例：仅使用高德底图时，Mapbox/Google 等模块不会被打包
-const { GaodeMap } = await import('@antv/l7-maps');
+import { GaodeMap, Mapbox, TMap, TencentMap, BaiduMap, MapLibre, GoogleMap, Map } from '@antv/l7';
 ```
 
+`@antv/l7` re-export 了 `@antv/l7-maps` 的全部引擎适配层，**无需再单独安装或引入 `@antv/l7-maps`**。构建时 `@antv/l7` 标记为 external，各引擎适配层（mapbox-gl / maplibre-gl / AMap Loader 及 GLSL 着色器等）不会被打进产物。
+
 ## 外部引擎注入（v0.3.1+）
 
 当 `MapSchema.engine` 存在时，`createBasemap()` 会跳过动态 import，直接使用传入的构造函数创建地图实例：
@@ -123,8 +124,7 @@ if (schema.engine) {
 使用示例：
 
 ```tsx
-import { GaodeMap } from '@antv/l7-maps/gaode';
-import { Mapbox } from '@antv/l7-maps/mapbox';
+import { GaodeMap, Mapbox } from '@antv/l7';
 
 // 高德
 <AiMap map={{ engine: GaodeMap, token: 'YOUR_TOKEN', center: [116, 39], zoom: 10 }} />
diff --git a/skills/aimapui/references/layers/index.md b/skills/aimapui/references/layers/index.md
index 877971d..9549c41 100644
--- a/skills/aimapui/references/layers/index.md
+++ b/skills/aimapui/references/layers/index.md
@@ -2,6 +2,40 @@
 
 基础图层是直接映射到 L7 底层图层类的原子组件，每个图层类型对应一种数据可视化形式。
 
+## ⚠️ 使用 aimapui 图层组件，不要绕过去直接调 L7 重新实现
+
+aimapui 已将 L7 可视化图层封装成**声明式 React 组件**：组件内部自动完成 `new` 图层类 → `scene.addLayer()` → 数据 source 绑定 → 视觉映射 → 卸载清理（`removeLayer`）→ `autoFit` / `EventBus` / 响应式 / schema 适配集成。**必须使用这些组件，禁止绕过 aimapui 直接 `new` L7 图层类 + `scene.addLayer()` 重新实现**——手动管理生命周期会丢失封装能力、易内存泄漏、与 `<AiMap>` 容器隔离。
+
+| 来源 | 本质 | API 风格 | 用法 |
+|------|------|---------|------|
+| `@antv/aimapui` ✅ | React 组件 | 声明式、schema 驱动 | `<PointLayer source={data} ... />`，作为 `<AiMap>` 子元素 |
+| `@antv/l7` ❌ | L7 原生图层类 | 命令式 `new PointLayer({...})` | 需手动 `scene.addLayer(layer)`，无法当 JSX 用 |
+
+**必须**从 aimapui 引入可视化图层组件：
+
+```tsx
+// ✅ 正确 — aimapui 封装的 React 组件：声明式、生命周期托管、自动接入 AiMap 的 Scene
+import { AiMap, PointLayer, LineLayer, PolygonLayer, HeatmapLayer, RasterLayer, ImageLayer } from '@antv/aimapui';
+
+<AiMap map={{ basemap: 'gaode' }} autoFit>
+  <PointLayer source={data} sourceConfig={{ x: 'lng', y: 'lat' }} color="#5B8FF9" size={8} shape="circle" />
+</AiMap>
+```
+
+```tsx
+// ❌ 错误 — 绕过 aimapui，直接拿 L7 原生图层类自己 new + addLayer 重新实现
+import { PointLayer } from '@antv/l7';            // 这是 L7 图层类，不是 React 组件
+const layer = new PointLayer({ source: data });   // 命令式，需自行管理生命周期
+scene.addLayer(layer);                            // 手动挂载，丢失 autoFit/EventBus/schema 等封装
+```
+
+**为什么不直接调 L7 重新实现：**
+- **重复造轮子**：aimapui 已封装 schema 集成（`adaptPointLayer` 等适配器）、`autoFit`、`EventBus`、响应式、生命周期托管、preview，自管 `addLayer`/`removeLayer` 等于重写这些
+- **生命周期隐患**：手动 `scene.addLayer()` 需自行在卸载时 `removeLayer`，遗漏即内存泄漏；aimapui 组件已自动处理
+- **易踩同名陷阱**：`PointLayer`/`LineLayer`/`PolygonLayer`/`HeatmapLayer`/`RasterLayer`/`ImageLayer` 这 6 个名字在 `@antv/aimapui`（组件）与 `@antv/l7`（图层类）中同时存在，`from '@antv/l7'` 就会拿到原生图层类、被迫重新实现
+
+> 唯一允许从 `@antv/l7` 引入的是**底图引擎构造函数**（`GaodeMap`/`Mapbox`/`TMap` 等）和 `Scene` 类型 —— 见 [basemap-factory.md](../core/basemap-factory.md)。
+
 ## 图层列表
 
 | Layer | 文档 | 默认 sourceType | 可用 Shape | 说明 |
diff --git a/skills/map-design/SKILL.md b/skills/map-design/SKILL.md
new file mode 100644
index 0000000..6f5fb01
--- /dev/null
+++ b/skills/map-design/SKILL.md
@@ -0,0 +1,53 @@
+---
+name: map-app-builder
+description: >-
+  Build production-ready map applications using @antv/aimapui. Covers layout architecture, layer z-index hierarchy, UI overlay stacking, theme system, interaction patterns, and data-type-to-component mapping. Use this skill whenever the user asks to create a map application, build a geographic visualization, design a map dashboard, or needs guidance on aimapui component selection, layer ordering, or map UI architecture. Triggers on: "create a map app", "build a map", "map visualization", "geographic dashboard", "map layout", "layer hierarchy", "map theme", "which aimapui component for X data".
+---
+
+# Map Application Builder
+
+Build complete map applications with @antv/aimapui following established conventions for layout, layering, theming, and interaction.
+
+## Specification System
+
+本 Skill 采用 **规范 + 场景** 双层结构：
+
+- **specs/** — 可复用的通用规范（技术规范 + 设计规范），适用于所有场景
+- **scenes/** — 具体业务场景指南，引用 specs 中的规范并补充场景专属的布局、组件选型和交互模式
+
+### Specifications (specs/)
+
+| 规范 | File | Description |
+|------|------|-------------|
+| 技术规范 | [technical.md](specs/technical.md) | 布局、图层层级、DOM z-index、主题系统、交互模式、数据类型→组件映射、控件放置、图例选择、常见陷阱 |
+| Google Maps Mobile 设计语言 | [google-maps-mobile.md](specs/google-maps-mobile.md) | Design Tokens（颜色/字体/圆角/阴影/间距）、核心组件级 CSS 规范（14 个组件：Search Bar 3 态、Bottom Nav、Pill、Button、FAB、Tab Bar、Transportation Chip、List Item、User Location 等）、Z-Index 层级规范、交互状态规范（7 类）、页面级布局模式（Explore/Search/Navigate/Business）、aimapui 映射表 |
+| Apple Maps 设计语言 | [apple-maps.md](specs/apple-maps.md) | Design Tokens、Liquid Glass 效果、颜色/字体/圆角/阴影系统、页面布局模式（Browse/PlaceCard/Search）、核心组件规范、aimapui 映射建议 |
+
+### Scenes (scenes/)
+
+根据应用场景加载对应的详细指南：
+
+| 场景 | File | When to load |
+|------|------|-------------|
+| PC 分析地图 / 数据仪表盘 / 监控大屏 | [pc-analytics.md](scenes/pc-analytics.md) | 桌面端数据分析、多图层叠加、侧边面板联动、精细 hover/click 交互 |
+| 移动端地图应用 | [mobile-map.md](scenes/mobile-map.md) | 手机/平板端、BottomSheet 面板、MobileToolbar、触屏 tap 交互、手势友好设计 |
+| 旅游地图 / 景区导览 / 城市探索 | [vertical-tourism.md](scenes/vertical-tourism.md) | POI 标注、游览路线串联、Maki 图标映射、图文混排详情面板、分类筛选 |
+
+## Quick Start
+
+```bash
+pnpm add @antv/aimapui @antv/l7
+```
+
+```tsx
+import '@antv/aimapui/style.css'; // Required — controls, popups, legends won't render without it
+```
+
+L7 version must be ≥ 2.29.1.
+
+## How to Use This Skill
+
+1. **始终先读 specs/technical.md** — 包含所有场景必须遵守的技术约束（层级、z-index、主题等）
+2. **按需加载 specs/google-maps-mobile.md** — 当需要对标 Google Maps 视觉规范时
+3. **按场景加载 scenes/*.md** — 获取该场景专属的布局模式、推荐组件组合和交互规范
+4. **场景文件会引用规范** — 例如移动端场景会引用 technical.md 的 z-index 规则和 google-maps-mobile.md 的设计 token
diff --git a/skills/map-design/scenes/mobile-map.md b/skills/map-design/scenes/mobile-map.md
new file mode 100644
index 0000000..71ec4ce
--- /dev/null
+++ b/skills/map-design/scenes/mobile-map.md
@@ -0,0 +1,362 @@
+# 移动端地图应用
+
+适用于手机/平板端的地图应用。强调触屏交互、单手操作、信息精简、底部面板模式。
+
+## 布局模式
+
+### 全屏地图 + 底部面板
+
+移动端标准布局：地图占满屏幕，信息通过 BottomSheet 展示。
+
+```tsx
+<div style={{ position: 'relative', height: '100vh', width: '100vw' }}>
+  <AiMap map={{ basemap: 'gaode', style: 'dark' }} autoFit>
+    {/* 图层 */}
+    {/* 移动端不渲染桌面控件，改用 MobileToolbar */}
+  </AiMap>
+
+  {/* 顶部搜索栏 */}
+  <div style={{ position: 'absolute', top: 12, left: 12, right: 12, zIndex: 1000 }}>
+    <SearchBar placeholder="搜索地点..." onSearch={handleSearch} />
+  </div>
+
+  {/* 底部面板 */}
+  <BottomSheet
+    snapPoints={['collapsed', 'half', 'expanded']}
+    defaultSnap="collapsed"
+  >
+    {/* collapsed: 仅显示标题/摘要 */}
+    {/* half: 列表/简要详情 */}
+    {/* expanded: 完整详情/表单 */}
+  </BottomSheet>
+
+  {/* 底部工具栏 */}
+  <MobileToolbar config={toolbarConfig} />
+</div>
+```
+
+### 关键差异（vs PC）
+
+| 维度 | PC | 移动端 |
+|------|-----|--------|
+| 信息展示 | 侧边面板 / Popup | BottomSheet |
+| 控件 | 四角浮动按钮 | MobileToolbar 底部横栏 |
+| 图例 | LegendControl 浮动 | MobileSheetLegend 放入 BottomSheet |
+| 搜索 | 侧边输入框 | SearchBar 顶部浮动 |
+| 交互 | hover + click | tap only（无 hover） |
+| 信息密度 | 高 | 低，分层渐进展示 |
+
+## 移动端组件 API
+
+### BottomSheet
+
+底部抽屉面板，支持多档吸附：
+
+```tsx
+<BottomSheet
+  snapPoints={['collapsed', 'half', 'expanded']}  // 三档吸附
+  defaultSnap="collapsed"                           // 初始档位
+  onSnapChange={(snap) => console.log(snap)}        // 档位变化回调
+>
+  <div data-snap="collapsed">摘要内容</div>
+  <div data-snap="half">列表内容</div>
+  <div data-snap="expanded">完整详情</div>
+</BottomSheet>
+```
+
+- `snapPoints`: `'collapsed'`（收起）| `'half'`（半屏）| `'expanded'`（全屏）
+- 内容通过 `data-snap` 属性区分不同档位的渲染内容
+- 支持手势拖拽切换档位
+
+### MobileToolbar
+
+底部工具栏，替代桌面端分散的控件按钮：
+
+```tsx
+const toolbarConfig = {
+  items: [
+    { id: 'locate', icon: 'my_location', label: '定位', onClick: handleLocate },
+    { id: 'layers', icon: 'layers', label: '图层', onClick: toggleLayerPanel },
+    { id: 'search', icon: 'search', label: '搜索', onClick: focusSearch },
+    { id: 'more', icon: 'more_horiz', label: '更多', onClick: showMore },
+  ],
+};
+
+<MobileToolbar config={toolbarConfig} />
+```
+
+### MobileSheetLegend
+
+将图例嵌入 BottomSheet 内展示，避免遮挡地图：
+
+```tsx
+<BottomSheet snapPoints={['collapsed', 'half']} defaultSnap="collapsed">
+  <div data-snap="half">
+    <MobileSheetLegend legend={legendSchema} />
+  </div>
+</BottomSheet>
+```
+
+接受与桌面端相同的 `LegendSchema` 对象，自动适配移动端紧凑布局。
+
+### SearchBar
+
+移动端搜索框：
+
+```tsx
+<SearchBar
+  placeholder="搜索目的地"
+  onSearch={(query) => handleSearch(query)}
+  onFocus={() => expandSearchPanel()}
+/>
+```
+
+## 交互规范
+
+### Tap 替代 Hover
+
+移动端没有 hover 状态，所有信息获取通过 tap 触发：
+
+```tsx
+// ❌ 不要依赖 onMouseMove
+<FillLayer onMouseMove={showTooltip} />
+
+// ✅ 使用 onClick + Popup/BottomSheet
+<FillLayer
+  clickEffect={true}
+  onRegionClick={(payload) => {
+    setBottomSheetSnap('half');
+    setSelectedFeature(payload.feature);
+  }}
+/>
+```
+
+### Popup 简化
+
+移动端 Popup 应使用 `layout="simple"` 或 `size="compact"`，避免遮挡过多地图区域：
+
+```tsx
+<Popup layout="simple" size="compact" content={feature.name} />
+```
+
+复杂信息引导用户打开 BottomSheet 查看。
+
+### 手势友好
+
+- 控件尺寸 ≥ 44px（Apple HIG 最小触控目标）
+- BottomSheet 拖拽区域明显
+- 避免在地图边缘放置小按钮（易误触）
+
+## 推荐图层组合
+
+| 场景 | 推荐组件 | 说明 |
+|------|---------|------|
+| 附近 POI 探索 | `MarkerClusterLayer` | 聚合避免重叠，tap 展开 |
+| 导航/路线 | `RouteLayer` | stops + animate，配合 BottomSheet 显示步骤 |
+| 区域信息浏览 | `FillLayer` | clickEffect=true，tap 打开 BottomSheet 详情 |
+| 实时位置追踪 | `PointLayer` + `Marker` | Marker 显示当前位置动画 |
+| 景点/商户标注 | `IconLayer` | accuracy='precise'，iconMap 使用 Maki 图标 |
+
+## 性能优化
+
+- **减少初始图层数**：移动端首屏只加载核心图层，其余通过 MobileToolbar 按需切换
+- **降低聚合粒度**：`MarkerClusterLayer` 的 `gridSize` 适当增大（80~100），减少 DOM 节点
+- **图片资源**：IconLayer 的 iconMap 使用 SVG 或 WebP，控制单张 ≤ 10KB
+- **BottomSheet 懒渲染**：仅当前 snap 档位的内容参与渲染
+
+## Google Maps Mobile 设计语言
+
+基于 Google Maps Mobile UI Kit (2024) 提取的设计规范，可作为移动端地图应用的视觉基准。aimapui 组件已覆盖核心能力，部分组件需自定义实现。
+
+### Design Tokens
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| Primary | `#1A73E8` | 主按钮、选中态图标、用户定位点 |
+| Secondary | `#0B57D0` | 次按钮文字、Tab 选中态 |
+| Highlight Bg | `#D3E3FD` | Bottom Nav 选中 pill 背景 |
+| Highlight Bg Alt | `#E8F0FE` | 圆形图标容器背景、Saved Location |
+| Surface | `#FFFFFF` | 卡片/面板/搜索栏背景 |
+| Text Primary | `#1C1B1F` | 标题、正文 |
+| Text Secondary | `#5E5E5E` | 未选中 Tab、辅助文字 |
+| Text Tertiary | `#707070` | 搜索栏 placeholder、地址 |
+| Text Quaternary | `#867F7F` | 元信息、报告人数 |
+| Border Light | `#F3F2F2` | 列表分隔线 |
+| Border Medium | `#D9D9D9` | 搜索栏选中态边框 |
+| Shadow Light | `0px 1px 2px rgba(0,0,0,0.25)` | 小按钮、Pill |
+| Shadow Medium | `0px 4px 4px rgba(0,0,0,0.25)` | 搜索栏 |
+| Shadow Heavy | `0px 4px 12px rgba(0,0,0,0.25)` | 大 FAB 按钮 |
+| Radius Pill | `44px` | 主/次按钮 |
+| Radius Search | `40px` | 搜索栏 |
+| Radius Small | `24px` | Pill 标签、图标容器 |
+| Radius Icon | `20px` | 圆形图标背景 |
+| Font Family | `Roboto` | 全局字体 |
+| Font Title | `15-20px / 500-600` | 按钮标签、搜索结果 |
+| Font Body | `14-16px / 400` | 列表项、地址 |
+| Font Caption | `11-12px / 400-500` | Tab 标签、元信息 |
+| Route Path | `#2985FF` dashed 5px | 导航路线虚线 |
+| Direction Cone | `linear-gradient(233deg, rgba(11,103,225,0) 42%, rgba(99,166,255,0.58) 99%)` | 用户定位方向锥体 |
+| Tab Selected | `#1761D7` | Tab 选中文字 + 底部 3px 指示条 |
+| Tab Inactive | `#7F7F7F` | Tab 未选中文字 |
+| Sheet Handle | `#C5C6CD`, 73×4px, radius 12px | BottomSheet 拖拽把手 |
+| Input Border | `#D3D3D3` | From/To 输入框边框 |
+| List Icon Blue | `#1B6EF3` | 列表项蓝色图标 |
+| Transit Teal | `#007B83` | 公交/地铁图标背景色 |
+
+### 组件映射表
+
+| Google Maps 组件 | aimapui 对应 | 实现方式 |
+|-----------------|-------------|---------|
+| Search Bar (3 states) | `SearchBar` | 直接使用，三态通过 props 控制 |
+| Bottom Nav (5 tabs) | `MobileToolbar` | config.items 配置 5 个 tab |
+| Pill Filter Tag | — | 自定义 flex 组件，圆角24px + shadow light |
+| Primary Button | Popup `actions` | variant='primary'，圆角44px |
+| Secondary Button | Popup `actions` | variant='secondary'，#ECF3FE 背景 |
+| Round FAB (58px/40px) | — | 自定义绝对定位按钮，shadow heavy |
+| Tab Indicator | — | 自定义组件，底部 3px #1761D7 指示条 |
+| Transportation Mode | `RouteLayer` routeType | UI 切换器需自定义 |
+| User Location Mark | `GeoLocateControl` / `Marker` | 蓝色圆点 + 白边 + shadow |
+| Direction Cone | `Marker` | 自定义 SVG 锥体 + gradient |
+| List Item | BottomSheet 内容 | icon + title + subtitle + divider |
+| Saved Location Row | BottomSheet 内容 | 圆形图标(#E8F0FE) + label + address |
+
+### 图标体系
+
+Google Maps 使用的 36 个图标均可通过 Maki Icons 映射：
+
+| 类别 | Maki 名称 | 用途 |
+|------|----------|------|
+| 导航 | `directions`, `navigation`, `turn-right` | 路线指引 |
+| 交通 | `car`, `rail`, `bicycle`, `pedestrian`, `airport` | 出行方式切换 |
+| POI | `restaurant`, `lodging`, `fuel`, `grocery`, `monument` | 地点分类 |
+| 操作 | `search`, `close`, `share`, `edit`, `plus` | 交互动作 |
+| 位置 | `marker`, `my-location`, `compass` | 定位/方向 |
+| 信息 | `information`, `telephone`, `money`, `star` | 详情展示 |
+| 其他 | `bookmark`, `home`, `office`, `clock`, `list` | 收藏/常用 |
+
+```tsx
+import { createMakiIconMap } from '@antv/aimapui';
+
+const googleMapsIcons = createMakiIconMap([
+  'search', 'close', 'directions', 'navigation',
+  'car', 'rail', 'bicycle', 'pedestrian', 'airport',
+  'restaurant', 'lodging', 'fuel', 'grocery',
+  'marker', 'my-location', 'compass', 'information',
+  'share', 'edit', 'plus', 'bookmark', 'home',
+]);
+```
+
+### 布局参考尺寸
+
+| 元素 | 高度 | 内边距 | 间距 |
+|------|------|--------|------|
+| Search Bar | 48px (primary) / 44px (result) | 8px 12px | gap 16px |
+| Bottom Nav | 89px (含安全区36px) | 4px 8px | tab 等分 |
+| Pill Tag | 32px | 6px 12px 6px 8px | gap 4px |
+| Primary Button | 43px | 12px 18px 12px 16px | gap 6px |
+| Round FAB Large | 58px | 16px | — |
+| Round FAB Small | 40px | 8px | — |
+| List Item (address) | 72px | 0 0 0 12px | gap 20px |
+| List Item (no address) | 59px | 0 0 0 12px | gap 20px |
+| Tab Bar | 36px | 0 12px | gap 24px |
+| Bottom Sheet Handle | 4px | — | width 73px, radius 12px |
+| Navigation Input | 43px | 12px 8px | gap 4px |
+| Transportation Chip | 28px | 4px 12px~16px | gap 6px |
+
+### 页面级布局模式
+
+#### Explore（探索首页）
+
+```
+┌─────────────────────┐
+│ Status Bar (48px)   │
+│ Search Bar (48px)   │ ← shadow medium, radius 40px
+│ Pill Filters (40px) │ ← 横向滚动, gap 4px
+│                     │
+│                     │
+│      MAP            │ ← User Location Mark + Direction Cone
+│                     │
+│                     │         ┌──┐ ← FAB Small (40px, layers)
+│                     │         ├──┤ ← FAB Large (58px, directions)
+│                     │         └──┘
+├─────────────────────┤
+│ Bottom Nav (89px)   │ ← 5 tabs, selected pill #E3EDFF
+└─────────────────────┘
+```
+
+- **Pill 筛选条**：位于搜索栏下方，横向滚动，每个 Pill 32px 高、圆角 24px、shadow light
+- **FAB 按钮组**：右侧垂直排列，Large(58px) 在下、Small(40px) 在上，间距 12px
+- **Bottom Nav**：选中态 pill 背景 `#E3EDFF`，图标/文字 `#0B57D0`；未选中灰色 `#5E5E5E`
+
+#### Search（搜索结果页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ Search Bar (Selected)│ ← border #D9D9D9, chevron back icon
+│ Saved Locations     │ ← 横向滚动, 圆形图标(#E8F0FE/#007B83) + label + address
+├─────────────────────┤
+│ Section Title       │ ← "Recent", 15px/500, right icon
+│ List Item           │ ← icon(#F0F0F0 or #1B6EF3) + title + subtitle
+│ List Item           │ ← divider #F3F2F2
+│ List Item           │
+│ ...                 │ ← overflow-y scroll
+├─────────────────────┤
+│ Keyboard (327px)    │ ← 仅搜索聚焦时显示
+└─────────────────────┘
+```
+
+- **Saved Locations 横滑**：每个 item 123×37px，圆形图标 34px（家/公司用 `#E8F0FE`，其他用 `#007B83`），gap 5px
+- **列表项两态**：有地址(72px, 双行) / 无地址(59px, 单行)，左侧图标 34px 圆形
+- **图标颜色语义**：`#F0F0F0` 背景 = 历史记录，`#1B6EF3` = 地点/POI，`#007B83` = 公交/ transit
+
+#### Navigate to（导航规划页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ From Input (43px)   │ ← 蓝色定位点 + input(border #D3D3D3) + swap icon
+│ To Input (43px)     │ ← 红色终点图标 + input + close icon
+│ Transport Chips     │ ← Car(selected #E9F4FF border #86BAFF) / Transit / Walk / Fly / Bike
+├─────────────────────┤
+│                     │
+│    ROUTE MAP        │ ← dashed #2985FF path + User Location + Direction Cone
+│                     │
+│              ┌──┐   │ ← FAB Small (zoom)
+│              ├──┤   │ ← FAB Small (locate)
+│              └──┘   │
+├─────────────────────┤
+│ Bottom Sheet        │ ← handle + destination name + address
+│ [Directions] [Save] │ ← Primary(#1A73E8) + Secondary(#ECF3FE)
+└─────────────────────┘
+```
+
+- **From/To 输入框**：43px 高，border `#D3D3D3` radius 8px，左侧图标区分起点(蓝点)/终点(红pin)
+- **交通方式切换**：横向排列 chip，选中态 `#E9F4FF` 背景 + `#86BAFF` 边框 + `#1A73E8` 文字/图标
+- **路线**：虚线 `#2985FF` 5px，配合 `RouteLayer` 的 `routeType` 属性
+- **底部卡片**：BottomSheet collapsed 态显示目的地名称+地址，展开后显示完整详情
+
+#### Business（商户详情页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ Map (with route)    │ ← 带路线预览的地图
+│ Search Bar (Result) │ ← 绝对定位在地图上, shadow medium
+│ FAB Small ×2       │ ← 右侧垂直排列
+├─────────────────────┤
+│ Bottom Sheet        │
+│  Handle (73×4px)    │
+│  Business Name      │ ← 20px/400
+│  Action Buttons     │ ← [Directions] [Call] [Save] [Share] 横向滚动
+│  Photo Gallery      │ ← 横向滚动, 主图240×317 + 副图193×152.5, radius 20px
+│  Tab Bar (36px)     │ ← Overview(selected #1761D7) / Menu / Reviews / Photos
+│  Info List          │ ← icon + text rows, divider #F3F2F2
+└─────────────────────┘
+```
+
+- **图片画廊**：横向滚动，主图 240×317px，副图网格 193×152.5px × 2，圆角 20px，gap 12px
+- **Tab Bar**：36px 高，底部 1px `#BBBBBB` 分隔线，选中态文字 `#1761D7` + 底部 3px 指示条(radius 4px top)
+- **操作按钮行**：Primary(`#1A73E8`) + 多个 Secondary(`#ECF3FE`)，横向滚动，gap 4px
+- **信息列表**：与搜索结果列表相同样式，icon 颜色区分类型（`#1B6EF3` 地点 / `#151515` 通用）
+| Tab Bar | 36px | 4px | gap 4px |
diff --git a/skills/map-design/scenes/pc-analytics.md b/skills/map-design/scenes/pc-analytics.md
new file mode 100644
index 0000000..4e353ca
--- /dev/null
+++ b/skills/map-design/scenes/pc-analytics.md
@@ -0,0 +1,122 @@
+# PC 分析地图
+
+适用于桌面端数据分析、决策支持、监控大屏等场景。强调信息密度、多图层叠加、精细交互。
+
+## 布局模式
+
+### 全屏分析台
+
+```tsx
+<div style={{ display: 'flex', height: '100vh' }}>
+  {/* 左侧面板：数据筛选/列表 */}
+  <aside style={{ width: 320, zIndex: 1000, background: 'var(--color-surface)' }}>
+    {/* 搜索、过滤器、数据表格 */}
+  </aside>
+
+  {/* 主地图区 */}
+  <main style={{ flex: 1, position: 'relative' }}>
+    <AiMap map={{ basemap: 'gaode', style: 'dark' }} autoFit>
+      {/* 图层 */}
+    </AiMap>
+
+    {/* 浮动统计卡片 */}
+    <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 1000 }}>
+      {/* KPI 卡片 */}
+    </div>
+  </main>
+
+  {/* 右侧详情面板（可选） */}
+  <aside style={{ width: 360, zIndex: 1000 }}>
+    {/* 选中要素详情、图表 */}
+  </aside>
+</div>
+```
+
+### 仪表盘嵌入
+
+地图作为仪表盘的一个 widget，固定高度：
+
+```tsx
+<div style={{ height: 480, borderRadius: 12, overflow: 'hidden' }}>
+  <AiMap map={{ ... }} style={{ height: '100%' }}>
+    {/* 精简图层，减少控件 */}
+    <ZoomControl position="bottomright" />
+  </AiMap>
+</div>
+```
+
+## 推荐图层组合
+
+| 分析场景 | 推荐组件 | 说明 |
+|---------|---------|------|
+| 区域指标对比 | `FillLayer` + `LegendRamp` | colorScheme='sequential'，hoverEffect=true 查看数值 |
+| 多点分布密度 | `HexagonLayer` / `H3Layer` | mode='3d' 增强视觉对比 |
+| OD 流向分析 | `ArcFlowLayer` | animate=true，showNodes=true |
+| 路径/轨迹回放 | `RouteLayer` | animate=true，stops 显示途经点 |
+| 行政区划下钻 | `ChinaDistrict` | drillEnabled=true，绑定业务数据 |
+| 大量 POI 探索 | `MarkerClusterLayer` | 自动聚合，点击展开 |
+| 气象/环境叠加 | `FillLayer`(zIndex=-1) + `ImageLayer` | 底图覆盖层，不遮挡矢量数据 |
+
+## 交互规范
+
+### Hover 查看详情
+
+分析地图中 hover 是主要探索方式：
+
+```tsx
+<FillLayer
+  hoverEffect={true}
+  onMouseMove={(payload) => {
+    setTooltip({ visible: true, lng: payload.lng, lat: payload.lat, items: [...] });
+  }}
+  onMouseLeave={() => setTooltip(t => ({ ...t, visible: false }))}
+/>
+<Tooltip {...tooltip} />
+```
+
+### Click 选中 + 侧边联动
+
+```tsx
+<FillLayer
+  clickEffect={true}
+  onRegionClick={(payload) => {
+    setSelectedRegion(payload.feature);
+    // 同步更新侧边面板内容
+  }}
+/>
+```
+
+### Popup 结构化展示
+
+```tsx
+<Popup
+  layout="card"
+  header={{ title: feature.name }}
+  attributes={[
+    { label: 'GDP', value: `${feature.gdp}亿` },
+    { label: '人口', value: `${feature.population}万` },
+  ]}
+  actions={[{ label: '查看详情', variant: 'primary', onClick: () => navigateToDetail(feature.id) }]}
+/>
+```
+
+## 控件配置
+
+| 控件 | 位置 | 分析地图建议 |
+|------|------|-------------|
+| `ZoomControl` | bottomright | ✅ 必选 |
+| `ResetViewControl` | bottomright | ✅ 必选，方便重置到全局视图 |
+| `MapThemeControl` | bottomleft | ✅ 推荐，暗色/亮色切换 |
+| `ScaleControl` | bottomleft | ✅ 推荐 |
+| `LayerSwitchControl` | bottomleft | ✅ 多图层时必选 |
+| `LegendControl` | bottomleft | ✅ 有色阶/分类时必选 |
+| `ExportImageControl` | topright | 可选，报告导出 |
+| `FullscreenControl` | topright | 可选 |
+| `DrawControl` | topleft | 仅编辑/标注场景 |
+
+## 性能优化
+
+- **大数据量点位**（>5000）：使用 `MarkerClusterLayer` 或 `HexagonLayer` 聚合
+- **复杂 GeoJSON**：预处理简化几何体（mapshaper.org），减少顶点数
+- **多图层叠加**：合理分配 zIndex，避免不必要的重绘
+- **动态数据**：使用 `useMemo` 缓存 source 对象，避免每次渲染重建
diff --git a/skills/map-design/scenes/vertical-tourism.md b/skills/map-design/scenes/vertical-tourism.md
new file mode 100644
index 0000000..3e397c8
--- /dev/null
+++ b/skills/map-design/scenes/vertical-tourism.md
@@ -0,0 +1,183 @@
+# 旅游地图
+
+适用于景区导览、城市探索、旅行规划等垂直场景。强调 POI 丰富度、路线串联、图文混排、沉浸式体验。
+
+## 布局模式
+
+### 景区导览地图
+
+```tsx
+<div style={{ position: 'relative', height: '100vh' }}>
+  <AiMap map={{ basemap: 'gaode', center: [120.15, 30.28], zoom: 16, style: 'normal' }} autoFit>
+    {/* 景区边界 */}
+    <FillLayer source={parkBoundary} color="#e8f5e9" strokeColor="#4caf50" zIndex={0} />
+
+    {/* 景点标注 */}
+    <IconLayer
+      source={attractions}
+      iconField="category"
+      iconMap={createMakiIconMap(['museum', 'park', 'restaurant', 'toilet', 'information'])}
+      accuracy="precise"
+      zIndex={7}
+      onClick={(payload) => openAttractionDetail(payload.feature)}
+    />
+
+    {/* 游览路线 */}
+    <RouteLayer
+      path={tourRoute}
+      routeType="walking"
+      animate={true}
+      showStops={true}
+      stopLabelField="name"
+      zIndex={3}
+    />
+  </AiMap>
+
+  {/* 顶部搜索 */}
+  <div style={{ position: 'absolute', top: 12, left: 12, right: 12, zIndex: 1000 }}>
+    <SearchBar placeholder="搜索景点、餐厅、卫生间..." onSearch={handleSearch} />
+  </div>
+
+  {/* 底部景点详情面板 */}
+  <BottomSheet snapPoints={['collapsed', 'half', 'expanded']} defaultSnap="collapsed">
+    <div data-snap="collapsed">{selectedAttraction?.name}</div>
+    <div data-snap="half">
+      <img src={selectedAttraction?.coverUrl} style={{ width: '100%', borderRadius: 8 }} />
+      <h3>{selectedAttraction?.name}</h3>
+      <p>{selectedAttraction?.description}</p>
+    </div>
+    <div data-snap="expanded">
+      {/* 完整介绍、开放时间、门票、评论 */}
+    </div>
+  </BottomSheet>
+</div>
+```
+
+### 城市探索地图
+
+多日行程规划，强调路线串联和分类筛选：
+
+```tsx
+<AiMap map={{ basemap: 'gaode', style: 'light' }} autoFit>
+  {/* Day 1 路线 */}
+  <RouteLayer path={day1Route} color="#2563eb" routeType="walking" showStops zIndex={3} />
+  {/* Day 2 路线 */}
+  <RouteLayer path={day2Route} color="#f59e0b" routeType="transit" showStops zIndex={3} />
+
+  {/* 分类 POI */}
+  <IconLayer source={allPOIs} iconField="type" iconMap={poiIconMap} accuracy="precise" zIndex={7} />
+</AiMap>
+
+{/* 图层切换：按天 / 按类型筛选 */}
+<LayerSwitchControl
+  position="bottomleft"
+  layers={[
+    { id: 'day1', label: 'Day 1', visible: true },
+    { id: 'day2', label: 'Day 2', visible: false },
+    { id: 'food', label: '美食', visible: true },
+    { id: 'sight', label: '景点', visible: true },
+  ]}
+/>
+```
+
+## 推荐组件选型
+
+| 旅游数据 | 推荐组件 | 关键配置 |
+|---------|---------|---------|
+| 景点/商户/设施 | `IconLayer` | `accuracy='precise'`，Maki 图标映射类别 |
+| 游览路线 | `RouteLayer` | `routeType='walking'`，`showStops=true`，`animate=true` |
+| 景区范围 | `FillLayer` | 浅色填充 + 绿色描边，zIndex=0 |
+| 热力区域（人气） | `HexagonLayer` | `weightField='visitCount'`，colorScheme='sequential' |
+| 大量同类 POI | `MarkerClusterLayer` | 避免图标重叠 |
+| 卫星实景 | `SatelliteLayer` | `opacity=0.5`，辅助辨认地形 |
+| 图例（景点分类） | `LegendCategories` / `LegendIcon` | 配合 MobileSheetLegend 移动端展示 |
+
+## Maki 图标常用映射
+
+旅游场景高频使用的 Maki 图标：
+
+| 类别 | Maki 名称 | 用途 |
+|------|----------|------|
+| 景点 | `monument`, `museum`, `castle`, `temple` | 历史/文化地标 |
+| 自然 | `park`, `mountain`, `water`, `campsite` | 自然景观 |
+| 餐饮 | `restaurant`, `cafe`, `bar`, `fast-food` | 吃喝场所 |
+| 住宿 | `lodging`, `hostel`, `camping` | 住宿设施 |
+| 交通 | `bus`, `rail`, `ferry`, `airport` | 交通枢纽 |
+| 服务 | `toilet`, `information`, `hospital`, `police` | 公共服务 |
+| 购物 | `shop`, `marketplace`, `convenience` | 商业设施 |
+
+```tsx
+import { createMakiIconMap } from '@antv/aimapui';
+
+const tourismIconMap = createMakiIconMap([
+  'monument', 'museum', 'park', 'restaurant', 'cafe',
+  'lodging', 'toilet', 'information', 'bus', 'shop',
+]);
+```
+
+## 交互规范
+
+### 景点点击 → BottomSheet 详情
+
+旅游地图的核心交互是"点击景点看详情"：
+
+```tsx
+<IconLayer
+  onClick={(payload) => {
+    const feature = payload.feature;
+    setSelectedAttraction(feature);
+    setBottomSheetSnap('half'); // 自动拉起半屏面板
+  }}
+/>
+```
+
+### 路线站点联动
+
+点击 RouteLayer 的站点，同步高亮对应景点并打开详情：
+
+```tsx
+<RouteLayer
+  showStops={true}
+  onNodeClick={(payload) => {
+    const stopName = payload.feature.properties.name;
+    const attraction = attractions.find(a => a.name === stopName);
+    if (attraction) {
+      setSelectedAttraction(attraction);
+      setBottomSheetSnap('half');
+      // L7 Scene 没有 flyTo — 用 setCenter + setZoom 组合实现定点缩放，跨底图引擎通用
+      scene.setCenter([attraction.lng, attraction.lat]);
+      scene.setZoom(17);
+    }
+  }}
+/>
+```
+
+### 分类筛选
+
+通过 LayerSwitchControl 或自定义 Tab 切换 POI 类别，避免信息过载：
+
+```tsx
+// 桌面端
+<LayerSwitchControl position="bottomleft" layers={layerItems} />
+
+// 移动端：放入 MobileToolbar 或 BottomSheet 内
+<MobileToolbar config={{ items: [
+  { id: 'filter', icon: 'filter_list', label: '筛选', onClick: openFilterSheet },
+] }} />
+```
+
+## 主题建议
+
+| 场景 | 推荐底图风格 | 原因 |
+|------|------------|------|
+| 户外景区 | `normal` 或 `satellite` | 辨识地形地貌 |
+| 城市漫步 | `light` | 干净背景突出 POI |
+| 夜游/酒吧街 | `dark` | 氛围感，减少屏幕刺眼 |
+| 历史文化 | `normal` | 标准配色，庄重感 |
+
+## 性能优化
+
+- **POI 数量 > 200**：必须使用 `MarkerClusterLayer` 或按需加载（视口内才渲染）
+- **路线动画**：`animate=true` 会增加 GPU 负载，仅在用户主动触发时开启
+- **封面图片**：BottomSheet 内的图片使用懒加载 + 缩略图（≤ 200px 宽）
+- **图标缓存**：`createMakiIconMap` 在组件外调用一次，避免每次渲染重建
diff --git a/skills/map-design/specs/apple-maps.md b/skills/map-design/specs/apple-maps.md
new file mode 100644
index 0000000..9dfe973
--- /dev/null
+++ b/skills/map-design/specs/apple-maps.md
@@ -0,0 +1,854 @@
+# Apple Maps 设计语言规范
+
+基于 Apple Maps iOS 原生应用的设计语言提炼，作为 aimapui 地图应用的设计参考。
+
+## 一、Design Tokens
+
+### 1.1 颜色系统 (Color Palette)
+
+#### 主色调
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Blue Primary | `#0088FF` | 主交互色：按钮、链接、选中态 |
+| Blue Primary (Dark) | `#0C79FE` | 地图 Pin 标记 |
+| Blue Pressed | `rgba(0, 136, 255, 0.08)` | 次级按钮背景（Bezeled 态） |
+| Blue Tinted | `rgba(0, 136, 255, 0.12)` | 大按钮背景（Share/Report/Mark） |
+
+#### 功能色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Red Status | `#FF383C` | 营业状态：已关闭 (Closed)、错误 |
+| Red Text | `#AC480C` | 位置标注标签文字 |
+| Location Gradient Start | `#FFA62B` | 定位标记渐变起始 |
+| Location Gradient End | `#FF5D00` | 定位标记渐变结束 |
+| Location Pin Base | `#F19B3F` | 地点标记底色 |
+| Location Pin Dot | `#FF5C00` | 地点标记中心点 |
+
+#### 中性色 / 表面色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Surface White | `#FFFFFF` | 卡片、面板表面色 |
+| Surface Light | `#F5F6F3` | 详情面板底部底色 |
+| Surface Gray | `#E6E5E5` | 次要操作按钮背景（Add/More Photo） |
+| Separator | `#BDBDBD` | 分割线 (0.5px or 1px) |
+
+#### 文本色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Text Primary | `#000000` | 标题、正文 |
+| Text Secondary | `#868782` | 副标题、标签、说明文字 |
+| Text Tertiary | `#7A7B78` | 箭头图标、辅助文字 |
+| Text Link | `#0088FF` | 可点击电话号码 |
+| Text On Dark | `#FFFFFF` | 深色背景上的文字（按钮内） |
+
+#### Liquid Glass 专用色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Glass Fill Light | `linear-gradient(0deg, rgba(245,245,245,0.4), rgba(245,245,245,0.4)), #0F0F0F` | 亮色模式玻璃态填充 |
+| Glass Fill Panel | `linear-gradient(0deg, rgba(245,245,245,0.2), rgba(245,245,245,0.2)), rgba(15,15,15,0.2)` | 面板玻璃态填充 |
+| Glass Blend | `normal, color-dodge` | 玻璃态混合模式 |
+| Base Fill Overlay | `rgba(245, 245, 245, 0.1)` | 工具栏底部叠加层 |
+
+#### 渐变
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Avatar Gradient | `linear-gradient(180deg, #A0C2E4 0%, #717FBE 100%)` | 头像背景 |
+| Car Icon Gradient | `linear-gradient(180deg, #38AEFF 0%, #0C79FE 100%)` | 导航图标背景 |
+| Orange Gradient | `linear-gradient(180deg, #FFA000 0%, #F64900 100%)` | 橙色调图标背景 |
+| Guide Card Gradient | `linear-gradient(180deg, #E9E9E9 0%, #FDFDFC 100%)` | 指南卡片淡色背景 |
+| Guide Card Yellow | `linear-gradient(180deg, #FFF6C8 0%, #FDFDFC 100%)` | 指南卡片暖色背景 |
+| Pin Radial Glow | `radial-gradient(50% 50% at 50% 50%, #579DFF 0%, rgba(87,196,255,0) 100%)` | 地图 Pin 光晕 |
+| Scroll Fade Top | `linear-gradient(180deg, rgba(246,245,243,0.98) 0%, rgba(235,236,234,0.04) 100%)` | 顶部滚动渐变遮罩 |
+| Scroll Fade Bottom | `linear-gradient(180deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.38) 100%)` | 底部滚动渐变遮罩 |
+| StatusBar Fade | `linear-gradient(180deg, rgba(217,217,217,0.26) 0%, rgba(217,217,217,0) 100%)` | 状态栏背景渐变 |
+
+### 1.2 字体系统 (Typography)
+
+字体族：**SF Pro**（系统字体），按场景选用变体：
+
+| 变体 | 用途 |
+|------|------|
+| SF Pro | 通用 UI 文字 |
+| SF Pro Text | 状态栏时间 |
+| SF Pro Display | 电话、地址等详情信息 |
+| SF Pro Rounded | 温度等仪表盘数字 |
+
+#### 字号层级
+
+| 层级 | 尺寸 | 字重 | 行高 | 用途 |
+|------|------|------|------|------|
+| Large Title | 28px | 700 | 33px | POI 详情页大标题 |
+| Title | 20px | 590 | 24px | Section 标题 (Ratings, Hours, Good to Know) |
+| Title 2 | 19px | 700 | 23px | 导航栏/检索列表标题 |
+| Body | 17px | 400/510 | 20px | 正文、列表项标题 |
+| Body Link | 17px | 500 | 20px | 可点击电话号码（SF Pro Display） |
+| Caption | 16px | 590 | 19px | 状态值、百分比数据 |
+| Caption 2 | 15px | 400/510 | 18px | 副文本、标签 (Phone, Address) |
+| Small Caption | 13px | 590/700 | 16px | 按钮标签 (Directions, Call, Website) |
+| Micro | 12px | 700 | 14px | 图标辅助文字 |
+| Tiny | 11px | 700 | 13px | 极小按钮文字 (Add photo) |
+
+#### 字间距 (Letter Spacing)
+
+| 场景 | 值 |
+|------|------|
+| 标题/正文 | `-0.8px` |
+| 按钮/标签 | `-0.5px` or `-0.4px` |
+| 状态栏时间 | `-0.3px` |
+
+### 1.3 圆角系统 (Border Radius)
+
+| 尺寸 | 用途 |
+|------|------|
+| 2px | 小图标内边框（如 Apple Pay icon border） |
+| 4px | Grabber 拖拽手柄 |
+| 12px | 温度小组件 |
+| 14px | Actions 按钮 (Directions/Call/Website) |
+| 16px | 图标圆形背景 |
+| 18px | 头像 (小型) |
+| 22px | 照片添加按钮、搜索框 |
+| 24px | 工具栏、导航按钮、卡片容器、圆形图标背景 |
+| 26px | 大号圆角按钮 (Rate, Share, Report) |
+| 28px | 头像 (大型) |
+| 36px | 底部面板 (Bottom Sheet Panel) 顶部圆角 |
+| 41px | 超大图标背景 |
+
+### 1.4 阴影系统 (Box Shadow)
+
+| 场景 | 参数 |
+|------|------|
+| Glass 面板 | `0px 4px 32px rgba(0, 0, 0, 0.16)` |
+| Glass 按钮 (浅) | `0px 4px 32px rgba(0, 0, 0, 0.08)` |
+| 定位标记 | `drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.24))` |
+
+### 1.5 间距系统 (Spacing)
+
+| Token | 值 | 用途 |
+|-------|------|------|
+| xs | 2px | 图标与文字间距 |
+| sm | 4px | 标签间距 |
+| md | 8px | 元素间距、按钮间距 |
+| lg | 12px | 卡片内边距、图标间距 |
+| xl | 16px | 模块间距、面板内边距 |
+| 2xl | 24px | Section 之间间距 |
+| 3xl | 28px | 工具栏图标间距 |
+
+---
+
+## 二、布局系统 (Layout)
+
+### 2.1 画布基准
+
+- 基准设计宽度：**375px**（iPhone X / 11 Pro）
+- 基准设计高度：**812px**
+- 内容安全区左右边距：**16px**（内容宽度 343px）
+
+### 2.2 页面级布局模式
+
+#### 模式 A：地图浏览 (Map Browse)
+
+```
+┌─────────────────────────────┐
+│  Status Bar (transparent)   │  ← 系统状态栏
+├─────────────────────────────┤
+│  ┌──┐                 ┌──┐  │  ← 导航按钮 (44×44 glass)
+│  │ T│                 │ ⋮│  │     + 温度小组件 (60×32)
+│  └──┘                 └──┘  │
+│                             │
+│           ┌──┐              │  ← Pin 标记 (16×16)
+│      ┌────┤  ├────┐         │     带径向渐变光晕 (86×86)
+│      │    └──┘    │         │
+│      │  光晕区域  │         │
+│      └───────────┘         │
+│                   ┌──────┐  │  ← 垂直工具栏 (48×95)
+│                   │  🔭   │  │     探索/定位 竖向排列
+│                   │  📍   │  │
+│                   └──────┘  │
+│                             │
+│ ┌─────────────────────────┐ │  ← 底部搜索栏 (332×66)
+│ │  🔍 Search Places   🎤 👤│ │     liquid glass bar
+│ └─────────────────────────┘ │
+└─────────────────────────────┘
+```
+
+**组件列表：**
+- Status Bar：透明 + 渐变遮罩
+- Temperature Widget：左上角，60×32px，glass pill
+- Navigation Buttons：左右上角各一个 44×44 glass 按钮（关闭/信息）
+- Pin Marker：中央，蓝点 + 光晕
+- Vertical Container：右侧，48×95px，glass，探索/定位
+- Bottom Search Bar：底部，332×66px，glass，含搜索/麦克风/头像
+
+#### 模式 B：地点详情卡片 (Place Card / Half Sheet)
+
+```
+┌─────────────────────────────┐
+│  Status Bar (transparent)   │
+├─────────────────────────────┤
+│  ┌──┐ ───── ─── ───── ┌──┐  │  ← 导航栏
+│  │ <│  Place Name  Bar │ ⋮│ │     标题居中，关闭/更多按钮
+│  └──┘                 └──┘  │
+│                             │
+│ ┌─────────────────────────┐ │
+│ │  ━━━━━━ (Grabber)      │ │  ← 拖拽手柄 48×4px
+│ ├─────────────────────────┤ │
+│ │  [Directions][Call][Web]│ │  ← Actions (109×53 ×3)
+│ ├─────────────────────────┤ │
+│ │  Status  Distance  $$$  │ │  ← Info Stats Row
+│ ├─────────────────────────┤ │
+│ │  [Photo1] [Photo2] [+] │ │  ← Photo Gallery (176×176)
+│ ├─────────────────────────┤ │
+│ │  ----- Ratings -----    │ │  ← 评分细分列表
+│ │  ⭐ Overall    100%     │ │
+│ │  ⭐ Food       98%      │ │
+│ │  ⭐ Service    99%      │ │
+│ │  ⭐ Atmosphere 100%     │ │
+│ ├─────────────────────────┤ │
+│ │  [  Rate This Place  ]  │ │  ← CTA 按钮
+│ ├─────────────────────────┤ │
+│ │  ----- Good to Know --- │ │
+│ │   Accepts Apple Pay    │ │
+│ │  📱 Contactless         │ │
+│ ├─────────────────────────┤ │
+│ │  ----- Hours ---------  │ │  ← 营业时间（可展开）
+│ │  Today  Closed           │ │
+│ │  Tue-Sat 17:00-02:00    │ │
+│ │  Sun     17:00-04:00    │ │
+│ ├─────────────────────────┤ │
+│ │  ----- Details -------- │ │
+│ │  Phone  +375 (17)...    │ │  ← 电话/地址
+│ │  Address  Октябрьская.. │ │
+│ ├─────────────────────────┤ │
+│ │  [  Report an Issue  ]  │ │  ← 系统操作
+│ │  [  Pin / Favorite   ]  │ │
+│ │  [  Claim This Place ]  │ │
+│ └─────────────────────────┘ │
+│                             │
+│  ┌───┐ ┌───┐ ┌───┐ ┌───┐   │  ← 底部工具栏 (Tab Bar)
+│  │   │ │   │ │   │ │   │   │     liquid glass
+│  └───┘ └───┘ └───┘ └───┘   │
+└─────────────────────────────┘
+```
+
+**组件列表（从上到下）：**
+1. **Contetn Header**：地点名称 (19px/700) + 类别标签 (13px/590 gray)
+2. **Grabber**：拖拽手柄 48×4px，半透明黑色
+3. **Actions Row**：3 个并排按钮 (Directions 高亮 / Call / Website)
+4. **Info Stats**：Status + 步行距离百分比 + 价格等级 + 驾车距离
+5. **Photo Gallery**：2 张照片 (176×176, radius 26px) + Add/More 按钮
+6. **Ratings**：Section 标题 + 分类评分列表 + Rate 按钮
+7. **Good to Know**：Section 标题 + 图标文字对
+8. **Hours**：Section 标题 + 每日营业时间列表（Today 状态红标）
+9. **Details**：Section 标题 + Phone/Address 行
+10. **System Actions**：Report / Mark / Claim 按钮
+11. **Bottom Toolbar**：4 图标 tab bar，liquid glass
+
+#### 模式 C：搜索/收藏页 (Search & Favorites)
+
+```
+┌─────────────────────────────┐
+│  Status Bar + Search Bar    │  ← TopBar (含 avatar)
+├─────────────────────────────┤
+│ ┌─────────────────────────┐ │
+│ │  ━━━━━━ (Grabber)      │ │
+│ ├─────────────────────────┤ │
+│ │  Favorites              │ │
+│ │  ┌───────────────────┐  │ │
+│ │  │ 🚗 Home    31 min  > │ │  ← 收藏条目卡片
+│ │  ├───────────────────┤  │ │
+│ │  │ 🚗 Work    45 min  > │ │
+│ │  ├───────────────────┤  │ │
+│ │  │ 🚗 Gym     22 min  > │ │
+│ │  └───────────────────┘  │ │
+│ ├─────────────────────────┤ │
+│ │  Recents →              │ │
+│ │  ┌───────────────────┐  │ │
+│ │  │ 🚗 Cafe     12 min > │ │
+│ │  ├───────────────────┤  │ │
+│ │  │ 🚗 Park     18 min > │ │
+│ │  ├───────────────────┤  │ │
+│ │  │ 🚗 Airport  40 min > │ │
+│ │  └───────────────────┘  │ │
+│ ├─────────────────────────┤ │
+│ │  Guides →               │ │
+│ │  ┌────────┐ ┌────────┐  │ │  ← 指南卡片 (168×223)
+│ │  │ 📖     │ │ 📸     │  │ │
+│ │  │ Guide 1│ │ Guide 2│  │ │
+│ │  └────────┘ └────────┘  │ │
+│ └─────────────────────────┘ │
+│                             │
+│  ┌───┐ ┌───┐ ┌───┐ ┌───┐   │  ← Tab Bar
+│  └───┘ └───┘ └───┘ └───┘   │
+└─────────────────────────────┘
+```
+
+---
+
+## 三、核心组件规范
+
+### 3.1 Liquid Glass 效果
+
+Apple Maps 最显著的视觉特征，所有浮层控件采用此效果。
+
+```css
+/* 标准 Glass 按钮 */
+.glass-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 14px;
+  isolation: isolate;
+  background: rgba(0, 0, 0, 0.004);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 24px;
+}
+
+/* Glass 按钮 - Fill 层 */
+.glass-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    0deg,
+    rgba(245, 245, 245, 0.4),
+    rgba(245, 245, 245, 0.4)
+  ), #0F0F0F;
+  background-blend-mode: normal, color-dodge;
+  z-index: 0;
+}
+
+/* Glass 面板 */
+.glass-panel {
+  background: rgba(0, 0, 0, 0.004);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(16.25px);
+  border-radius: 36px;
+}
+
+/* Glass 面板 - Fill 层 */
+.glass-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    0deg,
+    rgba(245, 245, 245, 0.2),
+    rgba(245, 245, 245, 0.2)
+  ), rgba(15, 15, 15, 0.2);
+  background-blend-mode: normal, color-dodge;
+  backdrop-filter: blur(21.65px);
+}
+```
+
+**关键参数：**
+- 背景基准透明度：`rgba(0, 0, 0, 0.004)`（几乎透明，但提供 box-shadow 的基准）
+- 填充层：白色半透明 + 深色底，`color-dodge` 混合
+- 模糊量：按钮 `blur(4.05px)`，面板 `blur(16.25px)` ~ `blur(21.65px)`
+- 面板底部叠加层：`rgba(245, 245, 245, 0.1)`
+
+### 3.2 Pin 标记 (Map Pin)
+
+#### 搜索 Pin（蓝点）
+
+```css
+.pin-marker {
+  position: relative;
+  width: 86px;
+  height: 88px;
+}
+
+/* 径向渐变光晕 */
+.pin-glow {
+  position: absolute;
+  width: 86px;
+  height: 86px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    #579DFF 0%,
+    rgba(87, 196, 255, 0) 100%
+  );
+}
+
+/* 蓝点核心 */
+.pin-dot {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #0C79FE;
+  border: 4px solid #FFFFFF;
+  border-radius: 50%;
+}
+```
+
+**尺寸规格：**
+- 光晕容器：86×86px
+- 蓝点：16×16px
+- 白色边框：4px
+- 光晕颜色：`#579DFF` → 透明
+
+#### 地点标注 Pin（橙色）
+
+- 图标容器：67.2×84px
+- 橙色渐变背景：`linear-gradient(180deg, #FFA62B 0%, #FF5D00 100%)`
+- 圆形：63.84px，带白色边框 2.24px
+- 内部白色图标：29.72×31.36px
+- 底部阴影：`drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.24))`
+- 文字标签：12px/700，颜色 `#AC480C`，白色边框
+
+### 3.3 搜索栏 (Search Bar)
+
+三种尺寸规格，适应不同布局场景。
+
+| 属性 | Size 1 (小) | Size 2 (中) | Size 3 (大) |
+|------|------------|------------|------------|
+| 高度 | 38px | 44px | 44px |
+| 背景 | `rgba(120,120,128,0.08)` + blur | `rgba(0,0,0,0.04)` | `#FAFCF9` + border + shadow |
+| 圆角 | 22px | 22px | 22px |
+| 内边距 | 10px 12px | 12px | 12px |
+| placeholder 颜色 | `#6C6C6C` | `#88898B` | `#88898B` |
+| placeholder 字号 | 15px/510 | 17px/510 | 17px/510 |
+| 使用场景 | 地图浏览（底部 bar 内） | 搜索/收藏页顶部 | 搜索结果页顶部（带阴影） |
+
+**左附件 (Left Accessory)：**
+- 搜索图标：20×20px（中/大），18×18px（小）
+- 图标颜色：`#6C6C6C` / `#88898B`
+
+**右附件 (Right Accessory)：**
+- Size 1：麦克风图标 + 头像 (38×38px, gradient avatar)
+- Size 2/3：语音输入图标 + 头像 (44×44px)
+
+### 3.4 头像 (Avatar)
+
+```css
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(180deg, #A0C2E4 0%, #717FBE 100%);
+  border-radius: 18px; /* 小号 */ /* or 28px for 大号 */
+}
+
+/* 小号: 38×38, 圆角 18px, 文字 18px/700 */
+/* 大号: 44×44, 圆角 28px, 文字 19px/700 */
+.avatar-initials {
+  color: #FFFFFF;
+  font-family: 'SF Pro';
+  font-weight: 700;
+}
+```
+
+### 3.5 底部工具栏 (Bottom Tools / Tab Bar)
+
+```css
+.tools-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 14px 16px;
+  gap: 28px;
+  isolation: isolate;
+  background: rgba(245, 245, 245, 0.4);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 24px;
+}
+
+.tools-bar-fill {
+  position: absolute;
+  inset: 0;
+  background: rgba(245, 245, 245, 0.1);
+}
+```
+
+**三种尺寸变体：**
+
+| 变体 | 宽度 | 图标数 | 图标尺寸 |
+|------|------|--------|----------|
+| tools 4 | 212px | 4 个 | 24×20px |
+| tools 3 | 160px | 3 个 | 24×20px |
+| tools 2 | 108px | 2 个 | 24×20px |
+
+- 图标颜色：`#211906`（深色）
+- 图标字体：SF Pro 22px/400, letter-spacing: -0.5px
+- 间距：28px
+- 距底部：26px（有底部安全区时）
+
+### 3.6 垂直工具栏 (Vertical Container)
+
+```css
+.vertical-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px;
+  gap: 16px;
+  isolation: isolate;
+  width: 48px;
+  height: 95px;
+  background: rgba(0, 0, 0, 0.004);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 24px;
+}
+```
+
+- 包含 2 个图标：探索（望远镜）、定位（蓝标高亮 `#0088FF`）
+- 图标尺寸：28×20px，SF Pro 18px/590
+- 位置：右侧，距底约 378px
+
+### 3.7 温度小组件 (Temperature Widget)
+
+```css
+.temperature-widget {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 14px 0;
+  gap: 2px;
+  isolation: isolate;
+  width: 60px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.001);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 12px;
+}
+```
+
+- 位置：左上角 left: 16px, top: 50px
+- 天气图标：22×19px，颜色 `#D1D1D5`，SF Pro 16px/400
+- 温度文字：SF Pro Rounded 18px/500，颜色 `#000000`
+
+### 3.8 底部面板 / Favorites 面板 (MadalFavorites)
+
+```css
+.madal-favorites {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  background: #F5F6F3;
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(16.25px);
+  border-radius: 36px;
+}
+```
+
+**两种尺寸：**
+
+| 变体 | 宽度 | 高度 | 使用场景 |
+|------|------|------|----------|
+| Compact | 363px | 355px | 地图浏览页，底部分面板 |
+| Full | 375px | 756px | POI 详情页，全高面板 |
+
+- 顶部 Grabber：48×4px, `rgba(0,0,0,0.2)`, 圆角 4px, top: 6px
+- 填充层：Glass panel fill（半透明白 + color-dodge）
+
+### 3.9 Actions 按钮组
+
+```css
+.action-primary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  gap: 2px;
+  width: 109px;
+  height: 53px;
+  background: #0088FF;
+  border-radius: 14px;
+}
+
+.action-secondary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  gap: 2px;
+  width: 109px;
+  height: 53px;
+  background: rgba(0, 136, 255, 0.08);
+  border-radius: 14px;
+}
+```
+
+- 图标：16px SF Pro, 590 weight
+- 标签：13px SF Pro, 590/700 weight
+- 三个按钮等宽（109px），间距 8px
+- Primary 为蓝色实心，Secondary 为蓝色淡底 + 蓝字
+
+### 3.10 Info Stats Row (状态信息行)
+
+水平排列 4 个信息模块，间距 28px。
+
+| 模块 | 宽度 | 内容 |
+|------|------|------|
+| Status | 102px | "Closed"/"Open" 标签 + 实际状态值（红/绿色） |
+| Distance (walk) | 65px | 步行图标 + 百分比 |
+| Price | 50px | $ 符号包裹 + 价格等级 |
+| Distance (drive) | 79px | 驾车图标 + 公里数 |
+
+- 标签：13px/590, 颜色 `#868782`
+- 数值：16px/590 或 16px/700
+- 状态红色：`#FF383C`（Closed Today）
+
+### 3.11 照片画廊 (Photo Gallery)
+
+```css
+.photo-card {
+  width: 176px;
+  height: 176px;
+  border-radius: 26px;
+  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...);
+}
+
+.photo-label {
+  font-family: 'SF Pro';
+  font-weight: 590;
+  font-size: 17px;
+  line-height: 20px;
+  color: #FFFFFF;
+  letter-spacing: -0.8px;
+  padding: 12px 14px;
+}
+
+.add-photo-button {
+  width: 104px;
+  height: 82px;
+  background: #E6E5E5;
+  border-radius: 22px;
+  /* 垂直排列：图标 + 文字 */
+}
+```
+
+- 2 张照片并排 (176×176px) + 2 个操作按钮竖排 (104×82px ×2)
+- 照片间距：12px
+- Add/More 按钮背景：`#E6E5E5`，蓝色图标 + 蓝色文字
+
+### 3.12 评分区域 (Ratings)
+
+```css
+.rating-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  gap: 12px;
+  height: 41px;
+}
+
+.rating-name {
+  font-weight: 510;
+  font-size: 17px;
+  color: #000000;
+}
+
+.rating-count {
+  font-weight: 400;
+  font-size: 15px;
+  color: #868782;
+}
+
+.rating-score {
+  font-weight: 700;
+  font-size: 27px;
+  color: #000000;
+}
+```
+
+- Section 标题：20px/590, "Ratings"
+- 每行：图标(32×32) + 内容(标题+副标题) + 评分(星+百分比)
+- Rate This Place 按钮：全宽，蓝色淡底，圆角 26px
+
+### 3.13 Good to Know
+
+- Section 标题：20px/590, "Good to Know"
+- 图标+文字行：18px 图标 + 17px/400 文字
+- 支持场景：Accepts Apple Pay、Contactless Payments 等
+
+### 3.14 营业时间 (Hours)
+
+```css
+.hours-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #BDBDBD;
+}
+
+.hours-title { font-size: 20px; font-weight: 590; }
+.hours-edit { font-size: 15px; color: #008BFF; }
+.hours-today-status { font-size: 17px; color: #FF383C; } /* Closed */
+.hours-day-label { font-size: 17px; color: #000000; }
+.hours-time { font-size: 17px; color: #000000; }
+```
+
+- Today 显式状态（红色表示 Closed）
+- 按日展开：标签 (Mon, Tue-Sat, Sun) + 时间
+- 支持编辑（Edit 链接）
+
+### 3.15 详情 (Details)
+
+- Phone 行：标签 "Phone" (15px/400, gray) + 号码 (17px/500, blue link)
+- Address 行：标签 "Address" + 地址 (17px/400, right-aligned)
+- 分割线：0.5px solid `#BDBDBD`
+
+### 3.16 系统操作按钮 (System Actions)
+
+```css
+.system-action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 10px;
+  gap: 10px;
+  width: 343px;
+  height: 52px;
+  background: rgba(0, 136, 255, 0.12);
+  border-radius: 26px;
+}
+```
+
+- 3 个全宽按钮，垂直排列，间距 8px
+- 按钮顺序：Report an Issue → Mark/Favorite → Claim This Place
+- 文字：17px/590, 颜色 `#0088FF`
+- 左侧图标：18px, SF Pro
+
+### 3.17 导航按钮 (Navigation Buttons)
+
+```css
+.nav-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 14px;
+  isolation: isolate;
+  width: 44px;
+  height: 44px;
+  background: rgba(0, 0, 0, 0.004);
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.08);
+  border-radius: 24px;
+}
+```
+
+- 关闭按钮（×）：右侧 top: 16px, right: 16px
+- 返回按钮（‹）：左侧 top: 16px, left: 16px
+- 图标：SF Pro 19px/590, 颜色 `#211906`
+
+### 3.18 指南卡片 (Guide Cards)
+
+```css
+.guide-card {
+  display: flex;
+  flex-direction: column;
+  width: 168px;
+  height: 223px;
+  border-radius: 24px;
+}
+
+.guide-card-image {
+  width: 168px;
+  height: 152px;
+  background: linear-gradient(180deg, #E9E9E9 0%, #FDFDFC 100%);
+  /* 或 #FFF6C8 → #FDFDFC for warm tone */
+}
+
+.guide-card-content {
+  padding: 14px 16px 16px;
+  gap: 3px;
+  background: #FDFDFC;
+}
+```
+
+- 标题：17px/590
+- 副标题：15px/400, 颜色 `#868782`
+- 右上角更多按钮：28×28px, `#828283` 背景, 白色图标
+
+---
+
+## 四、Z-Index 层级规范
+
+Apple Maps 的视觉叠加顺序（从底到顶）：
+
+| 层级 | 组件 | CSS 特征 |
+|------|------|----------|
+| 0 (Base) | Map Image | 地图底图 |
+| 1 | Pin 标记 + 光晕 | 居中定位 |
+| 2 | 温度小组件 | top-left 浮动 |
+| 3 | 导航按钮 (关闭/返回) | 左右上角浮动 |
+| 4 | 垂直工具栏 (探索/定位) | right 浮动 |
+| 5 | 底部搜索/Tab Bar | bottom 固定 |
+| 6 | 底部面板 (MadalFavorites) | bottom sheet，圆角 36px |
+| 7 | Grabber (拖拽手柄) | 面板顶部 |
+| 8 | 滚动渐变遮罩 (Scroll Fade) | 面板内顶部/底部渐变 |
+| 9 | Status Bar | top: 0 固定，渐变背景 |
+
+**aimapui 映射建议：**
+- 地图层使用 L7 地图默认 z-index
+- Glass 组件使用 `z-index` 逐级递增
+- Bottom Sheet 面板使用最高 z-index
+
+---
+
+## 五、交互状态规范
+
+### 5.1 按钮交互态
+
+| 状态 | Primary Button | Secondary Button | System Button |
+|------|---------------|-----------------|---------------|
+| Default | `#0088FF` 实心 | `rgba(0,136,255,0.08)` | `rgba(0,136,255,0.12)` |
+| Pressed | 加深蓝色 | 背景加深 | 背景加深 |
+| 文字色 | `#FFFFFF` | `#0088FF` | `#0088FF` |
+
+### 5.2 面板交互
+
+- **拖拽手柄**：48×4px，半透明黑 `rgba(0,0,0,0.2)`
+- **上滑展开**：从 Compact (355px) → Full (756px)
+- **滚动渐变**：顶部和底部各 84px 渐变遮罩
+- **关闭**：点击关闭按钮或下滑面板
+
+### 5.3 链接/可操作文字
+
+- 电话号码：`#0088FF`, 17px/500 (SF Pro Display)
+- "Edit" 链接：`#008BFF`, 15px/510
+- "Add" 标签：`#0088FF`, 13px/400
+
+---
+
+## 六、与 aimapui 组件映射
+
+| Apple Maps 组件 | aimapui 推荐组件 | 说明 |
+|----------------|-----------------|------|
+| Pin 标记 | `Marker` (L7) | 自定义 Marker 实现蓝点+光晕 |
+| 底部面板 (Favorites/Details) | `Popup` / `Panel` | 需自定义实现 BottomSheet 拖拽 |
+| Search Bar | 自定义组件 / `SearchBox` | 需实现 Glass 效果 |
+| Tab Bar | `MapToolbar` | 按钮数按场景调整 |
+| Actions 按钮组 | 自定义 Button Group | 3 个等宽按钮 |
+| Photo Gallery | 自定义 Image Grid | - |
+| Ratings | 自定义 List | Star + 百分比 |
+| Hours | `CollapsibleList` | 展开/折叠日程 |
+| Liquid Glass 效果 | CSS 自定义 | 使用 backdrop-filter + color-dodge |
+| 温度小组件 | 自定义 Widget | 天气数据 + Glass pill |
+| 垂直工具栏 | `MapControls` 自定义 | 竖向排列 |
+
+---
+
+## 七、文件引用
+
+- 源设计规范文件：`.codefuse/apple.md`（Apple Maps 完整界面 CSS 规范）
+- 元素级规范文件：`.codefuse/apple_element.md`（Pin、Tools、TopBar 组件的 CSS 规范）
+- 技术实现规范：`skills/map-design/specs/technical.md`
+- Google Maps 对比规范：`skills/map-design/specs/google-maps-mobile.md`
\ No newline at end of file
diff --git a/skills/map-design/specs/google-maps-mobile.md b/skills/map-design/specs/google-maps-mobile.md
new file mode 100644
index 0000000..381b975
--- /dev/null
+++ b/skills/map-design/specs/google-maps-mobile.md
@@ -0,0 +1,1260 @@
+# Google Maps Mobile 设计语言
+
+基于 Google Maps Mobile UI Kit (2024) 提取的设计规范，可作为移动端地图应用的视觉基准。aimapui 组件已覆盖核心能力，部分组件需自定义实现。
+
+源设计文件：`.codefuse/google.md`（组件级 CSS 3361 行）、`.codefuse/google_page.md`（页面级 CSS 8108 行）。
+
+---
+
+## 一、Design Tokens
+
+### 1.1 颜色系统 (Color Palette)
+
+#### 主色调
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Primary | `#1A73E8` | 主按钮背景、选中态图标、用户定位点、Primary FAB |
+| Secondary | `#0B57D0` | Bottom Nav 选中态文字/图标、Tab 选中态 |
+| Highlight Bg | `#D3E3FD` | Bottom Nav 选中 pill 背景、Icon Highlight 水平态 |
+| Highlight Bg Alt | `#E8F0FE` | 圆形图标容器背景、Saved Location 图标 |
+| Selected Pill (Explore) | `#E3EDFF` | Explore 页 Bottom Nav 选中 pill 背景 |
+| Primary Surface | `#ECF3FE` | Secondary Button 背景 |
+
+#### 功能色 / 状态色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Route Path | `#2985FF` dashed 5px | 导航路线虚线 |
+| Direction Cone | `linear-gradient(233deg, rgba(11,103,225,0) 42%, rgba(99,166,255,0.58) 99%)` | 用户定位方向锥体 |
+| Tab Selected | `#1761D7` | 详情页 Tab 选中文字 + 底部指示条 |
+| Tab Inactive | `#7F7F7F` | Tab 未选中文字 |
+| Chip Selected Bg | `#E9F4FF` | Transportation Chip 选中背景 |
+| Chip Selected Border | `#86BAFF` | Transportation Chip 选中边框 |
+| Transit Teal | `#007B83` | 公交/地铁图标背景色 |
+| List Icon Blue | `#1B6EF3` | 搜索结果列表项 POI 图标 |
+
+#### 中性色 / 表面色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Surface | `#FFFFFF` | 卡片/面板/搜索栏/Bottom Nav 背景 |
+| Icon History Bg | `#F0F0F0` | 历史记录图标背景 |
+| Icon Inactive | `#3F3F3F` | FAB 未选中态图标 |
+| Icon Inactive Nav | `#5E5E5E` | Bottom Nav 未选中态图标/文字 |
+| List History Icon | `#373737` | 历史列表项图标 |
+| Separator Label | `#B1C2FF` | 搜索栏 Selected 态分隔符 |
+
+#### 文本色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Text Primary | `#1C1B1F` | 标题、正文、图标默认色 |
+| Text Title | `rgba(0,0,0,0.9)` | Pill 标签文字 |
+| Text Search Placeholder | `#707070` | 搜索栏 placeholder |
+| Text Search Result | `#040404` | 搜索结果文字 |
+| Text Subtitle | `#404040` | 列表项副文本 |
+| Text Meta | `#867F7F` | 元信息、报告人数、Saved Location 地址 |
+| Text Saved Label | `#000000` | Saved Location 标签 |
+
+#### 边框色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| Border Light | `#F3F2F2` | 列表分隔线 |
+| Border Medium | `#D9D9D9` | 搜索栏 Selected 态边框 |
+| Input Border | `#D3D3D3` | From/To 导航输入框边框 |
+
+### 1.2 字体系统 (Typography)
+
+字体族：**Roboto**
+
+| 层级 | 尺寸 | 字重 | 行高 | Letter Spacing | 用途 |
+|------|------|------|------|----------------|------|
+| Search Placeholder | 20px | 400 | 23px | 0.01em | Search Bar 占位文字 |
+| Search Result | 20px | 400 | 23px | 0.01em | Search Bar 搜索结果 |
+| Button Label | 16px | 500 | 19px | — | Primary/Secondary 按钮文字 |
+| Pill Label | 15px | 500 | 18px | 0.02em | Pill 筛选标签 |
+| Tab Selected | 15px | 600 | 22px | 0.2px | 详情页 Tab 选中 |
+| Tab Active | 15px | 500 | 22px | — | 详情页 Tab 未选中 |
+| Chip Label | 15px | 400-500 | 18px | — | Transportation Chip 文字 |
+| List Title | 17px | 400 | 20px | — | Saved Location 标签 |
+| List Item Title | 16px | 400 | 19px | 0.02em | 列表项标题 (无地址) |
+| List Subtitle | 14px | 400 | 16px | 0.02em | 列表项副标题、地址 |
+| List Meta | 12px | 400 | 14px | — | 元信息 (报告人数) |
+| Nav Tab Label | 11px | 500 | 13px | 0.01em | Bottom Nav Tab 标签 |
+
+### 1.3 圆角系统 (Border Radius)
+
+| 尺寸 | 用途 |
+|------|------|
+| 4px | Tab 指示条 (仅顶部) |
+| 8px | From/To 输入框 |
+| 20px | 圆形图标背景 (34px)、Icon Highlight pill (64×32)、User Location 蓝点 |
+| 24px | Pill 标签、FAB Small |
+| 28px | Transportation Chip (选中态) |
+| 40px | Search Bar |
+| 44px | Primary/Secondary Button、FAB Large |
+
+### 1.4 阴影系统 (Box Shadow)
+
+| 场景 | 参数 |
+|------|------|
+| Shadow Light | `0px 1px 2px rgba(0,0,0,0.25)` — Pill 标签、FAB Secondary、FAB Small、User Location 蓝点 |
+| Shadow Medium | `0px 4px 4px rgba(0,0,0,0.25)` — Search Bar、Bottom Nav (反向 `0px -2px 4px`) |
+| Shadow Heavy | `0px 4px 12px rgba(0,0,0,0.25)` — FAB Large Primary |
+
+### 1.5 间距系统 (Spacing)
+
+| 场景 | 值 |
+|------|------|
+| 图标与文字间距 (Pill/Chip) | 4px - 6px |
+| 列表项图标与文字 | 20px |
+| 列表项内边距 | 12px (左) |
+| 搜索栏内图标间距 | 8px - 16px |
+| Bottom Nav tab 间距 | 4px |
+| FAB 按钮组间距 | 12px |
+| 按钮内图标与文字 | 6px |
+
+---
+
+## 二、布局系统 (Layout)
+
+### 2.1 画布基准
+
+- 基准设计宽度：**390px**（iPhone 12 / 13 / 14）
+- 基准设计高度：**844px**
+- Map View 高度：759px（减去 Bottom Nav 89px + 系统状态栏区域）
+
+### 2.2 页面级布局模式
+
+#### Explore（探索首页）
+
+```
+┌─────────────────────┐
+│ Status Bar (48px)   │
+│ Search Bar (48px)   │ ← shadow medium, radius 40px
+│ Pill Filters (40px) │ ← 横向滚动, gap 4px
+│                     │
+│                     │
+│      MAP            │ ← User Location Mark + Direction Cone
+│                     │
+│                     │         ┌──┐ ← FAB Small (40px, layers)
+│                     │         ├──┤ ← FAB Large (58px, directions)
+│                     │         └──┘
+├─────────────────────┤
+│ Bottom Nav (89px)   │ ← 5 tabs, selected pill #E3EDFF
+└─────────────────────┘
+```
+
+- **Pill 筛选条**：位于搜索栏下方，横向滚动，每个 Pill 32px 高、圆角 24px、shadow light
+- **FAB 按钮组**：右侧垂直排列，Large(58px) 在下、Small(40px) 在上，间距 12px
+- **Bottom Nav**：选中态 pill 背景 `#E3EDFF`，图标/文字 `#0B57D0`；未选中灰色 `#5E5E5E`
+
+#### Search（搜索结果页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ Search Bar (Selected)│ ← border #D9D9D9, chevron back icon
+│ Saved Locations     │ ← 横向滚动, 圆形图标(#E8F0FE/#007B83) + label + address
+├─────────────────────┤
+│ Section Title       │ ← "Recent", 15px/500, right icon
+│ List Item           │ ← icon(#F0F0F0 or #1B6EF3) + title + subtitle
+│ List Item           │ ← divider #F3F2F2
+│ List Item           │
+│ ...                 │ ← overflow-y scroll
+├─────────────────────┤
+│ Keyboard (327px)    │ ← 仅搜索聚焦时显示
+└─────────────────────┘
+```
+
+- **Saved Locations 横滑**：每个 item 123×37px，圆形图标 34px（家/公司用 `#E8F0FE`，其他用 `#007B83`），gap 5px
+- **列表项两态**：有地址(72px, 双行) / 无地址(59px, 单行)，左侧图标 34px 圆形
+- **图标颜色语义**：`#F0F0F0` 背景 = 历史记录，`#1B6EF3` = 地点/POI，`#007B83` = 公交/transit
+
+#### Navigate to（导航规划页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ From Input (43px)   │ ← 蓝色定位点 + input(border #D3D3D3) + swap icon
+│ To Input (43px)     │ ← 红色终点图标 + input + close icon
+│ Transport Chips     │ ← Car(selected #E9F4FF border #86BAFF) / Transit / Walk / Fly / Bike
+├─────────────────────┤
+│                     │
+│    ROUTE MAP        │ ← dashed #2985FF path + User Location + Direction Cone
+│                     │
+│              ┌──┐   │ ← FAB Small (zoom)
+│              ├──┤   │ ← FAB Small (locate)
+│              └──┘   │
+├─────────────────────┤
+│ Bottom Sheet        │ ← handle + destination name + address
+│ [Directions] [Save] │ ← Primary(#1A73E8) + Secondary(#ECF3FE)
+└─────────────────────┘
+```
+
+- **From/To 输入框**：43px 高，border `#D3D3D3` radius 8px，左侧图标区分起点(蓝点)/终点(红pin)
+- **交通方式切换**：横向排列 chip，选中态 `#E9F4FF` 背景 + `#86BAFF` 边框 + `#1A73E8` 文字/图标
+- **路线**：虚线 `#2985FF` 5px，配合 `RouteLayer` 的 `routeType` 属性
+- **底部卡片**：BottomSheet collapsed 态显示目的地名称+地址，展开后显示完整详情
+
+#### Business（商户详情页）
+
+```
+┌─────────────────────┐
+│ Status Bar          │
+│ Map (with route)    │ ← 带路线预览的地图
+│ Search Bar (Result) │ ← 绝对定位在地图上, shadow medium
+│ FAB Small ×2       │ ← 右侧垂直排列
+├─────────────────────┤
+│ Bottom Sheet        │
+│  Handle (73×4px)    │
+│  Business Name      │ ← 20px/400
+│  Action Buttons     │ ← [Directions] [Call] [Save] [Share] 横向滚动
+│  Photo Gallery      │ ← 横向滚动, 主图240×317 + 副图193×152.5, radius 20px
+│  Tab Bar (36px)     │ ← Overview(selected #1761D7) / Menu / Reviews / Photos
+│  Info List          │ ← icon + text rows, divider #F3F2F2
+└─────────────────────┘
+```
+
+- **图片画廊**：横向滚动，主图 240×317px，副图网格 193×152.5px × 2，圆角 20px，gap 12px
+- **Tab Bar**：36px 高，底部 1px `#BBBBBB` 分隔线，选中态文字 `#1761D7` + 底部 3px 指示条(radius 4px top)
+- **操作按钮行**：Primary(`#1A73E8`) + 多个 Secondary(`#ECF3FE`)，横向滚动，gap 4px
+- **信息列表**：与搜索结果列表相同样式，icon 颜色区分类型（`#1B6EF3` 地点 / `#151515` 通用）
+
+---
+
+## 三、核心组件规范
+
+### 3.1 Search Bar（搜索栏 — 3 态）
+
+#### State=Primary（默认态）
+
+```css
+.search-bar-primary {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 16px;
+  width: 366px;
+  height: 48px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 40px;
+}
+
+/* Google Logo 30×30px + placeholder text */
+.search-bar-primary .placeholder {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+  letter-spacing: 0.01em;
+  color: #707070;
+}
+
+/* 右侧语音图标 26×26px (#4F4F4F) + 头像 32×32px (radius 24px) */
+```
+
+#### State=Result（搜索结果态）
+
+```css
+.search-bar-result {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 10px 16px 10px 20px;
+  gap: 16px;
+  width: 366px;
+  height: 44px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 40px;
+}
+
+/* 结果文字 */
+.search-bar-result .text {
+  font-size: 20px;
+  line-height: 23px;
+  letter-spacing: 0.01em;
+  color: #040404;
+}
+
+/* 右侧关闭图标 24×24px (rgba(28,27,31,0.9)) */
+```
+
+#### State=Selected（聚焦态）
+
+```css
+.search-bar-selected {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 10px;
+  width: 366px;
+  height: 49px;
+  background: #FFFFFF;
+  border: 1px solid #D9D9D9;
+  border-radius: 40px;
+}
+
+/* 左侧返回图标 26×26px (#4F4F4F) + 分隔符 "|" (28px, #B1C2FF) + placeholder */
+.search-bar-selected .separator {
+  font-weight: 300;
+  font-size: 28px;
+  line-height: 33px;
+  color: #B1C2FF;
+  margin: 0 -2px;
+}
+
+/* 右侧语音图标 26×26px (#4F4F4F) */
+```
+
+**三态对比表：**
+
+| 属性 | Primary | Result | Selected |
+|------|---------|--------|----------|
+| 高度 | 48px | 44px | 49px |
+| 背景 | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` |
+| 边框 | — | — | `1px solid #D9D9D9` |
+| 阴影 | shadow medium | shadow medium | — |
+| 圆角 | 40px | 40px | 40px |
+| 左侧元素 | Logo + placeholder | 文字结果 | ‹ + \| + placeholder |
+| 右侧元素 | 语音 + 头像 | 关闭图标 | 语音图标 |
+
+### 3.2 Bottom Nav（底部导航栏）
+
+```css
+.bottom-nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 4px 8px 36px;
+  gap: 4px;
+  position: absolute;
+  height: 89px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #FFFFFF;
+  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
+}
+```
+
+#### Bottom Nav Tab — Selected
+
+```css
+.bottom-nav-tab-selected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  gap: 4px;
+  width: 64px;
+  height: 49px;
+}
+
+/* 选中 pill 背景 */
+.tab-icon-highlight-selected {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 4px 20px;
+  gap: 4px;
+  width: 64px;
+  height: 32px;
+  background: #D3E3FD; /* Explore页为 #E3EDFF */
+  border-radius: 20px;
+}
+
+/* 图标 24×24px, 颜色 #0B57D0 */
+/* 标签 */
+.tab-label-selected {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 13px;
+  letter-spacing: 0.01em;
+  color: #0B57D0;
+}
+```
+
+#### Bottom Nav Tab — Unselected
+
+```css
+.bottom-nav-tab-unselected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  gap: 4px;
+  width: 64px;
+  height: 49px;
+}
+
+/* 未选中 pill — 无背景 */
+.tab-icon-highlight-unselected {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 4px 20px;
+  gap: 4px;
+  width: 64px;
+  height: 32px;
+  border-radius: 20px;
+  /* 无 background */
+}
+
+/* 图标 24×24px, 颜色 #5E5E5E */
+/* 标签 */
+.tab-label-unselected {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 13px;
+  letter-spacing: 0.01em;
+  color: #5E5E5E;
+}
+```
+
+**典型 5 Tab 配置：** Explore / Go / Saved / Contribute / Updates
+
+**选中态 pill 颜色差异：**
+- Explore 页（初始）：`#E3EDFF`
+- 其他页面切换后：`#D3E3FD`
+
+### 3.3 Pill Filter Tag（筛选标签）
+
+```css
+.pill-tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 12px 6px 8px;
+  gap: 4px;
+  width: auto;
+  height: 32px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+}
+
+/* 左侧图标 20×20px (#000000) */
+.pill-tag .icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* 标签文字 */
+.pill-tag .label {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.02em;
+  color: rgba(0, 0, 0, 0.9);
+}
+```
+
+- 横向滚动排列，gap 4px
+- 位于 Search Bar 下方
+
+### 3.4 Button — Primary / Secondary
+
+#### Primary Button
+
+```css
+.button-primary {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 18px 12px 16px;
+  gap: 6px;
+  height: 43px;
+  background: #1A73E8;
+  border-radius: 44px;
+}
+
+/* 图标 18×18px (#FFFFFF) */
+.button-primary .icon {
+  width: 18px;
+  height: 18px;
+  /* vector fill: #FFFFFF */
+}
+
+/* 标签 */
+.button-primary .label {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: #FFFFFF;
+}
+```
+
+#### Secondary Button
+
+```css
+.button-secondary {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 6px;
+  height: 46px;
+  background: #ECF3FE;
+  border-radius: 44px;
+}
+
+/* 图标 22×22px (#0B57D0) */
+.button-secondary .icon {
+  width: 22px;
+  height: 22px;
+  /* vector fill: #0B57D0 */
+}
+
+/* 标签 */
+.button-secondary .label {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: #0B57D0;
+}
+```
+
+**对比表：**
+
+| 属性 | Primary | Secondary |
+|------|---------|-----------|
+| 背景 | `#1A73E8` | `#ECF3FE` |
+| 圆角 | 44px | 44px |
+| 内边距 | 12px 18px 12px 16px | 12px 16px |
+| 图标尺寸 | 18×18px | 22×22px |
+| 图标色 | `#FFFFFF` | `#0B57D0` |
+| 文字色 | `#FFFFFF` | `#0B57D0` |
+| 高度 | 43px | 46px |
+
+### 3.5 Round FAB Button（圆形浮动按钮）
+
+#### Large FAB (58px) — Primary
+
+```css
+.fab-large-primary {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 4px;
+  width: 58px;
+  height: 58px;
+  background: #1A73E8;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+  border-radius: 44px;
+}
+
+/* 图标 26×26px (#FFFFFF) */
+```
+
+#### Large FAB (58px) — Secondary
+
+```css
+.fab-large-secondary {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 4px;
+  width: 58px;
+  height: 58px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 44px;
+}
+
+/* 图标 26×26px (#3F3F3F) */
+```
+
+#### Small FAB (40px) — Primary
+
+```css
+.fab-small-primary {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 8px;
+  gap: 4px;
+  width: 40px;
+  height: 40px;
+  background: #1A73E8;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 44px;
+}
+
+/* 图标 24×24px (#FFFFFF), radius 24px */
+```
+
+#### Small FAB (40px) — Secondary
+
+```css
+.fab-small-secondary {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 8px;
+  gap: 4px;
+  width: 40px;
+  height: 40px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 44px;
+}
+
+/* 图标 24×24px (#3F3F3F), radius 24px */
+```
+
+**四态对比表：**
+
+| 属性 | Large Primary | Large Secondary | Small Primary | Small Secondary |
+|------|---------------|-----------------|---------------|-----------------|
+| 尺寸 | 58×58px | 58×58px | 40×40px | 40×40px |
+| 背景 | `#1A73E8` | `#FFFFFF` | `#1A73E8` | `#FFFFFF` |
+| 阴影 | heavy (`0 4 12`) | light (`0 1 2`) | light (`0 1 2`) | light (`0 1 2`) |
+| 图标 | 26×26 `#FFF` | 26×26 `#3F3F3F` | 24×24 `#FFF` | 24×24 `#3F3F3F` |
+| 内边距 | 16px | 16px | 8px | 8px |
+
+### 3.6 Tab Bar（详情页标签栏）
+
+#### Tab — Selected
+
+```css
+.tab-selected {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 4px 0;
+  gap: 4px;
+  height: 36px;
+}
+
+/* Tab 文字 */
+.tab-selected .label {
+  font-family: 'Roboto';
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  letter-spacing: 0.2px;
+  color: #1761D7;
+}
+
+/* 底部指示条 */
+.tab-selected .indicator {
+  width: 100%; /* 与文字等宽 */
+  height: 3px;
+  background: #1761D7;
+  border-radius: 4px 4px 0 0;
+}
+```
+
+#### Tab — Active (未选中)
+
+```css
+.tab-active {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  gap: 4px;
+  height: 36px;
+}
+
+.tab-active .label {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  color: #7F7F7F;
+}
+/* 无底部指示条 */
+```
+
+- Tab Bar 整体高度 36px
+- 底部 1px 分隔线（`#BBBBBB`，见 Business 页）
+- 典型 tabs：Overview / Menu / Reviews / Photos
+
+### 3.7 Transportation Chip（交通方式切换）
+
+#### Chip — Unselected
+
+```css
+.chip-unselected {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  padding: 4px 12px;
+  gap: 6px;
+  height: 28px;
+  /* 无边框、无背景 */
+}
+
+/* 图标 20×20px (#151515) */
+.chip-unselected .icon {
+  width: 20px;
+  height: 20px;
+  /* vector fill: #151515 */
+}
+
+/* 标签 */
+.chip-unselected .label {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 18px;
+  color: #000000;
+}
+```
+
+#### Chip — Selected
+
+```css
+.chip-selected {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  padding: 4px 16px;
+  gap: 6px;
+  height: 28px;
+  background: #E9F4FF;
+  border: 1px solid #86BAFF;
+  border-radius: 28px;
+}
+
+/* 图标 20×20px (#1A73E8) */
+.chip-selected .icon {
+  width: 20px;
+  height: 20px;
+  /* vector fill: #1A73E8 */
+}
+
+/* 标签 */
+.chip-selected .label {
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
+  color: #1A73E8;
+}
+```
+
+- 横向排列，gap 16px
+- 选中态额外增加左右 padding（12px → 16px）
+
+### 3.8 Saved Location Row（收藏地点条目）
+
+```css
+.saved-location {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  gap: 5px;
+  width: 123px;
+  height: 37px;
+}
+
+/* 圆形图标容器 */
+.saved-location .icon-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  background: #E8F0FE; /* 家/公司; 其他用 #007B83 */
+  border-radius: 20px;
+}
+
+/* 图标 20×20px (#1A73E8) */
+
+/* 文本区 */
+.saved-location .info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  gap: 5px;
+  flex: 1;
+}
+
+/* 标签 */
+.saved-location .label {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 20px;
+  color: #000000;
+}
+
+/* 地址 */
+.saved-location .address {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #867F7F;
+}
+```
+
+- 横向滚动排列，gap 5px
+- 家/公司图标背景 `#E8F0FE`，其他收藏点用 `#007B83`
+
+### 3.9 List Item（搜索结果列表项）
+
+#### 有地址（72px 高 — 双行）
+
+```css
+.list-item-with-address {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 0 0 12px;
+  gap: 20px;
+  width: 390px;
+  height: 72px;
+  background: #FFFFFF;
+}
+
+/* 圆形图标 34×34px */
+.list-item-with-address .icon-container {
+  width: 34px;
+  height: 34px;
+  border-radius: 20px;
+  /* POI 类型: 无背景色, 图标 #1B6EF3 */
+  /* 历史类型: background #F0F0F0, 图标 #373737 */
+}
+
+/* 文本区 */
+.list-item-with-address .text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px 20px 20px 0;
+  gap: 2px;
+  flex: 1;
+  border-bottom: 1px solid #F3F2F2;
+}
+
+/* 主文本 */
+.list-item-with-address .title {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 0.02em;
+  color: #404040;
+}
+
+/* 副文本 (元信息) */
+.list-item-with-address .subtitle {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #867F7F;
+}
+```
+
+#### 无地址（59px 高 — 单行）
+
+```css
+.list-item-no-address {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 0 0 12px;
+  gap: 20px;
+  width: 390px;
+  height: 59px;
+}
+
+/* 圆形图标 34×34px, background #F0F0F0 */
+.list-item-no-address .icon-container {
+  width: 34px;
+  height: 34px;
+  background: #F0F0F0;
+  border-radius: 20px;
+}
+
+/* 图标 20×20px (#373737) */
+
+/* 文本区 */
+.list-item-no-address .text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20px 20px 20px 0;
+  gap: 4px;
+  flex: 1;
+  border-bottom: 1px solid #F3F2F2;
+}
+
+.list-item-no-address .title {
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  letter-spacing: 0.02em;
+  color: #404040;
+}
+```
+
+**图标颜色语义表：**
+
+| 背景色 | 图标色 | 含义 |
+|--------|--------|------|
+| 透明 | `#1B6EF3` | POI / 地点 |
+| `#F0F0F0` | `#373737` | 历史记录 |
+| `#E8F0FE` | `#1A73E8` | 家/公司收藏 |
+| `#007B83` | `#FFFFFF` | 公交 / Transit |
+
+### 3.10 User Location Mark（用户定位点）
+
+#### 无方向锥体
+
+```css
+.user-location {
+  position: absolute;
+  width: 30.26px;
+  height: 30.29px;
+}
+
+.user-location .dot {
+  position: absolute;
+  inset: 0;
+  background: #1A73E8;
+  border: 3px solid #FFFFFF;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+}
+```
+
+#### 有方向锥体（导航态）
+
+```css
+.user-location-direction {
+  position: absolute;
+  width: 62px;
+  height: 62px;
+}
+
+/* 方向锥体 */
+.user-location-direction .cone {
+  position: absolute;
+  width: 73.5px;
+  height: 63px;
+  left: 3.5px;
+  top: -2px;
+  background: linear-gradient(
+    233.03deg,
+    rgba(11, 103, 225, 0) 42.51%,
+    rgba(99, 166, 255, 0.58) 98.87%
+  );
+}
+
+/* 蓝点 */
+.user-location-direction .dot {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  left: 0;
+  top: 40.5px;
+  background: #1A73E8;
+  border: 4px solid #FFFFFF;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+}
+```
+
+### 3.11 Icon Highlight（图标高亮容器）
+
+两种形态，用于不同场景。
+
+#### Horizontal Pill（水平胶囊态 — Bottom Nav）
+
+```css
+.icon-highlight-horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 4px 20px;
+  gap: 4px;
+  width: 64px;
+  height: 32px;
+  background: #D3E3FD;
+  border-radius: 20px;
+}
+
+/* 图标 24×24px (#0B57D0) */
+```
+
+#### Round（圆形 — 列表项图标、Saved Location）
+
+```css
+.icon-highlight-round {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  background: #E8F0FE;
+  border-radius: 20px;
+}
+
+/* 图标 20×20px (#1A73E8) */
+```
+
+### 3.12 Bottom Sheet Handle（底部面板拖拽把手）
+
+```css
+.bottom-sheet-handle {
+  width: 73px;
+  height: 4px;
+  background: #C5C6CD;
+  border-radius: 12px;
+  margin: 0 auto;
+}
+```
+
+- 位于 Bottom Sheet 面板顶部居中
+- 支持拖拽展开/收起
+
+### 3.13 Navigation Input（导航输入框 From/To）
+
+```css
+.nav-input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 8px;
+  gap: 4px;
+  height: 43px;
+}
+
+/* From 输入框左侧: 蓝色定位点图标 */
+/* To 输入框左侧: 红色终点图标 */
+
+.nav-input .input {
+  flex: 1;
+  border: 1px solid #D3D3D3;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-family: 'Roboto';
+  font-size: 16px;
+}
+
+/* 右侧: From 为 swap 图标, To 为 close 图标 */
+```
+
+- From/To 输入框垂直排列，整体容器带白色背景
+- 右侧 swap 图标仅 From 显示，close 图标仅 To 显示
+
+### 3.14 Route Path（路线路径）
+
+```css
+.route-path {
+  border: 5px dashed #2985FF;
+}
+```
+
+- 虚线样式：`dashed`
+- 线宽：5px
+- 颜色：`#2985FF`
+- 配合 `RouteLayer` 的 `routeType` 属性使用
+
+---
+
+## 四、Z-Index 层级规范
+
+Google Maps Mobile 的视觉叠加顺序（从底到顶）：
+
+| 层级 | 组件 | CSS 特征 |
+|------|------|----------|
+| 0 (Base) | Map View | 地图底图，390×759px |
+| 1 | Route Path | dashed 路线 |
+| 2 | User Location Mark | 蓝点 + 方向锥体 |
+| 3 | Map Markers / POI Pins | 地图标注 |
+| 4 | Pill Filters | 搜索栏下方横滑筛选 |
+| 5 | Search Bar | top 定位，shadow medium |
+| 6 | FAB Buttons | right 定位，垂直排列 |
+| 7 | Bottom Nav | bottom 定位，shadow (反向) |
+| 8 | Bottom Sheet | 从底部上滑面板 |
+| 9 | Bottom Sheet Handle | 面板顶部拖拽把手 |
+| 10 | Navigation Input | 导航规划页顶部 |
+| 11 | Keyboard | 系统键盘（搜索聚焦时） |
+
+**aimapui 映射建议：**
+- 地图层使用 L7 地图默认 z-index
+- DOM 覆盖控件 (Pill/SearchBar/FAB) ≥ 1000（遵循 `technical.md` 规范）
+- Bottom Sheet 面板使用最高 z-index
+- Bottom Nav 使用 z-index: 1005（控件层上限）
+
+---
+
+## 五、交互状态规范
+
+### 5.1 Button 交互态
+
+| 状态 | Primary Button | Secondary Button |
+|------|---------------|-----------------|
+| Default | bg `#1A73E8`, text `#FFF` | bg `#ECF3FE`, text `#0B57D0` |
+| Pressed | bg 加深（约 `#1565C0`） | bg 加深（约 `#D2E3FC`） |
+| Disabled | opacity 0.5 | opacity 0.5 |
+
+### 5.2 FAB 交互态
+
+| 状态 | Primary FAB | Secondary FAB |
+|------|------------|---------------|
+| Default | bg `#1A73E8`, shadow heavy/light | bg `#FFFFFF`, shadow light |
+| Pressed | bg 加深 | bg `#F5F5F5` |
+| 图标 | `#FFFFFF` | `#3F3F3F` |
+
+### 5.3 Bottom Nav Tab 交互态
+
+| 状态 | Pill 背景 | 图标色 | 文字色 |
+|------|-----------|--------|--------|
+| Selected | `#D3E3FD` 或 `#E3EDFF` | `#0B57D0` | `#0B57D0` |
+| Unselected | 透明 | `#5E5E5E` | `#5E5E5E` |
+
+### 5.4 Tab Bar 交互态
+
+| 状态 | 文字色 | 字重 | 底部指示条 |
+|------|--------|------|-----------|
+| Selected | `#1761D7` | 600 | 3px `#1761D7`, radius 4px top |
+| Active | `#7F7F7F` | 500 | 无 |
+
+### 5.5 Transportation Chip 交互态
+
+| 状态 | 背景 | 边框 | 图标色 | 文字色 | Padding |
+|------|------|------|--------|--------|---------|
+| Unselected | 透明 | 无 | `#151515` | `#000000` | 4px 12px |
+| Selected | `#E9F4FF` | `1px solid #86BAFF` | `#1A73E8` | `#1A73E8` | 4px 16px |
+
+### 5.6 Search Bar 交互态
+
+| 状态 | 边框 | 阴影 | 行为 |
+|------|------|------|------|
+| Primary | 无 | shadow medium | 点击后进入 Selected |
+| Selected | `1px solid #D9D9D9` | 无 | 显示键盘，左侧返回图标 |
+| Result | 无 | shadow medium | 显示搜索结果文字 + 关闭图标 |
+
+### 5.7 List Item 交互态
+
+| 状态 | 背景 | 行为 |
+|------|------|------|
+| Default | `#FFFFFF` | 正常显示 |
+| Pressed | `#F5F5F5` | 反馈触摸 |
+| Ripple | Material Ripple | 从触摸点扩散 |
+
+---
+
+## 六、图标体系
+
+Google Maps 使用的 36 个图标均可通过 Maki Icons 映射：
+
+| 类别 | Maki 名称 | 用途 |
+|------|----------|------|
+| 导航 | `directions`, `navigation`, `turn-right` | 路线指引 |
+| 交通 | `car`, `rail`, `bicycle`, `pedestrian`, `airport` | 出行方式切换 |
+| POI | `restaurant`, `lodging`, `fuel`, `grocery`, `monument` | 地点分类 |
+| 操作 | `search`, `close`, `share`, `edit`, `plus` | 交互动作 |
+| 位置 | `marker`, `my-location`, `compass` | 定位/方向 |
+| 信息 | `information`, `telephone`, `money`, `star` | 详情展示 |
+| 其他 | `bookmark`, `home`, `office`, `clock`, `list` | 收藏/常用 |
+
+图标基准尺寸：**24×24px**（通用），20×20px（小图标），26×26px（FAB Large 图标）。
+
+图标默认填充色：`#1C1B1F`（深色），`#FFFFFF`（反白），`#5E5E5E`（未选中态）。
+
+```tsx
+import { createMakiIconMap } from '@antv/aimapui';
+
+const googleMapsIcons = createMakiIconMap([
+  'search', 'close', 'directions', 'navigation',
+  'car', 'rail', 'bicycle', 'pedestrian', 'airport',
+  'restaurant', 'lodging', 'fuel', 'grocery',
+  'marker', 'my-location', 'compass', 'information',
+  'share', 'edit', 'plus', 'bookmark', 'home',
+]);
+```
+
+---
+
+## 七、布局参考尺寸
+
+| 元素 | 高度 | 内边距 | 间距 |
+|------|------|--------|------|
+| Search Bar (Primary) | 48px | 8px 12px | gap 16px |
+| Search Bar (Result) | 44px | 10px 16px 10px 20px | gap 16px |
+| Search Bar (Selected) | 49px | 8px 12px | gap 10px |
+| Bottom Nav | 89px (含安全区36px) | 4px 8px | tab 等分 |
+| Bottom Nav Tab | 49px | — | icon-label gap 4px |
+| Pill Tag | 32px | 6px 12px 6px 8px | gap 4px |
+| Primary Button | 43px | 12px 18px 12px 16px | gap 6px |
+| Secondary Button | 46px | 12px 16px | gap 6px |
+| Round FAB Large | 58px | 16px | — |
+| Round FAB Small | 40px | 8px | — |
+| List Item (有地址) | 72px | 0 0 0 12px | gap 20px |
+| List Item (无地址) | 59px | 0 0 0 12px | gap 20px |
+| Tab Bar | 36px | 4px | gap (flex) |
+| Bottom Sheet Handle | 4px | — | width 73px, radius 12px |
+| Navigation Input | 43px | 12px 8px | gap 4px |
+| Transportation Chip | 28px | 4px 12px~16px | gap 6px |
+| Saved Location Row | 37px | — | gap 5px |
+| Icon Highlight (H) | 32px | 4px 20px | gap 4px |
+| Icon Highlight (Round) | 34px | — | — |
+| User Location (simple) | 30px | — | — |
+| User Location (direction) | 62px | — | cone 73.5×63px |
+
+---
+
+## 八、与 aimapui 组件映射
+
+| Google Maps 组件 | aimapui 对应 | 实现方式 |
+|-----------------|-------------|---------|
+| Search Bar (3 states) | `SearchBar` | 直接使用，三态通过 props 控制 |
+| Bottom Nav (5 tabs) | `MobileToolbar` | config.items 配置 5 个 tab |
+| Pill Filter Tag | — | 自定义 flex 组件，圆角24px + shadow light |
+| Primary Button | Popup `actions` | variant='primary'，圆角44px |
+| Secondary Button | Popup `actions` | variant='secondary'，#ECF3FE 背景 |
+| Round FAB (58px/40px) | — | 自定义绝对定位按钮，shadow heavy |
+| Tab Indicator | — | 自定义组件，底部 3px #1761D7 指示条 |
+| Transportation Mode | `RouteLayer` routeType | UI 切换器需自定义 |
+| User Location Mark | `GeoLocateControl` / `Marker` | 蓝色圆点 + 白边 + shadow |
+| Direction Cone | `Marker` | 自定义 SVG 锥体 + gradient |
+| List Item | BottomSheet 内容 | icon + title + subtitle + divider |
+| Saved Location Row | BottomSheet 内容 | 圆形图标(#E8F0FE) + label + address |
+| Bottom Sheet Handle | — | 自定义 div，73×4px, radius 12px |
+| Navigation Input | — | 自定义输入框组件 |
+| Route Path | `RouteLayer` | dashed #2985FF 5px |
+
+---
+
+## 九、文件引用
+
+- 源设计规范文件：`.codefuse/google.md`（组件级 CSS 规范，3361 行）
+- 页面级规范文件：`.codefuse/google_page.md`（4 页面 CSS 规范，8108 行）
+- 技术实现规范：`skills/map-design/specs/technical.md`
+- Apple Maps 对比规范：`skills/map-design/specs/apple-maps.md`
diff --git a/skills/map-design/specs/technical.md b/skills/map-design/specs/technical.md
new file mode 100644
index 0000000..d6d5f8a
--- /dev/null
+++ b/skills/map-design/specs/technical.md
@@ -0,0 +1,296 @@
+# Technical Specification
+
+@antv/aimapui 地图应用通用技术规范，适用于所有场景。
+
+## Prerequisites
+
+```bash
+pnpm add @antv/aimapui @antv/l7
+```
+
+```tsx
+import '@antv/aimapui/style.css'; // Required — controls, popups, legends won't render without it
+```
+
+L7 version must be ≥ 2.29.1.
+
+## 1. Base Layout
+
+Every map app follows this DOM structure:
+
+```tsx
+<div style={{ position: 'relative', width: '100%', height: '100vh' }}>
+  {/* Map canvas — fills entire container */}
+  <AiMap
+    map={{ basemap: 'gaode', center: [120, 30], zoom: 5, style: 'dark' }}
+    autoFit
+    onSceneReady={handleSceneReady}
+  >
+    {/* Layers ordered by zIndex (see §2) */}
+    {/* Controls rendered inside AiMap or via ControlContainer */}
+  </AiMap>
+
+  {/* DOM overlays — positioned absolutely above map canvas */}
+  <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1000 }}>
+    {/* Title bar, side panels, floating cards */}
+  </div>
+</div>
+```
+
+Key rules:
+- Parent container **must** have explicit height (`100vh`, `600px`, etc.)
+- `map` and `schema` props are mutually exclusive — never pass both
+- Use `autoFit` when data bounds should determine initial viewport
+- Use `onSceneReady` to access the L7 Scene instance for advanced operations
+
+## 2. Layer Z-Index Hierarchy
+
+Layers are stacked bottom-to-top. All composite layers use **relative offsets** from their base `zIndex` prop.
+
+### Global Layer Stack
+
+| Z-Index Range | Category | Components | Purpose |
+|---------------|----------|------------|---------|
+| -3 ~ -2 | Basemap overlay | `SatelliteLayer` | Satellite imagery beneath all data |
+| -1 | Environmental coverage | `ImageLayer` (cloud/radar), `FillLayer` (rain) | Continuous weather/environmental data |
+| 0 | Base data | `FillLayer`, `H3Layer`, `HexagonLayer`, `RouteLayer` path | Core geographic features |
+| N+2 | Stroke/border | `LineLayer` (composite internal) | Region outlines, always above fill |
+| N+3~4 | Hover feedback | `LineLayer` (composite internal) | Only when `hoverEffect=true` |
+| N+5 | Select feedback | `LineLayer` (composite internal) | Only when `clickEffect=true` |
+| 6~9 | Point features | `PointLayer`, `BubbleLayer`, `IconLayer`, `MarkerClusterLayer` | Discrete point data |
+| N+10 | Labels/text | `PointLayer` (text shape), `GlyphLayer` | Text always above graphics |
+| 20+ | Route stops/markers | `RouteLayer` stops, `Marker` | Path nodes above path lines |
+
+### Composite Layer Internal Offsets
+
+When a composite layer receives `zIndex=N`, its internal sub-layers are automatically offset:
+
+```
+FillLayer(zIndex=N)
+├── PolygonLayer  fill        → N
+├── LineLayer     stroke      → N+2
+├── LineLayer     hover halo  → N+3  (hoverEffect only)
+├── LineLayer     hover edge  → N+4  (hoverEffect only)
+├── LineLayer     select edge → N+5  (clickEffect only)
+└── PointLayer    label       → N+10 (showLabel only)
+```
+
+**Rule**: Never use absolute zIndex values inside composite layers. Always compute as `(baseZIndex ?? 0) + offset`.
+
+## 3. UI Overlay Stacking (DOM z-index)
+
+DOM elements float above the L7 canvas and use a separate z-index scale:
+
+| z-index | Element Type | Position Convention |
+|---------|-------------|-------------------|
+| 1000 | Control containers `.l7-control-anchor` | Map edges/corners |
+| 1001 | ZoomControl / ResetViewControl | `bottomright` |
+| 1002 | MapThemeControl / LayerSwitchControl | `bottomleft` |
+| 1003 | ScaleControl / MouseLocationControl | `bottomleft` |
+| 1004 | FullscreenControl / GeoLocateControl | `topright` |
+| 1005 | LogoControl / Attribution | `bottomright` |
+| 2000 | LegendControl | `bottomleft` (above zoom) |
+| 3000 | Tooltip | Follows cursor |
+| 4000 | Popup | Anchored to geo-coordinate |
+| 5000 | Marker (DOM) | Custom DOM elements |
+| 6000 | DrawControl preview | Editing temporaries |
+| 9999 | Modal / Dialog | Full-screen overlay |
+| **≥ 10001** | **控件弹出面板（`.l7-popper`）** | **必须高于所有地图组件，确保不被遮挡** |
+
+**Rule**: All custom DOM panels (title bars, sidebars, floating cards) must use `zIndex >= 1000`. Never use values like 30 or 50 — they will be occluded by L7 internals. **控件弹出面板（如 MapThemeControl、LayerSwitchControl 的下拉/弹出内容）z-index 必须 ≥ 10001，高于 Popup(10000) 和 Tooltip(9998)，在通用组件内部通过 inline style 设置，禁止在应用层魔改覆盖。**
+
+## 4. Theme System
+
+### Built-in Themes
+
+```tsx
+<MapThemeControl position="bottomleft" />
+```
+
+Supports `dark`, `light`, `satellite`, and custom themes via `GAODE_THEME_PRESETS` / `OPENFREEMAP_THEME_PRESETS`.
+
+### CSS Variable Integration
+
+All aimapui components respect these CSS variables for dark/light adaptation:
+
+| Variable | Dark Value | Light Value | Usage |
+|----------|-----------|-------------|-------|
+| `--color-surface` | `#1e293b` | `#ffffff` | Popup/panel backgrounds |
+| `--color-on-surface` | `#f1f5f9` | `#0f172a` | Primary text |
+| `--color-outline-variant` | `#475569` | `#cbd5e1` | Borders/dividers |
+
+Custom panels should use these variables instead of hardcoded colors:
+
+```tsx
+<div style={{
+  background: 'var(--color-surface)',
+  color: 'var(--color-on-surface)',
+  border: '1px solid var(--color-outline-variant)',
+}}>
+```
+
+### Component Defaults for Pure Display
+
+All composite layers default to **pure display mode** (no interaction). Enable interactions explicitly:
+
+| Prop | Default | When to enable |
+|------|---------|---------------|
+| `hoverEffect` | `false` | User needs hover highlight feedback |
+| `clickEffect` | `false` | User needs click selection feedback |
+| `tooltipEffect` | `false` | Using built-in tooltip (vs custom onMouseMove) |
+| `zoomToRegionOnClick` | `false` | Drill-down / region focus scenarios |
+| `stickySelection` | `false` | Multi-select or persistent selection |
+| `showStopPopup` (RouteLayer) | `false` | Route stop detail popups |
+| `glow` (RouteLayer) | `false` | Decorative route glow effect |
+
+When enabling hover/click, transitions use `duration: 150` by default for smooth state changes.
+
+## 5. Interaction Patterns
+
+### Tooltip (Lightweight, Follows Cursor)
+
+```tsx
+<Tooltip visible={visible} lng={lng} lat={lat} items={[{ label: 'Value', value: '42mm' }]} />
+```
+
+Use for: real-time hover data display, lightweight hints.
+
+### Popup (Structured, Anchored)
+
+```tsx
+// Quick presets
+<Popup longitude={lng} latitude={lat} layout="card" header={{ title: 'Station A' }} attributes={[...]} />
+
+// Layout options: 'simple' | 'card' | 'rich'
+// simple → compact size, text-only
+// card   → standard size, header + attributes
+// rich   → detailed size, cover image + header + attributes + actions
+```
+
+Click blank area to close: handled automatically via L7 `unclick` event.
+
+### Marker (DOM Element at Geo Position)
+
+```tsx
+<Marker longitude={lng} latitude={lat} anchor="center" content={<img src="..." />} />
+```
+
+Use for: animated markers, complex DOM content at fixed geo positions.
+
+### Layer Events
+
+All layers support `onClick`, `onMouseMove`, `onMouseEnter`, `onMouseLeave`:
+
+```tsx
+<FillLayer
+  onMouseMove={(payload) => {
+    const feature = payload.feature;
+    // Access all original GeoJSON properties including non-rendering fields
+  }}
+  onMouseLeave={() => hideTooltip()}
+/>
+```
+
+GeoJSON sources preserve **all** original feature properties in event payloads (not just rendering fields).
+
+## 6. Data Type → Component Mapping
+
+Choose the right component based on your data type and visualization goal:
+
+### Point Data
+
+| Data Characteristic | Component | Key Props |
+|--------------------|-----------|-----------|
+| Simple locations | `PointLayer` | `sourceType="json"`, `sourceConfig={{ x: 'lng', y: 'lat' }}` |
+| Sized by value | `BubbleLayer` | `sizeField`, `sizeRange=[min,max]` or `sizeValues` |
+| Categorized icons | `IconLayer` | `iconField`, `iconMap`, `accuracy='precise'\|'general'` |
+| Text labels with icons | `GlyphLayer` | `iconField`, `labelField`, Material Symbols |
+| Many overlapping points | `MarkerClusterLayer` | Auto-clustering with count encoding |
+| Precise vs fuzzy location | `IconLayer` | `accuracy='precise'` (pin) or `'general'` (circle) |
+
+### Line Data
+
+| Data Characteristic | Component | Key Props |
+|--------------------|-----------|-----------|
+| Routes/paths | `RouteLayer` | `path`, `routeType`, `animate`, `colorScheme` |
+| OD flows | `ArcFlowLayer` | `source`, `animate`, `showNodes` |
+| Trajectories/boundaries | `LineLayer` | `sourceType="json"`, `sourceConfig={{ coordinates: 'path' }}` |
+
+### Area/Polygon Data
+
+| Data Characteristic | Component | Key Props |
+|--------------------|-----------|-----------|
+| Choropleth (value-colored regions) | `FillLayer` | `colorField`, `colorScheme='sequential'\|'diverging'\|'categorical'` |
+| Administrative drill-down | `ChinaDistrict` | `drillEnabled`, `businessData` |
+| H3 hexagonal grid | `H3Layer` | `source` (H3 index array), `colorScheme` |
+| Hexagonal aggregation | `HexagonLayer` | `weightField`, `mode='2d'\|'3d'`, `colorScheme` |
+| Weather/environmental fill | `FillLayer` | `zIndex=-1`, `hoverEffect=false` |
+
+### Raster/Image Data
+
+| Data Characteristic | Component | Key Props |
+|--------------------|-----------|-----------|
+| Satellite imagery | `SatelliteLayer` | `provider`, `opacity` |
+| Cloud/radar composites | `ImageLayer` | `sourceType="image"`, `sourceConfig={{ parser: { type: 'image', extent } }}` |
+| GeoTIFF scientific data | `TiffRasterLayer` | `bandIndex`, `rampColors` |
+
+### Color Scheme Presets
+
+All area/grid layers support semantic color schemes (ColorBrewer-based, colorblind-safe):
+
+```tsx
+import { getColorPalette, SEQUENTIAL_COLORS, DIVERGING_COLORS, CATEGORICAL_COLORS } from '@antv/aimapui';
+
+// Sequential: monotonic increase/decrease (temperature, rainfall)
+<FillLayer colorScheme="sequential" />
+
+// Diverging: bipolar with neutral midpoint (anomaly, deviation)
+<FillLayer colorScheme="diverging" />
+
+// Categorical: discrete classes (land use, party affiliation)
+<FillLayer colorScheme="categorical" />
+```
+
+## 7. Controls Placement Guide
+
+| Control | Recommended Position | Notes |
+|---------|---------------------|-------|
+| `ZoomControl` | `bottomright` | Default |
+| `ResetViewControl` | `bottomright` | Below zoom, resets center/zoom/pitch/rotation |
+| `MapThemeControl` | `bottomleft` | Theme switching |
+| `ScaleControl` | `bottomleft` | Distance reference |
+| `FullscreenControl` | `topright` | Fullscreen toggle |
+| `GeoLocateControl` | `topright` | GPS location |
+| `LegendControl` | `bottomleft` | Above zoom controls |
+| `LayerSwitchControl` | `bottomleft` | Layer visibility toggles |
+| `DrawControl` | `topleft` | Interactive drawing |
+| `ExportImageControl` | `topright` | Screenshot export |
+
+Controls placed at edges keep focus on the map center. Use familiar icons; add text labels for non-obvious functions.
+
+## 8. Legend Selection
+
+| Data Encoding | Legend Component |
+|--------------|-----------------|
+| Discrete categories | `LegendCategories` |
+| Continuous gradient | `LegendRamp` |
+| Bipolar diverging | `LegendDiverging` |
+| Threshold steps | `LegendThreshold` |
+| Proportional size | `LegendSize` / `LegendProportion` |
+| Line width | `LegendLineWidth` |
+| Icon categories | `LegendIcon` |
+
+## Common Pitfalls
+
+| Mistake | Symptom | Fix |
+|---------|---------|-----|
+| Missing `style.css` import | Controls/popups unstyled | Add `import '@antv/aimapui/style.css'` |
+| No container height | Map invisible | Set explicit height on parent |
+| Absolute zIndex in composite internals | Layers misordered when base zIndex changes | Use `(rest.zIndex ?? 0) + offset` |
+| DOM panel zIndex < 1000 | Panel hidden behind L7 elements | Use zIndex ≥ 1000 |
+| Hardcoded colors in panels | Broken in light/dark theme switch | Use CSS variables |
+| `hoverEffect=true` on data viz layers | Fill color changes distort data reading | Keep `false` unless interaction needed |
+| Inline arrow functions returning objects in JSX | esbuild parse error | Extract to `useCallback` |
+| Unclosed JSX comments `{/* ... */` | Transform failed | Ensure closing `}` |
+| 控件弹出面板被遮挡 | Popup/Tooltip/主题面板等被地图图层或其他组件盖住 | 控件弹出面板（`.l7-popper`）z-index 必须 ≥ 10001，高于 Popup(10000) > Tooltip(9998) > 地图图层(0-10)。在通用组件内部通过 inline style 设置，禁止应用层魔改 |
+| 控件暗色主题不生效 | 弹出面板在暗色地图下仍显示浅色背景 | 弹出面板通过 portal 渲染到 body，脱离 `data-theme` 作用域。必须在组件内部根据当前地图样式值判断暗色主题，通过 inline style 直接设置暗色背景/文字颜色，不能仅依赖 CSS `[data-theme="dark"]` 选择器 |
diff --git a/vercel.json b/vercel.json
index 3c07cab..7f077d4 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,9 +1,12 @@
 {
-  "installCommand": "pnpm install",
+  "installCommand": "pnpm install --registry=https://registry.npmjs.org/",
   "buildCommand": "pnpm --filter @antv/aimapui-cli build && pnpm --filter @antv/aimapui-site build",
   "outputDirectory": "dist-site",
   "framework": null,
   "rewrites": [
-    { "source": "/(.*)", "destination": "/index.html" }
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
   ]
 }