@geoit/ui 0.0.4 → 0.0.5

package/lib/figma/index.d.ts

@@ -33,6 +33,13 @@ export * from './geo-stepper/geo-stepper.component';
 export * from './geo-stepper/geo-stepper.types';
 export * from './geo-step-form-layout/geo-step-form-layout.component';
 export * from './geo-step-form-layout/geo-step-form-layout.types';
+export * from './geo-layout/geo-layout.component';
+export * from './geo-layout/geo-layout.types';
+export * from './geo-layout/geo-layout-actions.directive';
+export * from './geo-layout/header-actions/geo-layout-header-actions.component';
+export * from './geo-layout/sidebar/geo-layout-sidebar.component';
+export * from './geo-layout/header/geo-layout-header.component';
+export * from './geo-layout/footer/geo-layout-footer.component';
 export * from './geo-tabs/geo-tabs.component';
 export * from './geo-tabs/geo-tabs.types';
 export * from './geo-table/geo-table.component';
@@ -53,3 +60,45 @@ export * from './geo-table/geo-column-picker/geo-column-picker.types';
 export * from './geo-table/geo-column-picker/geo-column-picker.storage';
 export * from './geo-table/geo-table-toolbar/geo-table-toolbar.component';
 export * from './geo-table/geo-table-pagination/geo-table-pagination.component';
+export * from './geo-stat-card/geo-stat-card.component';
+export * from './geo-stat-card/geo-stat-card.types';
+export * from './geo-chart/geo-chart.component';
+export * from './geo-chart/geo-chart.types';
+export * from './geo-empty-state/geo-empty-state.component';
+export * from './geo-page-header/geo-page-header.component';
+export * from './geo-login/geo-login.component';
+export * from './geo-login/geo-login.types';
+export * from './geo-forgot-password/geo-forgot-password.component';
+export * from './geo-feedback-form/geo-feedback-form.component';
+export * from './geo-feedback-form/geo-feedback-form.types';
+export * from './geo-overlap-result/geo-overlap-result.component';
+export * from './geo-overlap-result/geo-overlap-result.types';
+export * from './geo-dashboard/geo-dashboard.component';
+export * from './geo-dashboard/geo-dashboard.types';
+export * from './geo-list-page/geo-list-page.component';
+export * from './geo-map/geo-map.component';
+export * from './geo-map/geo-map.types';
+export * from './geo-map/geo-map.constants';
+export * from './geo-map/geo-map-toolbar.icons';
+export * from './geo-map/geo-map.controller';
+export * from './geo-map/services/geo-map-projection.service';
+export * from './geo-map/services/geo-map-layer.service';
+export * from './geo-map/services/geo-map.service';
+export * from './geo-map/chrome/geo-map-toolbar/geo-map-toolbar.component';
+export * from './geo-map/chrome/geo-map-zoom/geo-map-zoom.component';
+export * from './geo-map/chrome/geo-map-locate/geo-map-locate.component';
+export * from './geo-map/chrome/geo-map-snapshot/geo-map-snapshot.component';
+export * from './geo-map/chrome/geo-map-basemap-switcher/geo-map-basemap-switcher.component';
+export * from './geo-map/chrome/geo-map-measure/geo-map-measure.component';
+export * from './geo-map/chrome/geo-map-opacity/geo-map-opacity.component';
+export * from './geo-map/chrome/geo-map-legend/geo-map-legend.component';
+export * from './geo-map/chrome/geo-map-layer-panel/geo-map-layer-panel.component';
+export * from './geo-map/chrome/geo-map-layer-card/geo-map-layer-card.component';
+export * from './geo-map/chrome/geo-map-layers-drawer/geo-map-layers-drawer.component';
+export * from './geo-map/chrome/geo-map-help/geo-map-help.component';
+export * from './geo-map/chrome/geo-map-swipe/geo-map-swipe.component';
+export * from './geo-map/chrome/geo-map-shell/geo-map-shell.component';
+export * from './geo-map/chrome/geo-map-location-chip/geo-map-location-chip.component';
+export * from './geo-map/chrome/geo-map-search/geo-map-search.component';
+export * from './geo-map/chrome/geo-map-parcel-popup/geo-map-parcel-popup.component';
+export * from './geo-map/chrome/geo-map-admin-filter/geo-map-admin-filter.component';

package/lib/styles/tokens.d.ts

@@ -8,27 +8,29 @@ export declare const geoColorTokens: {
         readonly hover: "#7D3A20";
         readonly light: "#B5643F";
         readonly dark: "#2C1810";
-        readonly background: "#FAF5ED";
-        readonly backgroundAlt: "#F5F0E8";
-        readonly border: "#E8E0D8";
-        readonly surfaceLight: "#F8E6DE";
-        readonly secondaryHover: "#FAF5ED";
+        readonly background: "#FAF6F2";
+        readonly backgroundAlt: "#F4EFE9";
+        readonly border: "#E7DFD6";
+        readonly surfaceLight: "#F7E8E0";
+        readonly secondaryHover: "#FAF6F2";
     };
     readonly neutral: {
-        readonly 900: "#111827";
-        readonly 800: "#212121";
-        readonly 700: "#374151";
-        readonly 500: "#6B7280";
-        readonly 400: "#9CA3AF";
-        readonly 300: "#D1D5DB";
-        readonly 200: "#E5E7EB";
-        readonly 100: "#F3F4F6";
+        readonly 900: "#16141F";
+        readonly 800: "#23212A";
+        readonly 700: "#3D3A45";
+        readonly 600: "#565360";
+        readonly 500: "#6F6B78";
+        readonly 400: "#9894A0";
+        readonly 300: "#CDC9D2";
+        readonly 200: "#E6E3EA";
+        readonly 100: "#F4F3F6";
+        readonly 50: "#FAF9FB";
         readonly white: "#FFFFFF";
-        readonly disabledText: "#8F9294";
+        readonly disabledText: "#8F8C96";
     };
     readonly success: {
         readonly dark: "#166534";
-        readonly default: "#22C55E";
+        readonly default: "#16A34A";
         readonly light: "#DCFCE7";
     };
     readonly error: {
@@ -38,17 +40,17 @@ export declare const geoColorTokens: {
     };
     readonly warning: {
         readonly dark: "#92400E";
-        readonly default: "#F59E0B";
+        readonly default: "#D97706";
         readonly light: "#FEF3C7";
     };
     readonly info: {
         readonly dark: "#1E40AF";
-        readonly default: "#3B82F6";
+        readonly default: "#2563EB";
         readonly light: "#DBEAFE";
     };
     readonly teal: {
         readonly dark: "#0F766E";
-        readonly default: "#14B8A6";
+        readonly default: "#0D9488";
         readonly light: "#CCFBF1";
     };
 };
@@ -65,19 +67,33 @@ export declare const geoColorCssVars: {
         readonly border: "--geo-color-primary-border";
         readonly surfaceLight: "--geo-color-primary-surface-light";
         readonly secondaryHover: "--geo-color-primary-secondary-hover";
+        readonly soft: "--geo-color-primary-soft";
+        readonly softHover: "--geo-color-primary-soft-hover";
+        readonly softActive: "--geo-color-primary-soft-active";
+        readonly softStrong: "--geo-color-primary-soft-strong";
+        readonly focusRing: "--geo-color-primary-focus-ring";
     };
     readonly neutral: {
         readonly 900: "--geo-color-neutral-900";
         readonly 800: "--geo-color-neutral-800";
         readonly 700: "--geo-color-neutral-700";
+        readonly 600: "--geo-color-neutral-600";
         readonly 500: "--geo-color-neutral-500";
         readonly 400: "--geo-color-neutral-400";
         readonly 300: "--geo-color-neutral-300";
         readonly 200: "--geo-color-neutral-200";
         readonly 100: "--geo-color-neutral-100";
+        readonly 50: "--geo-color-neutral-50";
         readonly white: "--geo-color-neutral-white";
         readonly disabledText: "--geo-color-neutral-disabled-text";
     };
+    readonly surface: {
+        readonly page: "--geo-color-surface-page";
+        readonly elevated: "--geo-color-surface-elevated";
+        readonly header: "--geo-color-surface-header";
+        readonly muted: "--geo-color-surface-muted";
+        readonly subtle: "--geo-color-surface-subtle";
+    };
     readonly success: {
         readonly dark: "--geo-color-success-dark";
         readonly default: "--geo-color-success-default";
@@ -168,17 +184,34 @@ export declare const geoTypographyTokens: {
     };
 };
 export type GeoTypographyTokens = typeof geoTypographyTokens;
-/** Border radius design tokens (default 6px). */
+/** Border radius design tokens (default 8px, layout-aligned scale). */
 export declare const geoRadiusTokens: {
-    readonly default: "6px";
+    readonly xs: "4px";
     readonly sm: "6px";
-    readonly md: "6px";
-    readonly lg: "6px";
+    readonly default: "8px";
+    readonly md: "10px";
+    readonly lg: "12px";
+    readonly xl: "14px";
+    readonly '2xl': "16px";
+    readonly full: "999px";
 };
 export declare const geoRadiusCssVars: {
-    readonly default: "--geo-radius";
+    readonly xs: "--geo-radius-xs";
     readonly sm: "--geo-radius-sm";
+    readonly default: "--geo-radius";
     readonly md: "--geo-radius-md";
     readonly lg: "--geo-radius-lg";
+    readonly xl: "--geo-radius-xl";
+    readonly '2xl': "--geo-radius-2xl";
+    readonly full: "--geo-radius-full";
 };
 export type GeoRadiusTokens = typeof geoRadiusTokens;
+/** Elevation / shadow tokens. */
+export declare const geoShadowTokens: {
+    readonly xs: "var(--geo-shadow-xs)";
+    readonly sm: "var(--geo-shadow-sm)";
+    readonly md: "var(--geo-shadow-md)";
+    readonly lg: "var(--geo-shadow-lg)";
+    readonly drawer: "var(--geo-shadow-drawer)";
+};
+export type GeoShadowTokens = typeof geoShadowTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoit/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "GEO UI — Angular 18 + ng-zorro design system components",
   "peerDependencies": {
     "@angular/animations": "^18.2.0",
@@ -9,7 +9,9 @@
     "@angular/forms": "^18.2.0",
     "@angular/cdk": "^18.2.0",
     "@ant-design/icons-angular": "^18.0.0",
-    "ng-zorro-antd": "^18.2.0"
+    "ng-zorro-antd": "^18.2.0",
+    "ol": "^10.0.0",
+    "proj4": "^2.11.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/src/lib/figma/geo-map/assets/toolbar/fullscreen.svg

@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="25.0001" height="24.9995" viewBox="0 0 25.0001 24.9995" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M0.870676 7.55584C1.35164 7.55584 1.74135 7.16601 1.74135 6.68516V2.97283L7.34908 8.57941C7.51915 8.74936 7.74193 8.83434 7.96471 8.83434C8.1876 8.83434 8.41049 8.74936 8.58045 8.57929C8.92048 8.23926 8.92048 7.68795 8.58033 7.34804L2.97237 1.74135H6.68551C7.16636 1.74135 7.55619 1.35152 7.55619 0.870676C7.55619 0.38983 7.16647 0 6.68551 0H0.870676C0.389714 0 0 0.38983 0 0.870676V6.68528C0 7.16601 0.389714 7.55584 0.870676 7.55584Z" fill="#8D4425"/>
+<path id="Vector_2" d="M24.1293 17.4437C23.6484 17.4437 23.2586 17.8335 23.2586 18.3144V22.0268L17.4783 16.2465C17.1381 15.9064 16.587 15.9064 16.2469 16.2465C15.9069 16.5865 15.9069 17.1378 16.2469 17.4777L22.0272 23.258H18.315C17.834 23.258 17.4443 23.6478 17.4443 24.1286C17.4443 24.6095 17.834 24.9993 18.315 24.9993H24.1294C24.6104 24.9993 25.0001 24.6095 25.0001 24.1286V18.3144C25 17.8335 24.6102 17.4437 24.1293 17.4437Z" fill="#8D4425"/>
+<path id="Vector_3" d="M7.52171 16.2465L1.74193 22.0267V18.3144C1.74193 17.8335 1.35222 17.4437 0.871256 17.4437C0.390295 17.4437 0.00058045 17.8335 0.00058045 18.3144V24.1289C0.00058045 24.6097 0.390295 24.9995 0.871256 24.9995H6.68551C7.16636 24.9995 7.55619 24.6097 7.55619 24.1289C7.55619 23.648 7.16647 23.2582 6.68551 23.2582H2.97318L8.75308 17.4777C9.0931 17.1377 9.0931 16.5864 8.75296 16.2464C8.41316 15.9064 7.86185 15.9064 7.52171 16.2465Z" fill="#8D4425"/>
+<path id="Vector_4" d="M24.1293 9.28721e-06H18.3148C17.8339 9.28721e-06 17.4442 0.38984 17.4442 0.870685C17.4442 1.35153 17.8339 1.74136 18.3148 1.74136H22.0273L16.4204 7.34863C16.0803 7.68866 16.0803 8.23997 16.4205 8.58C16.5904 8.74995 16.8133 8.83493 17.0361 8.83493C17.2589 8.83493 17.4818 8.74983 17.6518 8.57988L23.2588 2.97261V6.68517C23.2588 7.16602 23.6485 7.55585 24.1294 7.55585C24.6104 7.55585 25.0001 7.16602 25.0001 6.68517V0.870685C25 0.389724 24.6102 9.28721e-06 24.1293 9.28721e-06Z" fill="#8D4425"/>
+</g>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/home.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9706 0.00019716C10.5477 0.00523648 10.1341 0.122133 9.77969 0.336782L0.979688 5.66941C0.367638 6.04029 2.53914e-08 6.66561 2.53914e-08 7.33281V17.9994C-0.000183455 19.0963 0.994037 20.0002 2.20072 20H8.06667V14.0001C8.06667 13.2614 8.72081 12.6667 9.53333 12.6667H12.4667C13.2792 12.6667 13.9333 13.2614 13.9333 14.0001V20H19.7993C21.006 20.0002 22.0002 19.0963 22 17.9994V7.33281C22 6.66561 21.6324 6.04029 21.0203 5.66941L12.221 0.336782C11.8515 0.112822 11.4157 -0.00550988 10.9706 0.00019716Z" fill="white"/>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/layers.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18.75" height="19.8646" viewBox="0 0 18.75 19.8646" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9.36458 17.2292L1.6875 11.2604L0 12.5729L9.375 19.8646L18.75 12.5729L17.0521 11.25L9.36458 17.2292ZM9.375 14.5833L17.0417 8.61458L18.75 7.29167L9.375 0L0 7.29167L1.69792 8.61458L9.375 14.5833ZM9.375 2.63542L15.3542 7.29167L9.375 11.9479L3.39583 7.29167L9.375 2.63542V2.63542Z" fill="#8D4425"/>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/measure-area.svg

@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="25" height="23.2627" viewBox="0 0 25 23.2627" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M2.53205 7.88633C2.62609 7.88633 2.72146 7.88155 2.81726 7.87071C3.48993 7.79487 4.09239 7.46201 4.51457 6.93235C4.93675 6.40314 5.12742 5.74131 5.05159 5.06859C4.89597 3.69287 3.66503 2.67951 2.24991 2.83513C0.862082 2.99158 -0.140043 4.24855 0.0160156 5.63681C0.161185 6.91932 1.24261 7.88633 2.53205 7.88633ZM2.42892 4.4258C2.46447 4.42145 2.50001 4.41974 2.53512 4.41974C3.00974 4.41974 3.40805 4.776 3.46181 5.24803C3.48954 5.4955 3.41932 5.73955 3.26371 5.93457C3.10809 6.1296 2.88621 6.2527 2.63869 6.27999C2.119 6.3424 1.66391 5.9649 1.60668 5.45776C1.54906 4.94593 1.91792 4.48346 2.42892 4.4258Z" fill="#8D4425"/>
+<path id="Vector_2" d="M16.8625 5.06771C16.9566 5.06771 17.0519 5.06292 17.1477 5.05169C18.536 4.8948 19.5377 3.63784 19.3812 2.25089C19.2265 0.874338 17.9925 -0.143363 16.5795 0.0165528C15.1917 0.173002 14.19 1.43041 14.3461 2.81824C14.4904 4.10074 15.5722 5.06771 16.8625 5.06771ZM16.7594 1.60678C16.7949 1.60243 16.8305 1.60028 16.8656 1.60028C17.3406 1.60028 17.7385 1.95698 17.7909 2.42985C17.849 2.94085 17.4797 3.40375 16.9687 3.46142C16.4538 3.52558 15.9935 3.14676 15.9367 2.63879C15.8791 2.12735 16.2479 1.66445 16.7594 1.60678Z" fill="#8D4425"/>
+<path id="Vector_3" d="M24.9837 17.5618C24.8281 16.1856 23.5833 15.1719 22.1824 15.3279C21.5102 15.4037 20.9077 15.7366 20.4856 16.2662C20.0634 16.7954 19.8723 17.4569 19.9486 18.1291C20.0929 19.4121 21.1747 20.379 22.4646 20.379C22.5591 20.379 22.6545 20.3738 22.7498 20.3634C23.4221 20.2876 24.0246 19.9547 24.4467 19.4254C24.8688 18.8958 25.0596 18.2344 24.9837 17.5618ZM23.1962 18.4273C23.0406 18.6223 22.8187 18.7454 22.5717 18.7728C22.0533 18.8361 21.5964 18.4577 21.5392 17.9497C21.511 17.7026 21.5817 17.4591 21.7369 17.2641C21.8925 17.069 22.1148 16.9459 22.3623 16.9182C22.3983 16.9143 22.4339 16.9121 22.469 16.9121C22.9432 16.9121 23.3406 17.2684 23.3939 17.7413C23.4221 17.9887 23.3514 18.2327 23.1962 18.4273Z" fill="#8D4425"/>
+<path id="Vector_4" d="M2.41549 18.2106C1.02766 18.3671 0.0259768 19.6245 0.182035 21.0123C0.326814 22.2952 1.40819 23.2627 2.69724 23.2627C2.79172 23.2627 2.88752 23.257 2.98328 23.2466C3.65595 23.1708 4.25841 22.8379 4.68059 22.3083C5.10277 21.7791 5.29344 21.1172 5.21761 20.4445C5.06199 19.0684 3.83974 18.0481 2.41549 18.2106ZM3.42885 21.3105C3.27323 21.5055 3.05135 21.6286 2.80339 21.6564C2.2859 21.7101 1.82905 21.3408 1.77182 20.8329C1.71415 20.3214 2.08345 19.8585 2.59406 19.8008C2.62961 19.7965 2.66472 19.7948 2.69982 19.7948C3.17528 19.7948 3.57406 20.151 3.62695 20.624C3.65463 20.8714 3.58442 21.1154 3.42885 21.3105Z" fill="#8D4425"/>
+<path id="Vector_5" d="M6.14039 5.44394C6.19195 5.44394 6.24357 5.43871 6.29557 5.42875L13.4107 4.0292C13.8441 3.9438 14.1263 3.52294 14.0414 3.08953C13.956 2.65612 13.5364 2.37482 13.1017 2.4589L5.98648 3.85845C5.55307 3.94385 5.27045 4.36471 5.35585 4.79812C5.43129 5.17957 5.76587 5.44394 6.14039 5.44394Z" fill="#8D4425"/>
+<path id="Vector_6" d="M17.9002 5.36591C17.4854 5.51762 17.2717 5.97706 17.4234 6.39225L20.4045 14.5368C20.5228 14.8611 20.8293 15.0621 21.1557 15.0621C21.2471 15.0621 21.3395 15.0465 21.4305 15.0132C21.8457 14.8615 22.0594 14.402 21.9072 13.9868L18.9266 5.84224C18.7753 5.42748 18.3141 5.2138 17.9002 5.36591Z" fill="#8D4425"/>
+<path id="Vector_7" d="M18.6704 17.5899L6.2652 19.3995C5.82788 19.4637 5.52533 19.8698 5.58906 20.3071C5.64712 20.705 5.98912 20.9919 6.37965 20.9919C6.41823 20.9919 6.4568 20.9889 6.49626 20.9837L18.9015 19.1741C19.3388 19.11 19.6418 18.7038 19.578 18.2665C19.5138 17.8296 19.1068 17.5306 18.6704 17.5899Z" fill="#8D4425"/>
+<path id="Vector_8" d="M2.57497 8.37004C2.57194 8.37004 2.56891 8.37004 2.56589 8.37004C2.12422 8.37482 1.76967 8.73631 1.77446 9.17841L1.8581 16.9195C1.86333 17.3585 2.22047 17.7109 2.65822 17.7109C2.66125 17.7109 2.66428 17.7109 2.6673 17.7109C3.10897 17.7061 3.46352 17.3446 3.45873 16.9025L3.37509 9.16146C3.36991 8.72239 3.01272 8.37004 2.57497 8.37004Z" fill="#8D4425"/>
+</g>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/measure-distance.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="line node">
+<path id="Vector" d="M18.4883 17.4363C17.9297 17.4363 17.4078 17.5895 16.957 17.8523L5.68789 6.5832C5.95078 6.13242 6.10391 5.61055 6.10391 5.05195C6.10391 3.36914 4.73477 2 3.05195 2C1.36914 2 0 3.36914 0 5.05195C0 6.73477 1.36914 8.10391 3.05195 8.10391C3.61016 8.10391 4.13242 7.95078 4.5832 7.68789L15.8523 18.957C15.5895 19.4078 15.4363 19.9301 15.4363 20.4883C15.4363 22.1711 16.8055 23.5402 18.4883 23.5402C20.1711 23.5402 21.5402 22.1711 21.5402 20.4883C21.5398 18.8055 20.1707 17.4363 18.4883 17.4363ZM3.05195 6.5418C2.23047 6.5418 1.5625 5.87383 1.5625 5.05234C1.5625 4.23086 2.23047 3.56289 3.05195 3.56289C3.87344 3.56289 4.54141 4.23086 4.54141 5.05234C4.54141 5.87383 3.87305 6.5418 3.05195 6.5418ZM18.4883 21.9777C17.6668 21.9777 16.9988 21.3098 16.9988 20.4883C16.9988 19.6668 17.6672 18.9988 18.4883 18.9988C19.3094 18.9988 19.9777 19.6672 19.9777 20.4883C19.9777 21.3094 19.3094 21.9777 18.4883 21.9777Z" fill="#8D4425"/>
+</g>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/pan.svg

@@ -0,0 +1,13 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19395_1548)">
+<path d="M8.33325 13.5417V5.72919C8.33325 5.31479 8.49787 4.91736 8.7909 4.62433C9.08392 4.33131 9.48135 4.16669 9.89575 4.16669C10.3102 4.16669 10.7076 4.33131 11.0006 4.62433C11.2936 4.91736 11.4583 5.31479 11.4583 5.72919V12.5" stroke="#B15F3E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.4583 5.72915V3.64581C11.4583 3.44062 11.4987 3.23744 11.5772 3.04787C11.6557 2.8583 11.7708 2.68605 11.9159 2.54096C12.061 2.39587 12.2332 2.28077 12.4228 2.20225C12.6124 2.12373 12.8156 2.08331 13.0208 2.08331C13.2259 2.08331 13.4291 2.12373 13.6187 2.20225C13.8083 2.28077 13.9805 2.39587 14.1256 2.54096C14.2707 2.68605 14.3858 2.8583 14.4643 3.04787C14.5428 3.23744 14.5833 3.44062 14.5833 3.64581V12.5" stroke="#B15F3E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5833 5.72919C14.5833 5.31479 14.7479 4.91736 15.0409 4.62433C15.3339 4.33131 15.7314 4.16669 16.1458 4.16669C16.5602 4.16669 16.9576 4.33131 17.2506 4.62433C17.5436 4.91736 17.7083 5.31479 17.7083 5.72919V12.5" stroke="#B15F3E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.7083 7.8125C17.7083 7.3981 17.8729 7.00067 18.1659 6.70765C18.459 6.41462 18.8564 6.25 19.2708 6.25C19.6852 6.25 20.0826 6.41462 20.3756 6.70765C20.6687 7.00067 20.8333 7.3981 20.8333 7.8125V16.6667C20.8333 18.3243 20.1748 19.914 19.0027 21.0861C17.8306 22.2582 16.2409 22.9167 14.5833 22.9167H12.4999H12.7166C11.6815 22.9168 10.6626 22.6599 9.75139 22.169C8.84014 21.6781 8.06507 20.9686 7.49578 20.1042C7.42746 20.0002 7.3594 19.896 7.29161 19.7917C6.96661 19.2927 5.82599 17.3042 3.8687 13.825C3.66917 13.4703 3.61587 13.0518 3.72014 12.6585C3.82441 12.2651 4.07802 11.928 4.42703 11.7187C4.79878 11.4957 5.2344 11.4032 5.6647 11.4561C6.095 11.5089 6.4953 11.704 6.80203 12.0104L8.33328 13.5417" stroke="#B15F3E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_19395_1548">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/search.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20.0928" height="20.0928" viewBox="0 0 20.0928 20.0928" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M12.2803 0C7.97424 0 4.46777 3.50647 4.46777 7.8125C4.46777 9.68323 5.1239 11.3983 6.22559 12.7441L0 18.9697L1.12305 20.0928L7.34863 13.8672C8.69446 14.9689 10.4095 15.625 12.2803 15.625C16.5863 15.625 20.0928 12.1185 20.0928 7.8125C20.0928 3.50647 16.5863 0 12.2803 0ZM12.2803 1.5625C15.741 1.5625 18.5303 4.35181 18.5303 7.8125C18.5303 11.2732 15.741 14.0625 12.2803 14.0625C8.81958 14.0625 6.03027 11.2732 6.03027 7.8125C6.03027 4.35181 8.81958 1.5625 12.2803 1.5625Z" fill="#8D4425"/>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/zoom-in.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7188 3.90625V11.7188H3.90625V13.2812H11.7188V21.0938H13.2812V13.2812H21.0938V11.7188H13.2812V3.90625H11.7188Z" fill="#8D4425"/>
+</svg>

package/src/lib/figma/geo-map/assets/toolbar/zoom-out.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="minus-solid">
+<path id="Vector" d="M3.90625 11.7188V13.2812H21.0938V11.7188H3.90625Z" fill="#8D4425"/>
+</g>
+</svg>

package/src/lib/styles/design-tokens.scss

@@ -1,58 +1,117 @@
 /**
  * GEO UI design tokens — single source of truth for colors, radius, typography.
  * Components MUST use these CSS variables; never hardcode hex colors or radii.
+ *
+ * Refined for modern app shells (white sidebar, soft primary active states)
+ * while keeping VNPT brand primary brown.
  */
 :root {
-  /* Primary */
+  /* ——— Primary (brand) ——— */
   --geo-color-primary-default: #9a4828;
   --geo-color-primary-hover: #7d3a20;
   --geo-color-primary-light: #b5643f;
   --geo-color-primary-dark: #2c1810;
-  --geo-color-primary-background: #faf5ed;
-  --geo-color-primary-background-alt: #f5f0e8;
-  --geo-color-primary-border: #e8e0d8;
-  --geo-color-primary-surface-light: #f8e6de;
-  /* Secondary button hover */
-  --geo-color-primary-secondary-hover: #faf5ed;
-
-  /* Neutral */
-  --geo-color-neutral-900: #111827;
-  --geo-color-neutral-800: #212121;
-  --geo-color-neutral-700: #374151;
-  --geo-color-neutral-500: #6b7280;
-  --geo-color-neutral-400: #9ca3af;
-  --geo-color-neutral-300: #d1d5db;
-  --geo-color-neutral-200: #e5e7eb;
-  --geo-color-neutral-100: #f3f4f6;
+  --geo-color-primary-background: #faf6f2;
+  --geo-color-primary-background-alt: #f4efe9;
+  --geo-color-primary-border: #e7dfd6;
+  --geo-color-primary-surface-light: #f7e8e0;
+  --geo-color-primary-secondary-hover: #faf6f2;
+
+  /* Soft primary fills (active menu, icon hover, focus rings) */
+  --geo-color-primary-soft: color-mix(
+    in srgb,
+    var(--geo-color-primary-default) 6%,
+    transparent
+  );
+  --geo-color-primary-soft-hover: color-mix(
+    in srgb,
+    var(--geo-color-primary-default) 8%,
+    transparent
+  );
+  --geo-color-primary-soft-active: color-mix(
+    in srgb,
+    var(--geo-color-primary-default) 10%,
+    transparent
+  );
+  --geo-color-primary-soft-strong: color-mix(
+    in srgb,
+    var(--geo-color-primary-default) 14%,
+    transparent
+  );
+  --geo-color-primary-focus-ring: color-mix(
+    in srgb,
+    var(--geo-color-primary-default) 18%,
+    transparent
+  );
+
+  /* ——— Neutral (slightly warm, pairs with brand) ——— */
+  --geo-color-neutral-900: #16141f;
+  --geo-color-neutral-800: #23212a;
+  --geo-color-neutral-700: #3d3a45;
+  --geo-color-neutral-600: #565360;
+  --geo-color-neutral-500: #6f6b78;
+  --geo-color-neutral-400: #9894a0;
+  --geo-color-neutral-300: #cdc9d2;
+  --geo-color-neutral-200: #e6e3ea;
+  --geo-color-neutral-100: #f4f3f6;
+  --geo-color-neutral-50: #faf9fb;
   --geo-color-neutral-white: #ffffff;
-  --geo-color-neutral-disabled-text: #8f9294;
-
-  /* Success */
+  --geo-color-neutral-disabled-text: #8f8c96;
+
+  /* ——— Semantic surfaces ——— */
+  --geo-color-surface-page: var(--geo-color-neutral-100);
+  --geo-color-surface-elevated: var(--geo-color-neutral-white);
+  --geo-color-surface-header: color-mix(
+    in srgb,
+    var(--geo-color-neutral-white) 92%,
+    transparent
+  );
+  --geo-color-surface-muted: var(--geo-color-neutral-100);
+  --geo-color-surface-subtle: var(--geo-color-neutral-50);
+  --geo-color-border-default: var(--geo-color-neutral-200);
+  --geo-color-border-strong: var(--geo-color-neutral-300);
+  --geo-color-border-subtle: color-mix(
+    in srgb,
+    var(--geo-color-neutral-200) 70%,
+    transparent
+  );
+
+  /* ——— Status ——— */
   --geo-color-success-dark: #166534;
-  --geo-color-success-default: #22c55e;
+  --geo-color-success-default: #16a34a;
   --geo-color-success-light: #dcfce7;
 
-  /* Error */
   --geo-color-error-dark: #991b1b;
   --geo-color-error-default: #dc2626;
   --geo-color-error-light: #fee2e2;
 
-  /* Warning */
   --geo-color-warning-dark: #92400e;
-  --geo-color-warning-default: #f59e0b;
+  --geo-color-warning-default: #d97706;
   --geo-color-warning-light: #fef3c7;
 
-  /* Info */
   --geo-color-info-dark: #1e40af;
-  --geo-color-info-default: #3b82f6;
+  --geo-color-info-default: #2563eb;
   --geo-color-info-light: #dbeafe;
 
-  /* Teal — status badge (Trả kết quả) */
   --geo-color-teal-dark: #0f766e;
-  --geo-color-teal-default: #14b8a6;
+  --geo-color-teal-default: #0d9488;
   --geo-color-teal-light: #ccfbf1;
 
-  /* Semantic aliases (legacy-friendly names used by components) */
+  /* ——— Shadows (tint toward neutral, not pure black) ——— */
+  --geo-shadow-xs: 0 1px 2px
+    color-mix(in srgb, var(--geo-color-neutral-900) 5%, transparent);
+  --geo-shadow-sm: 0 2px 8px
+    color-mix(in srgb, var(--geo-color-neutral-900) 6%, transparent);
+  --geo-shadow-md:
+    0 8px 24px color-mix(in srgb, var(--geo-color-neutral-900) 8%, transparent),
+    0 2px 6px color-mix(in srgb, var(--geo-color-neutral-900) 4%, transparent);
+  --geo-shadow-lg:
+    0 12px 32px color-mix(in srgb, var(--geo-color-neutral-900) 10%, transparent),
+    0 2px 8px color-mix(in srgb, var(--geo-color-neutral-900) 4%, transparent);
+  --geo-shadow-drawer: 8px 0 24px
+    color-mix(in srgb, var(--geo-color-neutral-900) 8%, transparent);
+
+  /* ——— Semantic aliases (legacy-friendly) ——— */
   --color-primary: var(--geo-color-primary-default);
   --color-primary-hover: var(--geo-color-primary-hover);
   --color-primary-dark: var(--geo-color-primary-dark);
@@ -63,6 +122,10 @@
   --color-primary-border: var(--geo-color-primary-border);
   --color-primary-background: var(--geo-color-primary-background);
   --color-primary-background-alt: var(--geo-color-primary-background-alt);
+  --color-primary-alpha-6: var(--geo-color-primary-soft);
+  --color-primary-alpha-8: var(--geo-color-primary-soft-hover);
+  --color-primary-alpha-10: var(--geo-color-primary-soft-active);
+  --color-primary-alpha-12: var(--geo-color-primary-soft-strong);
 
   --color-ink: var(--geo-color-neutral-900);
   --color-ink-strong: var(--geo-color-neutral-900);
@@ -75,6 +138,7 @@
   --color-surface-muted: var(--geo-color-neutral-100);
   --color-surface-border: var(--geo-color-neutral-200);
   --color-surface-divider: var(--geo-color-neutral-100);
+  --color-surface-header: var(--geo-color-surface-header);
   --color-border: var(--geo-color-neutral-300);
   --color-border-subtle: var(--geo-color-primary-border);
 
@@ -101,14 +165,23 @@
   --color-teal-dark: var(--geo-color-teal-dark);
   --color-teal-light: var(--geo-color-teal-light);
 
-  /* Spacing / radius shared — default corner radius 6px */
-  --geo-radius: 6px;
-  --geo-radius-sm: var(--geo-radius);
-  --geo-radius-md: var(--geo-radius);
-  --geo-radius-lg: var(--geo-radius);
+  /* ——— Radius scale (layout-aligned) ———
+   * Controls/buttons → --geo-radius (8px)
+   * Icon btns / chips → --geo-radius-md (10px)
+   * Cards / user chip → --geo-radius-lg (12px)
+   * Popovers → --geo-radius-xl (14px)
+   */
+  --geo-radius-xs: 4px;
+  --geo-radius-sm: 6px;
+  --geo-radius: 8px;
+  --geo-radius-md: 10px;
+  --geo-radius-lg: 12px;
+  --geo-radius-xl: 14px;
+  --geo-radius-2xl: 16px;
+  --geo-radius-full: 999px;
   --geo-control-height: 40px;
 
-  /* Typography — Inter + type scale */
+  /* ——— Typography — Inter + type scale ——— */
   --geo-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --geo-font-weight-regular: 400;
   --geo-font-weight-medium: 500;

package/src/lib/styles/scrollbar.scss

@@ -13,12 +13,12 @@
 
   &::-webkit-scrollbar-track {
     background: transparent;
-    border-radius: 999px;
+    border-radius: var(--geo-radius-full);
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--geo-color-neutral-400);
-    border-radius: 999px;
+    border-radius: var(--geo-radius-full);
     border: 2px solid transparent;
     background-clip: padding-box;
     min-height: 40px;

package/src/lib/styles/theme.scss

@@ -53,7 +53,7 @@
 .ant-input-focused,
 .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .ant-picker-focused {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--geo-color-primary-default) 16%, transparent) !important;
+  box-shadow: 0 0 0 2px var(--geo-color-primary-focus-ring) !important;
 }
 
 .ant-menu-light .ant-menu-item-selected,