@akanjs/cli 2.4.2-rc.3 → 3.0.0-alpha.0

package/templates/app/page/_index.tsx

@@ -26,7 +26,7 @@ export default function Page() {
   const appName = getEnv().appName;
   const { l } = usePage();
   return (
-    <main className="relative min-h-screen overflow-hidden bg-base-100 text-base-content">
+    <main className="relative min-h-screen overflow-hidden bg-background text-foreground">
       <div className="absolute -top-48 -left-48 h-96 w-96 rounded-full bg-primary/25 blur-3xl" />
       <div className="absolute -right-40 -bottom-56 h-112 w-md rounded-full bg-accent/20 blur-3xl" />
       <div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/60 to-transparent" />
@@ -34,7 +34,7 @@ export default function Page() {
       <section className="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-8 lg:px-8">
         <nav className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-2xl bg-base-100 shadow-lg shadow-primary/20">
+            <div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-2xl bg-background shadow-lg shadow-primary/20">
               <img
                 src="/logo.png"
                 alt={l.trans({ en: "Akan.js logo", ko: "Akan.js 로고" })}
@@ -43,7 +43,7 @@ export default function Page() {
             </div>
             <div>
               <p className="font-semibold text-primary text-sm tracking-[0.25em]">Akan.js</p>
-              <p className="text-base-content/60 text-xs">
+              <p className="text-foreground/60 text-xs">
                 {l.trans({ en: "Full-stack TypeScript framework", ko: "풀스택 타입스크립트 프레임워크" })}
               </p>
             </div>
@@ -52,7 +52,7 @@ export default function Page() {
             <System.ThemeToggle themes={["light", "dark"]} />
             <System.SelectLanguage languages={["en", "ko"]} />
             <Link href="https://akanjs.com" target="_blank">
-              <button className="btn btn-sm border-base-content/10 bg-base-content/10 text-base-content hover:border-primary hover:bg-primary hover:text-base-100">
+              <button className="inline-flex items-center gap-2 rounded-field border border-foreground/10 bg-foreground/10 px-3 py-2 text-foreground text-sm transition-colors hover:border-primary hover:bg-primary hover:text-background">
                 {l.trans({ en: "Official Site", ko: "공식 사이트" })}
                 <FaExternalLinkAlt />
               </button>
@@ -62,17 +62,17 @@ export default function Page() {
 
         <div className="grid flex-1 items-center gap-10 py-16 lg:grid-cols-[1.04fr_0.96fr] lg:py-10">
           <div>
-            <div className="badge mb-6 border-primary/20 bg-primary/10 px-4 py-3 text-primary">
+            <div className="mb-6 inline-flex items-center gap-1 rounded-full border border-primary/20 bg-primary/10 px-4 py-3 text-primary">
               <FaCheckCircle />
               {l.trans({ en: "Your app is running", ko: "앱이 실행 중입니다" })}
             </div>
-            <h1 className="max-w-4xl font-black text-5xl text-base-content tracking-tight sm:text-6xl lg:text-7xl">
+            <h1 className="max-w-4xl font-black text-5xl text-foreground tracking-tight sm:text-6xl lg:text-7xl">
               {l.trans({
                 en: "Akan turns business intent into the whole product.",
                 ko: "Akan은 비즈니스 의도를 제품 전체로 바꿉니다.",
               })}
             </h1>
-            <p className="mt-6 max-w-2xl text-base-content/70 text-lg leading-8">
+            <p className="mt-6 max-w-2xl text-foreground/70 text-lg leading-8">
               {l.trans({
                 en: "Agents Write. Keep It Minimal. Always Readable. Nice To Review. Build with less code, fewer repeated decisions, and a clearer path from idea to production.",
                 ko: "Agents Write. Keep It Minimal. Always Readable. Nice To Review. 더 적은 코드, 더 적은 반복 결정, 더 선명한 출시 경로로 만드세요.",
@@ -80,29 +80,29 @@ export default function Page() {
             </p>
 
             <div className="mt-8 flex flex-wrap gap-3">
-              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">
+              <span className="inline-flex items-center gap-1 rounded-full border border-foreground/10 bg-foreground/10 px-4 py-1.5 text-foreground text-sm">
                 Agent-ready
               </span>
-              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">
+              <span className="inline-flex items-center gap-1 rounded-full border border-foreground/10 bg-foreground/10 px-4 py-1.5 text-foreground text-sm">
                 Minimal code
               </span>
-              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">
+              <span className="inline-flex items-center gap-1 rounded-full border border-foreground/10 bg-foreground/10 px-4 py-1.5 text-foreground text-sm">
                 Readable by default
               </span>
-              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">
+              <span className="inline-flex items-center gap-1 rounded-full border border-foreground/10 bg-foreground/10 px-4 py-1.5 text-foreground text-sm">
                 Review-friendly
               </span>
             </div>
 
             <div className="mt-10 flex flex-col gap-3 sm:flex-row">
               <Link href="https://akanjs.com/docs/intro/quickstart" target="_blank">
-                <button className="btn border-none bg-primary text-base-100 hover:bg-primary/80">
+                <button className="inline-flex items-center justify-center gap-2 rounded-field bg-primary px-4 py-2 text-background text-sm transition-colors hover:bg-primary/80">
                   {l.trans({ en: "Read Quick Start", ko: "빠른 시작 읽기" })}
                   <FaBookOpen />
                 </button>
               </Link>
               <Link href="https://akanjs.com/docs/intro/practice" target="_blank">
-                <button className="btn border-base-content/10 bg-base-content/10 text-base-content hover:border-base-content/20 hover:bg-base-content/15">
+                <button className="inline-flex items-center justify-center gap-2 rounded-field border border-foreground/10 bg-foreground/10 px-4 py-2 text-foreground text-sm transition-colors hover:border-foreground/20 hover:bg-foreground/15">
                   {l.trans({ en: "Learn By Building", ko: "만들면서 배우기" })}
                   <FaCodeBranch />
                 </button>
@@ -112,13 +112,13 @@ export default function Page() {
 
           <div className="relative">
             <div className="absolute inset-0 rotate-3 rounded-4xl bg-primary/20 blur-2xl" />
-            <div className="relative overflow-hidden rounded-4xl border border-base-content/10 bg-base-content/6 p-5 shadow-2xl backdrop-blur">
-              <div className="mb-5 flex items-center justify-between rounded-2xl border border-base-content/10 bg-base-100/70 px-4 py-3">
+            <div className="relative overflow-hidden rounded-4xl border border-foreground/10 bg-foreground/6 p-5 shadow-2xl backdrop-blur">
+              <div className="mb-5 flex items-center justify-between rounded-2xl border border-foreground/10 bg-background/70 px-4 py-3">
                 <div>
-                  <p className="text-base-content/40 text-xs uppercase tracking-[0.24em]">
+                  <p className="text-foreground/40 text-xs uppercase tracking-[0.24em]">
                     {l.trans({ en: "Akan Acrostic", ko: "Akan 사행시" })}
                   </p>
-                  <p className="font-semibold text-base-content text-lg">
+                  <p className="font-semibold text-foreground text-lg">
                     {l.trans({ en: "A framework for focused builders", ko: "집중하는 빌더를 위한 프레임워크" })}
                   </p>
                 </div>
@@ -126,14 +126,14 @@ export default function Page() {
               </div>
 
               <div className="grid gap-3">
-                <div className="rounded-2xl border border-base-content/10 bg-base-100/80 p-4">
+                <div className="rounded-2xl border border-foreground/10 bg-background/80 p-4">
                   <div className="flex gap-4">
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-base-100 font-black text-primary text-xl">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-background font-black text-primary text-xl">
                       A
                     </div>
                     <div>
-                      <p className="font-bold text-base-content">Agents Write</p>
-                      <p className="mt-1 text-base-content/60 text-sm leading-6">
+                      <p className="font-bold text-foreground">Agents Write</p>
+                      <p className="mt-1 text-foreground/60 text-sm leading-6">
                         {l.trans({
                           en: "Business definitions become the source code, so teams and agents can focus on what to build.",
                           ko: "비즈니스 정의가 소스 코드가 되므로, 팀과 에이전트는 무엇을 만들지에 집중할 수 있습니다.",
@@ -142,14 +142,14 @@ export default function Page() {
                     </div>
                   </div>
                 </div>
-                <div className="rounded-2xl border border-base-content/10 bg-base-100/80 p-4">
+                <div className="rounded-2xl border border-foreground/10 bg-background/80 p-4">
                   <div className="flex gap-4">
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-base-100 font-black text-primary text-xl">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-background font-black text-primary text-xl">
                       K
                     </div>
                     <div>
-                      <p className="font-bold text-base-content">Keep It Minimal</p>
-                      <p className="mt-1 text-base-content/60 text-sm leading-6">
+                      <p className="font-bold text-foreground">Keep It Minimal</p>
+                      <p className="mt-1 text-foreground/60 text-sm leading-6">
                         {l.trans({
                           en: "One definition flows into web, app, server, database, and infrastructure without repeated logic.",
                           ko: "하나의 정의가 반복 로직 없이 웹, 앱, 서버, 데이터베이스, 인프라로 이어집니다.",
@@ -158,14 +158,14 @@ export default function Page() {
                     </div>
                   </div>
                 </div>
-                <div className="rounded-2xl border border-base-content/10 bg-base-100/80 p-4">
+                <div className="rounded-2xl border border-foreground/10 bg-background/80 p-4">
                   <div className="flex gap-4">
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-base-100 font-black text-primary text-xl">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-background font-black text-primary text-xl">
                       A
                     </div>
                     <div>
-                      <p className="font-bold text-base-content">Always Readable</p>
-                      <p className="mt-1 text-base-content/60 text-sm leading-6">
+                      <p className="font-bold text-foreground">Always Readable</p>
+                      <p className="mt-1 text-foreground/60 text-sm leading-6">
                         {l.trans({
                           en: "Strict conventions keep the app easy to understand long after the first version ships.",
                           ko: "엄격한 컨벤션은 첫 버전 출시 후에도 앱을 쉽게 이해할 수 있게 지켜줍니다.",
@@ -174,14 +174,14 @@ export default function Page() {
                     </div>
                   </div>
                 </div>
-                <div className="rounded-2xl border border-base-content/10 bg-base-100/80 p-4">
+                <div className="rounded-2xl border border-foreground/10 bg-background/80 p-4">
                   <div className="flex gap-4">
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-base-100 font-black text-primary text-xl">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-background font-black text-primary text-xl">
                       N
                     </div>
                     <div>
-                      <p className="font-bold text-base-content">Nice To Review</p>
-                      <p className="mt-1 text-base-content/60 text-sm leading-6">
+                      <p className="font-bold text-foreground">Nice To Review</p>
+                      <p className="mt-1 text-foreground/60 text-sm leading-6">
                         {l.trans({
                           en: "Focused changes make business intent clear, so reviews stay fast and releases stay calm.",
                           ko: "집중된 변경은 비즈니스 의도를 선명하게 만들어 리뷰를 빠르게 하고 배포를 안정적으로 유지합니다.",
@@ -192,17 +192,20 @@ export default function Page() {
                 </div>
               </div>
 
-              <div className="mockup-code mt-5 border border-base-content/10 bg-base-100 text-sm shadow-none">
-                <pre data-prefix="$">
+              <div className="mt-5 overflow-x-auto rounded-box border border-foreground/10 bg-background py-4 font-mono text-sm">
+                <pre className="px-6">
+                  <span className="select-none text-foreground/40">$ </span>
                   <code className="text-primary">bun run akan start {appName}</code>
                 </pre>
-                <pre data-prefix="✓">
+                <pre className="px-6">
+                  <span className="select-none text-foreground/40">✓ </span>
                   <code className="text-accent">
                     {l.trans({ en: "web, app, server, db, and infra ready", ko: "웹, 앱, 서버, DB, 인프라 준비 완료" })}
                   </code>
                 </pre>
-                <pre data-prefix="→">
-                  <code className="text-base-content/70">
+                <pre className="px-6">
+                  <span className="select-none text-foreground/40">→ </span>
+                  <code className="text-foreground/70">
                     {l.trans({
                       en: "edit page/_index.tsx around your business",
                       ko: "비즈니스에 맞게 page/_index.tsx를 수정하세요",
@@ -215,56 +218,56 @@ export default function Page() {
         </div>
 
         <div className="grid gap-4 pb-8 md:grid-cols-2 xl:grid-cols-4">
-          <div className="rounded-3xl border border-base-content/10 bg-base-content/4 p-6 backdrop-blur">
+          <div className="rounded-3xl border border-foreground/10 bg-foreground/4 p-6 backdrop-blur">
             <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary text-xl">
               <FaTerminal />
             </div>
-            <h2 className="font-bold text-base-content text-lg">
+            <h2 className="font-bold text-foreground text-lg">
               {l.trans({ en: "Agentic By Design", ko: "에이전틱 설계" })}
             </h2>
-            <p className="mt-2 text-base-content/60 text-sm leading-6">
+            <p className="mt-2 text-foreground/60 text-sm leading-6">
               {l.trans({
                 en: "Describe the business once and let Akan shape the application surfaces around it.",
                 ko: "비즈니스를 한 번 설명하면 Akan이 그 주변의 애플리케이션 표면을 구성합니다.",
               })}
             </p>
           </div>
-          <div className="rounded-3xl border border-base-content/10 bg-base-content/4 p-6 backdrop-blur">
+          <div className="rounded-3xl border border-foreground/10 bg-foreground/4 p-6 backdrop-blur">
             <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary text-xl">
               <FaLayerGroup />
             </div>
-            <h2 className="font-bold text-base-content text-lg">
+            <h2 className="font-bold text-foreground text-lg">
               {l.trans({ en: "One Definition", ko: "하나의 정의" })}
             </h2>
-            <p className="mt-2 text-base-content/60 text-sm leading-6">
+            <p className="mt-2 text-foreground/60 text-sm leading-6">
               {l.trans({
                 en: "Pages, services, database models, and deployment artifacts stay connected in one workspace.",
                 ko: "페이지, 서비스, 데이터베이스 모델, 배포 산출물이 하나의 워크스페이스에서 연결됩니다.",
               })}
             </p>
           </div>
-          <div className="rounded-3xl border border-base-content/10 bg-base-content/4 p-6 backdrop-blur">
+          <div className="rounded-3xl border border-foreground/10 bg-foreground/4 p-6 backdrop-blur">
             <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary text-xl">
               <FaRocket />
             </div>
-            <h2 className="font-bold text-base-content text-lg">
+            <h2 className="font-bold text-foreground text-lg">
               {l.trans({ en: "Less To Review", ko: "리뷰할 것이 적습니다" })}
             </h2>
-            <p className="mt-2 text-base-content/60 text-sm leading-6">
+            <p className="mt-2 text-foreground/60 text-sm leading-6">
               {l.trans({
                 en: "Smaller code surfaces make intent easier to inspect, approve, and ship.",
                 ko: "더 작은 코드 표면은 의도를 확인하고 승인하고 배포하기 쉽게 만듭니다.",
               })}
             </p>
           </div>
-          <div className="rounded-3xl border border-base-content/10 bg-base-content/4 p-6 backdrop-blur">
+          <div className="rounded-3xl border border-foreground/10 bg-foreground/4 p-6 backdrop-blur">
             <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary text-xl">
               <FaShieldAlt />
             </div>
-            <h2 className="font-bold text-base-content text-lg">
+            <h2 className="font-bold text-foreground text-lg">
               {l.trans({ en: "Type-Safe Growth", ko: "타입 안전한 성장" })}
             </h2>
-            <p className="mt-2 text-base-content/60 text-sm leading-6">
+            <p className="mt-2 text-foreground/60 text-sm leading-6">
               {l.trans({
                 en: "Conventions and contracts keep the stack readable as the product expands.",
                 ko: "컨벤션과 계약은 제품이 확장되어도 스택을 읽기 쉽게 유지합니다.",
@@ -273,7 +276,7 @@ export default function Page() {
           </div>
         </div>
 
-        <div className="flex flex-col items-start justify-between gap-4 rounded-3xl border border-base-content/10 bg-base-content/4 p-5 text-base-content/70 text-sm md:flex-row md:items-center">
+        <div className="flex flex-col items-start justify-between gap-4 rounded-3xl border border-foreground/10 bg-foreground/4 p-5 text-foreground/70 text-sm md:flex-row md:items-center">
           <div className="flex items-center gap-3">
             <FaTerminal className="text-primary" />
             <span>
@@ -283,7 +286,7 @@ export default function Page() {
               })}
             </span>
           </div>
-          <div className="flex items-center gap-2 text-base-content/40">
+          <div className="flex items-center gap-2 text-foreground/40">
             <FaBoxOpen />
             <span>{l.trans({ en: "Akan.js template", ko: "Akan.js 템플릿" })}</span>
           </div>

package/templates/app/page/styles.css.template

@@ -1,76 +1,17 @@
 @import "tailwindcss";
 @import "akanjs/ui/styles.css";
 
-@plugin "daisyui" {
-  logs: false;
-  exclude: properties;
-  themes: false;
-}
+/* 테마 시스템(브랜드-중립 기본 팔레트 · @theme inline 매핑 · dark 변형 · 런타임 data-theme 전환)은
+   akanjs/ui/styles.css(프레임워크)가 전부 제공한다. 이 앱은 import 만으로 즉시 동작한다.
 
-@plugin "daisyui/theme" {
-  name: "light";
-  --color-primary: #c33c32;
-  --color-secondary: #2b2e33;
-  --color-accent: #e67e22;
-  --color-accent-content: #ffffff;
-  --color-base-content: #2c3e50;
-  --color-base-100: #fafafa;
-  --color-base-200: #f5f5f5;
-  --color-info: #f1fdff;
-  --color-info-content: #2c3e50;
-  --color-neutral: #292c32;
-  --color-neutral-content: #fafafa;
-  --color-success: #2ecc71;
-  --color-success-content: #fafafa;
-  --color-warning: #f39c12;
-  --color-warning-content: #fafafa;
-  --color-error: #e74c3c;
-  --color-error-content: #fafafa;
-  --color-open: #27ae60;
-  --color-open-content: #fafafa;
+   이 앱만의 브랜드 색을 쓰려면 아래처럼 토큰만 override 하면 된다:
 
-  /* Shape & feel — customize these too, not just colors, to make the theme yours.
-     These are daisyUI v5 theme variables; the values below are the neutral defaults.
-     See `akan guideline show cssRule` and https://daisyui.com/docs/themes/ for the full set. */
-  --radius-selector: 1rem; /* checkbox, toggle, badge corner rounding */
-  --radius-field: 0.5rem; /* button, input, select, tab corner rounding */
-  --radius-box: 1rem; /* card, modal, alert corner rounding */
-  --size-selector: 0.25rem; /* base scale (density) for selector controls */
-  --size-field: 0.25rem; /* base scale (density) for field controls */
-  --border: 1px; /* component border width */
-  --depth: 0; /* 1 = subtle 3D depth on components */
-  --noise: 0; /* 1 = grain texture on surfaces */
-}
-
-@plugin "daisyui/theme" {
-  name: "dark";
-  default: true;
-  --color-primary: #ff493b;
-  --color-secondary: #2b2e33;
-  --color-accent: #d1a23b;
-  --color-accent-content: #ffffff;
-  --color-base-content: #ffffff;
-  --color-base-100: #1a1a1a;
-  --color-base-200: #2a2a2a;
-  --color-info: #173b78;
-  --color-info-content: #ffffff;
-  --color-neutral: #3ed13b;
-  --color-neutral-content: #ffffff;
-  --color-success: #255fc3;
-  --color-success-content: #ffffff;
-  --color-warning: #ffcc00;
-  --color-warning-content: #ffffff;
-  --color-error: #f02020;
-  --color-error-content: #ffffff;
-  --color-open: #10fc00;
-
-  /* Keep shape & feel consistent with the light theme (usually the same values across modes). */
-  --radius-selector: 1rem;
-  --radius-field: 0.5rem;
-  --radius-box: 1rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 0;
-  --noise: 0;
-}
+   :root,
+   [data-theme="dark"] {
+     --primary: #xxxxxx;
+     --primary-foreground: #ffffff;
+   }
+   [data-theme="light"] {
+     --primary: #xxxxxx;
+   }
+*/

package/templates/appSample/lib/task/Task.Template.tsx

@@ -5,7 +5,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     filename: "Task.Template.tsx",
     content: `"use client";
 import { st, usePage } from "@apps/${dict.appName}/client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { Field, Layout } from "akanjs/ui";
 
 // ===== Task.Template.tsx =====
@@ -25,7 +25,7 @@ export const General = ({ className }: TaskEditProps) => {
   const { l } = usePage();
 
   return (
-    <Layout.Template className={clsx("flex flex-col gap-4", className)}>
+    <Layout.Template className={cn("flex flex-col gap-4", className)}>
       <Field.Text
         label={l("task.title")}
         desc={l("task.title.desc")}

package/templates/appSample/lib/task/Task.Unit.tsx

@@ -4,8 +4,8 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "Task.Unit.tsx",
     content: `import { type cnst, usePage } from "@apps/${dict.appName}/client";
-import { type ModelProps, clsx } from "akanjs/client";
-import { Layout } from "akanjs/ui";
+import { type ModelProps, cn } from "akanjs/client";
+import { badgeRecipe, Layout } from "akanjs/ui";
 
 // ===== Task.Unit.tsx =====
 // Convention: lib/<module>/ — PascalCase .tsx, Unit suffix = card/list-item component.
@@ -22,25 +22,25 @@ interface CardProps extends ModelProps<"task", cnst.LightTask> {
 export const Card = ({ task, className, href }: CardProps) => {
   const { l } = usePage();
   const statusBadge = {
-    todo: "badge-ghost",
-    inProgress: "badge-primary",
-    completed: "badge-success",
+    todo: badgeRecipe({ variant: "default" }),
+    inProgress: badgeRecipe({ variant: "primary" }),
+    completed: badgeRecipe({ variant: "success" }),
   }[task.status];
 
   return (
     <Layout.Unit
-      className={clsx(
-        "rounded-lg border border-base-content/10 bg-base-100 p-4 transition-shadow hover:shadow-md",
+      className={cn(
+        "rounded-lg border border-foreground/10 bg-background p-4 transition-shadow hover:shadow-md",
         className,
       )}
       href={href}
     >
       <div className="flex items-start justify-between gap-2">
-        <span className="font-semibold text-base-content">{task.title}</span>
-        <span className={clsx("badge badge-sm shrink-0", statusBadge)}>{l(\`taskStatus.\${task.status}\`)}</span>
+        <span className="font-semibold text-foreground">{task.title}</span>
+        <span className={cn(statusBadge, "shrink-0")}>{l(\`taskStatus.\${task.status}\`)}</span>
       </div>
       {task.due && (
-        <div className="mt-2 text-base-content/60 text-xs">
+        <div className="mt-2 text-foreground/60 text-xs">
           {l("task.taskDueLabel")} {task.due.toDate().toLocaleDateString()}
         </div>
       )}
@@ -52,7 +52,7 @@ export const Card = ({ task, className, href }: CardProps) => {
 // Mini: smaller inline display (tag, chip style)
 // export const Mini = ({ task }: MiniProps) => (
 //   <span className="inline-flex items-center gap-1 text-sm">
-//     <span className={clsx("badge badge-xs", statusBadge)}>{task.status}</span>
+//     <span className={cn("badge badge-xs", statusBadge)}>{task.status}</span>
 //     {task.title}
 //   </span>
 // );

package/templates/appSample/lib/task/Task.Util.tsx

@@ -5,7 +5,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     filename: "Task.Util.tsx",
     content: `"use client";
 import { fetch, st, usePage } from "@apps/${dict.appName}/client";
-import { Model } from "akanjs/ui";
+import { buttonRecipe, Dropdown, Model } from "akanjs/ui";
 
 // ===== Task.Util.tsx =====
 // Convention: lib/<module>/ — PascalCase .tsx, Util suffix = action buttons/utility components.
@@ -20,7 +20,7 @@ interface StartProps {
 
 export const Start = ({ taskId }: StartProps) => (
   <button
-    className="btn btn-xs border-primary/20 bg-primary/10 text-primary hover:bg-primary hover:text-primary-content"
+    className={buttonRecipe({ size: "xs" }, "border-primary/20 bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground")}
     onClick={() => st.do.startTask(taskId)}
   >
     {usePage().l("task.taskStart")}
@@ -33,7 +33,7 @@ interface CompleteProps {
 
 export const Complete = ({ taskId }: CompleteProps) => (
   <button
-    className="btn btn-xs border-success/20 bg-success/10 text-success hover:bg-success hover:text-success-content"
+    className={buttonRecipe({ size: "xs" }, "border-success/20 bg-success/10 text-success hover:bg-success hover:text-success-foreground")}
     onClick={() => st.do.completeTask(taskId)}
   >
     {usePage().l("task.taskComplete")}
@@ -46,7 +46,7 @@ interface RemoveProps {
 
 export const Remove = ({ taskId }: RemoveProps) => (
   <Model.Remove modelId={taskId} slice={fetch.slice.task}>
-    <button className="btn btn-xs btn-ghost text-error">{usePage().l("task.taskRemove")}</button>
+    <button className={buttonRecipe({ variant: "ghost", size: "xs" }, "text-destructive")}>{usePage().l("task.taskRemove")}</button>
   </Model.Remove>
 );
 
@@ -58,31 +58,30 @@ interface ToolboxProps {
 export const Toolbox = ({ taskId, status }: ToolboxProps) => {
   const { l } = usePage();
   return (
-    <div className="dropdown dropdown-end">
-      <button tabIndex={0} className="btn btn-xs btn-ghost">
-        ···
-      </button>
-      <ul
-        tabIndex={0}
-        className="dropdown-content menu z-[1] w-40 rounded-box border border-base-content/10 bg-base-100 p-2 shadow"
-      >
-        {status === "todo" && (
+    <Dropdown
+      buttonClassName={buttonRecipe({ variant: "ghost", size: "xs" })}
+      value={<span>···</span>}
+      dropdownClassName="w-40 rounded-box border border-foreground/10 bg-background p-2"
+      content={
+        <>
+          {status === "todo" && (
+            <li>
+              <button onClick={() => st.do.startTask(taskId)}>{l("task.taskStart")}</button>
+            </li>
+          )}
+          {status === "inProgress" && (
+            <li>
+              <button onClick={() => st.do.completeTask(taskId)}>{l("task.taskComplete")}</button>
+            </li>
+          )}
           <li>
-            <button onClick={() => st.do.startTask(taskId)}>{l("task.taskStart")}</button>
+            <button className="text-destructive" onClick={() => st.do.removeTask(taskId)}>
+              {l("task.taskRemove")}
+            </button>
           </li>
-        )}
-        {status === "inProgress" && (
-          <li>
-            <button onClick={() => st.do.completeTask(taskId)}>{l("task.taskComplete")}</button>
-          </li>
-        )}
-        <li>
-          <button className="text-error" onClick={() => st.do.removeTask(taskId)}>
-            {l("task.taskRemove")}
-          </button>
-        </li>
-      </ul>
-    </div>
+        </>
+      }
+    />
   );
 };
 
@@ -97,7 +96,7 @@ export const Toolbox = ({ taskId, status }: ToolboxProps) => {
 // New Task Button: Model.NewWrapper — triggers new Task creation form
 // export const NewTask = () => (
 //   <Model.NewWrapper partial={{}}>
-//     <button className="btn btn-primary btn-sm">+ New Task</button>
+//     <button className={buttonRecipe({ variant: "primary", size: "sm" })}>+ New Task</button>
 //   </Model.NewWrapper>
 // );
 `,