@geoit/ui 0.0.5 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
 # @geoit/ui
 
-GEO design system for **Angular 18** + **ng-zorro 18**. Standalone components, design tokens, and AI-ready usage docs.
+GEO design system for **Angular 18** + **ng-zorro 18**. Standalone components, design tokens, and AI-ready usage docs (shipped in the package under `ai/`).
 
 ## Install
 
@@ -12,18 +12,37 @@ npm install @geoit/ui
 
 ```bash
 npm install @angular/animations@^18 @angular/common@^18 @angular/core@^18 \
-  @angular/forms@^18 @angular/cdk@^18 @ant-design/icons-angular@^18 ng-zorro-antd@^18
+  @angular/forms@^18 @angular/cdk@^18 @ant-design/icons-angular@^18 ng-zorro-antd@^18 \
+  ol@^10 proj4@^2
 ```
 
+> `ol` + `proj4` are required when you use map components (`geo-map`, `geo-map-shell`, …).
+
 ## Setup styles (once per app)
 
 In your global styles (e.g. `styles.scss`):
 
 ```scss
+@import "node_modules/ng-zorro-antd/ng-zorro-antd.min.css";
 @import "node_modules/@geoit/ui/src/lib/styles/design-tokens.scss";
 @import "node_modules/@geoit/ui/src/lib/styles/theme.scss";
 ```
 
+Providers (animations + Vietnamese i18n for date pickers):
+
+```ts
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { provideNzI18n, vi_VN } from "ng-zorro-antd/i18n";
+import { registerLocaleData } from "@angular/common";
+import vi from "@angular/common/locales/vi";
+
+registerLocaleData(vi);
+
+// in appConfig.providers:
+provideAnimations(),
+provideNzI18n(vi_VN),
+```
+
 Use tokens in your CSS — do not hardcode brand colors or radius:
 
 - `var(--geo-color-primary-default)`
@@ -69,9 +88,11 @@ export class DemoComponent {
 | Select          | `geo-select`                     | `<geo-select [options]="opts" [(ngModel)]="v" [block]="true">`    |
 | Checkbox        | `geo-checkbox`                   | `<geo-checkbox label="Đồng ý" [(checked)]="ok">`                  |
 | Radio           | `geo-radio`                      | `<geo-radio [options]="opts" [(ngModel)]="v">`                    |
+| Date / range    | `geo-date-picker` / `geo-date-range-picker` | `[(ngModel)]` + `format="dd/MM/yyyy"`                    |
 | Form dialog     | `geo-form-modal`                 | See Quick start                                                   |
 | Confirm delete  | `geo-confirm-modal`              | `[visible]` + `(confirm)`                                         |
 | Steps in dialog | `geo-form-modal` + `geo-stepper` | See recipes                                                       |
+| App shell       | `geo-layout`                     | menu + header + content                                           |
 | Page title      | `geo-page-title`                 | `<geo-page-title title="Chi tiết hồ sơ">`                         |
 | Breadcrumb      | `geo-breadcrumb`                 | `[items]="[{ label, link? }]"`                                    |
 | Toast           | `GeoToastService`                | `this.toast.success(title, message)`                              |
@@ -79,6 +100,8 @@ export class DemoComponent {
 | Status pill     | `geo-status-tag`                 | `status="success" label="Đã duyệt"`                               |
 | Table           | `geo-table`                      | `[columns]` + `[data]` + paging                                   |
 | Upload          | `geo-upload`                     | Drag-drop multi-file                                              |
+| **Map portal**  | **`geo-map-shell`**              | Search + layers + legend + parcel (recommended)                   |
+| Bare map        | `geo-map`                        | OpenLayers host + `GeoMapController`                              |
 | Typography      | `geo-typography`                 | `variant="h3" \| "body" \| …`                                     |
 
 ### Button API (quick)
@@ -100,9 +123,25 @@ export class DemoComponent {
 
 These implement **ControlValueAccessor** — use `[(ngModel)]` or reactive forms:
 
-`geo-input`, `geo-textarea`, `geo-select`, `geo-radio`, `geo-date-picker`, `geo-date-range-picker`, `geo-slider`
+`geo-input`, `geo-textarea`, `geo-select`, `geo-radio`, `geo-date-picker`, `geo-date-range-picker`, `geo-file-picker`
+
+- `geo-checkbox` → **`[(checked)]`** (not CVA)
+- `geo-slider` → **`[(value)]`** (`model()`)
+
+### Map portal (quick)
+
+```html
+<geo-map-shell
+  height="640px"
+  [demoSearch]="false"
+  parcelAudience="citizen"
+  [layers]="layers"
+  (mapReady)="ctrl = $event"
+  (search)="onSearch($event)"
+></geo-map-shell>
+```
 
-`geo-checkbox` uses **`[(checked)]`** (not CVA).
+See `ai/recipes.md` §13 and `ai/components/geo-map-shell.md`.
 
 ### Toast (preferred)
 
@@ -132,6 +171,7 @@ Open a component doc before using it, e.g.:
 ```text
 node_modules/@geoit/ui/ai/components/geo-button.md
 node_modules/@geoit/ui/ai/components/geo-form-modal.md
+node_modules/@geoit/ui/ai/components/geo-map-shell.md
 node_modules/@geoit/ui/ai/components/geo-table.md
 ```
 
@@ -150,6 +190,7 @@ UI must use `@geoit/ui`. Before writing UI, read:
 - node_modules/@geoit/ui/ai/AGENTS.md
 - node_modules/@geoit/ui/ai/catalog.json
 - node_modules/@geoit/ui/ai/components/<selector>.md when needed
+- node_modules/@geoit/ui/ai/recipes.md for screen patterns
 ```
 
 ## Design tokens

package/ai/AGENTS.md

@@ -1,29 +1,83 @@
 # GEO UI — Agent instructions
 
-Instructions for AI coding agents (Cursor, Copilot, etc.) when building UI with **geo-ui**.
+Instructions for **humans and AI coding agents** when building UI with **`@geoit/ui`** (installed from npm).
+
+Package paths after install:
+
+| Doc | Path |
+|-----|------|
+| This file | `node_modules/@geoit/ui/ai/AGENTS.md` |
+| Index | `node_modules/@geoit/ui/ai/README.md` |
+| Catalog | `node_modules/@geoit/ui/ai/catalog.json` |
+| Per component | `node_modules/@geoit/ui/ai/components/<selector>.md` |
+| Recipes | `node_modules/@geoit/ui/ai/recipes.md` |
 
 ## Mandatory
 
-1. **Use `geo-*` components** from package `@geoit/ui` for all UI that has a match in the catalog.
-2. **Do not** invent parallel wrappers or raw `nz-button` / `nz-input` / `nz-modal` when a `geo-*` equivalent exists.
+1. **Use `geo-*` components** from `@geoit/ui` for all UI that has a match in the catalog.
+2. **Do not** invent parallel wrappers or raw `nz-button` / `nz-input` / `nz-modal` / `nz-date-picker` when a `geo-*` equivalent exists.
 3. **Do not hardcode** brand colors or border-radius. Use tokens:
    - Colors: `var(--geo-color-*)` or `geoColorTokens` from `@geoit/ui`
    - Radius: `var(--geo-radius)` (default **8px**; scale: sm 6 / md 10 / lg 12 / xl 14)
-4. Before implementing a component, **read the full doc** `ai/components/<selector>.md` (Inputs/Outputs/Examples/Tips) and/or `ai/catalog.json`.
+4. Before implementing a component, **read** `ai/components/<selector>.md` (Inputs/Outputs/Examples/Tips) and/or `ai/catalog.json`.
 5. Prefer **copying examples** from those docs — adapt labels/bindings only; do not invent props.
 
-## Library implementation (maintainers)
+## Install (consumer app)
 
-When changing `projects/geo-ui/src/lib/figma`:
+```bash
+npm install @geoit/ui
+```
 
-- Angular **18**: `input()` / `output()` / `model()`, `OnPush`, `@if`/`@for`, `inject()`
-- Do **not** add new `@Input` / `@Output` / `EventEmitter`
-- After API changes: `npm run ai:docs`
+Peer dependencies (install if missing):
+
+```bash
+npm install @angular/animations@^18 @angular/common@^18 @angular/core@^18 \
+  @angular/forms@^18 @angular/cdk@^18 @ant-design/icons-angular@^18 ng-zorro-antd@^18 \
+  ol@^10 proj4@^2
+```
+
+> `ol` + `proj4` are required for map components (`geo-map`, `geo-map-shell`, …).
+
+## Styles (once per app)
+
+In global styles (e.g. `styles.scss`):
+
+```scss
+@import "node_modules/@geoit/ui/src/lib/styles/design-tokens.scss";
+@import "node_modules/@geoit/ui/src/lib/styles/theme.scss";
+```
+
+Also load ng-zorro CSS once (if not already):
+
+```scss
+@import "node_modules/ng-zorro-antd/ng-zorro-antd.min.css";
+```
+
+App providers typically need animations + ng-zorro i18n (vi):
+
+```ts
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { provideNzI18n, vi_VN } from "ng-zorro-antd/i18n";
+import { registerLocaleData } from "@angular/common";
+import vi from "@angular/common/locales/vi";
+
+registerLocaleData(vi);
+
+export const appConfig = {
+  providers: [provideAnimations(), provideNzI18n(vi_VN), /* … */],
+};
+```
 
 ## Import pattern
 
 ```ts
-import { GeoButtonComponent, GeoInputComponent, GeoFormModalComponent, GeoStepperComponent } from "@geoit/ui";
+import {
+  GeoButtonComponent,
+  GeoInputComponent,
+  GeoFormModalComponent,
+  GeoMapShellComponent,
+  GeoToastService,
+} from "@geoit/ui";
 ```
 
 Standalone consumers:
@@ -35,63 +89,89 @@ Standalone consumers:
 })
 ```
 
-## Styles (app once)
+### Form controls & binding
 
-```scss
-@import "node_modules/@geoit/ui/src/lib/styles/design-tokens.scss";
-@import "node_modules/@geoit/ui/src/lib/styles/theme.scss";
-```
+| Components | Binding |
+|------------|---------|
+| `geo-input`, `geo-textarea`, `geo-select`, `geo-radio`, `geo-date-picker`, `geo-date-range-picker`, `geo-file-picker` | **CVA** → `[(ngModel)]` or reactive forms |
+| `geo-checkbox` | `[(checked)]` (not CVA) |
+| `geo-slider` | `[(value)]` (`model()`) |
+| Overlays (`geo-form-modal`, search panels, …) | often `[(open)]` / `[(visible)]` |
 
 ## Composition recipes
 
-See [`recipes.md`](./recipes.md) for:
+See [`recipes.md`](./recipes.md) for copy-paste screens:
 
 - Form modal + steps
 - Page: breadcrumb + page title
 - Table + toolbar + filter
 - Toast via service
+- App shell (`geo-layout`)
+- Dashboard
+- Auth login / forgot password
+- **Map portal (`geo-map-shell`)**
 
 ## Decision cheat-sheet
 
-| Need                 | Use                                   |
-| -------------------- | ------------------------------------- |
-| CTA / actions        | `geo-button`                          |
-| Text field           | `geo-input` / `geo-textarea`          |
-| Select               | `geo-select`                          |
-| Exclusive options    | `geo-radio`                           |
-| Checkbox             | `geo-checkbox`                        |
-| Dialog form          | `geo-form-modal`                      |
-| Confirm delete       | `geo-confirm-modal`                   |
-| Multi-step in dialog | `geo-form-modal` + `geo-stepper`      |
-| Multi-step full page | `geo-step-form-layout`                |
-| App shell (sider+header) | `geo-layout`                     |
-| Layout sidebar / header / footer | `geo-layout-sidebar` / `geo-layout-header` / `geo-layout-footer` |
-| Page heading         | `geo-page-title` (+ `geo-breadcrumb`) or `geo-page-header` |
+| Need | Use |
+|------|-----|
+| CTA / actions | `geo-button` |
+| Text field | `geo-input` / `geo-textarea` |
+| Select | `geo-select` |
+| Exclusive options | `geo-radio` |
+| Checkbox | `geo-checkbox` |
+| Date / date range | `geo-date-picker` / `geo-date-range-picker` |
+| Dialog form | `geo-form-modal` |
+| Confirm delete | `geo-confirm-modal` |
+| Multi-step in dialog | `geo-form-modal` + `geo-stepper` |
+| Multi-step full page | `geo-step-form-layout` |
+| App shell (sider+header) | `geo-layout` |
+| Layout pieces | `geo-layout-sidebar` / `geo-layout-header` / `geo-layout-footer` |
+| Page heading | `geo-page-title` (+ `geo-breadcrumb`) or `geo-page-header` |
 | Dashboard KPI / chart | `geo-stat-card` / `geo-chart` / `geo-dashboard` |
 | Login / forgot password | `geo-login` / `geo-forgot-password` |
-| Feedback form        | `geo-feedback-form`                   |
-| Overlap analysis     | `geo-overlap-result`                  |
-| Empty region         | `geo-empty-state`                     |
-| Status pill          | `geo-status-tag`                      |
-| Transient notice     | `GeoToastService` / `geo-toast`       |
-| Inline notice        | `geo-alert`                           |
-| Upload drag-drop     | `geo-upload`                          |
-| Compact file field   | `geo-file-picker`                     |
-| Data grid            | `geo-table` (+ toolbar/filter)        |
-| Typography           | `geo-typography`                      |
+| Feedback form | `geo-feedback-form` |
+| Overlap analysis | `geo-overlap-result` |
+| Empty region | `geo-empty-state` |
+| Status pill | `geo-status-tag` |
+| Transient notice | `GeoToastService` / `geo-toast` |
+| Inline notice | `geo-alert` |
+| Upload drag-drop | `geo-upload` |
+| Compact file field | `geo-file-picker` |
+| Data grid | `geo-table` (+ toolbar/filter) |
+| **Map portal (recommended)** | **`geo-map-shell`** |
+| Bare OpenLayers host | `geo-map` + `GeoMapController` |
+| Map chrome pieces | `geo-map-toolbar`, `geo-map-search`, `geo-map-layers-drawer`, … |
+| Typography | `geo-typography` |
+
+## Map guidance
+
+1. Prefer **`geo-map-shell`** for portal tra cứu (search, ĐVHC, layers, legend, measure, basemap, parcel popup).
+2. Use **`geo-map`** alone only for embedded/minimal maps.
+3. Import constants/types from `@geoit/ui` (`GEO_MAP_DEFAULT_*`, `GeoMapLayerConfig`, …).
+4. Do **not** invent VN-2000 proj4 strings — pass via `projections` / env.
+5. Peer deps: `ol`, `proj4`.
 
 ## Anti-patterns
 
 - Hardcoded `#9A4828`, `border-radius: 8px`, etc.
 - Custom modal markup instead of `geo-form-modal`
+- Raw `nz-date-picker` / `nz-select` instead of `geo-date-picker` / `geo-select`
 - Using Ant Design Steps instead of `geo-stepper`
+- Assembling map chrome from scratch when `geo-map-shell` fits
 - Mixing Inter/system fonts inconsistently — use `--geo-font-family`
 
+## Library maintainers only
+
+When changing `projects/geo-ui/src/lib/figma`:
+
+- Angular **18**: `input()` / `output()` / `model()`, `OnPush`, `@if`/`@for`, `inject()`
+- Do **not** add new `@Input` / `@Output` / `EventEmitter`
+- After API changes: `npm run ai:docs` (regenerates this package’s `ai/`)
+
 ## Catalog
 
 - Index: [`README.md`](./README.md)
 - Machine catalog: [`catalog.json`](./catalog.json) (includes input types/defaults)
 - Per component: [`components/`](./components/) — full Inputs/Outputs tables
 - Recipes: [`recipes.md`](./recipes.md)
-
-Regenerate docs: `npm run ai:docs`

package/ai/README.md

@@ -10,17 +10,17 @@ Agent rules: [`AGENTS.md`](./AGENTS.md) · Recipes: [`recipes.md`](./recipes.md)
 | `geo-back-button` | navigation | Back navigation control (history or custom click). | [geo-back-button.md](./components/geo-back-button.md) |
 | `geo-breadcrumb` | navigation | Breadcrumb trail; last item active (primary). | [geo-breadcrumb.md](./components/geo-breadcrumb.md) |
 | `geo-button` | actions | Primary action button with brand/semantic colors and icons. | [geo-button.md](./components/geo-button.md) |
-| `geo-chart` | other | GeoChartComponent | [geo-chart.md](./components/geo-chart.md) |
+| `geo-chart` | data | Bar / donut chart for dashboard statistics (ApexCharts). | [geo-chart.md](./components/geo-chart.md) |
 | `geo-checkbox` | forms | Checkbox with label; bind with [(checked)] (not CVA/ngModel). | [geo-checkbox.md](./components/geo-checkbox.md) |
 | `geo-column-picker` | data | Column visibility picker for tables (optional persistence). | [geo-column-picker.md](./components/geo-column-picker.md) |
 | `geo-confirm-modal` | overlay | Confirm / danger dialog (destroy actions). | [geo-confirm-modal.md](./components/geo-confirm-modal.md) |
-| `geo-dashboard` | other | GeoDashboardComponent | [geo-dashboard.md](./components/geo-dashboard.md) |
+| `geo-dashboard` | layout | Composed dashboard: period, KPI cards, ward/mismatch charts. | [geo-dashboard.md](./components/geo-dashboard.md) |
 | `geo-date-picker` | forms | Single date (optional time) picker. | [geo-date-picker.md](./components/geo-date-picker.md) |
 | `geo-date-range-picker` | forms | Start–end date range picker. | [geo-date-range-picker.md](./components/geo-date-range-picker.md) |
-| `geo-empty-state` | other | GeoEmptyStateComponent | [geo-empty-state.md](./components/geo-empty-state.md) |
-| `geo-feedback-form` | other | GeoFeedbackFormComponent | [geo-feedback-form.md](./components/geo-feedback-form.md) |
+| `geo-empty-state` | feedback | Empty region placeholder (icon + title + optional action). | [geo-empty-state.md](./components/geo-empty-state.md) |
+| `geo-feedback-form` | forms | Citizen feedback / phản ánh form with validation. | [geo-feedback-form.md](./components/geo-feedback-form.md) |
 | `geo-file-picker` | forms | Compact file input for forms (button + filename). | [geo-file-picker.md](./components/geo-file-picker.md) |
-| `geo-forgot-password` | other | GeoForgotPasswordComponent | [geo-forgot-password.md](./components/geo-forgot-password.md) |
+| `geo-forgot-password` | forms | Forgot-password form (email + submit / back to login). | [geo-forgot-password.md](./components/geo-forgot-password.md) |
 | `geo-form-modal` | overlay | Form modal: fixed header/footer, scrollable body via ng-content. | [geo-form-modal.md](./components/geo-form-modal.md) |
 | `geo-icon` | display | Ant Design icon wrapper with GEO size/color tokens. | [geo-icon.md](./components/geo-icon.md) |
 | `geo-input` | forms | Text input with label, validation, icons; CVA/ngModel. | [geo-input.md](./components/geo-input.md) |
@@ -29,36 +29,36 @@ Agent rules: [`AGENTS.md`](./AGENTS.md) · Recipes: [`recipes.md`](./recipes.md)
 | `geo-layout-header` | layout | Soft top bar: toggle + breadcrumb + user/notification actions. | [geo-layout-header.md](./components/geo-layout-header.md) |
 | `geo-layout-header-actions` | layout | Header actions: notification/subsystem icons + user chip with popovers. | [geo-layout-header-actions.md](./components/geo-layout-header-actions.md) |
 | `geo-layout-sidebar` | layout | White sidebar: brand + recursive menu (collapse / mobile drawer). | [geo-layout-sidebar.md](./components/geo-layout-sidebar.md) |
-| `geo-list-page` | other | GeoListPageComponent | [geo-list-page.md](./components/geo-list-page.md) |
-| `geo-login` | other | GeoLoginComponent | [geo-login.md](./components/geo-login.md) |
+| `geo-list-page` | layout | List page chrome: title + breadcrumb shell for admin CRUD screens. | [geo-list-page.md](./components/geo-list-page.md) |
+| `geo-login` | forms | Login form (username, password, captcha, remember). | [geo-login.md](./components/geo-login.md) |
 | `geo-map` | map | OpenLayers map host with basemap, typed layers, and GeoMapController. | [geo-map.md](./components/geo-map.md) |
-| `geo-map-admin-filter` | other | GeoMapAdminFilterComponent | [geo-map-admin-filter.md](./components/geo-map-admin-filter.md) |
-| `geo-map-basemap-switcher` | other | GeoMapBasemapSwitcherComponent | [geo-map-basemap-switcher.md](./components/geo-map-basemap-switcher.md) |
-| `geo-map-help` | other | GeoMapHelpComponent | [geo-map-help.md](./components/geo-map-help.md) |
-| `geo-map-layer-card` | other | GeoMapLayerCardComponent | [geo-map-layer-card.md](./components/geo-map-layer-card.md) |
-| `geo-map-layer-panel` | other | GeoMapLayerPanelComponent | [geo-map-layer-panel.md](./components/geo-map-layer-panel.md) |
-| `geo-map-layers-drawer` | other | GeoMapLayersDrawerComponent | [geo-map-layers-drawer.md](./components/geo-map-layers-drawer.md) |
-| `geo-map-legend` | other | GeoMapLegendComponent | [geo-map-legend.md](./components/geo-map-legend.md) |
-| `geo-map-locate` | other | GeoMapLocateComponent | [geo-map-locate.md](./components/geo-map-locate.md) |
-| `geo-map-location-chip` | other | GeoMapLocationChipComponent | [geo-map-location-chip.md](./components/geo-map-location-chip.md) |
-| `geo-map-measure` | other | GeoMapMeasureComponent | [geo-map-measure.md](./components/geo-map-measure.md) |
-| `geo-map-opacity` | other | GeoMapOpacityComponent | [geo-map-opacity.md](./components/geo-map-opacity.md) |
-| `geo-map-parcel-popup` | other | GeoMapParcelPopupComponent | [geo-map-parcel-popup.md](./components/geo-map-parcel-popup.md) |
-| `geo-map-search` | other | GeoMapSearchComponent | [geo-map-search.md](./components/geo-map-search.md) |
-| `geo-map-shell` | other | GeoMapShellComponent | [geo-map-shell.md](./components/geo-map-shell.md) |
-| `geo-map-snapshot` | other | GeoMapSnapshotComponent | [geo-map-snapshot.md](./components/geo-map-snapshot.md) |
-| `geo-map-swipe` | other | GeoMapSwipeComponent | [geo-map-swipe.md](./components/geo-map-swipe.md) |
-| `geo-map-toolbar` | other | GeoMapToolbarComponent | [geo-map-toolbar.md](./components/geo-map-toolbar.md) |
-| `geo-map-zoom` | other | GeoMapZoomComponent | [geo-map-zoom.md](./components/geo-map-zoom.md) |
-| `geo-overlap-result` | other | GeoOverlapResultComponent | [geo-overlap-result.md](./components/geo-overlap-result.md) |
-| `geo-page-header` | other | GeoPageHeaderComponent | [geo-page-header.md](./components/geo-page-header.md) |
+| `geo-map-admin-filter` | map | Administrative unit tree filter (ĐVHC) for map extent. | [geo-map-admin-filter.md](./components/geo-map-admin-filter.md) |
+| `geo-map-basemap-switcher` | map | Basemap preview chip (e.g. street ↔ satellite). | [geo-map-basemap-switcher.md](./components/geo-map-basemap-switcher.md) |
+| `geo-map-help` | map | Map help / hướng dẫn popover with sections. | [geo-map-help.md](./components/geo-map-help.md) |
+| `geo-map-layer-card` | map | Basemap / layer preview card (thumbnail + title). | [geo-map-layer-card.md](./components/geo-map-layer-card.md) |
+| `geo-map-layer-panel` | map | Layer list with visibility / opacity / group selection. | [geo-map-layer-panel.md](./components/geo-map-layer-panel.md) |
+| `geo-map-layers-drawer` | map | Popover/drawer hosting the layer panel (“Lớp bản đồ”). | [geo-map-layers-drawer.md](./components/geo-map-layers-drawer.md) |
+| `geo-map-legend` | map | Map legend popover / panel with color swatches. | [geo-map-legend.md](./components/geo-map-legend.md) |
+| `geo-map-locate` | map | Geolocation button (browser GPS) for the map view. | [geo-map-locate.md](./components/geo-map-locate.md) |
+| `geo-map-location-chip` | map | Location breadcrumb chip shown on the map (ward / province). | [geo-map-location-chip.md](./components/geo-map-location-chip.md) |
+| `geo-map-measure` | map | Distance / area measure interaction on the map. | [geo-map-measure.md](./components/geo-map-measure.md) |
+| `geo-map-opacity` | map | Layer opacity slider bound to a map layer id. | [geo-map-opacity.md](./components/geo-map-opacity.md) |
+| `geo-map-parcel-popup` | map | Parcel detail popup (citizen / specialist audience). | [geo-map-parcel-popup.md](./components/geo-map-parcel-popup.md) |
+| `geo-map-search` | map | Map search panel (owner / certificate / parcel / address / coordinates). | [geo-map-search.md](./components/geo-map-search.md) |
+| `geo-map-shell` | map | Full map portal chrome: search, ĐVHC, layers, legend, measure, basemap, parcel popup. | [geo-map-shell.md](./components/geo-map-shell.md) |
+| `geo-map-snapshot` | map | Capture current map canvas to image / download. | [geo-map-snapshot.md](./components/geo-map-snapshot.md) |
+| `geo-map-swipe` | map | Swipe compare control between two map layers. | [geo-map-swipe.md](./components/geo-map-swipe.md) |
+| `geo-map-toolbar` | map | Vertical map tool strip (search, pan, measure, layers, …). | [geo-map-toolbar.md](./components/geo-map-toolbar.md) |
+| `geo-map-zoom` | map | Zoom +/- and optional province / home navigation control. | [geo-map-zoom.md](./components/geo-map-zoom.md) |
+| `geo-overlap-result` | data | Overlap analysis result list (planning type, area, percent). | [geo-overlap-result.md](./components/geo-overlap-result.md) |
+| `geo-page-header` | display | Compact page header block (title + optional actions slot). | [geo-page-header.md](./components/geo-page-header.md) |
 | `geo-page-title` | display | Page title (uppercase) with short primary accent underline; uses geo-typography. | [geo-page-title.md](./components/geo-page-title.md) |
 | `geo-pagination` | navigation | Standalone pagination control. | [geo-pagination.md](./components/geo-pagination.md) |
 | `geo-radio` | forms | Radio group (horizontal/vertical or button style). | [geo-radio.md](./components/geo-radio.md) |
 | `geo-row-actions` | data | Row action icons/menu (edit, more, custom). | [geo-row-actions.md](./components/geo-row-actions.md) |
 | `geo-select` | forms | Select / multi-select dropdown. | [geo-select.md](./components/geo-select.md) |
 | `geo-slider` | forms | Numeric range slider. | [geo-slider.md](./components/geo-slider.md) |
-| `geo-stat-card` | other | GeoStatCardComponent | [geo-stat-card.md](./components/geo-stat-card.md) |
+| `geo-stat-card` | data | KPI stat card (label, value, optional delta / icon). | [geo-stat-card.md](./components/geo-stat-card.md) |
 | `geo-status-tag` | display | Pill status tag with optional dot (success/error/warning/info/teal/…). | [geo-status-tag.md](./components/geo-status-tag.md) |
 | `geo-step-form-layout` | layout | Full-page multi-step form: vertical stepper + content card + footer actions. | [geo-step-form-layout.md](./components/geo-step-form-layout.md) |
 | `geo-stepper` | navigation | Steps indicator (horizontal default). Active=primary, completed=success+check. | [geo-stepper.md](./components/geo-stepper.md) |
@@ -73,6 +73,6 @@ Agent rules: [`AGENTS.md`](./AGENTS.md) · Recipes: [`recipes.md`](./recipes.md)
 | `geo-typography` | display | Text with GEO type scale (h1–tiny) and semantic colors. | [geo-typography.md](./components/geo-typography.md) |
 | `geo-upload` | forms | Drag-drop upload zone with progress list. | [geo-upload.md](./components/geo-upload.md) |
 
-Generated: 2026-08-24T03:07:52.099Z
+Generated: 2026-09-03T03:52:29.749Z
 
 Regenerate: `npm run ai:docs`