akanjs 3.0.0-alpha.2 → 3.0.0-alpha.4

package/types/server/cachePolicy.d.ts

@@ -78,45 +78,14 @@ export declare function shouldStoreRouteCache(input: {
 }): RouteCacheRenderState;
 export declare function hasRouteCacheInvalidationScope(invalidation?: RouteCacheInvalidation): boolean;
 export declare function shouldInvalidateRouteCacheEntry(metadata: RouteCacheMetadata, invalidation: RouteCacheInvalidation): boolean;
-export interface LruTtlCacheOptions<T> {
-    /**
-     * Measures one entry's payload. Entry count alone says nothing about a cache whose entries span
-     * three orders of magnitude, and a byte ceiling needs a running total to enforce. The default
-     * reports 0 rather than guessing, so `byteSize` stays honest about not knowing.
-     */
-    sizeOf?: (value: T) => number;
-    /** Total payload ceiling. 0 leaves the cache bounded only by `maxEntries`. */
-    maxBytes?: number;
-    /** An entry over this is not stored at all, rather than evicting everything else to fit it. */
-    maxEntryBytes?: number;
-    /**
-     * Cadence of the idle sweep. Without one a filled cache never shrinks: an entry is dropped only
-     * when its own key is fetched after expiry or when a write evicts it, so a pod that stops
-     * serving holds its peak forever — measured at 100 entries / 21.4 MiB still resident 310s after
-     * the last request, with a 30s TTL. 0 disables it.
-     */
-    sweepIntervalMs?: number;
-}
 export declare class LruTtlCache<T> {
     #private;
     readonly maxEntries: number;
-    constructor(maxEntries?: number, options?: LruTtlCacheOptions<T>);
+    constructor(maxEntries?: number);
     get size(): number;
-    get byteSize(): number;
     get(key: string): T | null;
-    /** Returns whether the entry was stored; a payload over `maxEntryBytes` is rejected. */
-    set(key: string, value: T, ttlSeconds: number): boolean;
-    /**
-     * Drops every expired entry. Deliberately a full scan rather than a walk from the oldest that
-     * stops at the first live entry: insertion order is *LRU* order because `get` reinserts, and TTLs
-     * differ per entry, so expiry is not monotonic in map order and an early break would leave
-     * expired entries behind. The map is bounded by `maxEntries`, so the scan is cheap.
-     */
-    sweepExpired(now?: number): number;
-    /** Stops the idle sweep. The cache stays usable; only the timer goes away. */
-    dispose(): void;
+    set(key: string, value: T, ttlSeconds: number): void;
     delete(key: string): boolean;
     invalidate(predicate: (key: string, value: T) => boolean): number;
     clear(): void;
-    static parseByteCeiling(value: string | undefined | null, fallback?: number): number;
 }

package/types/server/resolver/database.resolver.d.ts

@@ -1,10 +1,6 @@
 import { type ConstantModel } from "akanjs/constant";
-import { type DatabaseInstance, type DatabaseModel, DocumentSchema } from "akanjs/document";
+import { type DatabaseInstance, type DatabaseModel } from "akanjs/document";
 import { type AdaptorCls } from "akanjs/service";
 export declare class DatabaseResolver {
-    /** Returns the schema alongside the adaptor: the cascade planner reads its `remove` hooks to pick a strategy. */
-    static resolveDatabase(constant: ConstantModel, database: DatabaseModel): {
-        adaptor: AdaptorCls<DatabaseInstance>;
-        schema: DocumentSchema;
-    };
+    static resolveDatabase(constant: ConstantModel, database: DatabaseModel): AdaptorCls<DatabaseInstance>;
 }

package/types/server/resolver/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./CascadeRunner.d.ts";
 export * from "./database.resolver";
 export * from "./service.resolver";
 export * from "./signal.resolver";

package/types/server/resolver/service.resolver.d.ts

@@ -1,7 +1,7 @@
+import { type ConstantModel } from "akanjs/constant";
 import { type DatabaseModel } from "akanjs/document";
-import type { ServiceCls } from "akanjs/service";
-import type { CascadeRunner } from "./CascadeRunner.d.ts";
+import type { DatabaseService, ServiceCls } from "akanjs/service";
 export declare class ServiceResolver {
     #private;
-    static resolveDatabaseService(database: DatabaseModel, srvRef: ServiceCls, cascade: CascadeRunner): ServiceCls;
+    static resolveDatabaseService(constant: ConstantModel, database: DatabaseModel, srvRef: ServiceCls, getService: (refName: string) => DatabaseService): ServiceCls;
 }

package/types/server/rscWorkerHost.d.ts

@@ -49,19 +49,6 @@ export declare function nextRscHostPendingChunkCount(currentPendingChunks: numbe
 export declare function isRscHostPendingChunkOverflow(pendingChunks: number, maxPendingChunks: number): boolean;
 export declare function createIdempotentRscRenderCancel(onCancel: (reason?: unknown) => void): (reason?: unknown) => void;
 export declare function createRscWorkerInvalidateCacheMessage(invalidation?: string | RouteCacheInvalidation): RscWorkerInvalidateCacheMessage;
-/**
- * The RSC worker samples its own process with the same `ProcessMetricsCollector.collect` its host
- * replica uses, so its report carries `pid` / `rssBytes` / `role` / … under the identical names.
- * `AkanServer` spreads the host's report into its own `collect({ role, ...webRouter.getMetrics() })`
- * and `collect` spreads `extra` last (`processMetricsCollector.ts:122`) — so passing these through
- * unprefixed silently overwrote the replica's own process fields, and the replica's RSS was reported
- * nowhere. Rename them onto `rscWorker*`; the `rsc*` render counters, which only the worker
- * produces, pass through untouched.
- *
- * XXX A new process-level field in `ProcessMetricsCollector.collect` must be added here too, or it
- * starts shadowing the replica again.
- */
-export declare function projectRscWorkerProcessMetrics(metrics: AkanMetricsReport): AkanMetricsReport;
 export declare function createRscHostRenderStream(input: {
     setPending: (pending: RscPending) => void;
     deletePending: () => void;

package/types/service/ipcTypes.d.ts

@@ -59,25 +59,6 @@ export interface AkanMetricsReport {
     rscWorkerRestartCount?: number;
     rscWorkerRecycleCount?: number;
     rscWorkerLastRecycleReason?: string;
-    rscWorkerReportedAt?: number;
-    rscWorkerRssBytes?: number;
-    rscWorkerHeapTotalBytes?: number;
-    rscWorkerHeapUsedBytes?: number;
-    rscWorkerExternalBytes?: number;
-    rscWorkerArrayBuffersBytes?: number;
-    rscWorkerCpuUserMicros?: number;
-    rscWorkerCpuSystemMicros?: number;
-    rscWorkerMaxRssKb?: number;
-    rscWorkerJscHeapSizeBytes?: number;
-    rscWorkerJscHeapCapacityBytes?: number;
-    /** Off-heap bytes JSC attributes to JS objects — typed-array backing stores, i.e. cached Flight chunks. */
-    rscWorkerJscExtraMemorySizeBytes?: number;
-    rscWorkerJscObjectCount?: number;
-    rscWorkerJscProtectedObjectCount?: number;
-    rscWorkerEventLoopLagMeanMs?: number;
-    rscWorkerEventLoopLagP99Ms?: number;
-    rscWorkerEventLoopLagMaxMs?: number;
-    rscWorkerGcDurationMs?: number;
     rscPendingRenderCount?: number;
     rscQueuedSendCount?: number;
     rscHostPendingChunkOverflowCount?: number;
@@ -113,13 +94,9 @@ export interface AkanMetricsReport {
     rscLastRenderLoadedModuleDelta?: number;
     rscLastRenderLoadedModules?: string[];
     rscResultCacheEntries?: number;
-    rscResultCacheBytes?: number;
-    rscPatchResultCacheEntries?: number;
-    rscPatchResultCacheBytes?: number;
     rscResultCacheHits?: number;
     rscResultCacheMisses?: number;
     rscResultCacheBypass?: number;
-    /** Keys the SSR chunk registry tracks — NOT a memory bound; the modules stay in Bun's ESM registry. */
     ssrChunkRegistrySize?: number;
     ssrChunkLoadCount?: number;
     ssrChunkCacheHitCount?: number;
@@ -130,7 +107,6 @@ export interface AkanMetricsReport {
     httpCsrCount?: number;
     httpImageCount?: number;
     httpHtmlCacheEntries?: number;
-    httpHtmlCacheBytes?: number;
     httpHtmlCacheHits?: number;
     httpHtmlCacheMisses?: number;
     httpHtmlCacheBypass?: number;

package/types/service/predefinedAdaptor/database.adaptor.d.ts

@@ -56,7 +56,7 @@ export interface DocumentStore {
         matchedCount: number;
         modifiedCount: number;
     }>;
-    removeManyByQuery(query: DocumentQuery): Promise<{
+    deleteManyByQuery(query: DocumentQuery): Promise<{
         acknowledged: boolean;
         matchedCount: number;
         modifiedCount: number;
@@ -309,7 +309,7 @@ export declare class SqlDocumentStore {
         matchedCount: number;
         modifiedCount: number;
     }>;
-    removeManyByQuery(query: DocumentQuery): Promise<{
+    deleteManyByQuery(query: DocumentQuery): Promise<{
         acknowledged: boolean;
         matchedCount: number;
         modifiedCount: number;

package/types/service/types.d.ts

@@ -1,7 +1,7 @@
 import type { Cls, MergeAllTypes, PromiseOrObject } from "akanjs/base";
 import type { Logger } from "akanjs/common";
 import type { QueryOf } from "akanjs/constant";
-import type { CRUDEventType, DatabaseModel, DataInputOf, FilterInstance, FindQueryOption, GetDocObject, ListQueryOption, QueryMethodPart, SaveEventType, UpdateResult } from "akanjs/document";
+import type { CRUDEventType, DatabaseModel, DataInputOf, FilterInstance, FindQueryOption, GetDocObject, ListQueryOption, QueryMethodPart, SaveEventType } from "akanjs/document";
 type ServiceMixinOmitKey = "onInit" | "onDestroy" | "_libsOnInit" | "_libsOnDestroy" | "_preCreate" | "_postCreate" | "_preUpdate" | "_postUpdate" | "_preRemove" | "_postRemove" | "_libsPreCreate" | "_libsPostCreate" | "_libsPreUpdate" | "_libsPostUpdate" | "_libsPreRemove" | "_libsPostRemove";
 type DatabaseQueryMethods<Query, Sort, Obj, Doc, Insight, FindQueryOption, ListQueryOption, DocQuery> = QueryMethodPart<Query, Sort, Obj, Doc, Insight, FindQueryOption, ListQueryOption, DocQuery>;
 type DocumentLike = {
@@ -31,7 +31,6 @@ export type DatabaseService<T extends string = string, Input = any, Doc = any, O
     __create: (data: _DataInputOfDoc) => Promise<Doc>;
     __update: (id: string, data: Partial<Doc>) => Promise<Doc>;
     __remove: (id: string) => Promise<Doc>;
-    __removeMany: (query: _QueryOfDoc) => Promise<UpdateResult>;
     __list(query?: _QueryOfDoc, queryOption?: _ListQueryOption): Promise<Doc[]>;
     __listIds(query?: _QueryOfDoc, queryOption?: _ListQueryOption): Promise<string[]>;
     __find(query?: _QueryOfDoc, queryOption?: _FindQueryOption): Promise<Doc | null>;

package/types/ui/Layout/BottomInset.d.ts

@@ -4,10 +4,11 @@ export interface BottomInsetProps {
     className?: string;
     children: ReactNode;
     keyboardSticky?: boolean;
+    contentAnchor?: "bottom";
     role?: "bottomChrome" | "keyboardAccessory";
     estimatedHeight?: number;
     frameScope?: FrameSlotRegistration["scope"];
     frameSource?: FrameSlotRegistration["source"];
     frameCache?: boolean;
 }
-export declare const BottomInset: ({ className, children, keyboardSticky, role, estimatedHeight, frameScope, frameSource, frameCache, }: BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomInset: ({ className, children, keyboardSticky, contentAnchor, role, estimatedHeight, frameScope, frameSource, frameCache, }: BottomInsetProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export declare const Layout: {
     Navbar: ({ back, className, height, children, title, left, right }: import("./Navbar.d.ts").NavbarProps) => import("react/jsx-runtime").JSX.Element;
     TopInset: ({ className, children, estimatedHeight }: import("./TopInset.d.ts").TopInsetProps) => import("react/jsx-runtime").JSX.Element;
     BottomTab: ({ className, tabs, height }: import("./BottomTab.d.ts").BottomTabProps) => import("react/jsx-runtime").JSX.Element;
-    BottomInset: ({ className, children, keyboardSticky, role, estimatedHeight, frameScope, frameSource, frameCache, }: import("./BottomInset.d.ts").BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
+    BottomInset: ({ className, children, keyboardSticky, contentAnchor, role, estimatedHeight, frameScope, frameSource, frameCache, }: import("./BottomInset.d.ts").BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
     Template: ({ className, children }: import("./Template.d.ts").TemplateProps) => import("react/jsx-runtime").JSX.Element;
     Unit: ({ className, children, href }: import("./Unit.d.ts").UnitProps) => import("react/jsx-runtime").JSX.Element;
     View: ({ className, children }: import("./View.d.ts").ViewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,4 +11,4 @@ export declare const signalUi: {
 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";
+export declare const getStatusTextareaClassName: (status: string) => "" | "border-primary" | "pointer-events-none opacity-50" | "border-destructive text-destructive";

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

@@ -16,7 +16,7 @@ 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 { BadgeVariants, ButtonVariants, InputSurfaceVariants } 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";
@@ -75,11 +75,21 @@ export type AkanModalComponent = AkanUiOverrides["Modal"];
  * 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.
+ * contract, so every call site keeps working (a replacement with *extra* optional axes is
+ * assignable — contravariance — but those axes are only reachable from code that knows the
+ * replacement's own type).
+ *
+ * Scope: a recipe slot is a **client-side, route-scoped restyle**. It reaches framework
+ * client components, which resolve through `useUiRecipe(...)`. It never reaches a raw
+ * `xRecipe(...)` call in app JSX (statically imported — no context), nor server components
+ * (`Unit`/`View`), which intentionally render the canonical framework recipe. Extending the
+ * *vocabulary* is not this slot's job: add the axis to the framework recipe, or author an
+ * app recipe in `apps/<app>/ui/Recipe/`.
  */
 export interface AkanUiRecipes {
     button: (variants?: ButtonVariants, className?: ClassValue) => string;
     badge: (variants?: BadgeVariants, className?: ClassValue) => string;
+    input: (variants?: InputSurfaceVariants, className?: ClassValue) => string;
 }
 /** Shape of an `_overrides.tsx` manifest: component slots plus an optional recipe-slot map. */
 export type AkanUiOverrideManifest = Partial<AkanUiOverrides> & {

package/types/ui/recipe/badgeRecipe.d.ts

@@ -1,11 +1,15 @@
-/** 뱃지 look — 시맨틱 variant. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
+/** 뱃지 look — 시맨틱 variant × size, outline 플래그는 색을 유지한 외곽선 스타일. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
 export declare const badgeRecipe: (variants?: Omit<({
-    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "outline" | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | undefined;
+    outline?: boolean | undefined;
+    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | "outline" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
-    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "outline" | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | undefined;
+    outline?: boolean | undefined;
+    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | "outline" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/ui/recipe/buttonRecipe.d.ts

@@ -1,13 +1,17 @@
-/** 버튼 look — 시맨틱 variant × size. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
+/** 버튼 look — 시맨틱 variant × size × shape, outline 플래그는 색을 유지한 외곽선 스타일. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
 export declare const buttonRecipe: (variants?: Omit<({
     size?: "lg" | "md" | "sm" | "xs" | "icon" | undefined;
-    variant?: "link" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | undefined;
+    outline?: boolean | undefined;
+    variant?: "link" | "default" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "neutral" | "outline" | "ghost" | undefined;
+    shape?: "default" | "circle" | "square" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
     size?: "lg" | "md" | "sm" | "xs" | "icon" | undefined;
-    variant?: "link" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | undefined;
+    outline?: boolean | undefined;
+    variant?: "link" | "default" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "neutral" | "outline" | "ghost" | undefined;
+    shape?: "default" | "circle" | "square" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/ui/recipe/inputRecipe.d.ts

@@ -1,11 +1,15 @@
-/** 입력 표면 look — Input/TextArea 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area)을 고른다. */
+/** 입력 표면 look — Input/TextArea/Select 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area), tone 으로 강조/오류 상태를 고른다. */
 export declare const inputRecipe: (variants?: Omit<({
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     kind?: "field" | "area" | undefined;
+    tone?: "default" | "error" | "primary" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     kind?: "field" | "area" | undefined;
+    tone?: "default" | "error" | "primary" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/webkit/useCsrValues.d.ts

@@ -1,8 +1,8 @@
-import { type NavigationIntent, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
+import { type NavigationIntent, type PageTransition, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
 export declare const useCsrValues: (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]) => {
+    page: PageTransition | null;
     topSafeArea: import("akanjs/client").SafeAreaTransition | null;
-    page: import("akanjs/client").PageTransition | null;
-    prevPage: import("akanjs/client").PageTransition | null;
+    prevPage: PageTransition | null;
     topInset: import("akanjs/client").ContainerTransition | null;
     bottomInset: import("akanjs/client").ContainerTransition | null;
     topLeftAction: import("akanjs/client").ContainerTransition | null;

package/types/webkit/useFrameRuntime.d.ts

@@ -4,7 +4,10 @@ export type FrameSlotBucket = "active" | "pending";
 export type FrameSlotMapByBucket = Record<FrameSlotBucket, FrameSlotMap>;
 export declare const PENDING_FRAME_READY_TIMEOUT_MS = 80;
 export declare const PENDING_FRAME_READY_MAX_TIMEOUT_MS = 120;
-export declare const KEYBOARD_FALLBACK_ANIMATION_DURATION_MS = 285;
+export declare const KEYBOARD_SHOW_ANIMATION_DURATION_MS = 420;
+export declare const KEYBOARD_HIDE_ANIMATION_DURATION_MS = 90;
+export declare const KEYBOARD_SHOW_ANIMATION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const KEYBOARD_HIDE_ANIMATION_EASING = "cubic-bezier(0.7, 0, 0.84, 0)";
 export declare const FRAME_Z_INDEX: {
     readonly page: 10;
     readonly previousPage: 0;
@@ -39,6 +42,7 @@ export declare function useFrameViewport(): {
 export declare function getKeyboardAccessorySlots(path: string, frameSlots: FrameSlotMap): FrameSlotRegistration[];
 export declare function resolveKeyboardAccessoryHeight(path: string, frameSlots: FrameSlotMap): number;
 export declare function hasKeyboardStickySlot(path: string, frameSlots: FrameSlotMap): boolean;
+export declare function hasBottomAnchoredKeyboardSlot(path: string, frameSlots: FrameSlotMap): boolean;
 export declare function resolveKeyboardFrame({ keyboardHeight, bottomSafeArea, visualViewportKeyboardHeight, platformProfile, sticky, freeze, }: {
     keyboardHeight: number;
     bottomSafeArea: number;
@@ -57,6 +61,7 @@ export declare function useKeyboardFrame({ bottomSafeArea, sticky, viewport, pla
     bottomSafeArea: number;
     sticky: boolean;
     viewport: {
+        height: number;
         visualHeight: number;
         visualOffsetTop: number;
     };

package/ui/Badge.tsx

@@ -7,10 +7,10 @@ export { badgeRecipe, type BadgeVariants };
 
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & BadgeVariants;
 
-const DefaultBadge = ({ className, variant, ...rest }: BadgeProps) => {
+const DefaultBadge = ({ className, variant, size, outline, ...rest }: BadgeProps) => {
   
   const recipe = useUiRecipe("badge") ?? badgeRecipe;
-  return <span className={recipe({ variant }, className)} {...rest} />;
+  return <span className={recipe({ variant, size, outline }, className)} {...rest} />;
 };
 
 /** Status/label pill. Route-overridable via `page/**\/_overrides.tsx` (slot `Badge`). */

package/ui/Button.tsx

@@ -61,6 +61,8 @@ const DefaultButton = <Result = unknown>({
   className,
   variant,
   size,
+  shape,
+  outline,
   type = "button",
   loadingMode = "hold",
   showError = true,
@@ -84,7 +86,7 @@ const DefaultButton = <Result = unknown>({
       <button
         type={type}
         className={recipe(
-          { variant, size },
+          { variant, size, shape, outline },
 
           cn(loadingMode === "hold" && "relative", busy && !rest.disabled && "disabled:opacity-100", className),
         )}

package/ui/Constant/Doc.tsx

@@ -238,7 +238,7 @@ const EnumList = ({ enums = getConstantSchemaDoc().enums }: EnumProps) => {
   const { l } = usePage();
   return (
     <div className="overflow-x-auto rounded-xl bg-muted p-3">
-      <table className="table">
+      <table className={tableClass}>
         <thead>
           <tr>
             <th>Key</th>

package/ui/Data/ListContainer.tsx

@@ -268,7 +268,7 @@ export default function ListContainer<
     <div className={cn("m-4", className)}>
       <div className="mb-3 flex flex-wrap justify-between">
         <div className="flex pb-1">
-          <p className="prose text-lg">
+          <p className="text-lg">
             {title ?? l._(`${sliceName}.modelName`)}({modelInsight.count})
           </p>
           <div className="ml-3 flex items-center">

package/ui/DatePicker.tsx

@@ -5,6 +5,7 @@ import { lazy } from "akanjs/webkit";
 import { type FocusEvent, useEffect, useRef } from "react";
 import { AiOutlineSwapRight } from "react-icons/ai";
 
+import { inputRecipe } from "./recipe";
 import { createOverridable } from "./UiOverride";
 
 const reactDatePickerPackage = "react-datepicker";
@@ -58,7 +59,7 @@ const DefaultDatePicker = ({
 
   return (
     <ReactDatePicker
-      className={cn("input text-center", className)}
+      className={inputRecipe({}, ["text-center", className])}
       selected={value ? value.toDate() : new Date()}
       disabledKeyboardNavigation
       onFocus={(e: FocusEvent<HTMLInputElement>) => {
@@ -110,9 +111,9 @@ const DefaultRangePicker = ({
     onChange([value[0] ?? dayjs(), dayjs(date)]);
   };
 
-  const pickerClassName = "m-0 input focus:outline-hidden z-50 p-3 text-center h-full w-full ";
+  const pickerClassName = "m-0 h-full w-full border-none bg-transparent p-3 text-center focus:outline-hidden z-50";
   return (
-    <div className={cn("input flex h-full w-fit items-center gap-2 p-0", className)}>
+    <div className={inputRecipe({}, ["flex h-full w-fit items-center gap-2 p-0", className])}>
       <ReactDatePicker
         className={pickerClassName}
         selected={value[0] ? value[0].toDate() : undefined}

package/ui/DraggableList.tsx

@@ -7,6 +7,7 @@ import { createContext, type ReactElement, type ReactNode, useContext, useRef }
 import { BiTrash } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
 import { buttonRecipe } from "./Button";
+import { useUiRecipe } from "./UiOverride";
 
 const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
 
@@ -169,6 +170,7 @@ const Item = ({
   removeClassName,
 }: ItemProps) => {
   const { onRemove } = useDragList();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
     <div className={cn("flex w-full items-center gap-2", className)}>
       {cursor ? (
@@ -179,7 +181,7 @@ const Item = ({
       {children}
       {removable && (
         <button
-          className={buttonRecipe({ variant: "outline", size: "xs" }, [
+          className={recipe({ variant: "outline", size: "xs" }, [
             "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
             removeClassName,
           ])}

package/ui/Dropdown.tsx

@@ -3,7 +3,7 @@ import { cn } from "akanjs/client";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export interface DropdownProps {
   /** Button/trigger content. */
@@ -21,6 +21,8 @@ export interface DropdownProps {
 export const DefaultDropdown = ({ value, content, className, buttonClassName, dropdownClassName }: DropdownProps) => {
   const [opened, setOpened] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   useEffect(() => {
     if (!opened) return;
     const onClick = (e: MouseEvent) => {
@@ -35,7 +37,7 @@ export const DefaultDropdown = ({ value, content, className, buttonClassName, dr
     <div ref={ref} className={cn("relative inline-block", className)}>
       <button
         type="button"
-        className={buttonRecipe({ variant: "ghost" }, ["flex", buttonClassName])}
+        className={recipe({ variant: "ghost" }, ["flex", buttonClassName])}
         onClick={() => {
           setOpened((o) => !o);
         }}

package/ui/Field.tsx

@@ -13,10 +13,12 @@ import { badgeRecipe } from "./Badge";
 import { buttonRecipe } from "./Button";
 import { DraggableList } from "./DraggableList";
 import { Input } from "./Input";
+import { inputRecipe } from "./recipe";
 import { Select } from "./Select";
 import { Switch as UiSwitch } from "./Switch";
 import { ToggleSelect as UtilToggleSelect } from "./ToggleSelect";
 import { Tooltip } from "./Tooltip";
+import { useUiRecipe } from "./UiOverride";
 
 interface LabelProps {
   className?: string;
@@ -101,6 +103,7 @@ const List = <Item,>({
   renderItem,
 }: ListProps<Item>) => {
   const { l } = usePage();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
     <div className={cn("flex w-full flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
@@ -111,7 +114,7 @@ const List = <Item,>({
               {renderItem(item, idx)}
               <div className="flex gap-2 border-border border-l pl-2">
                 <button
-                  className={buttonRecipe(
+                  className={recipe(
                     { variant: "outline", size: "icon" },
                     "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
                   )}
@@ -127,7 +130,7 @@ const List = <Item,>({
           </>
         ))}
         <button
-          className={buttonRecipe({ variant: "outline" })}
+          className={recipe({ variant: "outline" })}
           onClick={() => {
             onAdd();
           }}
@@ -533,6 +536,7 @@ const TextList = ({
   inputClassName,
 }: TextListProps) => {
   const { l } = usePage();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={!minlength} label={label} desc={desc} /> : null}
@@ -570,7 +574,7 @@ const TextList = ({
                     disabled={disabled}
                   />
                   <button
-                    className={buttonRecipe(
+                    className={recipe(
                       { variant: "outline", size: "icon" },
                       "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
                     )}
@@ -588,7 +592,7 @@ const TextList = ({
         <div className="my-5 h-[0.5px] bg-foreground/20" />
         {value.length <= maxTextlength ? (
           <button
-            className={buttonRecipe({ variant: "outline" }, "w-full")}
+            className={recipe({ variant: "outline" }, "w-full")}
             onClick={() => {
               onChange([...value, ""]);
             }}
@@ -638,6 +642,7 @@ const Tags = ({
   inputClassName,
 }: TagsProps) => {
   const { l } = usePage();
+  const badge = useUiRecipe("badge") ?? badgeRecipe;
   const [inputVisible, setInputVisible] = useState(false);
   const [tag, setTag] = useState("");
   const addTag = () => {
@@ -652,7 +657,7 @@ const Tags = ({
       {label ? <Label className={labelClassName} nullable={!minlength} label={label} desc={desc} /> : null}
       <div className="flex w-full flex-wrap items-center gap-1 rounded-md border border-foreground/20 p-2">
         {value.map((val, idx) => (
-          <span className={badgeRecipe({ variant: "outline" }, "items-center")} key={idx}>
+          <span className={badge({ variant: "outline" }, "items-center")} key={idx}>
             <div className="text-xs italic">#</div>
             {val}
             <BiX
@@ -733,13 +738,16 @@ const Date = <Nullable extends boolean>({
   return (
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
-      {/* //! daysi UI datetime-local 컴포넌트에 max 값 넣으면 오른쪽 끝 짤리는 버그 있음.*/}
+      {/* //! datetime-local 에 max 를 주면 오른쪽 끝이 잘리는 렌더 이슈가 있어 max 를 넘기지 않는다.
+          원래 daisyUI 버그로 기록돼 있었으나 daisyUI 는 제거됐다 — 브라우저 네이티브 동작일 수 있어
+          회피책은 유지한다. 실제 렌더 확인 후에만 걷어낼 것. */}
       <input
         type={showTime ? "datetime-local" : "date"}
-        className={cn(
-          "input validator text-xs outline-none duration-200 focus-within:outline-none focus:outline-none",
+        className={inputRecipe({}, [
+
+          "user-invalid:border-destructive text-xs outline-none duration-200 focus-within:outline-none focus:outline-none",
           dateClassName,
-        )}
+        ])}
         min={min ? (showTime ? dayjs(min).format("YYYY-MM-DDTHH:mm") : dayjs(min).format("YYYY-MM-DD")) : undefined}
         max={max ? (showTime ? dayjs(max).format("YYYY-MM-DDTHH:mm") : dayjs(max).format("YYYY-MM-DD")) : undefined}
         value={value ? (showTime ? dayjs(value).format("YYYY-MM-DDTHH:mm") : dayjs(value).format("YYYY-MM-DD")) : ""}