@geoit/ui 0.0.4 → 0.0.6

package/AGENTS.md

@@ -2,7 +2,18 @@
 
 Package name: **`@geoit/ui`**
 
-Canonical AI docs live under **`ai/`**:
+Canonical AI docs live under **`ai/`**.
+
+## Library code (`src/lib/figma`)
+
+Use **Angular 18** conventions:
+
+- `input()` / `output()` / `model()` — not `@Input` / `@Output`
+- `ChangeDetectionStrategy.OnPush`
+- `@if` / `@for`; `inject()` for DI
+- See `.cursor/rules/angular-18-figma.mdc`
+
+## AI docs
 
 | File | Purpose |
 |------|---------|
@@ -12,14 +23,7 @@ Canonical AI docs live under **`ai/`**:
 | [`ai/recipes.md`](./ai/recipes.md) | Copy-paste UI recipes |
 | [`ai/README.md`](./ai/README.md) | Index |
 
-Regenerate component docs + catalog:
-
 ```bash
 npm run ai:docs
-```
-
-Install in other projects:
-
-```bash
 npm install @geoit/ui
 ```

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,63 +12,68 @@ 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/@geoit/ui/src/lib/styles/design-tokens.scss';
-@import 'node_modules/@geoit/ui/src/lib/styles/theme.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)`
-- `var(--geo-radius)` (default **6px**)
+- `var(--geo-radius)` (default **8px**; md/lg/xl for chips & popovers)
 
 ## Quick start
 
 ```ts
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import {
-  GeoButtonComponent,
-  GeoInputComponent,
-  GeoFormModalComponent,
-  GeoToastService,
-} from '@geoit/ui';
+import { Component } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { GeoButtonComponent, GeoInputComponent, GeoFormModalComponent, GeoToastService } from "@geoit/ui";
 
 @Component({
   standalone: true,
   imports: [FormsModule, GeoButtonComponent, GeoInputComponent, GeoFormModalComponent],
   template: `
-    <geo-button appearance="primary" color="brand" icon="plus" (clicked)="open = true">
-      Thêm mới
-    </geo-button>
-
-    <geo-form-modal
-      [open]="open"
-      title="Thêm mới"
-      cancelText="Hủy bỏ"
-      okText="Lưu"
-      (openChange)="open = $event"
-      (ok)="save()"
-    >
+    <geo-button appearance="primary" color="brand" icon="plus" (clicked)="open = true"> Thêm mới </geo-button>
+
+    <geo-form-modal [open]="open" title="Thêm mới" cancelText="Hủy bỏ" okText="Lưu" (openChange)="open = $event" (ok)="save()">
       <geo-input label="Tên" [required]="true" [block]="true" [(ngModel)]="name"></geo-input>
     </geo-form-modal>
   `,
 })
 export class DemoComponent {
   open = false;
-  name = '';
+  name = "";
 
   constructor(private toast: GeoToastService) {}
 
   save(): void {
-    this.toast.success('Thành công!', 'Đã lưu.');
+    this.toast.success("Thành công!", "Đã lưu.");
     this.open = false;
   }
 }
@@ -76,33 +81,37 @@ export class DemoComponent {
 
 ## Common components
 
-| Need | Component | Example |
-|------|-----------|---------|
-| Button / CTA | `geo-button` | `<geo-button appearance="primary" color="brand">Lưu</geo-button>` |
-| Text field | `geo-input` | `<geo-input label="Họ tên" [(ngModel)]="name" [block]="true">` |
-| 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">` |
-| 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 |
-| 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)` |
-| Alert | `geo-alert` | `type="success" \| "error" \| …` |
-| Status pill | `geo-status-tag` | `status="success" label="Đã duyệt"` |
-| Table | `geo-table` | `[columns]` + `[data]` + paging |
-| Upload | `geo-upload` | Drag-drop multi-file |
-| Typography | `geo-typography` | `variant="h3" \| "body" \| …` |
+| Need            | Component                        | Example                                                           |
+| --------------- | -------------------------------- | ----------------------------------------------------------------- |
+| Button / CTA    | `geo-button`                     | `<geo-button appearance="primary" color="brand">Lưu</geo-button>` |
+| Text field      | `geo-input`                      | `<geo-input label="Họ tên" [(ngModel)]="name" [block]="true">`    |
+| 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)`                              |
+| Alert           | `geo-alert`                      | `type="success" \| "error" \| …`                                  |
+| 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)
 
-| Input | Values | Default |
-|-------|--------|---------|
-| `appearance` | `primary` \| `secondary` \| `tertiary` | `primary` |
-| `color` | `brand` \| `danger` \| `warning` \| `success` | `brand` |
-| `icon` / `iconPlacement` | Ant icon name; `start` \| `end` | `start` |
-| `disabled` / `iconOnly` / `active` | boolean | `false` |
+| Input                              | Values                                        | Default   |
+| ---------------------------------- | --------------------------------------------- | --------- |
+| `appearance`                       | `primary` \| `secondary` \| `tertiary`        | `primary` |
+| `color`                            | `brand` \| `danger` \| `warning` \| `success` | `brand`   |
+| `icon` / `iconPlacement`           | Ant icon name; `start` \| `end`               | `start`   |
+| `disabled` / `iconOnly` / `active` | boolean                                       | `false`   |
 
 ```html
 <geo-button appearance="primary" color="brand" icon="plus">Thêm mới</geo-button>
@@ -114,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()`)
 
-`geo-checkbox` uses **`[(checked)]`** (not CVA).
+### Map portal (quick)
+
+```html
+<geo-map-shell
+  height="640px"
+  [demoSearch]="false"
+  parcelAudience="citizen"
+  [layers]="layers"
+  (mapReady)="ctrl = $event"
+  (search)="onSearch($event)"
+></geo-map-shell>
+```
+
+See `ai/recipes.md` §13 and `ai/components/geo-map-shell.md`.
 
 ### Toast (preferred)
 
@@ -133,19 +158,20 @@ this.toast.error('Lỗi!', 'Không thể lưu.');
 
 After install:
 
-| Path | Purpose |
-|------|---------|
-| `node_modules/@geoit/ui/ai/AGENTS.md` | Rules for humans & AI agents |
-| `node_modules/@geoit/ui/ai/README.md` | Component index |
-| `node_modules/@geoit/ui/ai/catalog.json` | Machine-readable catalog |
+| Path                                        | Purpose                                         |
+| ------------------------------------------- | ----------------------------------------------- |
+| `node_modules/@geoit/ui/ai/AGENTS.md`       | Rules for humans & AI agents                    |
+| `node_modules/@geoit/ui/ai/README.md`       | Component index                                 |
+| `node_modules/@geoit/ui/ai/catalog.json`    | Machine-readable catalog                        |
 | `node_modules/@geoit/ui/ai/components/*.md` | **Per-component API** (inputs/outputs/examples) |
-| `node_modules/@geoit/ui/ai/recipes.md` | Copy-paste screen patterns |
+| `node_modules/@geoit/ui/ai/recipes.md`      | Copy-paste screen patterns                      |
 
 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
 ```
 
@@ -160,20 +186,22 @@ alwaysApply: true
 ---
 
 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
 
-| Group | Examples |
-|-------|----------|
-| Primary | `--geo-color-primary-default` (`#9A4828`), hover, light, dark, background |
-| Neutral | `--geo-color-neutral-900` … `100`, white |
-| Semantic | success / error / warning / info |
-| Radius | `--geo-radius` (6px) |
-| Font | `--geo-font-family` |
+| Group    | Examples                                                                  |
+| -------- | ------------------------------------------------------------------------- |
+| Primary  | `--geo-color-primary-default` (`#9A4828`), hover, light, dark, background |
+| Neutral  | `--geo-color-neutral-900` … `100`, white                                  |
+| Semantic | success / error / warning / info                                          |
+| Radius   | `--geo-radius` (8px) + `--geo-radius-{xs,sm,md,lg,xl,2xl,full}`            |
+| Font     | `--geo-font-family`                                                       |
 
 TypeScript mirror: `geoColorTokens` from `@geoit/ui` (via styles/tokens export).
 

package/ai/AGENTS.md

@@ -1,17 +1,73 @@
 # 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 **6px**)
-4. Before implementing a component, **read the full doc** `ai/components/<selector>.md` (Inputs/Outputs/Examples/Tips) and/or `ai/catalog.json`.
+   - Radius: `var(--geo-radius)` (default **8px**; scale: sm 6 / md 10 / lg 12 / xl 14)
+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.
 
+## Install (consumer app)
+
+```bash
+npm install @geoit/ui
+```
+
+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
@@ -19,8 +75,9 @@ import {
   GeoButtonComponent,
   GeoInputComponent,
   GeoFormModalComponent,
-  GeoStepperComponent,
-} from '@geoit/ui';
+  GeoMapShellComponent,
+  GeoToastService,
+} from "@geoit/ui";
 ```
 
 Standalone consumers:
@@ -32,21 +89,27 @@ 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
 
@@ -57,31 +120,58 @@ See [`recipes.md`](./recipes.md) for:
 | 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` |
-| Page heading | `geo-page-title` (+ `geo-breadcrumb`) |
+| 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) |
+| **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,21 +10,55 @@ 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` | 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` | 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` | 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` | 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) |
+| `geo-layout` | layout | App shell composing sidebar + header + content + footer. | [geo-layout.md](./components/geo-layout.md) |
+| `geo-layout-footer` | layout | Minimal layout footer with copyright text + content slot. | [geo-layout-footer.md](./components/geo-layout-footer.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` | 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` | 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` | 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) |
@@ -39,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-07-27T01:57:41.109Z
+Generated: 2026-09-03T03:52:29.749Z
 
 Regenerate: `npm run ai:docs`