akanjs 2.4.2-rc.3 → 3.0.0-alpha.0

package/base/baseEnv.ts

@@ -13,8 +13,6 @@ export interface BaseEnv {
   appName: string;
   environment: Environment;
   operationMode: "local" | "edge" | "cloud" | "module";
-  tunnelUsername: string;
-  tunnelPassword: string;
   databaseMode?: DatabaseMode;
 }
 export type BackendEnv = BaseEnv & {
@@ -87,16 +85,12 @@ export const getEnv = (): ClientEnv => {
   const environment = (process.env.AKAN_PUBLIC_ENV ?? "debug") as BaseEnv["environment"];
   const operationMode = (process.env.AKAN_PUBLIC_OPERATION_MODE ??
     (environment === "local" ? "local" : "cloud")) as BaseEnv["operationMode"];
-  const tunnelUsername = process.env.SSH_TUNNEL_USERNAME ?? "root";
-  const tunnelPassword = process.env.SSH_TUNNEL_PASSWORD ?? repoName;
   const baseEnv: BaseEnv = {
     repoName,
     serveDomain,
     appName,
     environment,
     operationMode,
-    tunnelUsername,
-    tunnelPassword,
     databaseMode: process.env.AKAN_DATABASE_MODE as DatabaseMode | undefined,
   } as const;
   const side = typeof window === "undefined" ? "server" : "client";

package/client/cn.ts

@@ -0,0 +1,52 @@
+import { type ClassNameValue, extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * Akan's semantic color tokens beyond tailwind-merge's built-in Tailwind palette.
+ * Registering them under `theme.color` teaches tailwind-merge that `bg-*`/`text-*`/
+ * `border-*`/… built from these names belong to the same conflict group, so
+ * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
+ */
+export const colorTokens = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "muted",
+  "muted-foreground",
+  "destructive",
+  "destructive-foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "info",
+  "info-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "neutral",
+  "neutral-foreground",
+  "open",
+  "open-foreground",
+  "border",
+  "input",
+  "ring",
+];
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: colorTokens,
+    },
+  },
+});
+
+/** The one class-combining function: joins strings/arrays/conditional parts (`cond && "x"`) and
+ *  resolves Tailwind conflicts with a shared tailwind-merge instance that knows Akan's semantic
+ *  color tokens. clsx-style object syntax (`{ x: cond }`) is not supported — write `cond && "x"`. */
+export const cn = (...inputs: ClassNameValue[]) => twMerge(...inputs);

package/client/csrTypes.ts

@@ -270,8 +270,8 @@ export const defaultPageState: PageState = {
   gesture: true,
   cache: false,
   ssr: "stream",
-  topSafeAreaColor: "var(--color-base-100, Canvas)",
-  bottomSafeAreaColor: "var(--color-base-100, Canvas)",
+  topSafeAreaColor: "var(--color-background, Canvas)",
+  bottomSafeAreaColor: "var(--color-background, Canvas)",
 };
 
 export interface Location {

package/client/frameConfig.ts

@@ -152,8 +152,8 @@ export function resolvePageState({
         : (config.gesture ?? false),
     cache: config.cache ?? false,
     ssr: config.ssr ?? "stream",
-    topSafeAreaColor: config.topSafeAreaColor ?? "var(--color-base-100, Canvas)",
-    bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(--color-base-100, Canvas)",
+    topSafeAreaColor: config.topSafeAreaColor ?? "var(color-background, Canvas)",
+    bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(color-background, Canvas)",
   };
 }
 

package/client/index.ts

@@ -1,4 +1,5 @@
 export * from "./clientRuntime";
+export * from "./cn";
 export * from "./cookie";
 export * from "./createFont";
 export * from "./csrTypes";

package/client/types.ts

@@ -1,11 +1,7 @@
 import type { BaseInsight } from "akanjs/constant";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
-import { type ClassValue, clsx as clsxLib } from "clsx";
 import type { ReactElement, ReactNode } from "react";
 
-/** Composes class names with the shared clsx implementation. */
-export const clsx = (...args: ClassValue[]) => clsxLib(...args);
-
 export type ReactFontStyle = "normal" | "italic" | "oblique";
 export type ReactFontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
 export type ReactFontCategory = "monospace" | "sans-serif" | "serif" | "display";

package/common/index.ts

@@ -15,6 +15,7 @@ export { isDayjs } from "./isDayjs";
 export { isEmail } from "./isEmail";
 export { isPhoneNumber } from "./isPhoneNumber";
 export { isQueryEqual } from "./isQueryEqual";
+export { isThenable } from "./isThenable";
 export { isValidDate } from "./isValidDate";
 export { decodeJwtPayload } from "./jwtDecode";
 export { Logger, type LoggerSink, type LoggerSinkEntry, type LogLevel } from "./Logger";

package/common/isThenable.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether a value is awaitable. Duck-typed rather than `instanceof Promise` so a thenable produced by a
+ * different realm or promise implementation still counts — a same-realm check silently misses those.
+ *
+ * `<Button>` uses this to decide whether a click handler is asynchronous: a handler that returns a
+ * thenable gets the pending/success states, a plain one renders as an ordinary button. That makes the
+ * distinction impossible to forget, unlike an explicit flag.
+ */
+export const isThenable = (value: unknown): value is PromiseLike<unknown> =>
+  !!value &&
+  (typeof value === "object" || typeof value === "function") &&
+  typeof Reflect.get(value, "then") === "function";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.4.2-rc.3",
+  "version": "3.0.0-alpha.0",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -178,10 +178,11 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
     "immer": "^11.1.8",
-    "sharp": "^0.34.5"
+    "sharp": "^0.34.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.3.0"
   },
   "peerDependencies": {
     "@capacitor-community/contacts": "^7.2.0",
@@ -210,7 +211,6 @@
     "chance": "^1.1.13",
     "cordova-plugin-purchase": "^13.16.0",
     "croner": "^10.0.1",
-    "daisyui": "5.5.23",
     "firebase": "^12.13.0",
     "ioredis": "^5.10.1",
     "mermaid": "^11.15.0",
@@ -308,9 +308,6 @@
     "croner": {
       "optional": true
     },
-    "daisyui": {
-      "optional": true
-    },
     "firebase": {
       "optional": true
     },

package/server/akanApp.ts

@@ -1,3 +1,5 @@
+
+
 import { mkdir, readdir, rm } from "node:fs/promises";
 import path from "node:path";
 import { Logger } from "akanjs/common";

package/server/systemPageDocument.tsx

@@ -39,19 +39,19 @@ export const SYSTEM_PAGE_STATUS_COPY = {
 } as const;
 
 const FALLBACK_STYLE = `
-:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-base-content: #ffffff; --akan-base-100: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
-body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-base-100); color: var(--akan-base-content); }
+:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
+body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }
 a { color: inherit; }
-.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-base-100), #111); }
+.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }
 .akan-system-card { width: min(720px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(145deg, rgba(42, 42, 42, 0.96), rgba(43, 46, 51, 0.78)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); padding: clamp(28px, 6vw, 56px); }
 .akan-system-status { margin: 0 0 18px; font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); line-height: 0.85; letter-spacing: -0.08em; color: var(--akan-primary); }
 .akan-system-eyebrow { margin: 0 0 10px; color: var(--akan-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
-.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-base-content); }
+.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-foreground); }
 .akan-system-description { margin: 22px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.75; }
 .akan-system-path { margin: 22px 0 0; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(26, 26, 26, 0.72); padding: 12px 14px; color: rgba(255, 255, 255, 0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; }
 .akan-system-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
-.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-base-content); padding: 0 18px; font-weight: 800; text-decoration: none; }
-.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-base-content); }
+.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-foreground); padding: 0 18px; font-weight: 800; text-decoration: none; }
+.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-foreground); }
 .akan-system-details { margin-top: 28px; max-height: 260px; overflow: auto; border-radius: 18px; background: rgba(26, 26, 26, 0.82); border: 1px solid rgba(240, 32, 32, 0.22); padding: 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }
 `;
 
@@ -73,9 +73,9 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
         <style data-akan-system-page>{FALLBACK_STYLE}</style>
       </head>
       <body>
-        <main className="akan-system-page min-h-screen bg-base-100 text-base-content">
+        <main className="akan-system-page min-h-screen bg-background text-foreground">
           <section
-            className="akan-system-card rounded-3xl border border-base-content/10 bg-base-content/4 p-8 shadow-2xl backdrop-blur-xl"
+            className="akan-system-card rounded-3xl border border-foreground/10 bg-foreground/4 p-8 shadow-2xl backdrop-blur-xl"
             aria-labelledby="akan-system-title"
           >
             <p className="akan-system-status text-primary">{copy.status}</p>
@@ -83,15 +83,15 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
             <h1 id="akan-system-title" className="akan-system-title font-black">
               {copy.title}
             </h1>
-            <p className="akan-system-description text-base-content/70">{copy.description}</p>
-            <p className="akan-system-path border border-base-content/10 bg-base-200/50" aria-label="Requested path">
+            <p className="akan-system-description text-foreground/70">{copy.description}</p>
+            <p className="akan-system-path border border-foreground/10 bg-muted/50" aria-label="Requested path">
               {options.pathname}
             </p>
             <div className="akan-system-actions">
-              <a className="akan-system-action btn btn-primary" href={options.homeHref}>
+              <a className="akan-system-action" href={options.homeHref}>
                 {copy.actionLabel}
               </a>
-              <a className="akan-system-action akan-system-secondary btn" href={options.pathname}>
+              <a className="akan-system-action akan-system-secondary" href={options.pathname}>
                 Try again
               </a>
             </div>

package/store/baseSt.ts

@@ -45,8 +45,8 @@ export class BaseStore extends store("base" as const, () => ({
     gesture: true,
     cache: false,
     ssr: "stream",
-    topSafeAreaColor: "var(--color-base-100, Canvas)",
-    bottomSafeAreaColor: "var(--color-base-100, Canvas)",
+    topSafeAreaColor: "var(--color-background, Canvas)",
+    bottomSafeAreaColor: "var(--color-background, Canvas)",
   } as PageState,
   devMode: false,
   deviceToken: "" as string,

package/test/signalTestRuntime.ts

@@ -93,8 +93,6 @@ export const setupSignalTestTarget = async <Fetch = FetchProxy>(
       appName: name,
       environment: "testing",
       operationMode: "local",
-      tunnelUsername: process.env.SSH_TUNNEL_USERNAME ?? "username",
-      tunnelPassword: process.env.SSH_TUNNEL_PASSWORD ?? process.env.AKAN_PUBLIC_REPO_NAME ?? "password",
     };
     TestServer.applyProcessEnv(env, resolvedOptions);
 

package/types/base/baseEnv.d.ts

@@ -6,8 +6,6 @@ export interface BaseEnv {
     appName: string;
     environment: Environment;
     operationMode: "local" | "edge" | "cloud" | "module";
-    tunnelUsername: string;
-    tunnelPassword: string;
     databaseMode?: DatabaseMode;
 }
 export type BackendEnv = BaseEnv & {

package/types/client/cn.d.ts

@@ -0,0 +1,12 @@
+import { type ClassNameValue } from "tailwind-merge";
+/**
+ * Akan's semantic color tokens beyond tailwind-merge's built-in Tailwind palette.
+ * Registering them under `theme.color` teaches tailwind-merge that `bg-*`/`text-*`/
+ * `border-*`/… built from these names belong to the same conflict group, so
+ * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
+ */
+export declare const colorTokens: string[];
+/** The one class-combining function: joins strings/arrays/conditional parts (`cond && "x"`) and
+ *  resolves Tailwind conflicts with a shared tailwind-merge instance that knows Akan's semantic
+ *  color tokens. clsx-style object syntax (`{ x: cond }`) is not supported — write `cond && "x"`. */
+export declare const cn: (...inputs: ClassNameValue[]) => string;

package/types/client/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./clientRuntime.d.ts";
+export * from "./cn.d.ts";
 export * from "./cookie.d.ts";
 export * from "./createFont.d.ts";
 export * from "./csrTypes.d.ts";

package/types/client/types.d.ts

@@ -1,9 +1,6 @@
 import type { BaseInsight } from "akanjs/constant";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
-import { type ClassValue } from "clsx";
 import type { ReactElement, ReactNode } from "react";
-/** Composes class names with the shared clsx implementation. */
-export declare const clsx: (...args: ClassValue[]) => string;
 export type ReactFontStyle = "normal" | "italic" | "oblique";
 export type ReactFontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
 export type ReactFontCategory = "monospace" | "sans-serif" | "serif" | "display";

package/types/common/index.d.ts

@@ -11,6 +11,7 @@ export { isDayjs } from "./isDayjs.d.ts";
 export { isEmail } from "./isEmail.d.ts";
 export { isPhoneNumber } from "./isPhoneNumber.d.ts";
 export { isQueryEqual } from "./isQueryEqual.d.ts";
+export { isThenable } from "./isThenable.d.ts";
 export { isValidDate } from "./isValidDate.d.ts";
 export { decodeJwtPayload } from "./jwtDecode.d.ts";
 export { Logger, type LoggerSink, type LoggerSinkEntry, type LogLevel } from "./Logger.d.ts";

package/types/common/isThenable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a value is awaitable. Duck-typed rather than `instanceof Promise` so a thenable produced by a
+ * different realm or promise implementation still counts — a same-realm check silently misses those.
+ *
+ * `<Button>` uses this to decide whether a click handler is asynchronous: a handler that returns a
+ * thenable gets the pending/success states, a plain one renders as an ordinary button. That makes the
+ * distinction impossible to forget, unlike an explicit flag.
+ */
+export declare const isThenable: (value: unknown) => value is PromiseLike<unknown>;

package/types/ui/Badge.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+import { type BadgeVariants, badgeRecipe } from "./recipe.d.ts";
+export { badgeRecipe, type BadgeVariants };
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & BadgeVariants;
+/** Status/label pill. Route-overridable via `page/**\/_overrides.tsx` (slot `Badge`). */
+export declare const Badge: import("react").ComponentType<BadgeProps>;

package/types/ui/Button.d.ts

@@ -1,16 +1,36 @@
 import type React from "react";
 import { type ButtonHTMLAttributes } from "react";
-export type ButtonProps<Result> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-    /** Async-aware click handler. Call onError to show the localized error state without throwing. */
-    onClick: (e: React.MouseEvent<HTMLButtonElement>, { onError }: {
+import { type ButtonVariants, buttonRecipe } from "./recipe.d.ts";
+export { buttonRecipe, type ButtonVariants };
+export type ButtonProps<Result> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & ButtonVariants & {
+    /**
+     * Click handler. Returning a promise is what opts this button into the async states — a plain
+     * synchronous handler renders as an ordinary button with no spinner. Call onError to show the
+     * localized error state without throwing.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>, { onError }: {
         onError: (error: string) => void;
     }) => Promise<Result> | Result;
     /** Called after the button briefly enters success state. */
     onSuccess?: (result: Result) => void;
+    /**
+     * How the pending/success indicator is drawn. Both modes keep the button's box fixed — CSS cannot
+     * animate an auto width, so a resizing button can only ever snap.
+     *
+     * `hold` (default) fades a bare indicator over the children, so the box stays exactly the children's
+     * size. `replace` cross-fades to a labelled indicator ("Processing…"); both labels stay stacked in the
+     * DOM, so the box is the wider of the two from the start and still never moves — at the cost of an idle
+     * button that is as wide as its longest state.
+     */
+    loadingMode?: "hold" | "replace";
+    /** Whether a failed action renders its message under the button. Off leaves it to the framework toast. */
+    showError?: boolean;
 };
 /**
- * Async-aware button. Resolves to a route-scoped override when a `page/**\/_overrides.tsx`
- * in the route's ancestry declares one, otherwise renders {@link DefaultButton}. The public
- * generic signature is preserved, so `<Button<Todo> onSuccess={(r: Todo) => …} />` still infers.
+ * Button whose async states are driven by the handler's return value: return a promise and it shows a
+ * pending indicator, then a brief success state; return nothing and it behaves as a plain button. Resolves
+ * to a route-scoped override when a `page/**\/_overrides.tsx` in the route's ancestry declares one,
+ * otherwise renders {@link DefaultButton}. The public generic signature is preserved, so
+ * `<Button<Todo> onSuccess={(r: Todo) => …} />` still infers.
  */
 export declare const Button: <Result = unknown>(props: ButtonProps<Result>) => React.ReactElement<ButtonProps<Result>, string | React.JSXElementConstructor<any>>;

package/types/ui/RecentTime.d.ts

@@ -6,7 +6,7 @@ export interface RecentTimeProps {
     breakUnit?: Intl.RelativeTimeFormatUnit;
     /** Use compact automatic formatting or always include date and time. */
     format?: "full" | "auto";
-    /** Additional classes for the tooltip span. */
+    /** Additional classes for the trigger span. */
     className?: string;
 }
 export declare const RecentTime: ({ date, breakUnit, format, className }: RecentTimeProps) => import("react/jsx-runtime").JSX.Element | null;

package/types/ui/Signal/Collapse.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/**
+ * Signal 도큐먼트/테스트 카드의 접이식 컨테이너.
+ * daisyui `collapse`(checkbox+CSS) → 네이티브 `<details>/<summary>`. 플러그인 의존 없음.
+ */
+export declare const SignalCollapse: ({ summary, children, open, className, contentClassName, }: {
+    summary: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    className?: string;
+    contentClassName?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Signal/style.d.ts

@@ -2,14 +2,13 @@ export declare const signalUi: {
     sectionTitle: string;
     sectionDescription: string;
     sectionPanel: string;
-    endpointCard: string;
-    endpointContent: string;
     tablePanel: string;
+    tableClass: string;
     inputRow: string;
     inputLabel: string;
     codePanel: string;
 };
-export declare const getEndpointBadgeClassName: (type: string) => "badge badge-primary" | "badge badge-secondary";
-export declare const getGuardBadgeClassName: (guard: string) => "badge badge-primary" | "badge badge-secondary" | "badge";
-export declare const getStatusBadgeClassName: (status: string) => "badge badge-outline" | "badge badge-primary" | "badge badge-error";
-export declare const getStatusTextareaClassName: (status: string) => "" | "border-error text-error" | "border-primary" | "textarea-disabled";
+export declare const getEndpointBadgeClassName: (type: string) => string;
+export declare const getGuardBadgeClassName: (guard: string) => string;
+export declare const getStatusBadgeClassName: (status: string) => string;
+export declare const getStatusTextareaClassName: (status: string) => "" | "pointer-events-none opacity-50" | "border-destructive text-destructive" | "border-primary";

package/types/ui/Switch.d.ts

@@ -0,0 +1,14 @@
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    /** 켜짐 상태 색. daisyui `toggle-accent/toggle-primary` 대체. */
+    variant?: "primary" | "accent" | "success";
+}
+/**
+ * 순수 Tailwind 스위치 (`<button role="switch">`). daisyui `toggle`/`swap` 대체.
+ * `<button>` 이라 포커스·Space/Enter 토글이 네이티브로 제공된다. controlled/uncontrolled 모두 지원.
+ */
+export declare const Switch: ({ checked, defaultChecked, disabled, onChange, className, variant, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface TooltipProps {
+    /** 툴팁에 표시할 내용. 비어 있으면 트리거만 그대로 렌더한다. */
+    content?: ReactNode;
+    children: ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+    /** 색상 변형. daisyui `tooltip-primary/info` 대체. */
+    variant?: "default" | "primary" | "info";
+}
+export declare const Tooltip: import("react").ComponentType<TooltipProps>;

package/types/ui/UiOverride/Provider.d.ts

@@ -1,14 +1,15 @@
 import { type ReactNode } from "react";
-import { type AkanUiOverrides } from "./context.d.ts";
+import { type AkanUiOverrideManifest } from "./context.d.ts";
 export interface UiOverrideProviderProps {
-    /** Override map for this subtree; merged over any ancestor overrides. */
-    value?: Partial<AkanUiOverrides>;
+    /** Override manifest for this subtree; merged over any ancestor overrides. */
+    value?: AkanUiOverrideManifest;
     children?: ReactNode;
 }
 /**
  * Supplies route-scoped UI overrides. Merges its own `value` over the overrides
  * inherited from ancestors so the closest declaration wins, matching nested
- * `_overrides.tsx` resolution. `routeTreeBuilder` mounts one of these per route
- * node once the `_overrides.tsx` convention is wired.
+ * `_overrides.tsx` resolution. The `recipes` map merges per-slot (a child that
+ * swaps only `button` keeps an ancestor's `badge` swap). `routeTreeBuilder`
+ * mounts one of these per route node once the `_overrides.tsx` convention is wired.
  */
 export declare const UiOverrideProvider: ({ value, children }: UiOverrideProviderProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/UiOverride/context.d.ts

@@ -1,4 +1,6 @@
 import { type ComponentType } from "react";
+import type { ClassNameValue as ClassValue } from "tailwind-merge";
+import type { BadgeProps } from "../Badge.d.ts";
 import type { ButtonProps } from "../Button.d.ts";
 import type { DatePickerProps, RangePickerProps, TimePickerProps } from "../DatePicker.d.ts";
 import type { DropdownProps } from "../Dropdown.d.ts";
@@ -14,9 +16,11 @@ import type { ModalProps } from "../Modal.d.ts";
 import type { PaginationProps } from "../Pagination.d.ts";
 import type { PopconfirmProps } from "../Popconfirm.d.ts";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio.d.ts";
+import type { BadgeVariants, ButtonVariants } from "../recipe.d.ts";
 import type { SelectProps } from "../Select.d.ts";
 import type { TableProps } from "../Table.d.ts";
 import type { MultiProps as ToggleSelectMultiProps, ToggleSelectProps } from "../ToggleSelect.d.ts";
+import type { TooltipProps } from "../Tooltip.d.ts";
 import type { UnauthorizedProps } from "../Unauthorized.d.ts";
 /**
  * Registry of framework UI components an app may replace per-route through a
@@ -31,6 +35,7 @@ import type { UnauthorizedProps } from "../Unauthorized.d.ts";
  * before they can be listed here without losing call-site typing.
  */
 export interface AkanUiOverrides {
+    Badge: ComponentType<BadgeProps>;
     Modal: ComponentType<ModalProps>;
     Empty: ComponentType<EmptyProps>;
     Pagination: ComponentType<PaginationProps>;
@@ -38,6 +43,7 @@ export interface AkanUiOverrides {
     Dropdown: ComponentType<DropdownProps>;
     Table: ComponentType<TableProps>;
     Menu: ComponentType<MenuProps>;
+    Tooltip: ComponentType<TooltipProps>;
     Unauthorized: ComponentType<UnauthorizedProps>;
     Button: ComponentType<ButtonProps<unknown>>;
     Select: ComponentType<SelectProps<string | number | boolean | null | undefined>>;
@@ -64,9 +70,24 @@ export interface AkanUiOverrides {
 export type AkanUiOverrideName = keyof AkanUiOverrides;
 /** Prop contract an app-authored Modal override must satisfy. */
 export type AkanModalComponent = AkanUiOverrides["Modal"];
+/**
+ * Registry of framework recipe slots an app may swap through the same `_overrides.tsx`
+ * manifest: `override({ recipes: { button: neonButtonRecipe } })`. A recipe swap changes
+ * only the className factory — the component's structure/behavior (async states, focus,
+ * a11y) is untouched. Each replacement must accept the framework recipe's full variant
+ * contract, so every call site keeps working.
+ */
+export interface AkanUiRecipes {
+    button: (variants?: ButtonVariants, className?: ClassValue) => string;
+    badge: (variants?: BadgeVariants, className?: ClassValue) => string;
+}
+/** Shape of an `_overrides.tsx` manifest: component slots plus an optional recipe-slot map. */
+export type AkanUiOverrideManifest = Partial<AkanUiOverrides> & {
+    recipes?: Partial<AkanUiRecipes>;
+};
 /**
  * Holds the override map for the current route subtree. Empty at the root, then
  * merged (child wins) by each nested `UiOverrideProvider`, mirroring how nested
  * `_layout.tsx` / `_overrides.tsx` stack down the route tree.
  */
-export declare const UiOverrideContext: import("react").Context<Partial<AkanUiOverrides>>;
+export declare const UiOverrideContext: import("react").Context<AkanUiOverrideManifest>;

package/types/ui/UiOverride/index.d.ts

@@ -1,5 +1,6 @@
-export type { AkanModalComponent, AkanUiOverrideName, AkanUiOverrides } from "./context.d.ts";
+export type { AkanModalComponent, AkanUiOverrideManifest, AkanUiOverrideName, AkanUiOverrides, AkanUiRecipes, } from "./context.d.ts";
 export { createOverridable } from "./createOverridable.d.ts";
 export { override } from "./override.d.ts";
 export { UiOverrideProvider, type UiOverrideProviderProps } from "./Provider.d.ts";
 export { useUiOverride } from "./useUiOverride.d.ts";
+export { useUiRecipe } from "./useUiRecipe.d.ts";

package/types/ui/UiOverride/override.d.ts

@@ -1,18 +1,19 @@
-import type { AkanUiOverrides } from "./context.d.ts";
+import type { AkanUiOverrideManifest } from "./context.d.ts";
 /**
  * Typed manifest builder for a `page/_overrides.tsx` file:
  *
  * ```tsx
- * export default override({ Modal: BrandModal });
+ * export default override({ Modal: BrandModal, recipes: { button: neonButtonRecipe } });
  * ```
  *
- * It type-checks each binding against that slot's public component contract and rejects unknown slot names as
+ * It type-checks each binding against that slot's public contract and rejects unknown slot names as
  * excess properties — so the manifest is validated at compile time and app components need no annotation of
- * their own. Keys are the framework component names (`Modal`), matching `useUiOverride` and the `<Modal>` call
- * sites.
+ * their own. Component keys are the framework component names (`Modal`), matching `useUiOverride` and the
+ * `<Modal>` call sites; the optional `recipes` map swaps recipe slots (look only, behavior untouched),
+ * matching `useUiRecipe` and the recipe names in `AkanUiRecipes`.
  *
  * It is a pure, server-safe identity function (no React, no `createContext`), so the manifest needs no
  * `"use client"` directive. The framework generates a `"use client"` wrapper layout that reads this map and
  * mounts the override provider around the route subtree (see `writeGeneratedOverridesLayoutFile`).
  */
-export declare const override: (overrides: Partial<AkanUiOverrides>) => Partial<AkanUiOverrides>;
+export declare const override: (overrides: AkanUiOverrideManifest) => AkanUiOverrideManifest;

package/types/ui/UiOverride/useUiRecipe.d.ts

@@ -0,0 +1,8 @@
+import { type AkanUiRecipes } from "./context.d.ts";
+/**
+ * Resolves the active recipe swap for a framework recipe slot in the current route
+ * subtree, or `undefined` when no `_overrides.tsx` in the ancestry declares one.
+ * Framework components consume it as `const recipe = useUiRecipe("button") ?? buttonRecipe;`
+ * so an app can restyle every instance app/route-wide without touching behavior.
+ */
+export declare const useUiRecipe: <K extends keyof AkanUiRecipes>(name: K) => AkanUiRecipes[K] | undefined;

package/types/ui/index.d.ts

@@ -1,4 +1,5 @@
 export { animated } from "./animated.d.ts";
+export { Badge } from "./Badge.d.ts";
 export { BottomSheet, type BottomSheetRef } from "./BottomSheet.d.ts";
 export { Button } from "./Button.d.ts";
 export { ClientSide } from "./ClientSide.d.ts";
@@ -34,12 +35,15 @@ export { Portal } from "./Portal.d.ts";
 export { Radio } from "./Radio.d.ts";
 export { RecentTime } from "./RecentTime.d.ts";
 export { Refresh } from "./Refresh.d.ts";
+export { type BadgeVariants, type ButtonVariants, badgeRecipe, buttonRecipe, type InputSurfaceVariants, inputRecipe, recipe, tv, } from "./recipe.d.ts";
 export { ScreenNavigator } from "./ScreenNavigator.d.ts";
 export { Select } from "./Select.d.ts";
 export { Signal } from "./Signal.d.ts";
+export { Switch, type SwitchProps } from "./Switch.d.ts";
 export { System, type WebAppManifest } from "./System.d.ts";
 export { Tab } from "./Tab.d.ts";
 export { Table } from "./Table.d.ts";
 export { ToggleSelect } from "./ToggleSelect.d.ts";
-export { type AkanModalComponent, type AkanUiOverrideName, type AkanUiOverrides, createOverridable, override, UiOverrideProvider, type UiOverrideProviderProps, useUiOverride, } from "./UiOverride.d.ts";
+export { Tooltip, type TooltipProps } from "./Tooltip.d.ts";
+export { type AkanModalComponent, type AkanUiOverrideManifest, type AkanUiOverrideName, type AkanUiOverrides, type AkanUiRecipes, createOverridable, override, UiOverrideProvider, type UiOverrideProviderProps, useUiOverride, useUiRecipe, } from "./UiOverride.d.ts";
 export { Unauthorized } from "./Unauthorized.d.ts";