create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/carousel/index.tsx

@@ -0,0 +1,195 @@
+// Carousel — Swiper engine (peer-dep: consumer tự cài swiper khi dùng subpath này).
+// Touch/drag momentum + loop + autoplay + keyboard + a11y — Swiper strengths.
+// API giữ tinh thần PrimeReact Carousel (circular/autoplay/indicators/orientation).
+//
+// Navigators custom — WHY không dùng Navigation module binding: swiper/react v14
+// init Swiper NGAY TRONG RENDER (initSwiper() lúc render, trước commit) nên refs
+// tới nút custom luôn null lúc onBeforeInit/beforeInit → pattern
+// navigation={{ prevEl, nextEl }} + re-assign trong onBeforeInit (docs chính thức
+// cho bản cũ) KHÔNG còn hoạt động → nút chết (bug đã sửa 2026-10-17). Giải pháp:
+// giữ <button> accessible của ta, onClick gọi thẳng instance slidePrev/slideNext
+// (lấy qua onSwiper — chạy layout-effect sau mount). slidePrev/slideNext là core
+// API, không cần Navigation module. Đầu/cuối (non-loop): mờ nút qua isBeginning/
+// isEnd — Swiper tự guard không trượt quá, không cần attr disabled.
+//
+// onSlideChange dùng realIndex — loop mode activeIndex lệch offset slide clone.
+//
+// KHÔNG setState từ swiper events: swiper/react so params theo reference mỗi
+// re-render — object config mới = changedParams → updateSwiper churn/re-init
+// (realIndex reset, loop setState ở vertical). Edge-state (đầu/cuối non-loop)
+// nên toggle imperative qua classList trên ref nút — không re-render.
+import { useMemo, useRef } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Keyboard } from 'swiper/modules';
+import type { Swiper as SwiperInstance } from 'swiper';
+import { Icon } from '../icons/index.js';
+// CSS swiper đã chuyển sang src/entries/carousel.ts (subpath '@wakii/ui-kit/carousel') —
+// barrel chính '@wakii/ui-kit' không kéo CSS nặng nữa (batch ⑩ 2026-10-18).
+
+export interface CarouselProps {
+  /** Slide contents — mỗi phần tử 1 slide (key React nên đặt). */
+  items: React.ReactNode[];
+  /** Loop qua cuối về đầu (swiper loop mode). */
+  circular?: boolean;
+  /** Tự chạy — swiper Autoplay (config memo theo reference, xem note đầu file). */
+  autoplay?: boolean;
+  /** Delay mỗi slide ms (default 4000). */
+  autoplayInterval?: number;
+  /** Dừng autoplay khi hover (swiper pauseOnMouseEnter). */
+  pauseOnHover?: boolean;
+  /** Indicators dưới — ô vuông Pagination-style (số trang, click slideTo). */
+  indicators?: boolean;
+  /** Nút prev/next custom (ẩn khi items ≤ 1; mờ ở đầu/cuối non-loop). */
+  navigators?: boolean;
+  /** Điều khiển bàn phím ← → ↑ ↓ (swiper Keyboard). */
+  keyboard?: boolean;
+  /** Số slide mỗi view (default 1). */
+  itemsPerView?: number;
+  /** Chiều trượt (default horizontal). */
+  orientation?: 'horizontal' | 'vertical';
+  /** Callback mỗi lần đổi slide — nhận realIndex (loop-safe). */
+  onSlideChange?: (index: number) => void;
+  /** Chiều cao container (bắt buộc thực tế cho vertical — default 300px). */
+  height?: number | string;
+  className?: string;
+}
+
+const BTN_CLS =
+  'absolute z-10 top-1/2 -translate-y-1/2 cursor-pointer rounded-pill border-none bg-scrim-2 p-1.5 text-white outline-none focus-visible:ring-2 focus-visible:ring-accent/40 transition-[background-color] duration-200 ease-[var(--ease-smooth)] hover:bg-scrim-3 active:bg-scrim-4';
+
+// Indicator bullet — ngôn ngữ Pagination (ô vuông h-8 min-w-8 rounded-lg, SỐ TRANG
+// trong ô). Active đổi bằng classList imperative (không setState từ swiper events —
+// doctrine đầu file): border-none bg-accent font-medium text-white + aria-current.
+// hover:bg-s3 chỉ nằm ở bộ INACTIVE — active bị hover đè (specificity :hover 0,2,0
+// thắng utility 0,1,0) sẽ thành trắng-trên-trắng (bug đã bắt ở verify :6006).
+const BULLET_CLS =
+  'inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-lg text-body transition-colors duration-200 ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40';
+const BULLET_INACTIVE = ['border', 'border-line', 'bg-transparent', 'text-ink', 'hover:bg-s3'];
+const BULLET_ACTIVE = ['border-none', 'bg-accent', 'font-medium', 'text-white'];
+
+export function Carousel({
+  items,
+  circular = false,
+  autoplay = false,
+  autoplayInterval = 4000,
+  pauseOnHover = false,
+  indicators = true,
+  navigators = true,
+  keyboard = true,
+  itemsPerView = 1,
+  orientation = 'horizontal',
+  onSlideChange,
+  height,
+  className,
+}: CarouselProps) {
+  const swiperRef = useRef<SwiperInstance | null>(null);
+  const prevBtnRef = useRef<HTMLButtonElement>(null);
+  const nextBtnRef = useRef<HTMLButtonElement>(null);
+  const bulletsRef = useRef<(HTMLButtonElement | null)[]>([]);
+  const navEnabled = navigators && items.length > 1;
+
+  /** Active bullet — imperative qua classList + aria-current (doctrine: không
+   * setState từ swiper events; same pattern syncEdge). */
+  const syncActive = (s: SwiperInstance) => {
+    bulletsRef.current.forEach((el, i) => {
+      if (!el) return;
+      const active = i === s.realIndex;
+      for (const cls of BULLET_INACTIVE) el.classList.toggle(cls, !active);
+      for (const cls of BULLET_ACTIVE) el.classList.toggle(cls, active);
+      if (active) el.setAttribute('aria-current', 'true');
+      else el.removeAttribute('aria-current');
+    });
+  };
+
+  // Memoize config objects — swiper/react so params theo reference (xem note đầu file).
+  const autoplayConfig = useMemo(
+    () =>
+      autoplay
+        ? { delay: autoplayInterval, disableOnInteraction: false, pauseOnMouseEnter: pauseOnHover }
+        : false,
+    [autoplay, autoplayInterval, pauseOnHover],
+  );
+  const keyboardConfig = useMemo(() => ({ enabled: keyboard }), [keyboard]);
+
+  const heightStyle = height ?? (orientation === 'vertical' ? 300 : undefined);
+
+  // Edge-state imperative — không setState (xem note đầu file).
+  const syncEdge = (s: SwiperInstance) => {
+    if (circular) return;
+    prevBtnRef.current?.classList.toggle('opacity-40', s.isBeginning);
+    nextBtnRef.current?.classList.toggle('opacity-40', s.isEnd);
+  };
+
+  return (
+    <div className={`relative${className ? ` ${className}` : ''}`}>
+      <Swiper
+        modules={[Autoplay, Keyboard]}
+        slidesPerView={itemsPerView}
+        spaceBetween={0}
+        loop={circular}
+        direction={orientation}
+        autoplay={autoplayConfig}
+        keyboard={keyboardConfig}
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+          syncEdge(swiper);
+          syncActive(swiper);
+        }}
+        onSlideChange={(swiper) => {
+          syncEdge(swiper);
+          syncActive(swiper);
+          onSlideChange?.(swiper.realIndex);
+        }}
+        style={heightStyle !== undefined ? { height: heightStyle } : undefined}
+      >
+        {items.map((item, i) => (
+          <SwiperSlide key={i}>{item}</SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* Indicators — ô vuông Pagination-style, số trang trong ô; click slideTo(i) */}
+      {indicators && items.length > 1 && (
+        <div className="mt-3 flex items-center justify-center gap-2">
+          {items.map((_, i) => (
+            <button
+              key={i}
+              ref={(el) => {
+                bulletsRef.current[i] = el;
+              }}
+              type="button"
+              aria-label={`Chuyển tới trang ${i + 1}`}
+              aria-current={i === 0 ? 'true' : undefined}
+              className={`${BULLET_CLS} ${i === 0 ? BULLET_ACTIVE.join(' ') : BULLET_INACTIVE.join(' ')}`}
+              onClick={() => swiperRef.current?.slideTo(i)}
+            >
+              {i + 1}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {navEnabled && (
+        <>
+          <button
+            type="button"
+            aria-label="Trước"
+            ref={prevBtnRef}
+            className={`${BTN_CLS} left-2 swiper-button-prev-custom`}
+            onClick={() => swiperRef.current?.slidePrev()}
+          >
+            <Icon name="chevron-left" />
+          </button>
+          <button
+            type="button"
+            aria-label="Sau"
+            ref={nextBtnRef}
+            className={`${BTN_CLS} right-2 swiper-button-next-custom`}
+            onClick={() => swiperRef.current?.slideNext()}
+          >
+            <Icon name="chevron-right" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/cascade-select/cascade-select.stories.tsx

@@ -0,0 +1,126 @@
+// CascadeSelect stories — hierarchical picking (Cascader lite): level 0 → child
+// → leaf; keyboard ↑↓/Enter/Esc works on the trigger.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CascadeSelect, type CascadeOption } from './index';
+
+const meta = {
+  title: 'Forms/CascadeSelect',
+  component: CascadeSelect,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+const TREE: CascadeOption[] = [
+  {
+    label: 'Hanoi',
+    value: 'hn',
+    children: [
+      { label: 'Ba Dinh', value: 'hn-bd' },
+      { label: 'Tay Ho', value: 'hn-th' },
+      { label: 'Cau Giay', value: 'hn-cg' },
+    ],
+  },
+  {
+    label: 'TP.HCM',
+    value: 'hcm',
+    children: [
+      { label: 'District 1', value: 'hcm-1' },
+      { label: 'District 3', value: 'hcm-3' },
+    ],
+  },
+  { label: 'Da Nang', value: 'dn' },
+];
+
+function BasicDemo() {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <CascadeSelect options={TREE} value={value} onChange={setValue} placeholder="Pick a location…" />
+      <p className="m-0 font-mono text-meta text-ink3">
+        path: <strong className="text-ink">{value.length > 0 ? value.join(' / ') : '—'}</strong>
+      </p>
+    </div>
+  );
+}
+
+/** Basic — controlled: pick level 0 → child → leaf; path shown below. */
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
+
+const DEEP_TREE: CascadeOption[] = [
+  {
+    label: 'North',
+    value: 'north',
+    children: [
+      {
+        label: 'Hanoi',
+        value: 'hn',
+        children: [
+          { label: 'Ba Dinh', value: 'hn-bd' },
+          { label: 'Tay Ho', value: 'hn-th' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Center',
+    value: 'center',
+    children: [{ label: 'Da Nang', value: 'dn', children: [{ label: 'Hai Chau', value: 'dn-hc' }] }],
+  },
+];
+
+function DeepTreeDemo() {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <CascadeSelect options={DEEP_TREE} value={value} onChange={setValue} placeholder="Pick region → city → ward…" />
+      <p className="m-0 font-mono text-meta text-ink3">
+        path: <strong className="text-ink">{value.length > 0 ? value.join(' / ') : '—'}</strong>
+      </p>
+    </div>
+  );
+}
+
+/** WithDeepTree — 3 levels (region → city → ward) for nested navigation. */
+export const WithDeepTree: Story = {
+  name: 'With deep tree — 3 levels',
+  render: () => <DeepTreeDemo />,
+};
+
+function PreselectedDemo() {
+  const [value, setValue] = useState<string[]>(['hn', 'hn-th']);
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <CascadeSelect options={TREE} value={value} onChange={setValue} placeholder="Pick a location…" />
+      <p className="m-0 font-mono text-meta text-ink3">
+        path: <strong className="text-ink">{value.length > 0 ? value.join(' / ') : '—'}</strong>
+      </p>
+    </div>
+  );
+}
+
+/** Preselected — initial value path renders on the trigger without picking. */
+export const Preselected: Story = {
+  name: 'Preselected — initial value path (Hanoi / Tay Ho)',
+  render: () => <PreselectedDemo />,
+};
+
+/** DarkTheme — trigger + open panel on dark canvas. */
+export const DarkTheme: Story = {
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-canvas p-4">
+      <div className="max-w-[280px]">
+        <CascadeSelect options={TREE} placeholder="Pick a location…" onChange={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+/** Empty — options=[]: panel opens with nothing to pick (edge). */
+export const Empty: Story = {
+  args: { options: [], placeholder: 'Nothing to pick…' },
+};

package/stack-template/app/ui-kit/src/ui/cascade-select/cascade-select.test.tsx

@@ -0,0 +1,132 @@
+// CascadeSelect tests — chọn theo tầng: level 0 → con → leaf; onChange path
+// từng tầng; leaf đóng panel + trigger hiện path 'Cha / Con'. Controlled
+// harness (component là fully-controlled qua `value`).
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useState } from 'react';
+import { CascadeSelect, type CascadeOption } from './index.js';
+
+const TREE: CascadeOption[] = [
+  {
+    label: 'Hà Nội',
+    value: 'hn',
+    children: [
+      { label: 'Ba Đình', value: 'hn-bd' },
+      { label: 'Tây Hồ', value: 'hn-th' },
+    ],
+  },
+  { label: 'Đà Nẵng', value: 'dn' },
+];
+
+function Harness({ onChange }: { onChange?: (path: string[]) => void }) {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <CascadeSelect
+      options={TREE}
+      value={value}
+      onChange={(path) => { setValue(path); onChange?.(path); }}
+    />
+  );
+}
+
+afterEach(cleanup);
+
+describe('CascadeSelect', () => {
+  it('đóng → trigger placeholder; click → panel hiện options tầng 0', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Harness />);
+    expect(screen.getByText('Chọn…')).toBeInTheDocument();
+    await user.click(container.querySelector('button')!);
+    expect(screen.getByText('Hà Nội')).toBeInTheDocument();
+    expect(screen.getByText('Đà Nẵng')).toBeInTheDocument();
+    expect(screen.queryByText('Ba Đình')).toBeNull(); // tầng con chưa mở
+  });
+
+  it('chọn tầng cha → onChange path 1 phần tử + panel sang tầng con', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(<Harness onChange={onChange} />);
+    await user.click(container.querySelector('button')!);
+    await user.click(screen.getByText('Hà Nội'));
+    expect(onChange).toHaveBeenCalledWith(['hn']);
+    expect(screen.getByText('Ba Đình')).toBeInTheDocument();
+    expect(screen.getByText('Tây Hồ')).toBeInTheDocument();
+    expect(screen.queryByText('Đà Nẵng')).toBeNull();
+  });
+
+  it('chọn leaf → onChange full path + panel đóng + trigger hiện path value', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(<Harness onChange={onChange} />);
+    await user.click(container.querySelector('button')!);
+    await user.click(screen.getByText('Hà Nội'));
+    await user.click(screen.getByText('Ba Đình'));
+    expect(onChange).toHaveBeenLastCalledWith(['hn', 'hn-bd']);
+    expect(screen.queryByText('Tây Hồ')).toBeNull(); // panel đóng
+    // Contract comp: trigger join VALUES ('hn / hn-bd'), không phải labels
+    expect(screen.getByText('hn / hn-bd')).toBeInTheDocument();
+  });
+
+  it('chọn leaf cấp 1 (không children) → onChange + đóng ngay', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(<Harness onChange={onChange} />);
+    await user.click(container.querySelector('button')!);
+    await user.click(screen.getByText('Đà Nẵng'));
+    expect(onChange).toHaveBeenCalledWith(['dn']);
+    expect(screen.queryByText('Hà Nội')).toBeNull();
+    expect(screen.getByText('dn')).toBeInTheDocument(); // trigger hiện value
+  });
+
+  it('mở lại panel sau khi chọn → panel mở tại nhánh đang chọn', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Harness />);
+    const trigger = container.querySelector('button')!;
+    await user.click(trigger);
+    await user.click(screen.getByText('Hà Nội'));
+    await user.click(screen.getByText('Ba Đình'));
+    expect(screen.queryByText('Tây Hồ')).toBeNull(); // đã đóng
+    await user.click(trigger); // mở lại
+    expect(screen.getByText('Tây Hồ')).toBeInTheDocument(); // nhánh hn
+    expect(screen.queryByText('Đà Nẵng')).toBeNull();
+  });
+});
+
+describe('CascadeSelect — keyboard nav (audit fix)', () => {
+  it('ArrowDown ×2 → Enter chọn option đang active (Đà Nẵng)', async () => {
+    const onChange = vi.fn();
+    render(<Harness onChange={onChange} />);
+    const trigger = screen.getByText('Chọn…').closest('button')!;
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' }); // mở + active 1 (Đà Nẵng — active khởi đầu 0, wrap %2)
+    expect(screen.getByText('Đà Nẵng')).toHaveClass('bg-s3');
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    expect(onChange).toHaveBeenCalledWith(['dn']);
+  });
+
+  it('Escape đóng panel', async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+    await user.click(screen.getByText('Chọn…'));
+    expect(screen.getByText('Hà Nội')).toBeInTheDocument();
+    screen.getByText('Chọn…').closest('button')!.focus();
+    fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
+    expect(screen.queryByText('Hà Nội')).toBeNull();
+  });
+});
+
+describe('CascadeSelect — panel align giữa trigger (polish)', () => {
+  it('panel width theo content + căn giữa (left-1/2 -translate-x-1/2), không full-width', () => {
+    render(<CascadeSelect options={TREE} />);
+    fireEvent.click(screen.getByText('Chọn…').closest('button')!);
+    const panel = screen.getByRole('listbox');
+    expect(panel.className).toContain('left-1/2');
+    expect(panel.className).toContain('-translate-x-1/2');
+    expect(panel.className).toContain('w-max');
+    expect(panel.className).not.toContain('inset-x-0');
+    // option không còn w-full (width theo label, min-w giữ vùng chạm)
+    const opt = screen.getByText('Hà Nội').closest('button')!;
+    expect(opt.className).not.toContain('w-full');
+    expect(opt.className).toContain('min-w-[140px]');
+  });
+});

package/stack-template/app/ui-kit/src/ui/cascade-select/index.tsx

@@ -0,0 +1,87 @@
+// CascadeSelect — chọn có phân cấp (antd Cascader lite).
+// Audit fix 2026-10-18: ▸/› ký tự → Icon; z-30 → token --z-popover; panel
+// inset-x-0 (fix "panel lệch trái"); aria-expanded/haspopup + role listbox/option;
+// focus-visible ring trên trigger.
+// Polish 2026-10-18: panel căn GIỮA trigger — width theo content (w-max, left-1/2
+// -translate-x-1/2) thay vì inset-x-0 full-width; option bỏ w-full (width theo label,
+// min-w giữ cột chạm được).
+import { useState } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface CascadeOption {
+  label: string; value: string;
+  children?: CascadeOption[];
+}
+
+export interface CascadeSelectProps {
+  options: CascadeOption[];
+  value?: string[];
+  onChange?: (path: string[]) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function CascadeSelect({ options, value = [], onChange, placeholder = 'Chọn…', className }: CascadeSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [level, setLevel] = useState(0);
+  // Keyboard nav (a11y listbox): ↑↓ chuyển active, Enter chọn, Esc đóng — focus
+  // giữ trên trigger, highlight qua activeIdx (panel ngắn, không cần scrollIntoView).
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  let current = options;
+  for (let i = 0; i < value.length; i++) {
+    const found = current.find((o) => o.value === value[i]);
+    if (!found?.children) break;
+    current = found.children;
+  }
+
+  return (
+    <div className={`relative inline-flex w-full${className ? ` ${className}` : ''}`}>
+      <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} aria-haspopup="listbox"
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const dir = e.key === 'ArrowDown' ? 1 : -1;
+            setOpen(true);
+            setActiveIdx((i) => (i + dir + current.length) % current.length);
+          } else if (e.key === 'Enter' && open) {
+            e.preventDefault();
+            const opt = current[activeIdx];
+            if (opt) {
+              const next = [...value.slice(0, level), opt.value];
+              if (opt.children) { setLevel(level + 1); onChange?.(next); }
+              else { onChange?.(next); setOpen(false); setLevel(0); }
+            }
+          } else if (e.key === 'Escape' && open) {
+            setOpen(false); setLevel(0);
+          }
+        }}
+        className="inline-flex h-8 w-full items-center justify-between rounded-lg border border-line bg-s3 px-3 text-body text-ink placeholder:text-ink4 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] hover:border-ink/20 hover:shadow-[var(--ele-2)] focus:border-accent-hi focus:bg-s1 focus:shadow-[var(--ele-2)] focus:outline-none focus-visible:ring-[3px] focus-visible:ring-accent/40 focus-visible:outline-none">
+        <span className={value.length > 0 ? '' : 'text-ink4'}>{value.length > 0 ? value.join(' / ') : placeholder}</span>
+        <span aria-hidden="true" className="text-ink3"><Icon name="chevron-right" size={12} /></span>
+      </button>
+      {open && (
+        <div role="listbox" aria-label={placeholder}
+          className="absolute left-1/2 top-full z-[var(--z-popover)] mt-1 flex w-max max-w-[calc(100vw-16px)] -translate-x-1/2 gap-px overflow-hidden rounded-xl border border-line bg-s2 bg-[image:var(--wash)] shadow-[var(--shadow-pop),var(--ele-3)] animate-[bp-fade-in_var(--motion-fast)_var(--ease-enter)]">
+          {current.map((option, i) => (
+            <button key={option.value} type="button" role="option" aria-selected={value[value.length - 1] === option.value}
+              onClick={() => {
+                const next = [...value.slice(0, level), option.value];
+                if (option.children) { setLevel(level + 1); onChange?.(next); }
+                else { onChange?.(next); setOpen(false); setLevel(0); }
+              }}
+              style={{ animationDelay: `${Math.min(i, 12) * 30}ms` }}
+              className={`group/opt block min-w-[140px] cursor-pointer px-3 py-2 text-left text-body text-ink transition-colors duration-200 ease-[var(--ease-smooth)] animate-[bp-slide-up-in_240ms_var(--ease-smooth)_backwards] ${current[activeIdx] === option ? 'bg-s3' : 'hover:bg-accent/5'}`}>
+              {option.label}
+              {option.children && (
+                <span aria-hidden="true" className="float-right text-ink3">
+                  <Icon name="chevron-right" size={12} className="transition-transform duration-200 ease-[var(--ease-smooth)] group-hover/opt:translate-x-[2px]" />
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/chart/chart-theme.test.tsx

@@ -0,0 +1,79 @@
+// useChartTheme tests — F2 dark-toggle live: resolve token theo scope probe +
+// re-resolve khi theme attr đổi (trên <html> — path F1, và trên wrapper node
+// trong subtree body — path UiKitProvider). jsdom không áp CSS → mock
+// getComputedStyle để kiểm luồng resolve/re-resolve.
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useChartTheme } from './index.js';
+
+const VARS = { accent: '--accent', done: '--st-done' } as const;
+const FALLBACK = { accent: '#1677ff', done: '#52c41a' };
+
+let accentValue = '';
+
+function Probe({ onColors }: { onColors: (c: Record<string, string>) => void }) {
+  const { ref, colors } = useChartTheme(VARS, FALLBACK);
+  onColors(colors);
+  return <span ref={ref} aria-hidden="true" />;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.documentElement.removeAttribute('data-bp-theme');
+  document.body.removeAttribute('data-bp-theme');
+});
+
+describe('useChartTheme (F2 — dark-toggle live)', () => {
+  it('token không resolve được (jsdom không áp CSS) → trả fallback nguyên vẹn', () => {
+    const seen: Record<string, string>[] = [];
+    render(<Probe onColors={(c) => seen.push(c)} />);
+    expect(seen.at(-1)).toEqual(FALLBACK);
+  });
+
+  it('resolve ngay lúc mount khi probe nằm trong scope có token', async () => {
+    accentValue = '#5e6ad2';
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({ getPropertyValue: (n: string) => (n === '--accent' ? accentValue : '') }) as unknown as CSSStyleDeclaration,
+    );
+    const seen: Record<string, string>[] = [];
+    render(<Probe onColors={(c) => seen.push(c)} />);
+    expect(seen.at(-1)?.accent).toBe('#5e6ad2');
+    expect(seen.at(-1)?.done).toBe(FALLBACK.done); // var không có giá trị → giữ fallback
+  });
+
+  it('attr data-bp-theme đổi trên <html> → re-resolve (html path F1)', async () => {
+    accentValue = '#5e6ad2';
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({ getPropertyValue: (n: string) => (n === '--accent' ? accentValue : '') }) as unknown as CSSStyleDeclaration,
+    );
+    const seen: Record<string, string>[] = [];
+    render(<Probe onColors={(c) => seen.push(c)} />);
+    accentValue = '#828fff';
+    await act(async () => {
+      document.documentElement.setAttribute('data-bp-theme', 'dark');
+    });
+    await waitFor(() => expect(seen.at(-1)?.accent).toBe('#828fff'));
+  });
+
+  it('attr đổi trên wrapper node trong subtree body → re-resolve (UiKitProvider path)', async () => {
+    accentValue = '#1677ff';
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({ getPropertyValue: (n: string) => (n === '--accent' ? accentValue : '') }) as unknown as CSSStyleDeclaration,
+    );
+    const seen: Record<string, string>[] = [];
+    render(
+      <div data-testid="theme-scope">
+        <Probe onColors={(c) => seen.push(c)} />
+      </div>,
+    );
+    expect(seen.at(-1)?.accent).toBe('#1677ff');
+    accentValue = '#5e6ad2';
+    await act(async () => {
+      screen.getByTestId('theme-scope').setAttribute('data-bp-theme', 'dark');
+    });
+    await waitFor(() => expect(seen.at(-1)?.accent).toBe('#5e6ad2'));
+  });
+});