create-wakii-app 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# create-wakii-app
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+CLI scaffold app React + **@wakii/ui-kit** — `pnpm create wakii-app my-app` (spec chung: `docs/` khi publish — hiện `/tmp/starter-spec.md`).
+
+## Dùng
+
+```bash
+pnpm create wakii-app my-app                 # interactive (CRA-style)
+pnpm create wakii-app my-app --yes           # toàn default (ts + router, 0 extra)
+pnpm create wakii-app my-app --lang js --no-router --extras chart,carousel --skip-install
+```
+
+| Flag | Ý nghĩa | Default |
+|---|---|---|
+| `--lang ts\|js` | TypeScript / JavaScript variant | `ts` |
+| `--router` / `--no-router` | react-router v7 | có |
+| `--extras a,b` | demo subpath: `chart · carousel · schedule · editor` | none |
+| `--yes` | bỏ prompt, lấy default | — |
+| `--skip-install` | bỏ gợi ý `pnpm install` ở next-steps | — |
+
+CLI KHÔNG tự install — chỉ in next-steps (`cd`, `pnpm install`, `pnpm dev`).
+
+## Kiến trúc
+
+- `src/options.ts` — parse flags tự viết (0 dep parser) + defaults + validate
+- `src/scaffold.ts` — copy đệ quy template → render placeholder `{{appName}}` (binary bỏ qua) → áp overlays `router`/`extras/<name>` → merge deps vào package.json
+- `src/index.ts` — flow prompt `@clack/prompts` + log + next-steps (wire UI thôi)
+
+Nguồn template: `app/starter-templates/vite-ts|vite-js` + `template-feats/` (worker riêng sở hữu). Overlay dùng cho variant JS phải type-free (engine chỉ đổi đuôi `.tsx→.jsx`); nếu overlay có thư mục `vite-js/` riêng thì dùng nguyên thư mục đó.
+
+## Phát triển
+
+```bash
+pnpm --filter create-wakii-app typecheck
+pnpm --filter create-wakii-app test      # fixture templates giả trong tmp — không network
+```
+
+Build/publish wiring (bin → dist, files field gộp templates) là bước release — xem RELEASE khi publish.

package/dist/index.js

@@ -0,0 +1,333 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import * as p from "@clack/prompts";
+import { existsSync as existsSync2, readdirSync } from "fs";
+import { resolve as resolve2 } from "path";
+
+// src/options.ts
+var EXTRAS = ["chart", "carousel", "schedule", "editor"];
+function parseExtrasList(raw) {
+  const names = raw.split(",").map((s) => s.trim()).filter(Boolean);
+  const extras = [];
+  for (const name of names) {
+    if (!EXTRAS.includes(name)) {
+      return { ok: false, message: `Extra kh\xF4ng h\u1ED7 tr\u1EE3: '${name}' \u2014 h\u1EE3p l\u1EC7: ${EXTRAS.join(", ")}` };
+    }
+    if (!extras.includes(name)) extras.push(name);
+  }
+  return { ok: true, extras };
+}
+function parseArgs(argv) {
+  const options = { lang: "ts", extras: [], yes: false, skipInstall: false };
+  let i = 0;
+  while (i < argv.length) {
+    const arg = argv[i];
+    if (arg === "--yes") {
+      options.yes = true;
+    } else if (arg === "--skip-install") {
+      options.skipInstall = true;
+    } else if (arg === "--router") {
+      options.router = true;
+    } else if (arg === "--no-router") {
+      options.router = false;
+    } else if (arg === "--help" || arg === "-h") {
+      options.help = true;
+    } else if (arg === "--lang") {
+      const value = argv[i + 1];
+      i += 1;
+      if (value !== "ts" && value !== "js") {
+        return { ok: false, message: `--lang ch\u1EC9 nh\u1EADn 'ts' | 'js' \u2014 nh\u1EADn: ${value ?? "(thi\u1EBFu gi\xE1 tr\u1ECB)"}` };
+      }
+      options.lang = value;
+    } else if (arg?.startsWith("--lang=")) {
+      const value = arg.slice("--lang=".length);
+      if (value !== "ts" && value !== "js") {
+        return { ok: false, message: `--lang ch\u1EC9 nh\u1EADn 'ts' | 'js' \u2014 nh\u1EADn: ${value}` };
+      }
+      options.lang = value;
+    } else if (arg === "--extras") {
+      const value = argv[i + 1];
+      i += 1;
+      if (!value) return { ok: false, message: "--extras c\u1EA7n danh s\xE1ch ph\u1EA9y: --extras chart,carousel" };
+      const parsed = parseExtrasList(value);
+      if (!parsed.ok) return parsed;
+      options.extras = parsed.extras;
+      options.extrasProvided = true;
+    } else if (arg?.startsWith("--extras=")) {
+      const parsed = parseExtrasList(arg.slice("--extras=".length));
+      if (!parsed.ok) return parsed;
+      options.extras = parsed.extras;
+      options.extrasProvided = true;
+    } else if (arg?.startsWith("--")) {
+      return { ok: false, message: `Flag kh\xF4ng h\u1ED7 tr\u1EE3: ${arg} (xem --help)` };
+    } else if (arg !== void 0) {
+      if (options.appName !== void 0) return { ok: false, message: "Ch\u1EC9 nh\u1EADn M\u1ED8T t\xEAn project (positioned \u0111\u1EA7u ti\xEAn)" };
+      options.appName = arg;
+    }
+    i += 1;
+  }
+  return { ok: true, options };
+}
+function resolveOptions(options) {
+  if (options.extras.length > 0 && options.router === false) {
+    throw new Error("--no-router m\xE2u thu\u1EABn v\u1EDBi --extras (demo subpath c\u1EA7n route \u0111\u1EC3 m\u1EDF) \u2014 b\u1ECF --no-router ho\u1EB7c b\u1ECF extras");
+  }
+  return {
+    appName: options.appName ?? "my-wakii-app",
+    lang: options.lang,
+    router: options.extras.length > 0 ? true : options.router ?? true,
+    extras: options.extras,
+    skipInstall: options.skipInstall
+  };
+}
+
+// src/scaffold.ts
+import { mkdir, readFile, readdir, writeFile } from "fs/promises";
+import { existsSync } from "fs";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+function resolveTemplatesRoot() {
+  const here = dirname(fileURLToPath(import.meta.url));
+  for (const candidate of [
+    resolve(here, "../../starter-templates"),
+    // repo: app/create-wakii-app/{src,dist}
+    resolve(here, "../starter-templates")
+    // npm: <pkg>/dist + <pkg>/starter-templates
+  ]) {
+    if (existsSync(candidate)) return candidate;
+  }
+  return resolve(here, "../../starter-templates");
+}
+var DEFAULT_TEMPLATES_ROOT = resolveTemplatesRoot();
+var EXTRA_DEPS = {
+  chart: [{ name: "chart.js", range: "^4.5.1" }],
+  carousel: [{ name: "swiper", range: "^14.3.0" }],
+  schedule: [
+    { name: "@fullcalendar/core", range: "^6.1.22" },
+    { name: "@fullcalendar/daygrid", range: "^6.1.22" },
+    { name: "@fullcalendar/interaction", range: "^6.1.22" }
+  ],
+  editor: [
+    { name: "@tiptap/react", range: "^3.32.0" },
+    { name: "@tiptap/starter-kit", range: "^3.32.0" }
+  ]
+};
+function renameForJs(path) {
+  return path.replace(/\.tsx$/, ".jsx").replace(/\.ts$/, ".js");
+}
+async function copyTree(srcDir, destDir, opts) {
+  await mkdir(destDir, { recursive: true });
+  for (const entry of await readdir(srcDir, { withFileTypes: true })) {
+    if (entry.name === ".DS_Store") continue;
+    const srcPath = join(srcDir, entry.name);
+    const outName = opts.renameExt ? renameForJs(entry.name) : entry.name;
+    const destPath = join(destDir, outName);
+    if (entry.isDirectory()) {
+      await copyTree(srcPath, destPath, opts);
+      continue;
+    }
+    const buffer = await readFile(srcPath);
+    if (buffer.includes(0)) {
+      await writeFile(destPath, buffer);
+    } else {
+      const text2 = buffer.toString("utf8").replaceAll("{{appName}}", opts.appName);
+      await writeFile(destPath, text2);
+    }
+    opts.files.push(destPath);
+  }
+}
+async function mergeDeps(dest, plan, log2) {
+  const pkgPath = join(dest, "package.json");
+  if (!existsSync(pkgPath)) return;
+  const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
+  pkg.dependencies ??= {};
+  const additions = [];
+  if (plan.router) {
+    pkg.dependencies["react-router"] ??= "^7.9.0";
+    additions.push("react-router@^7.9.0");
+  }
+  for (const extra of plan.extras) {
+    for (const dep of EXTRA_DEPS[extra]) {
+      pkg.dependencies[dep.name] ??= dep.range;
+      additions.push(`${dep.name}@${dep.range}`);
+    }
+  }
+  await writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}
+`);
+  if (additions.length) log2?.(`Merge deps: +${additions.join(" +")}`);
+}
+async function scaffold(input) {
+  const { plan, dest, log: log2 } = input;
+  const templatesRoot = input.templatesRoot ?? DEFAULT_TEMPLATES_ROOT;
+  const variant = plan.lang === "js" ? "vite-js" : "vite-ts";
+  const baseDir = join(templatesRoot, variant);
+  if (!existsSync(baseDir)) {
+    throw new Error(`Kh\xF4ng th\u1EA5y template base: ${baseDir} (c\u1EA7n ${variant} trong starter-templates)`);
+  }
+  const files = [];
+  log2?.(`Copy base template (${variant})`);
+  await copyTree(baseDir, dest, { appName: plan.appName, renameExt: false, files });
+  const featsDir = join(templatesRoot, "template-feats");
+  if (plan.router) {
+    const routerDir = join(featsDir, "router");
+    if (!existsSync(routerDir)) throw new Error(`Kh\xF4ng th\u1EA5y overlay router: ${routerDir}`);
+    const jsVariantDir = join(routerDir, "vite-js");
+    const useJsVariant = plan.lang === "js" && existsSync(jsVariantDir);
+    log2?.("Apply overlay: router");
+    await copyTree(useJsVariant ? jsVariantDir : routerDir, dest, {
+      appName: plan.appName,
+      renameExt: plan.lang === "js" && !useJsVariant,
+      files
+    });
+  }
+  for (const extra of plan.extras) {
+    const extraDir = join(featsDir, "extras", extra);
+    if (!existsSync(extraDir)) throw new Error(`Kh\xF4ng th\u1EA5y overlay extra '${extra}': ${extraDir}`);
+    const jsVariantDir = join(extraDir, "vite-js");
+    const useJsVariant = plan.lang === "js" && existsSync(jsVariantDir);
+    log2?.(`Apply overlay: ${extra}`);
+    await copyTree(useJsVariant ? jsVariantDir : extraDir, dest, {
+      appName: plan.appName,
+      renameExt: plan.lang === "js" && !useJsVariant,
+      files
+    });
+  }
+  if (plan.router) {
+    log2?.("Render extras markers trong App");
+    await renderExtraMarkers(dest, plan, plan.lang === "js");
+  }
+  await mergeDeps(dest, plan, log2);
+  return { files: files.map((f) => f.slice(dest.length + 1)) };
+}
+var EXTRA_COMPONENTS = {
+  chart: { component: "ChartDemo", label: "Chart" },
+  carousel: { component: "CarouselDemo", label: "Carousel" },
+  schedule: { component: "ScheduleDemo", label: "Schedule" },
+  editor: { component: "EditorDemo", label: "Editor" }
+};
+async function renderExtraMarkers(dest, plan, isJs) {
+  const ext = isJs ? "jsx" : "tsx";
+  const appPath = join(dest, `src/App.${ext}`);
+  if (!existsSync(appPath)) return;
+  const imports = [];
+  const links = [];
+  const routes = [];
+  for (const extra of plan.extras) {
+    const { component, label } = EXTRA_COMPONENTS[extra];
+    const fileStem = `Demo${extra[0].toUpperCase()}${extra.slice(1)}`;
+    imports.push(`import { ${component} } from './${fileStem}';`);
+    links.push(`          <NavLink className={NAV_LINK} to="/${extra}">
+            ${label}
+          </NavLink>`);
+    routes.push(`          <Route element={<${component} />} path="/${extra}" />`);
+  }
+  let text2 = await readFile(appPath, "utf8");
+  text2 = text2.replaceAll("{{EXTRA_IMPORTS}}", imports.join("\n")).replaceAll("{{EXTRA_LINKS}}", links.join("\n")).replaceAll("{{EXTRA_ROUTES}}", routes.join("\n"));
+  await writeFile(appPath, text2);
+}
+
+// src/index.ts
+var USAGE = `create-wakii-app \u2014 scaffold app React + @wakii/ui-kit
+
+Usage: pnpm create wakii-app [appName] [flags]
+
+Flags:
+  --lang ts|js        Ng\xF4n ng\u1EEF (default: ts)
+  --router/--no-router  react-router v7 (default: c\xF3)
+  --extras <list>     Extras ph\u1EA9y ng\u0103n c\xE1ch: chart,carousel,schedule,editor (default: none)
+  --yes               L\u1EA5y to\xE0n b\u1ED9 default, kh\xF4ng prompt
+  --skip-install      B\u1ECF g\u1EE3i \xFD 'pnpm install' \u1EDF next-steps
+  -h, --help          In h\u01B0\u1EDBng d\u1EABn
+
+V\xED d\u1EE5: pnpm create wakii-app my-app --lang ts --router --extras chart,carousel
+`;
+function printNextSteps(plan) {
+  const steps = [`cd ${plan.appName}`];
+  if (!plan.skipInstall) steps.push("pnpm install");
+  steps.push("pnpm dev");
+  p.log.info("Next steps:");
+  for (const step of steps) p.log.step(`  ${step}`);
+}
+async function main() {
+  const parsed = parseArgs(process.argv.slice(2));
+  if (!parsed.ok) {
+    p.log.error(parsed.message);
+    console.error(USAGE);
+    process.exitCode = 1;
+    return;
+  }
+  if (parsed.options.help) {
+    console.log(USAGE);
+    return;
+  }
+  p.intro("create-wakii-app \u2014 scaffold React + @wakii/ui-kit");
+  let options = parsed.options;
+  if (options.appName === void 0) {
+    const name = await p.text({ message: "T\xEAn project?", placeholder: "my-wakii-app", defaultValue: "my-wakii-app" });
+    if (p.isCancel(name)) {
+      p.cancel("Hu\u1EF7 \u2014 kh\xF4ng scaffold g\xEC.");
+      return;
+    }
+    options = { ...options, appName: name.trim() };
+  }
+  if (options.router === void 0 && options.extras.length === 0 && !options.yes) {
+    const withRouter = await p.confirm({ message: "Th\xEAm react-router v7?", initialValue: true });
+    if (p.isCancel(withRouter)) {
+      p.cancel("Hu\u1EF7 \u2014 kh\xF4ng scaffold g\xEC.");
+      return;
+    }
+    options = { ...options, router: withRouter };
+  }
+  if (!options.yes && !options.extrasProvided) {
+    const chosen = await p.multiselect({
+      message: "Extras (tu\u1EF3 ch\u1ECDn \u2014 demo subpath component n\u1EB7ng)",
+      options: EXTRAS.map((value) => ({ value, label: value })),
+      required: false
+    });
+    if (p.isCancel(chosen)) {
+      p.cancel("Hu\u1EF7 \u2014 kh\xF4ng scaffold g\xEC.");
+      return;
+    }
+    options = { ...options, extras: chosen };
+  }
+  let plan;
+  try {
+    plan = resolveOptions(options);
+  } catch (err) {
+    p.log.error(err instanceof Error ? err.message : String(err));
+    process.exitCode = 1;
+    return;
+  }
+  const nameIsPath = /[\\/]/.test(plan.appName);
+  const dest = nameIsPath ? resolve2(plan.appName) : resolve2(process.cwd(), plan.appName);
+  const finalPlan = nameIsPath ? { ...plan, appName: dest.split(/[\\/]/).pop() ?? "my-wakii-app" } : plan;
+  if (existsSync2(dest) && readdirSync(dest).length > 0) {
+    p.log.error(`Th\u01B0 m\u1EE5c \u0111\xEDch \u0111\xE3 t\u1ED3n t\u1EA1i v\xE0 kh\xF4ng r\u1ED7ng: ${dest}`);
+    process.exitCode = 1;
+    return;
+  }
+  const s = p.spinner();
+  s.start("Scaffolding\u2026");
+  try {
+    const result = await scaffold({
+      plan: finalPlan,
+      dest,
+      log: (message) => {
+        s.message(message);
+      }
+    });
+    s.stop(`Xong \u2014 ${result.files.length} file ghi v\xE0o ${dest}`);
+  } catch (err) {
+    s.stop("Scaffold l\u1ED7i");
+    p.log.error(err instanceof Error ? err.message : String(err));
+    process.exitCode = 1;
+    return;
+  }
+  p.outro("S\u1EB5n s\xE0ng! \u{1F389}");
+  printNextSteps(nameIsPath ? { ...finalPlan, appName: dest } : finalPlan);
+}
+main().catch((err) => {
+  p.log.error(err instanceof Error ? err.message : String(err));
+  process.exitCode = 1;
+});

package/package.json

@@ -1,6 +1,24 @@
 {
   "name": "create-wakii-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "CLI scaffold app React + @wakii/ui-kit — pnpm create wakii-app my-app (spec: /tmp/starter-spec.md → docs khi publish)",
+  "bin": {
+    "create-wakii-app": "./dist/index.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "starter-templates",
+    "README.md"
+  ]
+}

package/starter-templates/template-feats/extras/carousel/src/DemoCarousel.tsx

@@ -0,0 +1,99 @@
+// Overlay EXTRA: carousel — trang demo <Carousel> qua subpath '@wakii/ui-kit/carousel'.
+// ⚠️ PEER DEP: "swiper": "^14.3.0" (entry subpath tự kéo swiper/css).
+// Redesign 2026-10-25 v2: hero autoplay 1/view + card rail 3/view. Lưu ý engine
+// kit: spaceBetween hardcoded 0 → gutter phải tự tạo bằng padding trong slide;
+// nút navigator absolute left-2/right-2 → container rail cần px đủ rộng để nút
+// không đè card (px-10 > 26px nút + 8px offset); indicators là chip SỐ kiểu
+// Pagination — chỉ bật ở hero, rail tắt cho nhẹ.
+// import CSS swiper tại CONSUMER — liên kết css của dep-optimizer (metadata
+// css:None) không đáng tin sau re-optimize; import trực tiếp luôn hoạt động.
+import 'swiper/css';
+import { Carousel } from '@wakii/ui-kit/carousel';
+import { Icon, Tag, Text, Title, type IconName } from '@wakii/ui-kit';
+
+const EYEBROW = 'text-label font-semibold uppercase tracking-[0.1em] text-accent';
+
+const HERO_SLIDES: { icon: IconName; name: string; desc: string }[] = [
+  { icon: 'star', name: 'Aurora', desc: 'Hero slides with autoplay, indicators and keyboard arrows.' },
+  { icon: 'heart', name: 'Cascade', desc: 'Pause on hover, loop back to the start with circular mode.' },
+  { icon: 'bell', name: 'Nimbus', desc: 'Navigators fade at the edges — content stays the star.' },
+  { icon: 'users', name: 'Dune', desc: 'Every slide is plain React — style it however you like.' },
+];
+
+const heroItems = HERO_SLIDES.map((s) => (
+  <div
+    key={s.name}
+    className="relative flex h-64 flex-col items-start justify-end gap-2 overflow-hidden rounded-xl border border-line bg-gradient-to-br from-accent/20 via-s2 to-s1 p-8"
+  >
+    <span aria-hidden="true" className="pointer-events-none absolute -top-10 -right-6 size-40 rounded-pill bg-accent/15 blur-2xl" />
+    <span aria-hidden="true" className="grid size-10 place-items-center rounded-lg bg-accent">
+      <Icon name={s.icon} size={18} className="text-white" />
+    </span>
+    <Title level={3}>{s.name}</Title>
+    <Text type="secondary">{s.desc}</Text>
+  </div>
+));
+
+const RAIL_CARDS: { icon: IconName; name: string; desc: string }[] = [
+  { icon: 'menu-bars', name: 'Grid view', desc: 'Dense dashboards' },
+  { icon: 'sort', name: 'List view', desc: 'Feeds & digests' },
+  { icon: 'folder', name: 'Files', desc: 'Trees & tables' },
+  { icon: 'calendar', name: 'Calendar', desc: 'Date-driven UI' },
+  { icon: 'clock', name: 'Timeline', desc: 'Activity feeds' },
+  { icon: 'check-circle', name: 'Forms', desc: 'zod-validated' },
+];
+
+const railItems = RAIL_CARDS.map((c) => (
+  <div key={c.name} className="h-40 px-1.5">
+    <div className="flex h-full flex-col items-start justify-between rounded-xl border border-line bg-s1 p-5">
+      <span aria-hidden="true" className="grid size-8 place-items-center rounded-lg bg-accent/10">
+        <Icon name={c.icon} size={16} className="text-accent" />
+      </span>
+      <div className="flex flex-col items-start gap-0.5">
+        <Text strong>{c.name}</Text>
+        <Text type="secondary">{c.desc}</Text>
+      </div>
+    </div>
+  </div>
+));
+
+/** Route gợi ý cho engine: '/carousel'. */
+export function CarouselDemo() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-1.5">
+        <span className={EYEBROW}>Extra · swiper</span>
+        <Title level={1}>Carousel, two ways</Title>
+        <div className="max-w-2xl">
+          <Text type="secondary">
+            Swiper-powered — a full-bleed hero loop and a card rail with 3 slides per view. Use ← → keys on the
+            hero; the rail navigates with the side arrows.
+          </Text>
+        </div>
+      </div>
+
+      <Carousel
+        autoplay
+        autoplayInterval={3500}
+        circular
+        indicators
+        items={heroItems}
+        keyboard
+        navigators
+        pauseOnHover
+        height={256}
+      />
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <Text strong>Component rail</Text>
+          <Tag>3 per view</Tag>
+        </div>
+        {/* px-10 nhường không gian cho nút navigator absolute (left-2, 26px) */}
+        <div className="px-10">
+          <Carousel items={railItems} itemsPerView={3} indicators={false} navigators height={160} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/starter-templates/template-feats/extras/chart/src/DemoChart.tsx

@@ -0,0 +1,84 @@
+// Overlay EXTRA: chart — trang demo <Chart> qua subpath '@wakii/ui-kit/chart'.
+// ⚠️ PEER DEP: "chart.js": "^4.5.1" (kit lazy-import; thiếu → fallback, không crash).
+// Redesign 2026-10-25: 3 chart (mixed bar+line / radar / line area) + KPI strip,
+// màu mặc định kit tự resolve theo theme light/dark.
+import { Card, CountUp, Statistic, Text, Title } from '@wakii/ui-kit';
+import { Chart } from '@wakii/ui-kit/chart';
+
+const EYEBROW = 'text-label font-semibold uppercase tracking-[0.1em] text-accent';
+
+/* Flat config — chart.js v4 qua wrapper kit. animation:false — render đồng bộ.
+ * Bỏ qua backgroundColor/borderColor → kit gán màu token theo theme (live theo
+ * dark toggle nhờ MutationObserver trong useChartTheme). */
+const THROUGHPUT = {
+  type: 'bar' as const,
+  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  datasets: [
+    { type: 'line' as const, label: 'Tasks completed', data: [12, 19, 8, 22, 30, 25, 18], tension: 0.35, fill: true },
+    { type: 'bar' as const, label: 'Reviews', data: [4, 7, 3, 9, 12, 8, 6] },
+  ],
+  options: { responsive: true, maintainAspectRatio: false, animation: false },
+};
+
+const FOCUS = {
+  type: 'radar' as const,
+  labels: ['Speed', 'Quality', 'Docs', 'Tests', 'Focus', 'Collab'],
+  datasets: [
+    { label: 'This sprint', data: [7, 8.5, 6, 9, 7.5, 8] },
+    { label: 'Last sprint', data: [6, 7.5, 5, 7, 8, 6.5] },
+  ],
+  options: { responsive: true, maintainAspectRatio: false, animation: false },
+};
+
+const BURNDOWN = {
+  type: 'line' as const,
+  labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T'],
+  datasets: [
+    { label: 'Open tasks', data: [40, 36, 33, 27, 22, 18, 15, 11, 6, 0], tension: 0.35, fill: true },
+    { label: 'Ideal', data: [40, 36, 32, 28, 24, 20, 16, 12, 8, 4, 0], borderDash: [6, 4], fill: false },
+  ],
+  options: { responsive: true, maintainAspectRatio: false, animation: false },
+};
+
+/** Route gợi ý cho engine: '/chart'. */
+export function ChartDemo() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-1.5">
+        <span className={EYEBROW}>Extra · chart.js</span>
+        <Title level={1}>Charts that follow your theme</Title>
+        <div className="max-w-2xl">
+          <Text type="secondary">
+            chart.js v4 wrapped by the kit — mixed datasets, radar and area lines. Colors resolve from design
+            tokens and re-render live when you flip light/dark.
+          </Text>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-8 rounded-xl border border-line bg-s1 px-8 py-6 shadow-[var(--shadow-lift)] max-sm:grid-cols-1 max-sm:gap-6">
+        <Statistic title="Tasks shipped" value={<CountUp value={134} />} />
+        <Statistic title="Review rate" value={<CountUp value={92} />} suffix="%" />
+        <Statistic title="Avg cycle time" value={<CountUp value={2.4} decimals={1} />} suffix="d" />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card title="Weekly throughput">
+          <div className="h-64">
+            <Chart config={THROUGHPUT} height={256} />
+          </div>
+        </Card>
+        <Card title="Team focus — this vs last sprint">
+          <div className="h-64">
+            <Chart config={FOCUS} height={256} />
+          </div>
+        </Card>
+      </div>
+
+      <Card title="Release burndown">
+        <div className="h-56">
+          <Chart config={BURNDOWN} height={224} />
+        </div>
+      </Card>
+    </div>
+  );
+}