npm - @geoit/ui - Versions diffs - 0.0.4 → 0.0.6 - Mend

@geoit/ui 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/ai/mockup.html ADDED Viewed

@@ -0,0 +1,1194 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>@geoit/ui — Component mockup (design tokens)</title>
+  <!-- Generated by tools/generate-mockup.js — do not edit ai/mockup.html by hand -->
+  <!-- 2026-09-03T03:52:29.799Z -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    /* —— GEO design tokens (injected from design-tokens.scss) —— */
+    :root {
+      /* ——— 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: #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: #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: #16a34a;
+      --geo-color-success-light: #dcfce7;
+      --geo-color-error-dark: #991b1b;
+      --geo-color-error-default: #dc2626;
+      --geo-color-error-light: #fee2e2;
+      --geo-color-warning-dark: #92400e;
+      --geo-color-warning-default: #d97706;
+      --geo-color-warning-light: #fef3c7;
+      --geo-color-info-dark: #1e40af;
+      --geo-color-info-default: #2563eb;
+      --geo-color-info-light: #dbeafe;
+      --geo-color-teal-dark: #0f766e;
+      --geo-color-teal-default: #0d9488;
+      --geo-color-teal-light: #ccfbf1;
+      /* ——— 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);
+      --color-primary-light: var(--geo-color-primary-light);
+      --color-primary-surface: var(--geo-color-primary-surface-light);
+      --color-primary-surface-hover: var(--geo-color-primary-background);
+      --color-primary-secondary-hover: var(--geo-color-primary-secondary-hover);
+      --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);
+      --color-ink-body: var(--geo-color-neutral-700);
+      --color-ink-muted: var(--geo-color-neutral-500);
+      --color-ink-subtle: var(--geo-color-neutral-400);
+      --color-disabled-text: var(--geo-color-neutral-disabled-text);
+      --color-surface-white: var(--geo-color-neutral-white);
+      --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);
+      --color-success: var(--geo-color-success-default);
+      --color-success-dark: var(--geo-color-success-dark);
+      --color-success-light: var(--geo-color-success-light);
+      --color-error: var(--geo-color-error-default);
+      --color-error-dark: var(--geo-color-error-dark);
+      --color-error-light: var(--geo-color-error-light);
+      --color-danger: var(--geo-color-error-default);
+      --color-danger-dark: var(--geo-color-error-dark);
+      --color-danger-light: var(--geo-color-error-light);
+      --color-warning: var(--geo-color-warning-default);
+      --color-warning-dark: var(--geo-color-warning-dark);
+      --color-warning-light: var(--geo-color-warning-light);
+      --color-info: var(--geo-color-info-default);
+      --color-info-dark: var(--geo-color-info-dark);
+      --color-info-light: var(--geo-color-info-light);
+      --color-teal: var(--geo-color-teal-default);
+      --color-teal-dark: var(--geo-color-teal-dark);
+      --color-teal-light: var(--geo-color-teal-light);
+      /* ——— 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 ——— */
+      --geo-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+      --geo-font-weight-regular: 400;
+      --geo-font-weight-medium: 500;
+      --geo-font-weight-semibold: 600;
+      --geo-font-weight-bold: 700;
+      --geo-font-size-h1: 28px;
+      --geo-line-height-h1: 36px;
+      --geo-font-size-h2: 24px;
+      --geo-line-height-h2: 32px;
+      --geo-font-size-h3: 20px;
+      --geo-line-height-h3: 28px;
+      --geo-font-size-h4: 16px;
+      --geo-line-height-h4: 24px;
+      --geo-font-size-subtitle: 14px;
+      --geo-line-height-subtitle: 20px;
+      --geo-font-size-body: 14px;
+      --geo-line-height-body: 20px;
+      --geo-font-size-body-small: 13px;
+      --geo-line-height-body-small: 18px;
+      --geo-font-size-caption: 12px;
+      --geo-line-height-caption: 16px;
+      --geo-font-size-overline: 11px;
+      --geo-line-height-overline: 16px;
+      --geo-font-size-tiny: 10px;
+      --geo-line-height-tiny: 14px;
+      /* Legacy size aliases */
+      --geo-font-size-sm: var(--geo-font-size-body-small);
+      --geo-font-size-md: var(--geo-font-size-body);
+      --geo-font-size-lg: var(--geo-font-size-h4);
+    }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      font-family: var(--geo-font-family);
+      font-size: var(--geo-font-size-body);
+      line-height: var(--geo-line-height-body);
+      color: var(--geo-color-neutral-900);
+      background:
+        radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--geo-color-primary-default) 10%, transparent), transparent 60%),
+        linear-gradient(180deg, var(--geo-color-primary-background) 0%, var(--geo-color-neutral-100) 28%, var(--geo-color-neutral-100) 100%);
+      min-height: 100vh;
+    }
+    /* —— Page chrome —— */
+    .page {
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      min-height: 100vh;
+    }
+    .nav {
+      position: sticky;
+      top: 0;
+      height: 100vh;
+      overflow: auto;
+      padding: 24px 16px;
+      background: color-mix(in srgb, var(--geo-color-neutral-white) 88%, transparent);
+      backdrop-filter: blur(10px);
+      border-right: 1px solid var(--geo-color-primary-border);
+    }
+    .nav__brand {
+      font-size: var(--geo-font-size-h4);
+      font-weight: var(--geo-font-weight-bold);
+      color: var(--geo-color-primary-default);
+      margin: 0 0 4px;
+    }
+    .nav__sub {
+      font-size: var(--geo-font-size-caption);
+      color: var(--geo-color-neutral-500);
+      margin: 0 0 20px;
+    }
+    .nav a {
+      display: block;
+      padding: 6px 10px;
+      border-radius: var(--geo-radius);
+      color: var(--geo-color-neutral-700);
+      text-decoration: none;
+      font-size: var(--geo-font-size-body-small);
+    }
+    .nav a:hover {
+      background: var(--geo-color-primary-surface-light);
+      color: var(--geo-color-primary-default);
+    }
+    .main { padding: 32px 40px 80px; max-width: 1100px; }
+    .hero { margin-bottom: 32px; }
+    .hero h1 {
+      margin: 0 0 8px;
+      font-size: var(--geo-font-size-h1);
+      line-height: var(--geo-line-height-h1);
+      font-weight: var(--geo-font-weight-bold);
+    }
+    .hero p {
+      margin: 0;
+      color: var(--geo-color-neutral-500);
+      max-width: 62ch;
+    }
+    .section {
+      margin-bottom: 40px;
+      scroll-margin-top: 24px;
+    }
+    .section__head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 16px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--geo-color-neutral-200);
+    }
+    .section__head h2 {
+      margin: 0;
+      font-size: var(--geo-font-size-h3);
+      line-height: var(--geo-line-height-h3);
+    }
+    .section__head code {
+      font-size: var(--geo-font-size-caption);
+      color: var(--geo-color-primary-default);
+      background: var(--geo-color-primary-surface-light);
+      padding: 2px 8px;
+      border-radius: 999px;
+    }
+    .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+    .stack { display: flex; flex-direction: column; gap: 12px; }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+    @media (max-width: 900px) {
+      .page { grid-template-columns: 1fr; }
+      .nav { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--geo-color-primary-border); }
+      .grid-2 { grid-template-columns: 1fr; }
+      .main { padding: 24px 16px 64px; }
+    }
+    .panel {
+      background: var(--geo-color-neutral-white);
+      border: 1px solid var(--geo-color-neutral-200);
+      border-radius: var(--geo-radius);
+      padding: 20px;
+    }
+    .note {
+      font-size: var(--geo-font-size-caption);
+      color: var(--geo-color-neutral-500);
+      margin-top: 10px;
+    }
+    /* —— Tokens swatches —— */
+    .swatches { display: flex; flex-wrap: wrap; gap: 10px; }
+    .swatch {
+      width: 88px;
+      border-radius: var(--geo-radius);
+      overflow: hidden;
+      border: 1px solid var(--geo-color-neutral-200);
+      background: var(--geo-color-neutral-white);
+    }
+    .swatch__chip { height: 40px; }
+    .swatch__meta { padding: 6px 8px; font-size: 10px; color: var(--geo-color-neutral-500); }
+    /* —— Typography —— */
+    .typo-h1 { font-size: var(--geo-font-size-h1); line-height: var(--geo-line-height-h1); font-weight: 700; margin: 0; }
+    .typo-h2 { font-size: var(--geo-font-size-h2); line-height: var(--geo-line-height-h2); font-weight: 700; margin: 0; }
+    .typo-h3 { font-size: var(--geo-font-size-h3); line-height: var(--geo-line-height-h3); font-weight: 700; margin: 0; }
+    .typo-h4 { font-size: var(--geo-font-size-h4); line-height: var(--geo-line-height-h4); font-weight: 700; margin: 0; }
+    .typo-body { font-size: var(--geo-font-size-body); line-height: var(--geo-line-height-body); margin: 0; }
+    .typo-caption { font-size: var(--geo-font-size-caption); line-height: var(--geo-line-height-caption); margin: 0; }
+    .typo-secondary { color: var(--geo-color-neutral-500); }
+    .typo-primary { color: var(--geo-color-primary-default); }
+    .typo-danger { color: var(--geo-color-error-default); }
+    .typo-success { color: var(--geo-color-success-dark); }
+    /* —— geo-page-title —— */
+    .geo-page-title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+    .geo-page-title--uppercase { text-transform: uppercase; letter-spacing: 0.02em; }
+    .geo-page-title__accent {
+      width: 56px; height: 4px; border-radius: 2px;
+      background: var(--geo-color-primary-default);
+    }
+    /* —— geo-breadcrumb —— */
+    .geo-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
+    .geo-breadcrumb a { color: var(--geo-color-neutral-500); text-decoration: none; }
+    .geo-breadcrumb a:hover { color: var(--geo-color-primary-default); }
+    .geo-breadcrumb__sep { color: var(--geo-color-neutral-300); }
+    .geo-breadcrumb__current { color: var(--geo-color-primary-default); font-weight: 500; }
+    /* —— geo-back-button —— */
+    .geo-back-button {
+      display: inline-flex; align-items: center; gap: 8px;
+      height: 32px; padding: 0 8px; border: none; background: transparent;
+      color: var(--geo-color-neutral-700); cursor: pointer; border-radius: var(--geo-radius);
+      font-family: inherit; font-size: 14px;
+    }
+    .geo-back-button:hover { background: var(--geo-color-neutral-100); color: var(--geo-color-primary-default); }
+    /* —— geo-button —— */
+    .geo-button {
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      height: var(--geo-control-height); min-height: var(--geo-control-height);
+      padding: 0 16px; border-radius: var(--geo-radius); border: 1px solid transparent;
+      font-size: var(--geo-font-size-body-small); font-weight: 500; font-family: inherit;
+      cursor: pointer; white-space: nowrap;
+      transition: background-color .15s, border-color .15s, color .15s;
+      --geo-btn-tone: var(--geo-color-primary-default);
+      --geo-btn-tone-dark: var(--geo-color-primary-hover);
+      --geo-btn-tone-surface: var(--geo-color-primary-surface-light);
+      --geo-btn-secondary-hover: var(--geo-color-primary-secondary-hover);
+    }
+    .geo-button--brand { --geo-btn-tone: var(--geo-color-primary-default); --geo-btn-tone-dark: var(--geo-color-primary-hover); --geo-btn-tone-surface: var(--geo-color-primary-surface-light); --geo-btn-secondary-hover: var(--geo-color-primary-secondary-hover); }
+    .geo-button--danger { --geo-btn-tone: var(--geo-color-error-default); --geo-btn-tone-dark: var(--geo-color-error-dark); --geo-btn-tone-surface: var(--geo-color-error-light); --geo-btn-secondary-hover: var(--geo-color-error-light); }
+    .geo-button--warning { --geo-btn-tone: var(--geo-color-warning-default); --geo-btn-tone-dark: var(--geo-color-warning-dark); --geo-btn-tone-surface: var(--geo-color-warning-light); --geo-btn-secondary-hover: var(--geo-color-warning-light); }
+    .geo-button--success { --geo-btn-tone: var(--geo-color-success-default); --geo-btn-tone-dark: var(--geo-color-success-dark); --geo-btn-tone-surface: var(--geo-color-success-light); --geo-btn-secondary-hover: var(--geo-color-success-light); }
+    .geo-button--primary { background: var(--geo-btn-tone); border-color: var(--geo-btn-tone); color: #fff; }
+    .geo-button--primary:hover { background: var(--geo-btn-tone-dark); border-color: var(--geo-btn-tone-dark); }
+    .geo-button--secondary { background: #fff; border-color: var(--geo-btn-tone); color: var(--geo-btn-tone); }
+    .geo-button--secondary:hover { background: var(--geo-btn-secondary-hover); }
+    .geo-button--tertiary { background: transparent; border-color: transparent; color: var(--geo-btn-tone); }
+    .geo-button--tertiary:hover { background: var(--geo-btn-tone-surface); }
+    .geo-button:disabled { background: var(--geo-color-neutral-300); border-color: var(--geo-color-neutral-300); color: var(--geo-color-neutral-disabled-text); cursor: not-allowed; }
+    .geo-button--icon-only { width: var(--geo-control-height); min-width: var(--geo-control-height); padding: 0; }
+    .geo-button__icon { width: 16px; height: 16px; display: inline-flex; }
+    /* —— Form field —— */
+    .geo-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+    .geo-field__label { display: inline-flex; gap: 4px; font-size: 14px; }
+    .geo-field__req { color: var(--geo-color-error-default); }
+    .geo-field__control {
+      display: flex; align-items: center; gap: 10px;
+      min-height: 40px; height: 40px; padding: 8px;
+      border: 1px solid var(--geo-color-neutral-300); border-radius: var(--geo-radius);
+      background: transparent; transition: border-color .15s, box-shadow .15s;
+    }
+    .geo-field__control:hover { border-color: var(--geo-color-primary-default); }
+    .geo-field__control:focus-within {
+      border-color: var(--geo-color-primary-default);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--geo-color-primary-default) 12%, transparent);
+    }
+    .geo-field__control--error { border-color: var(--geo-color-error-default) !important; }
+    .geo-field__control input,
+    .geo-field__control select,
+    .geo-field__control textarea {
+      flex: 1; border: none; outline: none; background: transparent;
+      font: inherit; color: inherit; width: 100%; min-width: 0;
+    }
+    .geo-field__control textarea { height: auto; min-height: 88px; resize: vertical; padding: 4px 0; }
+    .geo-field__control--textarea { height: auto; align-items: flex-start; }
+    .geo-field__error { font-size: 12px; color: var(--geo-color-error-default); }
+    .geo-field__hint { font-size: 12px; color: var(--geo-color-neutral-500); }
+    /* —— checkbox / radio —— */
+    .geo-check, .geo-radio {
+      display: inline-flex; align-items: center; gap: 8px;
+      font-size: 14px; cursor: pointer; user-select: none;
+    }
+    .geo-check input, .geo-radio input { accent-color: var(--geo-color-primary-default); width: 16px; height: 16px; }
+    .geo-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
+    .geo-radio-group--vertical { flex-direction: column; gap: 10px; }
+    .geo-radio-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      height: 32px; padding: 0 14px; border: 1px solid var(--geo-color-neutral-300);
+      border-radius: var(--geo-radius); cursor: pointer; font-size: 13px;
+    }
+    .geo-radio-btn:has(input:checked) {
+      border-color: var(--geo-color-primary-default);
+      color: var(--geo-color-primary-default);
+      background: var(--geo-color-primary-surface-light);
+    }
+    .geo-radio-btn input { position: absolute; opacity: 0; pointer-events: none; }
+    /* —— status tag —— */
+    .geo-status-tag {
+      display: inline-flex; align-items: center; gap: 6px;
+      min-height: 24px; padding: 4px 12px; border: 1px solid transparent;
+      border-radius: 999px; font-size: var(--geo-font-size-caption);
+      font-weight: 500; line-height: var(--geo-line-height-caption);
+    }
+    .geo-status-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+    .geo-status-tag--success { background: var(--geo-color-success-light); border-color: color-mix(in srgb, var(--geo-color-success-default) 45%, var(--geo-color-success-light)); color: var(--geo-color-success-dark); }
+    .geo-status-tag--error { background: var(--geo-color-error-light); border-color: color-mix(in srgb, var(--geo-color-error-default) 45%, var(--geo-color-error-light)); color: var(--geo-color-error-dark); }
+    .geo-status-tag--warning { background: var(--geo-color-warning-light); border-color: color-mix(in srgb, var(--geo-color-warning-default) 45%, var(--geo-color-warning-light)); color: var(--geo-color-warning-dark); }
+    .geo-status-tag--info { background: var(--geo-color-info-light); border-color: color-mix(in srgb, var(--geo-color-info-default) 45%, var(--geo-color-info-light)); color: var(--geo-color-info-dark); }
+    .geo-status-tag--primary { background: var(--geo-color-primary-surface-light); border-color: color-mix(in srgb, var(--geo-color-primary-default) 35%, var(--geo-color-primary-surface-light)); color: var(--geo-color-primary-default); }
+    .geo-status-tag--teal { background: var(--geo-color-teal-light); border-color: color-mix(in srgb, var(--geo-color-teal-default) 45%, var(--geo-color-teal-light)); color: var(--geo-color-teal-dark); }
+    .geo-status-tag--neutral { background: var(--geo-color-neutral-100); border-color: var(--geo-color-neutral-300); color: var(--geo-color-neutral-700); }
+    /* —— alert —— */
+    .geo-alert {
+      display: flex; align-items: flex-start; justify-content: space-between; gap: 9px;
+      width: 100%; padding: 16px; border: 1px solid transparent; border-radius: var(--geo-radius);
+    }
+    .geo-alert__main { display: flex; gap: 8px; flex: 1; min-width: 0; }
+    .geo-alert__icon { width: 24px; height: 24px; flex-shrink: 0; font-size: 18px; line-height: 24px; text-align: center; }
+    .geo-alert__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
+    .geo-alert__message { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; }
+    .geo-alert__close { border: none; background: transparent; cursor: pointer; width: 24px; height: 24px; color: inherit; opacity: .7; }
+    .geo-alert--success { background: var(--geo-color-success-light); border-color: var(--geo-color-success-default); color: var(--geo-color-success-dark); }
+    .geo-alert--error { background: var(--geo-color-error-light); border-color: var(--geo-color-error-default); color: var(--geo-color-error-dark); }
+    .geo-alert--warning { background: var(--geo-color-warning-light); border-color: var(--geo-color-warning-default); color: var(--geo-color-warning-dark); }
+    .geo-alert--info { background: var(--geo-color-info-light); border-color: var(--geo-color-info-default); color: var(--geo-color-info-dark); }
+    /* —— toast (notification mock) —— */
+    .geo-toast {
+      width: 360px; max-width: 100%;
+      background: #fff; border-radius: var(--geo-radius);
+      box-shadow: 0 6px 16px rgba(17,24,39,.12);
+      border: 1px solid var(--geo-color-neutral-200);
+      padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start;
+    }
+    .geo-toast__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
+    .geo-toast__title { font-weight: 600; margin: 0 0 2px; }
+    .geo-toast__msg { margin: 0; color: var(--geo-color-neutral-500); font-size: 13px; }
+    /* —— stepper —— */
+    .geo-stepper { display: flex; justify-content: center; width: 100%; }
+    .geo-stepper__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
+    .geo-stepper__item { display: flex; align-items: center; }
+    .geo-stepper__connector { width: 48px; height: 1px; margin: 0 16px; background: var(--geo-color-neutral-300); }
+    .geo-stepper__connector--done { background: var(--geo-color-success-default); }
+    .geo-stepper__btn {
+      display: inline-flex; align-items: center; gap: 10px;
+      border: none; background: transparent; cursor: default; font: inherit; padding: 0;
+    }
+    .geo-stepper__circle {
+      width: 32px; height: 32px; border-radius: 50%;
+      display: inline-flex; align-items: center; justify-content: center;
+      border: 1.5px solid var(--geo-color-neutral-300);
+      color: var(--geo-color-neutral-500); font-size: 13px; font-weight: 600;
+      background: #fff;
+    }
+    .geo-stepper__label { font-size: 14px; color: var(--geo-color-neutral-500); white-space: nowrap; }
+    .geo-stepper__item--active .geo-stepper__circle {
+      background: var(--geo-color-primary-default); border-color: var(--geo-color-primary-default); color: #fff;
+    }
+    .geo-stepper__item--active .geo-stepper__label { color: var(--geo-color-primary-default); font-weight: 600; }
+    .geo-stepper__item--done .geo-stepper__circle {
+      background: var(--geo-color-success-default); border-color: var(--geo-color-success-default); color: #fff;
+    }
+    .geo-stepper__item--done .geo-stepper__label { color: var(--geo-color-neutral-700); }
+    /* —— tabs —— */
+    .geo-tabs__nav {
+      display: flex; gap: 24px; border-bottom: 1px solid var(--geo-color-neutral-200);
+      margin-bottom: 16px;
+    }
+    .geo-tabs__tab {
+      position: relative; border: none; background: transparent; cursor: pointer;
+      padding: 10px 0; font: inherit; color: var(--geo-color-neutral-500);
+    }
+    .geo-tabs__tab--active { color: var(--geo-color-primary-default); font-weight: 600; }
+    .geo-tabs__tab--active::after {
+      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
+      background: var(--geo-color-primary-default); border-radius: 1px;
+    }
+    /* —— table —— */
+    .geo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+    .geo-table th, .geo-table td {
+      padding: 12px 16px; text-align: left;
+      border-bottom: 1px solid var(--geo-color-neutral-200);
+    }
+    .geo-table th {
+      background: var(--geo-color-neutral-100);
+      font-weight: 600; color: var(--geo-color-neutral-700);
+      font-size: 13px;
+    }
+    .geo-table tr:hover td { background: var(--geo-color-primary-background); }
+    .geo-table-toolbar {
+      display: flex; align-items: center; justify-content: space-between; gap: 12px;
+      margin-bottom: 12px; flex-wrap: wrap;
+    }
+    .geo-table-toolbar__count { color: var(--geo-color-neutral-500); font-size: 13px; }
+    .geo-pagination {
+      display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 16px;
+    }
+    .geo-pagination button {
+      min-width: 32px; height: 32px; border-radius: var(--geo-radius);
+      border: 1px solid var(--geo-color-neutral-300); background: #fff;
+      cursor: pointer; font: inherit;
+    }
+    .geo-pagination button.is-active {
+      border-color: var(--geo-color-primary-default);
+      color: var(--geo-color-primary-default); font-weight: 600;
+    }
+    /* —— slider —— */
+    .geo-slider { width: 100%; accent-color: var(--geo-color-primary-default); }
+    /* —— upload —— */
+    .geo-upload {
+      border: 1px dashed var(--geo-color-neutral-300);
+      border-radius: var(--geo-radius);
+      padding: 28px 16px; text-align: center;
+      background: var(--geo-color-primary-background);
+      color: var(--geo-color-neutral-700);
+    }
+    .geo-upload strong { color: var(--geo-color-primary-default); cursor: pointer; }
+    .geo-upload__hint { margin-top: 8px; font-size: 12px; color: var(--geo-color-neutral-500); }
+    .geo-file-picker {
+      display: flex; align-items: center; gap: 10px;
+      border: 1px solid var(--geo-color-neutral-300); border-radius: var(--geo-radius);
+      padding: 6px 8px; min-height: 40px;
+    }
+    .geo-file-picker__name { flex: 1; color: var(--geo-color-neutral-500); font-size: 13px; }
+    /* —— modal mock —— */
+    .modal-stage {
+      position: relative; min-height: 420px;
+      background: color-mix(in srgb, var(--geo-color-neutral-900) 35%, transparent);
+      border-radius: var(--geo-radius); padding: 24px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .geo-form-modal {
+      width: min(720px, 100%);
+      background: #fff; border-radius: var(--geo-radius);
+      box-shadow: 0 8px 24px rgba(17,24,39,.12); overflow: hidden;
+    }
+    .geo-form-modal__header {
+      position: relative; display: flex; align-items: center; justify-content: space-between;
+      gap: 16px; padding: 24px 24px 16px;
+    }
+    .geo-form-modal__header::after {
+      content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px;
+      background: var(--geo-color-primary-default);
+    }
+    .geo-form-modal__title {
+      margin: 0; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
+    }
+    .geo-form-modal__body { padding: 24px; display: grid; gap: 16px; }
+    .geo-form-modal__footer {
+      position: relative; display: flex; justify-content: flex-end; gap: 12px;
+      padding: 16px 24px 24px;
+    }
+    .geo-form-modal__footer::before {
+      content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
+      background: var(--geo-color-primary-default);
+    }
+    .geo-confirm {
+      width: min(445px, 100%); background: #fff; border-radius: var(--geo-radius);
+      box-shadow: 0 8px 24px rgba(17,24,39,.12); padding: 24px;
+    }
+    .geo-confirm h3 { margin: 0 0 8px; font-size: 16px; }
+    .geo-confirm p { margin: 0 0 8px; color: var(--geo-color-neutral-700); }
+    .geo-confirm__desc { color: var(--geo-color-neutral-500); font-size: 13px; margin-bottom: 20px !important; }
+    .geo-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; }
+    .geo-confirm mark {
+      background: var(--geo-color-primary-surface-light);
+      color: var(--geo-color-primary-default); padding: 0 4px; border-radius: 3px;
+    }
+    /* —— tree —— */
+    .geo-tree { list-style: none; margin: 0; padding: 0; }
+    .geo-tree ul { list-style: none; margin: 4px 0 0; padding-left: 20px; }
+    .geo-tree li { padding: 4px 0; }
+    .geo-tree label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
+    .geo-tree input { accent-color: var(--geo-color-primary-default); }
+    /* —— icon —— */
+    .geo-icon {
+      display: inline-flex; width: 1em; height: 1em; align-items: center; justify-content: center;
+      color: var(--geo-color-primary-default); font-style: normal;
+    }
+    .geo-icon--md { font-size: 20px; }
+    .geo-icon--lg { font-size: 28px; }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <aside class="nav">
+      <p class="nav__brand">@geoit/ui</p>
+      <p class="nav__sub">Static mockup · design tokens</p>
+      <a href="#tokens">Tokens</a>
+      <a href="#typography">Typography</a>
+      <a href="#navigation">Navigation</a>
+      <a href="#button">Button</a>
+      <a href="#forms">Forms</a>
+      <a href="#status">Status / Alert</a>
+      <a href="#toast">Toast</a>
+      <a href="#stepper">Stepper</a>
+      <a href="#tabs">Tabs</a>
+      <a href="#table">Table</a>
+      <a href="#upload">Upload</a>
+      <a href="#modal">Form modal</a>
+      <a href="#confirm">Confirm modal</a>
+      <a href="#tree">Tree</a>
+      <a href="#recipe">Recipe page</a>
+    </aside>
+    <main class="main">
+      <header class="hero">
+        <h1>GEO UI component mockup</h1>
+        <p>
+          HTML tĩnh mô phỏng visual của các <code>geo-*</code> trong <code>ai/components</code>,
+          dùng đúng CSS variables từ <code>design-tokens.scss</code>.
+          Tokens được inject tự động khi <code>npm run ai:docs</code> / <code>npm run build</code>.
+          <br /><span class="typo-caption typo-secondary">Generated 2026-09-03T03:52:29.799Z · source: projects/geo-ui/src/lib/styles/design-tokens.scss · 66 component docs in ai/components</span>
+        </p>
+      </header>
+      <!-- TOKENS -->
+      <section class="section" id="tokens">
+        <div class="section__head">
+          <h2>Design tokens</h2>
+          <code>design-tokens.scss</code>
+        </div>
+        <div class="panel">
+          <div class="swatches">
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-primary-default)"></div><div class="swatch__meta">primary default</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-primary-hover)"></div><div class="swatch__meta">primary hover</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-primary-surface-light)"></div><div class="swatch__meta">primary surface light</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-success-default)"></div><div class="swatch__meta">success default</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-error-default)"></div><div class="swatch__meta">error default</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-warning-default)"></div><div class="swatch__meta">warning default</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-info-default)"></div><div class="swatch__meta">info default</div></div>
+            <div class="swatch"><div class="swatch__chip" style="background:var(--geo-color-teal-default)"></div><div class="swatch__meta">teal default</div></div>
+          </div>
+          <p class="note">Radius mặc định <strong>8px</strong> · control height <strong>40px</strong> · font Inter</p>
+        </div>
+      </section>
+      <!-- TYPOGRAPHY -->
+      <section class="section" id="typography">
+        <div class="section__head">
+          <h2>geo-typography</h2>
+          <code>ai/components/geo-typography.md</code>
+        </div>
+        <div class="panel stack">
+          <p class="typo-h1">H1 — Tiêu đề lớn 28/36</p>
+          <p class="typo-h2">H2 — Tiêu đề 24/32</p>
+          <p class="typo-h3">H3 — Tiêu đề 20/28</p>
+          <p class="typo-h4">H4 — Tiêu đề 16/24</p>
+          <p class="typo-body">Body — Nội dung chính 14/20</p>
+          <p class="typo-body typo-secondary">Body secondary — mô tả phụ</p>
+          <p class="typo-caption typo-danger">Caption danger — trường bắt buộc</p>
+          <p class="typo-body typo-success">Success text</p>
+        </div>
+      </section>
+      <!-- NAVIGATION -->
+      <section class="section" id="navigation">
+        <div class="section__head">
+          <h2>Breadcrumb · Page title · Back</h2>
+          <code>geo-breadcrumb / geo-page-title / geo-back-button</code>
+        </div>
+        <div class="panel stack">
+          <button class="geo-back-button" type="button">← Quay lại</button>
+          <nav class="geo-breadcrumb" aria-label="Breadcrumb">
+            <a href="#">Trang chủ</a>
+            <span class="geo-breadcrumb__sep">/</span>
+            <a href="#">Tra cứu hồ sơ</a>
+            <span class="geo-breadcrumb__sep">/</span>
+            <span class="geo-breadcrumb__current">Xem chi tiết hồ sơ</span>
+          </nav>
+          <div class="geo-page-title geo-page-title--uppercase">
+            <div class="typo-h3">Thông tin chi tiết hồ sơ</div>
+            <span class="geo-page-title__accent"></span>
+          </div>
+        </div>
+      </section>
+      <!-- BUTTON -->
+      <section class="section" id="button">
+        <div class="section__head">
+          <h2>geo-button</h2>
+          <code>ai/components/geo-button.md</code>
+        </div>
+        <div class="panel stack">
+          <div class="row">
+            <button class="geo-button geo-button--primary geo-button--brand" type="button">Primary brand</button>
+            <button class="geo-button geo-button--secondary geo-button--brand" type="button">Secondary</button>
+            <button class="geo-button geo-button--tertiary geo-button--brand" type="button">Tertiary</button>
+            <button class="geo-button geo-button--primary geo-button--brand" type="button" disabled>Disabled</button>
+          </div>
+          <div class="row">
+            <button class="geo-button geo-button--primary geo-button--danger" type="button">Danger</button>
+            <button class="geo-button geo-button--primary geo-button--warning" type="button">Warning</button>
+            <button class="geo-button geo-button--primary geo-button--success" type="button">Success</button>
+            <button class="geo-button geo-button--primary geo-button--brand" type="button">
+              <span class="geo-button__icon">＋</span><span>Thêm mới</span>
+            </button>
+            <button class="geo-button geo-button--primary geo-button--brand" type="button">
+              <span>Tiếp theo</span><span class="geo-button__icon">→</span>
+            </button>
+            <button class="geo-button geo-button--secondary geo-button--brand geo-button--icon-only" type="button" title="Cài đặt">⚙</button>
+          </div>
+        </div>
+      </section>
+      <!-- FORMS -->
+      <section class="section" id="forms">
+        <div class="section__head">
+          <h2>Form controls</h2>
+          <code>geo-input · select · textarea · checkbox · radio · date · slider</code>
+        </div>
+        <div class="panel">
+          <div class="grid-2">
+            <label class="geo-field">
+              <span class="geo-field__label">Họ tên <span class="geo-field__req">*</span></span>
+              <span class="geo-field__control"><input placeholder="Nhập họ tên" value="Nguyễn Văn A" /></span>
+            </label>
+            <label class="geo-field">
+              <span class="geo-field__label">Từ khóa</span>
+              <span class="geo-field__control">
+                <span aria-hidden="true">⌕</span>
+                <input placeholder="Nhập từ khóa" />
+              </span>
+            </label>
+            <label class="geo-field">
+              <span class="geo-field__label">Trạng thái</span>
+              <span class="geo-field__control">
+                <select>
+                  <option>Chọn giá trị</option>
+                  <option selected>Đã duyệt</option>
+                  <option>Từ chối</option>
+                </select>
+              </span>
+            </label>
+            <label class="geo-field">
+              <span class="geo-field__label">Ngày cấp</span>
+              <span class="geo-field__control"><input type="date" value="2026-07-27" /></span>
+            </label>
+            <label class="geo-field" style="grid-column: 1 / -1">
+              <span class="geo-field__label">Ghi chú</span>
+              <span class="geo-field__control geo-field__control--textarea">
+                <textarea rows="3" placeholder="Nhập mô tả">Nội dung ghi chú mẫu.</textarea>
+              </span>
+            </label>
+            <label class="geo-field geo-field__control--error" style="grid-column: 1 / -1">
+              <span class="geo-field__label">Mã hồ sơ <span class="geo-field__req">*</span></span>
+              <span class="geo-field__control geo-field__control--error"><input value="" placeholder="Bắt buộc" /></span>
+              <span class="geo-field__error">Vui lòng nhập mã hồ sơ</span>
+            </label>
+          </div>
+          <div class="stack" style="margin-top:16px">
+            <label class="geo-check"><input type="checkbox" checked /> Tôi đồng ý điều khoản</label>
+            <div class="geo-radio-group">
+              <label class="geo-radio"><input type="radio" name="st" checked /> Hoạt động</label>
+              <label class="geo-radio"><input type="radio" name="st" /> Ngừng</label>
+            </div>
+            <div class="geo-radio-group">
+              <label class="geo-radio-btn"><input type="radio" name="kind" checked /> Cá nhân</label>
+              <label class="geo-radio-btn"><input type="radio" name="kind" /> Tổ chức</label>
+              <label class="geo-radio-btn"><input type="radio" name="kind" /> Khác</label>
+            </div>
+            <label class="geo-field">
+              <span class="geo-field__label">Mức độ hoàn thành — geo-slider</span>
+              <input class="geo-slider" type="range" min="0" max="100" value="65" />
+            </label>
+          </div>
+        </div>
+      </section>
+      <!-- STATUS / ALERT -->
+      <section class="section" id="status">
+        <div class="section__head">
+          <h2>geo-status-tag · geo-alert</h2>
+          <code>ai/components/geo-status-tag.md · geo-alert.md</code>
+        </div>
+        <div class="panel stack">
+          <div class="row">
+            <span class="geo-status-tag geo-status-tag--success"><span class="geo-status-tag__dot"></span>Đã duyệt</span>
+            <span class="geo-status-tag geo-status-tag--error"><span class="geo-status-tag__dot"></span>Từ chối</span>
+            <span class="geo-status-tag geo-status-tag--warning"><span class="geo-status-tag__dot"></span>Chờ xử lý</span>
+            <span class="geo-status-tag geo-status-tag--info"><span class="geo-status-tag__dot"></span>Đang xử lý</span>
+            <span class="geo-status-tag geo-status-tag--primary"><span class="geo-status-tag__dot"></span>Đang mượn</span>
+            <span class="geo-status-tag geo-status-tag--teal"><span class="geo-status-tag__dot"></span>Trả kết quả</span>
+            <span class="geo-status-tag geo-status-tag--neutral"><span class="geo-status-tag__dot"></span>Nháp</span>
+          </div>
+          <div class="geo-alert geo-alert--success">
+            <div class="geo-alert__main">
+              <span class="geo-alert__icon">✓</span>
+              <div>
+                <p class="geo-alert__title">Thành công!</p>
+                <p class="geo-alert__message">Đã lưu hồ sơ.</p>
+              </div>
+            </div>
+            <button class="geo-alert__close" type="button" aria-label="Đóng">×</button>
+          </div>
+          <div class="geo-alert geo-alert--warning">
+            <div class="geo-alert__main">
+              <span class="geo-alert__icon">!</span>
+              <div>
+                <p class="geo-alert__title">Cảnh báo!</p>
+                <p class="geo-alert__message">Dữ liệu chưa được lưu.</p>
+              </div>
+            </div>
+            <button class="geo-alert__close" type="button">×</button>
+          </div>
+          <div class="geo-alert geo-alert--error">
+            <div class="geo-alert__main">
+              <span class="geo-alert__icon">✕</span>
+              <div>
+                <p class="geo-alert__title">Lỗi!</p>
+                <p class="geo-alert__message">Không thể kết nối máy chủ.</p>
+              </div>
+            </div>
+            <button class="geo-alert__close" type="button">×</button>
+          </div>
+          <div class="geo-alert geo-alert--info">
+            <div class="geo-alert__main">
+              <span class="geo-alert__icon">i</span>
+              <div>
+                <p class="geo-alert__title">Thông tin!</p>
+                <p class="geo-alert__message">Vui lòng kiểm tra lại thông tin hồ sơ.</p>
+              </div>
+            </div>
+            <button class="geo-alert__close" type="button">×</button>
+          </div>
+        </div>
+      </section>
+      <!-- TOAST -->
+      <section class="section" id="toast">
+        <div class="section__head">
+          <h2>GeoToastService / geo-toast</h2>
+          <code>ai/components/geo-toast.md</code>
+        </div>
+        <div class="panel">
+          <div class="row" style="align-items:stretch">
+            <div class="geo-toast">
+              <span class="geo-toast__dot" style="background:var(--geo-color-success-default)"></span>
+              <div>
+                <p class="geo-toast__title">Thành công!</p>
+                <p class="geo-toast__msg">Đã lưu hồ sơ.</p>
+              </div>
+            </div>
+            <div class="geo-toast">
+              <span class="geo-toast__dot" style="background:var(--geo-color-error-default)"></span>
+              <div>
+                <p class="geo-toast__title">Thất bại!</p>
+                <p class="geo-toast__msg">Không thể lưu.</p>
+              </div>
+            </div>
+          </div>
+          <p class="note">Runtime: ưu tiên <code>this.toast.success(title, message)</code> — mock chỉ minh họa visual.</p>
+        </div>
+      </section>
+      <!-- STEPPER -->
+      <section class="section" id="stepper">
+        <div class="section__head">
+          <h2>geo-stepper</h2>
+          <code>ai/components/geo-stepper.md</code>
+        </div>
+        <div class="panel">
+          <div class="geo-stepper">
+            <ol class="geo-stepper__list">
+              <li class="geo-stepper__item geo-stepper__item--done">
+                <span class="geo-stepper__btn"><span class="geo-stepper__circle">✓</span><span class="geo-stepper__label">1. Thông tin</span></span>
+              </li>
+              <li class="geo-stepper__connector geo-stepper__connector--done" aria-hidden="true"></li>
+              <li class="geo-stepper__item geo-stepper__item--active">
+                <span class="geo-stepper__btn"><span class="geo-stepper__circle">2</span><span class="geo-stepper__label">2. Xác nhận</span></span>
+              </li>
+              <li class="geo-stepper__connector" aria-hidden="true"></li>
+              <li class="geo-stepper__item">
+                <span class="geo-stepper__btn"><span class="geo-stepper__circle">3</span><span class="geo-stepper__label">3. Hoàn tất</span></span>
+              </li>
+            </ol>
+          </div>
+          <p class="note">Active = primary · Completed = success + check · Connector 48px</p>
+        </div>
+      </section>
+      <!-- TABS -->
+      <section class="section" id="tabs">
+        <div class="section__head">
+          <h2>geo-tabs</h2>
+          <code>ai/components/geo-tabs.md</code>
+        </div>
+        <div class="panel">
+          <div class="geo-tabs__nav">
+            <button class="geo-tabs__tab geo-tabs__tab--active" type="button">Thông tin</button>
+            <button class="geo-tabs__tab" type="button">Tệp đính kèm</button>
+            <button class="geo-tabs__tab" type="button">Lịch sử</button>
+          </div>
+          <p class="typo-body typo-secondary">Nội dung tab “Thông tin” — ink bar primary.</p>
+        </div>
+      </section>
+      <!-- TABLE -->
+      <section class="section" id="table">
+        <div class="section__head">
+          <h2>geo-table + toolbar</h2>
+          <code>ai/components/geo-table.md</code>
+        </div>
+        <div class="panel">
+          <div class="geo-table-toolbar">
+            <span class="geo-table-toolbar__count">Kết quả tìm kiếm (128)</span>
+            <div class="row">
+              <button class="geo-button geo-button--secondary geo-button--danger" type="button">Xóa</button>
+              <button class="geo-button geo-button--secondary geo-button--brand" type="button">Xuất</button>
+              <button class="geo-button geo-button--primary geo-button--brand" type="button"><span class="geo-button__icon">＋</span>Thêm mới</button>
+            </div>
+          </div>
+          <div style="overflow:auto">
+            <table class="geo-table">
+              <thead>
+                <tr>
+                  <th style="width:48px"><input type="checkbox" /></th>
+                  <th style="width:64px">STT</th>
+                  <th>Mã</th>
+                  <th>Tên</th>
+                  <th>Trạng thái</th>
+                  <th style="width:96px">Thao tác</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><input type="checkbox" /></td>
+                  <td>1</td>
+                  <td>HS-001</td>
+                  <td>Hồ sơ khai thác khoáng sản</td>
+                  <td><span class="geo-status-tag geo-status-tag--success"><span class="geo-status-tag__dot"></span>Đã duyệt</span></td>
+                  <td>
+                    <button class="geo-button geo-button--tertiary geo-button--brand geo-button--icon-only" type="button">✎</button>
+                    <button class="geo-button geo-button--tertiary geo-button--danger geo-button--icon-only" type="button">🗑</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><input type="checkbox" checked /></td>
+                  <td>2</td>
+                  <td>HS-002</td>
+                  <td>Phiếu đăng ký mượn tài liệu</td>
+                  <td><span class="geo-status-tag geo-status-tag--info"><span class="geo-status-tag__dot"></span>Đang xử lý</span></td>
+                  <td>
+                    <button class="geo-button geo-button--tertiary geo-button--brand geo-button--icon-only" type="button">✎</button>
+                    <button class="geo-button geo-button--tertiary geo-button--danger geo-button--icon-only" type="button">🗑</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><input type="checkbox" /></td>
+                  <td>3</td>
+                  <td>HS-003</td>
+                  <td>Yêu cầu điều chỉnh thông tin</td>
+                  <td><span class="geo-status-tag geo-status-tag--warning"><span class="geo-status-tag__dot"></span>Chờ xử lý</span></td>
+                  <td>
+                    <button class="geo-button geo-button--tertiary geo-button--brand geo-button--icon-only" type="button">✎</button>
+                    <button class="geo-button geo-button--tertiary geo-button--danger geo-button--icon-only" type="button">🗑</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="geo-pagination">
+            <button type="button">‹</button>
+            <button class="is-active" type="button">1</button>
+            <button type="button">2</button>
+            <button type="button">3</button>
+            <button type="button">›</button>
+          </div>
+        </div>
+      </section>
+      <!-- UPLOAD -->
+      <section class="section" id="upload">
+        <div class="section__head">
+          <h2>geo-upload · geo-file-picker</h2>
+          <code>ai/components/geo-upload.md</code>
+        </div>
+        <div class="panel stack">
+          <div class="geo-upload">
+            Kéo thả ảnh hoặc <strong>Chọn file</strong> để tải lên
+            <div class="geo-upload__hint">PNG/JPG/SVG · tối đa 1MB</div>
+          </div>
+          <div class="geo-file-picker">
+            <button class="geo-button geo-button--secondary geo-button--brand" type="button">Chọn file</button>
+            <span class="geo-file-picker__name">ho-so.pdf</span>
+          </div>
+        </div>
+      </section>
+      <!-- FORM MODAL -->
+      <section class="section" id="modal">
+        <div class="section__head">
+          <h2>geo-form-modal (+ stepper)</h2>
+          <code>ai/components/geo-form-modal.md</code>
+        </div>
+        <div class="modal-stage">
+          <div class="geo-form-modal" role="dialog" aria-labelledby="modal-title">
+            <div class="geo-form-modal__header">
+              <h3 class="geo-form-modal__title" id="modal-title">Thêm mới danh mục</h3>
+              <button class="geo-button geo-button--tertiary geo-button--brand geo-button--icon-only" type="button" aria-label="Đóng">×</button>
+            </div>
+            <div class="geo-form-modal__body">
+              <div class="geo-stepper">
+                <ol class="geo-stepper__list">
+                  <li class="geo-stepper__item geo-stepper__item--active">
+                    <span class="geo-stepper__btn"><span class="geo-stepper__circle">1</span><span class="geo-stepper__label">1. Thông tin</span></span>
+                  </li>
+                  <li class="geo-stepper__connector"></li>
+                  <li class="geo-stepper__item">
+                    <span class="geo-stepper__btn"><span class="geo-stepper__circle">2</span><span class="geo-stepper__label">2. Xác nhận</span></span>
+                  </li>
+                </ol>
+              </div>
+              <div class="grid-2">
+                <label class="geo-field">
+                  <span class="geo-field__label">Mã <span class="geo-field__req">*</span></span>
+                  <span class="geo-field__control"><input value="DM-01" /></span>
+                </label>
+                <label class="geo-field">
+                  <span class="geo-field__label">Tên <span class="geo-field__req">*</span></span>
+                  <span class="geo-field__control"><input value="Danh mục mẫu" /></span>
+                </label>
+              </div>
+            </div>
+            <div class="geo-form-modal__footer">
+              <button class="geo-button geo-button--secondary geo-button--brand" type="button">Hủy bỏ</button>
+              <button class="geo-button geo-button--primary geo-button--brand" type="button">Tiếp theo →</button>
+            </div>
+          </div>
+        </div>
+        <p class="note">Header/footer divider primary inset 24px — khớp geo-form-modal SCSS.</p>
+      </section>
+      <!-- CONFIRM -->
+      <section class="section" id="confirm">
+        <div class="section__head">
+          <h2>geo-confirm-modal</h2>
+          <code>ai/components/geo-confirm-modal.md</code>
+        </div>
+        <div class="modal-stage" style="min-height:280px">
+          <div class="geo-confirm" role="alertdialog">
+            <h3>Xác nhận xoá</h3>
+            <p>Bạn sắp xoá hồ sơ <mark>HS-2024-001</mark></p>
+            <p class="geo-confirm__desc">Hành động không thể hoàn tác, bạn chắc chắn muốn thực hiện?</p>
+            <div class="geo-confirm__actions">
+              <button class="geo-button geo-button--secondary geo-button--brand" type="button">Hủy</button>
+              <button class="geo-button geo-button--primary geo-button--danger" type="button">Xóa</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- TREE -->
+      <section class="section" id="tree">
+        <div class="section__head">
+          <h2>geo-tree</h2>
+          <code>ai/components/geo-tree.md</code>
+        </div>
+        <div class="panel">
+          <ul class="geo-tree">
+            <li>
+              <label><input type="checkbox" checked /> Sở Tài nguyên</label>
+              <ul>
+                <li><label><input type="checkbox" checked /> Phòng Khoáng sản</label></li>
+                <li><label><input type="checkbox" /> Phòng Địa chất</label></li>
+              </ul>
+            </li>
+            <li>
+              <label><input type="checkbox" /> Chi cục Kiểm soát</label>
+              <ul>
+                <li><label><input type="checkbox" /> Tổ thanh tra</label></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </section>
+      <!-- RECIPE COMPOSITION -->
+      <section class="section" id="recipe">
+        <div class="section__head">
+          <h2>Recipe — list page composition</h2>
+          <code>ai/recipes.md</code>
+        </div>
+        <div class="panel stack">
+          <nav class="geo-breadcrumb">
+            <a href="#">Trang chủ</a>
+            <span class="geo-breadcrumb__sep">/</span>
+            <span class="geo-breadcrumb__current">Danh sách hồ sơ</span>
+          </nav>
+          <div class="geo-page-title geo-page-title--uppercase">
+            <div class="typo-h3">Danh sách hồ sơ</div>
+            <span class="geo-page-title__accent"></span>
+          </div>
+          <div class="geo-alert geo-alert--info">
+            <div class="geo-alert__main">
+              <span class="geo-alert__icon">i</span>
+              <div>
+                <p class="geo-alert__title">Thông tin!</p>
+                <p class="geo-alert__message">Dùng geo-table-filter + toolbar + table theo recipes.</p>
+              </div>
+            </div>
+          </div>
+          <div class="geo-table-toolbar">
+            <span class="geo-table-toolbar__count">Kết quả tìm kiếm (3)</span>
+            <button class="geo-button geo-button--primary geo-button--brand" type="button">＋ Thêm mới</button>
+          </div>
+          <table class="geo-table">
+            <thead><tr><th>Mã</th><th>Tên</th><th>Trạng thái</th></tr></thead>
+            <tbody>
+              <tr><td>HS-001</td><td>Hồ sơ A</td><td><span class="geo-status-tag geo-status-tag--success"><span class="geo-status-tag__dot"></span>Đã duyệt</span></td></tr>
+              <tr><td>HS-002</td><td>Hồ sơ B</td><td><span class="geo-status-tag geo-status-tag--primary"><span class="geo-status-tag__dot"></span>Đang mượn</span></td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </div>
+</body>
+</html>