create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/styles/base.css

@@ -0,0 +1,171 @@
+/*
+ * Global base — SF-1 story VU-53 (hand-off §2 + §3, hướng B Linear-referenced dark).
+ * Kiến trúc: SHELL là nơi import LÀM CHỦ global base (SF-2 wire vào shell entry);
+ * remote trong shell KHÔNG import base — chỉ tokens + scoped classes của mình.
+ * Standalone remote (:4001/:4002) tự import tokens+base để debug đứng mình.
+ * GIỮ FILE NÀY GIỐNG HỆT mọi bản copy (standalone-copy contract).
+ *
+ * `@layer reset,base`: specificity thấp có chủ đích — CSS surface (SF-2/3/4,
+ * unlayered) luôn thắng base mà không cần !important.
+ */
+@layer reset, base;
+
+@layer reset {
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+  }
+}
+
+@layer base {
+  :root {
+    /* Native controls (select dropdown, scrollbar) — light default (decision
+     * antd-look 2026-10-17); dark qua data-bp-theme (color-scheme: dark override
+     * trong themes/dark.css, cùng block token). */
+    color-scheme: light;
+  }
+
+  body {
+    background: var(--c-canvas);
+    color: var(--ink);
+    font-family: var(--f);
+    font-size: var(--fs-body);
+    line-height: 1.5;
+  }
+
+  /* Form controls: nền s3, viền line, radius r-1 — focus ring accent-hi (hand-off §2) */
+  input,
+  select,
+  textarea {
+    background: var(--c-s3);
+    border: 1px solid var(--line);
+    border-radius: var(--r-1);
+    color: var(--ink);
+    font: inherit;
+    font-size: var(--fs-body);
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  button:focus-visible,
+  a:focus-visible {
+    outline: 2px solid var(--accent-hi);
+    outline-offset: 1px;
+  }
+
+  button {
+    border-radius: var(--r-2);
+    cursor: pointer;
+    font: inherit;
+  }
+
+  /*
+   * Scrollbar — mảnh 8px, pill, token-driven (user báo thumb default #5b5b5b
+   * clash thiết kế 2026-10-18). Thumb = --line2 (nổi đủ trên canvas light lẫn
+   * dark — dark.css override --line2/#2b2d33, hover --ink3 sáng dần) — KHÔNG hex.
+   * ⚠️ macOS overlay: khi hệ điều hành đang dùng overlay scrollbar (default),
+   * khai báo scrollbar-width/scrollbar-color sẽ ĐỔI sang thin persistent —
+   * đây là hành vi chấp nhận có chủ đích (nhất quán cross-app, không tự ẩn);
+   * rule chỉ vẽ track/thumb khi browser render classic/forced scrollbar.
+   */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--line2) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--line2);
+    border-radius: var(--r-pill);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--ink3);
+  }
+
+  /* Skip link: ẩn khỏi mắt thường, hiện khi focus qua bàn phím (a11y baseline) */
+  .skip-link {
+    left: -9999px;
+    padding: var(--sp-2) var(--sp-4);
+    position: absolute;
+    top: 0;
+    z-index: 100;
+  }
+  .skip-link:focus {
+    background: var(--accent);
+    color: #fff;
+    left: 0;
+  }
+
+  /* Responsive nền móng (hand-off §2): nav wrap hẹp; list 1 cột + stats grid
+   * co giãn theo §4 (auto-fit minmax) — không cần rule riêng ở đây. ≥1024px
+   * layout đầy đủ do từng surface (SF-2/3/4) tự set theo §4. */
+  @media (max-width: 768px) {
+    nav {
+      flex-wrap: wrap;
+      row-gap: var(--sp-2);
+    }
+  }
+
+  /*
+   * ── Primitives còn lại (hand-off §3) — đang migrate dần sang Tailwind v4
+   * Badge đã sang utilities (2026-10-17); các primitive khác migrate theo phase
+   * trong spec tailwind-migration. Consumer import @wakii/ui-kit/styles/tailwind.css.
+   */
+
+  /* EmptyState — KHÔNG icon; title + mô tả + optional action */
+  .bp-empty {
+    color: var(--ink3);
+    padding: var(--sp-6) var(--sp-4);
+    text-align: center;
+  }
+  .bp-empty__title {
+    color: var(--ink);
+    font-size: var(--fs-h2);
+    margin: 0 0 var(--sp-2);
+  }
+  .bp-empty__description {
+    color: var(--ink2);
+    margin: 0 0 var(--sp-4);
+  }
+  .bp-empty__action {
+    margin-top: var(--sp-2);
+  }
+
+  /* Skeleton — khối nền --line pulse (shimmer opacity .5→1); wrapper aria-busy */
+  .bp-skeleton {
+    background: var(--line);
+    border-radius: var(--r-1);
+    animation: bp-shimmer 1.2s ease-in-out infinite;
+  }
+  .bp-skeleton--text {
+    height: 14px;
+    width: 100%;
+  }
+  .bp-skeleton--row {
+    border-radius: var(--r-2);
+    height: 44px;
+    width: 100%;
+  }
+  .bp-skeleton--card {
+    border-radius: var(--r-3);
+    height: 96px;
+    width: 100%;
+  }
+  @keyframes bp-shimmer {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

package/stack-template/app/ui-kit/src/styles/dark-theme.test.ts

@@ -0,0 +1,21 @@
+// Regression F1 (2026-10-18): data-bp-theme="dark" đặt trên <html> phải thắng tie
+// specificity với `:root` (tokens.css đứng sau @import dark.css → cùng 0,1,0, light
+// thắng theo source order) → dark.css cần nhánh `html[data-bp-theme='dark']`
+// (0,1,1). Đồng thời nhánh generic `[data-bp-theme='dark']` (wrapper node/body —
+// docs rule 2 "node bao", kit stories dùng div wrapper) KHÔNG được mất.
+// jsdom không áp CSS file → test assert source selector, không assert computed style.
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+// vitest chạy với cwd = package root; jsdom env đổi scheme import.meta.url nên dùng path tương đối
+const css = readFileSync('src/styles/themes/dark.css', 'utf8');
+
+describe('dark.css — html path specificity (F1 regression)', () => {
+  it('có nhánh html[data-bp-theme] (0,1,1) thắng :root tie — html path hoạt động', () => {
+    expect(css).toContain("html[data-bp-theme='dark']");
+  });
+
+  it('giữ nhánh generic [data-bp-theme] cho wrapper node/body (docs rule 2 "node bao")', () => {
+    expect(css).toMatch(/^\[data-bp-theme='dark'\]/m);
+  });
+});

package/stack-template/app/ui-kit/src/styles/tailwind.css

@@ -0,0 +1,220 @@
+/* Tailwind v4 entry của ui-kit — APPS import file này (KHÔNG tự @import "tailwindcss"
+ * lần 2). CSS-first config: khối @theme dưới đây CHÍNH là tailwind config (v4 không
+ * dùng tailwind.config.js).
+ *
+ * Import tách từng layer (theme + utilities) — CỐ Ý KHÔNG import preflight: base.css
+ * giữ reset/global riêng, tránh double-reset làm shift visual hàng loạt (spec
+ * tailwind-migration quyết định #4).
+ *
+ * tokens.css giữ làm NGUỒN DUY NHẤT: @theme inline map thẳng var() — utilities
+ * (bg-accent, text-ink2…) refer runtime vars → accent-override/data-bp-theme hoạt
+ * động không cần build lại.
+ */
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+@source './';
+
+@theme inline {
+  /* Font — antd system stack (tokens.css --f/--m) */
+  --font-sans: var(--f);
+  --font-mono: var(--m);
+
+  /* Spacing base 4px — 1 đơn vị utility = 4px (gap-1.5 = 6px, p-4 = 16px khớp --sp-*) */
+  --spacing: 4px;
+
+  /* Surface */
+  --color-canvas: var(--c-canvas);
+  --color-s1: var(--c-s1);
+  --color-s2: var(--c-s2);
+  --color-s3: var(--c-s3);
+  /* Mực */
+  --color-ink: var(--ink);
+  --color-ink2: var(--ink2);
+  --color-ink3: var(--ink3);
+  --color-ink4: var(--ink4);
+  /* Viền + accent */
+  --color-line: var(--line);
+  --color-line2: var(--line2);
+  --color-accent: var(--accent);
+  --color-accent-hi: var(--accent-hi);
+  /* Scrim — phủ đen trên media/backdrop (theme-independent, xem tokens.css) */
+  --color-scrim-1: var(--scrim-1);
+  --color-scrim-2: var(--scrim-2);
+  --color-scrim-3: var(--scrim-3);
+  --color-scrim-4: var(--scrim-4);
+  /* Trạng thái task */
+  --color-st-todo: var(--st-todo);
+  --color-st-doing: var(--st-doing);
+  --color-st-done: var(--st-done);
+  --color-st-fail: var(--st-fail);
+  /* Type scale */
+  --text-meta: var(--fs-meta);
+  --text-label: var(--fs-label);
+  --text-body: var(--fs-body);
+  --text-h3: var(--fs-h3);
+  --text-h2: var(--fs-h2);
+  --text-h1: var(--fs-h1);
+  /* Shadow layered */
+  --shadow-pop: var(--shadow-pop);
+  --shadow-lift: var(--shadow-lift);
+  /* Radius */
+  --radius-1: var(--r-1);
+  --radius-2: var(--r-2);
+  --radius-3: var(--r-3);
+  --radius-pill: var(--r-pill);
+  /* Micro-interaction: hover lift -1px + shadow grow; press scale 0.97 */
+  --animate-press: bp-press var(--motion-instant) var(--ease-toggle);
+}
+
+@keyframes bp-press {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.97); }
+  100% { transform: scale(1); }
+}
+
+/* ── Motion keyframes dùng chung (motion identity — docs/motion.md) ─────────
+ * NGUYÊN TẮC: chỉ animate transform/opacity (GPU 60fps); KHÔNG width/height/top/left.
+ * prefers-reduced-motion: mọi animation/transition rơi về tức thì. */
+@keyframes bp-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes bp-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes bp-zoom-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes bp-zoom-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.96); }
+}
+@keyframes bp-slide-in-right {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes bp-slide-out-right {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(24px); }
+}
+@keyframes bp-slide-up-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes bp-dots {
+  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+@keyframes bp-bars {
+  0%, 100% { transform: scaleY(0.4); }
+  50% { transform: scaleY(1); }
+}
+@keyframes bp-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+@keyframes bp-pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@keyframes bp-shake {
+  10%, 90% { transform: translateX(-1px); }
+  20%, 80% { transform: translateX(2px); }
+  30%, 50%, 70% { transform: translateX(-4px); }
+  40%, 60% { transform: translateX(4px); }
+}
+@keyframes bp-bounce-in {
+  0% { opacity: 0; transform: scale(0.6); }
+  60% { opacity: 1; transform: scale(1.05); }
+  80% { transform: scale(0.97); }
+  100% { opacity: 1; transform: scale(1); }
+}
+@keyframes bp-slide-in-left {
+  from { opacity: 0; transform: translateX(-24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes bp-slide-in-right {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes bp-glow {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
+  50% { box-shadow: 0 0 16px 4px color-mix(in srgb, var(--accent) 55%, transparent); }
+}
+@keyframes bp-ripple {
+  from { transform: scale(0); opacity: 0.35; }
+  to { transform: scale(2.75); opacity: 0; }
+}
+@keyframes bp-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+/* check-draw: path set pathLength=1 + stroke-dasharray:1 → offset 1→0 vẽ đúng mọi độ dài */
+@keyframes bp-check-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+@keyframes bp-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(400%); }
+}
+@keyframes bp-flip {
+  from { transform: perspective(800px) rotateY(70deg); opacity: 0; }
+  to { transform: perspective(800px) rotateY(0); opacity: 1; }
+}
+@keyframes bp-odometer {
+  0% { transform: translateY(0.7em); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+/* Transition family mở rộng (depth contract 2026-10-19 — exit = reverse của enter,
+ * không đúc keyframe out). Ngoại lệ duy nhất về "chỉ transform/opacity": bp-blur-in
+ * animate filter (blur) — bản chất của loại Blur, vẫn GPU-composited. */
+@keyframes bp-slide-in-down {
+  from { opacity: 0; transform: translateY(-16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes bp-grow-in {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes bp-rotate-in {
+  from { opacity: 0; transform: rotate(-90deg) scale(0.96); }
+  to { opacity: 1; transform: rotate(0deg) scale(1); }
+}
+@keyframes bp-blur-in {
+  from { opacity: 0; filter: blur(8px); }
+  to { opacity: 1; filter: blur(0); }
+}
+@keyframes bp-soft-in {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@theme inline {
+  --animate-fade-in: bp-fade-in var(--motion-base) var(--ease-enter);
+  --animate-fade-out: bp-fade-out var(--motion-fast) var(--ease-exit);
+  --animate-zoom-in: bp-zoom-in var(--motion-base) var(--ease-enter);
+  --animate-zoom-out: bp-zoom-out var(--motion-fast) var(--ease-exit);
+  --animate-slide-in-right: bp-slide-in-right var(--motion-base) var(--ease-enter);
+  --animate-slide-out-right: bp-slide-out-right var(--motion-fast) var(--ease-exit);
+  --animate-slide-up-in: bp-slide-up-in var(--motion-base) var(--ease-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Skeleton shimmer wave (gradient translate — KHÔNG pulse opacity) */
+@keyframes bp-shimmer {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}

package/stack-template/app/ui-kit/src/styles/themes/dark.css

@@ -0,0 +1,71 @@
+/* Dark theme — GIÁ TRỊ = direction B "Linear-referenced dark" cũ của VU-53 (archive
+ * thành theme phụ sau decision antd-look 2026-10-17). Bật: đặt data-bp-theme="dark"
+ * trên <html>/<body> scope (switching do UiKitProvider — phase theming).
+ * Chỉ override giá trị — var names KHÔNG đổi.
+ * Selector 2 NHÁNH (regression F1 2026-10-18 — html path no-op):
+ *  - `[data-bp-theme='dark']` generic (0,1,0): wrapper node/body — docs rule 2 "node bao".
+ *  - `html[data-bp-theme='dark']` (0,1,1): đặt trên <html> phải THẮNG tie specificity với
+ *    `:root` (0,1,0, tokens.css đứng sau @import) — không có nhánh này html path là no-op.
+ *  (Nhánh :root[data-bp-theme] thừa — chỉ html mới là :root, đã cover bởi html[...].) */
+[data-bp-theme='dark'],
+html[data-bp-theme='dark'] {
+  /* Native controls (select dropdown, scrollbar) theo theme — color-scheme là
+   * inherited: đặt ở đây (2026-10-23 dời từ base.css :root, light là default). */
+  color-scheme: dark;
+  /* Bậc bề mặt (depth bằng surface, KHÔNG box-shadow) */
+  --c-canvas: #010102;
+  --c-s1: #0f1011;
+  --c-s2: #141516;
+  --c-s3: #18191a;
+  /* Mực */
+  --ink: #f7f8f8;
+  --ink2: #d0d6e0;
+  --ink3: #8a8f98;
+  /* Ink navy của hero Cinematic (REF-SPEC: light mode = navy trên nền sáng) —
+   * dark mode phải LIGHT để đọc được trên canvas đen (fix "text chìm" PO 2026-10-18).
+   * Starfield canvas của hero đọc token này runtime → sao cũng sáng theo. */
+  --navy-ink: #f7f8f8;
+  /* Tooltip surface — sáng hơn canvas để bubble tách nền (antd dark colorBgSpotlight) */
+  --tooltip-bg: #424242;
+  /* Viền */
+  --line: #23252a;
+  --line2: #2b2d33;
+  /* Accent — Florentine indigo */
+  --accent: #5e6ad2;
+  --accent-hi: #828fff;
+  /* Trạng thái task */
+  --st-todo: #8a8f98;
+  --st-doing: #f2c94c;
+  --st-done: #3fb950;
+  --st-fail: #f06a6a;
+  /* Disabled + placeholder — mirror antd dark colorTextQuaternary: #5c626b cùng họ
+   * --ink3 #8a8f98, sáng hơn 1 bậc (placeholder đọc được nhưng lùi sau) */
+  --ink4: #5c626b;
+  /* Disabled surface — đồng tỉ lệ 4% trắng như light (antd colorBgContainerDisabled) */
+  --bg-disabled: rgba(255, 255, 255, 0.04);
+  /* Alert tints — alpha tint màu trạng thái trên nền tối (tỉ lệ antd dark-alert:
+   * bg ~12% / border ~37%); base = --st-fail / --st-doing / --accent / --st-done
+   * của dark (đồng bộ 100% với màu trạng thái) */
+  --alert-error-bg: rgba(240, 106, 106, 0.12);
+  --alert-error-border: rgba(240, 106, 106, 0.37);
+  --alert-warning-bg: rgba(242, 201, 76, 0.12);
+  --alert-warning-border: rgba(242, 201, 76, 0.37);
+  --alert-info-bg: rgba(94, 106, 210, 0.12);
+  --alert-info-border: rgba(94, 106, 210, 0.37);
+  --alert-success-bg: rgba(63, 185, 80, 0.12);
+  --alert-success-border: rgba(63, 185, 80, 0.37);
+  /* Shadow — dark = heavier black (alpha ×1.6 so bản dark cũ — tách nổi trên canvas tối) */
+  --shadow-pop: 0 4px 6px -2px rgba(0, 0, 0, 0.32), 0 12px 16px -4px rgba(0, 0, 0, 0.48), 0 24px 48px -12px rgba(0, 0, 0, 0.64);
+  --shadow-lift: 0 4px 12px -2px rgba(0, 0, 0, 0.48), 0 2px 4px -2px rgba(0, 0, 0, 0.32);
+  /* Mask scrim — dark đậm hơn (đồng bộ shadow heavy) */
+  --mask: rgba(0, 0, 0, 0.6);
+
+  /* D1 dark — elevation đảo chiều: highlight thành tối-giả-độ-sáng, shadow đậm hơn
+   * (fix 2026-10-19 worker D: 4 dòng dưới nằm NGOÀI block sau `}` kể từ 95ab014 —
+   * orphan declarations làm bundler ghép sai, nuốt mất :root light → cả kit mất
+   * token nền/font. Dời vào trong block, không đổi giá trị.) */
+  --ele-1: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
+  --ele-2: 0 2px 6px -1px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
+  --ele-3: 0 6px 16px -4px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
+  --wash: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%);
+}

package/stack-template/app/ui-kit/src/styles/tokens.css

@@ -0,0 +1,133 @@
+/*
+ * Design tokens — LIGHT DEFAULT theo visual language **antd** (decision 2026-10-17:
+ * docs/superpowers/specs/2026-10-17-antd-look-tokens.md — supersede direction B làm
+ * theme phụ, xem themes/dark.css). Source of truth duy nhất: Tailwind v4 @theme inline
+ * (styles/tailwind.css) map thẳng các var này; components KHÔNG hardcode màu.
+ * Idempotent theo thiết kế: import nhiều lần cùng giá trị vô hại.
+ * KHÔNG tự chế token mới (thiếu = flag coordinator, không thêm ỳ).
+ */
+/* Dark theme — @import BẮT BUỘC đầu file (spec CSS: @import sau rule bị drop —
+ * bug dark không ăn 2026-10-17). Chỉ override dưới [data-bp-theme="dark"]. */
+@import "./themes/dark.css";
+
+:root {
+  /* Bậc bề mặt (antd: layout gray + container white; depth bằng bậc, không shadow mặc định) */
+  --c-canvas: #f5f5f5; /* colorBgLayout — nền ngoài cùng */
+  --c-s1: #ffffff; /* khối lớn (nav, sidebar) — colorBgContainer */
+  --c-s2: #ffffff; /* card / panel — colorBgContainer */
+  --c-s3: #fafafa; /* row, input, hover surface — colorFillQuaternary-ish */
+  /* Mực (text) — antd colorText 4 mức */
+  --ink: rgba(0, 0, 0, 0.88); /* chính */
+  --ink2: rgba(0, 0, 0, 0.65); /* phụ (desc) */
+  --ink3: rgba(0, 0, 0, 0.45); /* meta (uuid, time) — chỉ meta phụ ≥12px */
+  --ink4: rgba(0, 0, 0, 0.25); /* disabled text + placeholder — antd colorTextQuaternary */
+  --bg-disabled: rgba(0, 0, 0, 0.04); /* antd colorBgContainerDisabled */
+  /* Viền — antd colorBorder / colorBorderSecondary */
+  --line: #e2e5ea; /* 1px mặc định — cool-tint hairline */
+  --line2: #eef0f3; /* split/hover nền */
+  /* Accent duy nhất — antd colorPrimary + hover */
+  --accent: #1677ff;
+  --accent-hi: #4096ff;
+  /* Trạng thái task — map antd palette */
+  --st-todo: #bfbfbf; /* Cần làm (gray quartz) */
+  --st-doing: #faad14; /* Đang làm (gold-6 / warning) */
+  --st-done: #52c41a; /* Xong (green-6 / success) */
+  --st-fail: #ff4d4f; /* Gán thất bại + error (red-5) */
+  /* Motion scale (identity "mượt mà" — CHỈ animate transform/opacity; exit nhanh hơn enter ~30%)
+   Nguồn: strategy motion 2026-10-17. Motion identity — xem docs/motion.md. */
+  --motion-instant: 90ms;
+  --motion-fast: 160ms;
+  --motion-base: 240ms;
+  --motion-slow: 360ms;
+  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate — element vào */
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* accelerate — element ra */
+  --ease-toggle: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring nhẹ — toggle/press */
+  /* Shadow layered (floating surfaces: modal/drawer/popover/dropdown) */
+  --shadow-pop: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.06), 0 24px 48px -12px rgba(0, 0, 0, 0.08);
+  /* Hover lift */
+  --shadow-lift: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+
+
+  /* Depth contract (PO duyệt 2+3 hợp thể): easing mềm cao cấp cho mọi state-change */
+  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
+  --motion-smooth: 240ms;
+
+  /* D1 — Elevation system (Design Depth Wave 19-10): shadow 3 tầng cho mọi surface
+     + inset highlight viền trên. Component dùng var(--ele-1|2|3) theo trạng thái
+     rest/hover/active; overlay giữ --shadow-pop. */
+  --ele-1: 0 1px 2px rgba(16, 24, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  --ele-2: 0 2px 6px -1px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  --ele-3: 0 6px 16px -4px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  /* D2 — Surface wash + tint trạng thái (kết hợp utilities: bg-s1/s2 sẵn) */
+  --wash: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%);
+
+  /* Scrim — phủ đen trên media/backdrop (theme-INDEPENDENT: đen trên ảnh đúng cả
+     light/dark, không override dark.css). Thang bậc nhẹ→đậm; component dùng
+     bg-scrim-1..4, CẤM rgba(0,0,0) inline (batch F 2026-10-18). */
+  --scrim-1: rgba(0, 0, 0, 0.2); /* bullet indicator trên media */
+  --scrim-2: rgba(0, 0, 0, 0.3); /* nav button trên ảnh — rest */
+  --scrim-3: rgba(0, 0, 0, 0.5); /* nav button trên ảnh — hover/active bullet */
+  --scrim-4: rgba(0, 0, 0, 0.8); /* backdrop toàn màn (image preview) */
+  /* Tooltip surface (antd colorBgSpotlight): light = spotlight đen; dark override
+     sáng hơn (#424242) để bubble tách khỏi canvas tối — phán quyết lead 2026-10-18. */
+  --tooltip-bg: rgba(0, 0, 0, 0.85);
+  --tooltip-bg: rgba(0, 0, 0, 0.85);
+  /* Cinematic experience (REF-SPEC 2026-10-18 — đo từ ref, PO duyệt): chữ navy
+     trên section nền sáng của hero + footer tối. Không dùng cho text body thường. */
+  --navy-ink: rgb(16, 36, 52);
+  /* Nền TỰ CHỦ của experience (không theo theme — hero LUÔN sáng, chapters LUÔN
+     tối để text light giữ contrast ≥4.5:1 cả light lẫn dark toolbar). */
+  --hero-sky-a: #ffffff;
+  --hero-sky-b: #e8edf4;
+  --hero-ink: rgb(16, 36, 52); /* text hero trên nền sáng tự chủ — CỐ ĐỊNH, KHÔNG flip dark (khác --navy-ink có override #f7f8f8) */
+  --chapter-bg-a: rgb(10, 12, 22);
+  --chapter-bg-b: rgb(16, 36, 52);
+  /* Z-index overlay scale — thang dùng chung cho floating surfaces (antd-like:
+     dropdown < popover < modal < toast < tooltip). Component dùng z-[var(--z-*)],
+     cấm hardcode số (batch ⑩ 2026-10-18). */
+  --z-dropdown: 1000;
+  --z-popover: 1030;
+  --z-modal: 1050;
+  --z-toast: 1070;
+  --z-tooltip: 1090;
+  /* Font stacks (antd — system UI, KHÔNG webfont) */
+  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", sans-serif;
+  --m: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Consolas, monospace;
+  /* Radius — modern 2026 (shadcn/Geist/Linear-like): mềm hơn antd */
+  --r-1: 6px; /* chip nhỏ, input nhỏ */
+  --r-2: 8px; /* button, input, pill — modern base */
+  --r-3: 12px; /* card, panel — modern LG */
+  --r-pill: 9999px;
+  /* Spacing scale 4base */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 24px;
+  --sp-6: 32px;
+  /* Alert tints — antd colorBg/Border theo type (light) */
+  --alert-error-bg: #fff2f0;
+  --alert-error-border: #ffccc7;
+  --alert-warning-bg: #fffbe6;
+  --alert-warning-border: #ffe58f;
+  --alert-info-bg: #e6f4ff;
+  --alert-info-border: #91caff;
+  --alert-success-bg: #f6ffed;
+  --alert-success-border: #b7eb8f;
+  /* Alert FILLED — nền đặc theo type (antd green-7/gold-7/red-7 + colorPrimary;
+   * tokenize giá trị look-cũ — batch worker H 2026-10-18, duyệt qua "fix tất cả issue") */
+  --alert-error-filled: #cf1322;
+  --alert-warning-filled: #d48806;
+  --alert-info-filled: #1677ff; /* = --accent */
+  --alert-success-filled: #389e0d;
+  /* Mask scrim phủ (drawer/modal/blockui overlay) — antd colorBgMask */
+  --mask: rgba(0, 0, 0, 0.45);
+  /* Type scale (antd base 14) */
+  --fs-meta: 12px;
+  --fs-label: 13px;
+  --fs-body: 14px;
+  --fs-h3: 15px; /* heading nhỏ (toolbar title — batch schedule-skin 2026-10-18, coordinator chỉ định) */
+  --fs-h2: 16px;
+  --fs-h1: 18px;
+}

package/stack-template/app/ui-kit/src/styles/ui-kit.css

@@ -0,0 +1,10 @@
+/* Entry build CSS cho npm consumers — compile TẤT CẢ utilities dùng trong src/ui
+ * + src/hooks thành 1 file. Consumers chỉ cần import '@wakii/ui-kit/styles/ui-kit.css'.
+ * KHÔNG import trực tiếp file này trong dev (dev dùng vite plugin scan runtime). */
+/* Pin layer order: utilities sau base (cùng lý do tailwind-preview.css — utility
+ * trên control thô phải thắng rule base input/textarea/select). */
+@layer theme, reset, base, utilities;
+@import './tailwind.css';
+@import './base.css';
+@source '../ui';
+@source '../hooks';