@geoit/ui 0.0.4 → 0.0.6

package/ai/components/geo-forgot-password.md

@@ -0,0 +1,81 @@
+# geo-forgot-password
+
+> Complete usage reference for **GeoForgotPasswordComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Forgot-password form (email + submit / back to login).
+
+## Import
+
+```ts
+import { GeoForgotPasswordComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoForgotPasswordComponent]
+```
+
+## Selector
+`geo-forgot-password`
+
+## Category
+`forms`
+
+## When to use
+Password reset entry page.
+
+## Do not use when
+Inside login card — navigate to a dedicated route.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Quên mật khẩu'` | — |
+| `subtitle` | `string` | `'Nhập email đã đăng ký để nhận mật khẩu mới.'` | — |
+| `loading` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `successMessage` | `string` | `''` | — |
+| `email` | `string` | `''` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `submitEmail` | `OutputEmitterRef<string>` | — |
+| `backToLogin` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-forgot-password
+  (submitEmail)="reset($event)"
+  (backToLogin)="goLogin()"
+></geo-forgot-password>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-forgot-password.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-forgot-password/geo-forgot-password.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-form-modal.md

@@ -38,7 +38,7 @@ Modal form: header/footer cố định, body scroll qua ng-content. [open] + (op
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -46,14 +46,14 @@ Every supported Input (do not invent others):
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `open` | `boolean` | `false` | Tương đương `open` (antd) / `nzVisible` (ng-zorro). |
+| `open` | `boolean` | `false` | Tương đương `open` (antd) / `nzVisible` (ng-zorro). — Two-way `model()` (supports banana binding). |
 | `title` | `string` | `''` | — |
 | `titleUppercase` | `boolean` | `true` | Title chữ in hoa. Default `true` theo design. |
 | `okText` | `string` | `'Lưu'` | — |
 | `cancelText` | `string` | `'Hủy'` | — |
-| `cancelIcon` | `string` | — | Icon nút cancel (vd. `left` cho Quay lại). |
+| `cancelIcon` | `string \| undefined` | `undefined` | Icon nút cancel (vd. `left` cho Quay lại). |
 | `cancelIconPlacement` | `'start' \| 'end'` | `'start'` | — |
-| `okIcon` | `string` | — | Icon nút OK (vd. `right` cho Tiếp theo). |
+| `okIcon` | `string \| undefined` | `undefined` | Icon nút OK (vd. `right` cho Tiếp theo). |
 | `okIconPlacement` | `'start' \| 'end'` | `'end'` | — |
 | `secondaryOkText` | `string` | `''` | Nút phụ (vd. Lưu và khởi tạo lại). Chỉ hiện khi có text và không readonly. |
 | `confirmLoading` | `boolean` | `false` | Loading trên nút OK — giống antd `confirmLoading` / nz `nzOkLoading`. |
@@ -75,12 +75,11 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `openChange` | `EventEmitter<boolean>` | — |
-| `ok` | `EventEmitter<void>` | — |
-| `secondaryOk` | `EventEmitter<void>` | — |
-| `cancel` | `EventEmitter<void>` | — |
-| `afterOpen` | `EventEmitter<void>` | — |
-| `afterClose` | `EventEmitter<void>` | — |
+| `ok` | `OutputEmitterRef<void>` | — |
+| `secondaryOk` | `OutputEmitterRef<void>` | — |
+| `cancel` | `OutputEmitterRef<void>` | — |
+| `afterOpen` | `OutputEmitterRef<void>` | — |
+| `afterClose` | `OutputEmitterRef<void>` | — |
 
 
 ## Examples

package/ai/components/geo-icon.md

@@ -37,7 +37,7 @@ Wrapper icon Ant Design. Bắt buộc [type]; size xs|sm|md|lg|xl hoặc px; col
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -45,11 +45,11 @@ Every supported Input (do not invent others):
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `type` | — | — | Tên icon Ant Design (vd. `close`, `search`, `appstore`). |
+| `type` | `string` | — | Tên icon Ant Design (vd. `close`, `search`, `appstore`). |
 | `theme` | `'outline' \| 'fill' \| 'twotone'` | `'outline'` | — |
 | `spin` | `boolean` | `false` | — |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number \| string` | `'md'` | xs \| sm \| md \| lg \| xl \| number(px) \| CSS size string |
-| `color` | `string` | — | CSS color — ưu tiên design token, vd. `var(--geo-color-primary-default)` |
+| `color` | `string \| undefined` | `undefined` | CSS color — ưu tiên design token, vd. `var(--geo-color-primary-default)` |
 
 ## Outputs
 

package/ai/components/geo-input.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -62,19 +64,19 @@ Every supported Input (do not invent others):
 | `required` | `boolean` | `false` | — |
 | `error` | `boolean` | `false` | — |
 | `errorMessage` | `string` | `''` | — |
-| `maxlength` | `number` | — | — |
-| `prefixIcon` | `string` | — | — |
-| `suffixIcon` | `string` | — | — |
+| `maxlength` | `number \| undefined` | `undefined` | — |
+| `prefixIcon` | `string \| undefined` | `undefined` | — |
+| `suffixIcon` | `string \| undefined` | `undefined` | — |
 | `allowClear` | `boolean` | `false` | — |
 | `block` | `boolean` | `false` | — |
-| `width` | `number \| string` | — | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `valueChange` | `EventEmitter<string>` | — |
-| `enterPressed` | `EventEmitter<void>` | — |
+| `valueChange` | `OutputEmitterRef<string>` | — |
+| `enterPressed` | `OutputEmitterRef<void>` | — |
 
 
 ## Examples

package/ai/components/geo-layout-footer.md

@@ -0,0 +1,70 @@
+# geo-layout-footer
+
+> Complete usage reference for **GeoLayoutFooterComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Minimal layout footer with copyright text + content slot.
+
+## Import
+
+```ts
+import { GeoLayoutFooterComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutFooterComponent]
+```
+
+## Selector
+`geo-layout-footer`
+
+## Category
+`layout`
+
+## When to use
+Bottom chrome inside geo-layout or custom shells.
+
+## Do not use when
+Marketing page footers with heavy links/nav.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `text` | `string` | `'© VNPT \| Hệ thống thông tin đất đai iLIS'` | Copyright / status text. Empty = use default. |
+
+## Outputs
+
+_None_
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-footer text="© VNPT | iLIS"></geo-layout-footer>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-footer.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/footer/geo-layout-footer.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-layout-header-actions.md

@@ -0,0 +1,82 @@
+# geo-layout-header-actions
+
+> Complete usage reference for **GeoLayoutHeaderActionsComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Header actions: notification/subsystem icons + user chip with popovers.
+
+## Import
+
+```ts
+import { GeoLayoutHeaderActionsComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutHeaderActionsComponent]
+```
+
+## Selector
+`geo-layout-header-actions`
+
+## Category
+`layout`
+
+## When to use
+Standalone header toolbar, or default actions inside geo-layout-header.
+
+## Do not use when
+Full app chrome — prefer wrapping with geo-layout.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `user` | `GeoLayoutUserInfo` | `GEO_LAYOUT_DEFAULT_USER` | — |
+| `notifications` | `GeoLayoutNotificationItem[]` | `GEO_LAYOUT_DEFAULT_NOTIFICATIONS` | — |
+| `subsystems` | `GeoLayoutSubsystemItem[]` | `GEO_LAYOUT_DEFAULT_SUBSYSTEMS` | — |
+| `userMenuItems` | `GeoLayoutUserMenuItem[]` | `GEO_LAYOUT_DEFAULT_USER_MENU` | — |
+| `compact` | `boolean` | `false` | Ẩn tên/email trên chip (mobile). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `notificationClick` | `OutputEmitterRef<GeoLayoutNotificationItem>` | — |
+| `subsystemClick` | `OutputEmitterRef<GeoLayoutSubsystemItem>` | — |
+| `userMenuClick` | `OutputEmitterRef<GeoLayoutUserMenuItem>` | — |
+| `logout` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-header-actions
+  [user]="{ name: 'vnpt', email: 'vnpt@vnpt.vn' }"
+  (logout)="onLogout()"
+></geo-layout-header-actions>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-header-actions.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/header-actions/geo-layout-header-actions.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-layout-header.md

@@ -0,0 +1,89 @@
+# geo-layout-header
+
+> Complete usage reference for **GeoLayoutHeaderComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Soft top bar: toggle + breadcrumb + user/notification actions.
+
+## Import
+
+```ts
+import { GeoLayoutHeaderComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutHeaderComponent]
+```
+
+## Selector
+`geo-layout-header`
+
+## Category
+`layout`
+
+## When to use
+Standalone top bar, or inside geo-layout.
+
+## Do not use when
+Full app chrome — use geo-layout.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `breadcrumbs` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `fallbackBreadcrumb` | `string` | `'Hệ thống thông tin đất đai - VNPT iLIS'` | — |
+| `expanded` | `boolean` | `true` | — |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileMenuOpen` | `boolean` | `false` | — |
+| `showDefaultActions` | `boolean` | `true` | — |
+| `user` | `GeoLayoutUserInfo` | `GEO_LAYOUT_DEFAULT_USER` | — |
+| `notifications` | `GeoLayoutNotificationItem[]` | `GEO_LAYOUT_DEFAULT_NOTIFICATIONS` | — |
+| `subsystems` | `GeoLayoutSubsystemItem[]` | `GEO_LAYOUT_DEFAULT_SUBSYSTEMS` | — |
+| `userMenuItems` | `GeoLayoutUserMenuItem[]` | `GEO_LAYOUT_DEFAULT_USER_MENU` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `sidebarToggle` | `OutputEmitterRef<void>` | — |
+| `notificationClick` | `OutputEmitterRef<GeoLayoutNotificationItem>` | — |
+| `subsystemClick` | `OutputEmitterRef<GeoLayoutSubsystemItem>` | — |
+| `userMenuClick` | `OutputEmitterRef<GeoLayoutUserMenuItem>` | — |
+| `logout` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-header
+  [breadcrumbs]="crumbs"
+  [user]="{ name: 'vnpt', email: 'vnpt@vnpt.vn' }"
+  (sidebarToggle)="toggle()"
+></geo-layout-header>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-header.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/header/geo-layout-header.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-layout-sidebar.md

@@ -0,0 +1,86 @@
+# geo-layout-sidebar
+
+> Complete usage reference for **GeoLayoutSidebarComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+White sidebar: brand + recursive menu (collapse / mobile drawer).
+
+## Import
+
+```ts
+import { GeoLayoutSidebarComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutSidebarComponent]
+```
+
+## Selector
+`geo-layout-sidebar`
+
+## Category
+`layout`
+
+## When to use
+Standalone nav rail, or inside geo-layout.
+
+## Do not use when
+Full app chrome — use geo-layout.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menuItems` | `GeoLayoutMenuItem[]` | `[]` | — |
+| `brandTitle` | `string` | `'iLIS'` | — |
+| `logoSrc` | `string` | `''` | — |
+| `logoAlt` | `string` | `'Logo'` | — |
+| `sidebarBackgroundSrc` | `string` | `''` | — |
+| `selectedKey` | `string \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `collapsed` | `boolean` | `false` | — |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileOpen` | `boolean` | `false` | — |
+| `width` | `GeoLayoutSiderWidth` | `280` | — |
+| `collapsedWidth` | `GeoLayoutSiderWidth` | `80` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `menuSelect` | `OutputEmitterRef<GeoLayoutMenuItem>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-layout-sidebar
+  [menuItems]="menu"
+  [(selectedKey)]="active"
+  [collapsed]="false"
+></geo-layout-sidebar>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout-sidebar.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/sidebar/geo-layout-sidebar.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-layout.md

@@ -0,0 +1,155 @@
+# geo-layout
+
+> Complete usage reference for **GeoLayoutComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+App shell composing sidebar + header + content + footer.
+
+## Import
+
+```ts
+import { GeoLayoutComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoLayoutComponent]
+```
+
+## Selector
+`geo-layout`
+
+## Category
+`layout`
+
+## When to use
+Host application chrome mirroring layout/feature MainLayout.
+
+## Do not use when
+In-page wizards — use geo-step-form-layout; dialogs — use geo-form-modal.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menuItems` | `GeoLayoutMenuItem[]` | `[]` | — |
+| `brandTitle` | `string` | `'iLIS'` | — |
+| `logoSrc` | `string` | `''` | — |
+| `logoAlt` | `string` | `'Logo'` | — |
+| `sidebarBackgroundSrc` | `string` | `''` | — |
+| `breadcrumbs` | `GeoBreadcrumbItem[]` | `[]` | — |
+| `fallbackBreadcrumb` | `string` | `'Hệ thống thông tin đất đai - VNPT iLIS'` | — |
+| `expanded` | `boolean` | `true` | Two-way `model()` (supports banana binding). |
+| `isMobile` | `boolean` | `false` | — |
+| `mobileMenuOpen` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
+| `selectedKey` | `string \| null` | `null` | Two-way `model()` (supports banana binding). |
+| `siderWidth` | `number \| string` | `280` | — |
+| `siderCollapsedWidth` | `number \| string` | `80` | — |
+| `showDefaultActions` | `boolean` | `true` | — |
+| `showFooter` | `boolean` | `true` | — |
+| `footerText` | `string` | `'© VNPT \| Hệ thống thông tin đất đai iLIS'` | — |
+| `user` | `GeoLayoutUserInfo` | `GEO_LAYOUT_DEFAULT_USER` | — |
+| `notifications` | `GeoLayoutNotificationItem[]` | `GEO_LAYOUT_DEFAULT_NOTIFICATIONS` | — |
+| `subsystems` | `GeoLayoutSubsystemItem[]` | `GEO_LAYOUT_DEFAULT_SUBSYSTEMS` | — |
+| `userMenuItems` | `GeoLayoutUserMenuItem[]` | `GEO_LAYOUT_DEFAULT_USER_MENU` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `menuSelect` | `OutputEmitterRef<GeoLayoutMenuItem>` | — |
+| `sidebarToggle` | `OutputEmitterRef<void>` | — |
+| `notificationClick` | `OutputEmitterRef<GeoLayoutNotificationItem>` | — |
+| `subsystemClick` | `OutputEmitterRef<GeoLayoutSubsystemItem>` | — |
+| `userMenuClick` | `OutputEmitterRef<GeoLayoutUserMenuItem>` | — |
+| `logout` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-layout/geo-layout.types.ts`:
+
+```ts
+export interface GeoLayoutMenuItem {
+  /** Stable id used for selection / open state. */
+  key: string;
+  /** Display label. */
+  title: string;
+  /** Optional `geo-icon` / Ant Design icon type. */
+  icon?: string;
+  /** Optional route / href hint for consumers (Storybook clicks use `menuSelect`). */
+  link?: string;
+  children?: GeoLayoutMenuItem[];
+}
+
+export interface GeoLayoutUserInfo {
+  name: string;
+  email?: string;
+  /** Optional avatar URL; initials used when empty. */
+  avatarUrl?: string;
+  role?: string;
+}
+
+export interface GeoLayoutNotificationItem {
+  id: string;
+  message: string;
+  time: string;
+  read?: boolean;
+  icon?: string;
+}
+
+export interface GeoLayoutSubsystemItem {
+  id: string;
+  label: string;
+  initials: string;
+  url?: string;
+}
+
+export interface GeoLayoutUserMenuItem {
+  key: string;
+  label: string;
+  icon: string;
+  danger?: boolean;
+}
+
+export type GeoLayoutSiderWidth = number | string;
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-layout
+  [menuItems]="menu"
+  [(expanded)]="expanded"
+  [breadcrumbs]="crumbs"
+  [(selectedKey)]="active"
+  [user]="{ name: 'vnpt', email: 'vnpt@vnpt.vn' }"
+  (menuSelect)="onNav($event)"
+  (logout)="onLogout()"
+>
+  <router-outlet />
+</geo-layout>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-layout.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-layout/geo-layout.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.