akanjs 3.0.0-beta.2 → 3.0.0-beta.20

package/ui/UiOverride/{context.ts → UiOverride.tsx}

@@ -1,5 +1,5 @@
 "use client";
-import type { ComponentType } from "react";
+import { type ComponentType, createElement, type ReactNode, useContext, useMemo } from "react";
 import type { ClassNameValue as ClassValue } from "tailwind-merge";
 import { sharedContext } from "../../client/sharedContext";
 import type { ApprovalProps as AgentApprovalProps } from "../Agent/Approval";
@@ -11,17 +11,17 @@ import type { CodeProps as AgentCodeProps, MarkdownProps as AgentMarkdownProps }
 import type { MenuProps as AgentMenuProps } from "../Agent/Menu";
 import type { QuestionProps as AgentQuestionProps } from "../Agent/Question";
 import type { QueuedProps as AgentQueuedProps } from "../Agent/Queued";
+import type { StepsProps as AgentStepsProps } from "../Agent/Steps";
+import type { ToolCardProps as AgentToolCardProps } from "../Agent/ToolCard";
 import type { BadgeProps } from "../Badge";
 import type { ButtonProps } from "../Button";
 import type { DatePickerProps, RangePickerProps, TimePickerProps } from "../DatePicker";
 import type { DropdownProps } from "../Dropdown";
 import type { EmptyProps } from "../Empty";
 import type { CheckboxProps, EmailProps, InputProps, NumberProps, PasswordProps, TextAreaProps } from "../Input";
-import type { LoadingProps as LoadingButtonProps } from "../Loading/Button";
-import type { LoadingProps as LoadingInputProps } from "../Loading/Input";
 import type { ProgressBarProps } from "../Loading/ProgressBar";
 import type { SkeletonProps } from "../Loading/Skeleton";
-import type { SpinProps } from "../Loading/Spin";
+import type { AreaProps, SpinProps } from "../Loading/Spin";
 import type { MenuProps } from "../Menu";
 import type { ModalProps } from "../Modal";
 import type { DraftBarViewProps } from "../Model/DraftBar";
@@ -36,20 +36,8 @@ import type { MultiProps as ToggleSelectMultiProps, ToggleSelectProps } from "..
 import type { TooltipProps } from "../Tooltip";
 import type { UnauthorizedProps } from "../Unauthorized";
 
-/**
- * Registry of framework UI components an app may replace per-route through a
- * `page/**\/_overrides.tsx` manifest. Each entry is keyed by the framework
- * component name and typed to that component's public prop contract, so an
- * override is checked as a drop-in replacement.
- *
- * Extend this interface (and add a matching `createOverridable(...)` call in the
- * component file) to make another component overridable. Generic components
- * (e.g. `Button`, `Select`) and compound components that carry static
- * sub-components (e.g. `Tab`, `Field`, `Input`) need dedicated slot support
- * before they can be listed here without losing call-site typing.
- */
+/** Components a `page/**\/_overrides.tsx` manifest may replace, each typed to its public prop contract. */
 export interface AkanUiOverrides {
-  
   Badge: ComponentType<BadgeProps>;
   Modal: ComponentType<ModalProps>;
   Empty: ComponentType<EmptyProps>;
@@ -60,18 +48,19 @@ export interface AkanUiOverrides {
   Menu: ComponentType<MenuProps>;
   Tooltip: ComponentType<TooltipProps>;
   Unauthorized: ComponentType<UnauthorizedProps>;
-
   DraftBar: ComponentType<DraftBarViewProps>;
   AgentChat: ComponentType<AgentChatProps>;
 
   AgentLauncher: ComponentType<AgentLauncherProps>;
   AgentBubble: ComponentType<AgentBubbleProps>;
+  AgentSteps: ComponentType<AgentStepsProps>;
   AgentComposer: ComponentType<AgentComposerProps>;
   AgentApproval: ComponentType<AgentApprovalProps>;
   AgentQuestion: ComponentType<AgentQuestionProps>;
   AgentQueued: ComponentType<AgentQueuedProps>;
   AgentMenu: ComponentType<AgentMenuProps>;
   AgentMarkdown: ComponentType<AgentMarkdownProps>;
+  AgentToolCard: ComponentType<AgentToolCardProps>;
   AgentCode: ComponentType<AgentCodeProps>;
 
   Button: ComponentType<ButtonProps<unknown>>;
@@ -100,9 +89,9 @@ export interface AkanUiOverrides {
   LoadingSpin: ComponentType<SpinProps>;
   LoadingSkeleton: ComponentType<SkeletonProps>;
   LoadingProgressBar: ComponentType<ProgressBarProps>;
-  LoadingButton: ComponentType<LoadingButtonProps>;
-  LoadingInput: ComponentType<LoadingInputProps>;
-  LoadingArea: ComponentType<Record<string, never>>;
+  LoadingButton: ComponentType<SkeletonProps>;
+  LoadingInput: ComponentType<SkeletonProps>;
+  LoadingArea: ComponentType<AreaProps>;
 }
 
 export type AkanUiOverrideName = keyof AkanUiOverrides;
@@ -110,22 +99,8 @@ 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 (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/`.
- */
+/** Recipe slots `override({ recipes })` may swap: a client-side, route-scoped restyle that reaches framework client
+ *  components only, never a raw `xRecipe()` call or a server component. */
 export interface AkanUiRecipes {
   button: (variants?: ButtonVariants, className?: ClassValue) => string;
   badge: (variants?: BadgeVariants, className?: ClassValue) => string;
@@ -135,9 +110,46 @@ export interface AkanUiRecipes {
 /** 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 const UiOverrideContext = sharedContext<AkanUiOverrideManifest>("uiOverride", {});
+
+/** The active override for `name` in this route subtree, or `undefined`. */
+export const useUiOverride = <K extends keyof AkanUiOverrides>(name: K): AkanUiOverrides[K] | undefined => {
+  
+  const overrides = useContext(UiOverrideContext) as Record<string, unknown>;
+  return overrides[name] as AkanUiOverrides[K] | undefined;
+};
+
+/** The active recipe swap for `name` in this route subtree, or `undefined`. */
+export const useUiRecipe = <K extends keyof AkanUiRecipes>(name: K): AkanUiRecipes[K] | undefined => {
+  const { recipes } = useContext(UiOverrideContext);
+  return recipes?.[name];
+};
+
+/** Renders the nearest `_overrides.tsx` entry for `name`, else `Default`. */
+export const createOverridable = <K extends keyof AkanUiOverrides>(
+  name: K,
+  Default: AkanUiOverrides[K],
+): AkanUiOverrides[K] => {
+  
+  const Fallback = Default as unknown as ComponentType<Record<string, unknown>>;
+  const Overridable = (props: Record<string, unknown>): ReactNode => {
+    const Override = useUiOverride(name) as unknown as ComponentType<Record<string, unknown>> | undefined;
+    return createElement(Override ?? Fallback, props);
+  };
+  return Overridable as unknown as AkanUiOverrides[K];
+};
+
+export interface UiOverrideProviderProps {
+  value?: AkanUiOverrideManifest;
+  children?: ReactNode;
+}
+
+/** Merges `value` over the inherited overrides (closest wins; `recipes` merges per slot). */
+export const UiOverrideProvider = ({ value, children }: UiOverrideProviderProps) => {
+  const parent = useContext(UiOverrideContext);
+  const merged = useMemo(
+    () => ({ ...parent, ...value, recipes: { ...parent.recipes, ...value?.recipes } }),
+    [parent, value],
+  );
+  return <UiOverrideContext.Provider value={merged}>{children}</UiOverrideContext.Provider>;
+};

package/ui/UiOverride/index.ts

@@ -1,12 +1,15 @@
+export { override } from "./override";
 export type {
   AkanModalComponent,
   AkanUiOverrideManifest,
   AkanUiOverrideName,
   AkanUiOverrides,
   AkanUiRecipes,
-} from "./context";
-export { createOverridable } from "./createOverridable";
-export { override } from "./override";
-export { UiOverrideProvider, type UiOverrideProviderProps } from "./Provider";
-export { useUiOverride } from "./useUiOverride";
-export { useUiRecipe } from "./useUiRecipe";
+} from "./UiOverride";
+export {
+  createOverridable,
+  UiOverrideProvider,
+  type UiOverrideProviderProps,
+  useUiOverride,
+  useUiRecipe,
+} from "./UiOverride";

package/ui/UiOverride/override.ts

@@ -1,20 +1,4 @@
-import type { AkanUiOverrideManifest } from "./context";
+import type { AkanUiOverrideManifest } from "./UiOverride";
 
-/**
- * Typed manifest builder for a `page/_overrides.tsx` file:
- *
- * ```tsx
- * export default override({ Modal: BrandModal, recipes: { button: neonButtonRecipe } });
- * ```
- *
- * 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. 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`).
- */
+/** Checks an `_overrides.tsx` manifest against each slot's contract; a server-safe identity, so no `"use client"`. */
 export const override = (overrides: AkanUiOverrideManifest): AkanUiOverrideManifest => overrides;

package/ui/Unauthorized.tsx

@@ -7,7 +7,6 @@ import { createOverridable } from "./UiOverride";
 
 export interface UnauthorizedProps {
   className?: string;
-  /** The mark above the description. */
   icon?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
@@ -24,8 +23,7 @@ export const DefaultUnauthorized = ({
   const { l } = usePage();
   return (
     <div>
-      {/* minHeight is a runtime number, so it has to be a style prop — see Empty.tsx. The interpolated form
-          also had `w-full` typo'd inside the brackets, which broke that class too. */}
+      {/* A style, not a class: Tailwind compiles no CSS for an interpolated arbitrary value. */}
       <div
         style={{ minHeight }}
         className={cn("flex w-full flex-col items-center justify-center gap-3 px-6 py-8 text-center", className)}
@@ -40,9 +38,4 @@ export const DefaultUnauthorized = ({
   );
 };
 
-/**
- * Unauthorized-state placeholder. Resolves to a route-scoped override when a
- * `page/**\/_overrides.tsx` in the route's ancestry declares one, otherwise
- * renders {@link DefaultUnauthorized}.
- */
 export const Unauthorized = createOverridable("Unauthorized", DefaultUnauthorized);

package/ui/agentAttrs.ts

@@ -1,19 +1,16 @@
 import { actionTagOf } from "akanjs/store";
 
-/**
- * The `data-akan-*` attributes for a handler the caller passed by reference.
- *
- * `{}` when the handler is an inline arrow, which is the honest answer: a closure the caller wrote says nothing
- * about what it does, and a guessed annotation is worse than none. The house form for a model field is the setter
- * itself (`onChange={st.do.setNameOnUser}`), so the fields that matter are annotated without an app writing anything.
- *
- * What it buys, beyond an in-page agent: an accessibility tree and E2E selectors that name the action rather than a
- * class, and an external browser agent — one this framework has no bridge into — reading the same names.
- */
+/** `data-akan-*` attributes for a handler passed by reference, `{}` for an inline arrow. `key` tells apart the
+ *  controls sharing one handler (a tab's menus, a list's rows), in the vocabulary of the call's argument. */
 export const agentAttrs = (
   handler: unknown,
-): { "data-akan-action"?: string; "data-akan-state"?: string } | Record<string, never> => {
+  key?: string | number,
+): { "data-akan-action"?: string; "data-akan-state"?: string; "data-akan-key"?: string } | Record<string, never> => {
   const tag = actionTagOf(handler);
   if (!tag) return {};
-  return { "data-akan-action": tag.action, ...(tag.state ? { "data-akan-state": tag.state } : {}) };
+  return {
+    "data-akan-action": tag.action,
+    ...(tag.state ? { "data-akan-state": tag.state } : {}),
+    ...(key === undefined || key === "" ? {} : { "data-akan-key": String(key) }),
+  };
 };

package/ui/index.ts

@@ -1,5 +1,5 @@
 
-
+export { type AgentReferenceInput, useAgentReference } from "akanjs/store";
 export {
   AgentProvider,
   type AgentProviderProps,
@@ -10,7 +10,10 @@ export {
   type CompactOptions,
   type ContextBlock,
   httpRunner,
+  type MessageAttachment,
+  type MessageReference,
   type PublishedTool,
+  Reference,
   type RunnerEvent,
   type RunnerRequest,
   SessionContext,
@@ -20,7 +23,14 @@ export {
 } from "../vendor/use-agentic";
 export { Agent } from "./Agent";
 export { type ApprovalProps, DefaultApproval } from "./Agent/Approval";
-export { type AgentSessionSetup, agentSessionOf } from "./Agent/agentSessionOf";
+export { Chips as AgentAttachments, type ChipsProps as AgentAttachmentsProps } from "./Agent/Attach";
+export {
+  type AgentBuiltin,
+  type AgentSessionSetup,
+  agentSessionOf,
+  type BuiltinOption,
+  type PersistOption,
+} from "./Agent/agentSessionOf";
 export {
   type AttachLimits,
   type AttachReader,
@@ -31,7 +41,7 @@ export {
 export { type BubbleProps, DefaultBubble } from "./Agent/Bubble";
 export type { ChatProps } from "./Agent/Chat";
 export { type ChatCommand, ChatCommands } from "./Agent/ChatCommands";
-export { type ComposerProps, DefaultComposer } from "./Agent/Composer";
+export { type ComposerHandle, type ComposerProps, DefaultComposer } from "./Agent/Composer";
 export { fetchRunner } from "./Agent/fetchRunner";
 export type { HistoryProps as AgentHistoryProps } from "./Agent/History";
 export { DefaultLauncher, type LauncherProps } from "./Agent/Launcher";
@@ -39,10 +49,15 @@ export { type CodeProps, DefaultCode, DefaultMarkdown, type MarkdownProps } from
 export { DefaultAgentMenu, type MenuProps as AgentMenuProps, type MenuRow } from "./Agent/Menu";
 export { DefaultQuestion, type QuestionProps } from "./Agent/Question";
 export { DefaultQueued, type QueuedProps } from "./Agent/Queued";
-export type { PersistOption } from "./Agent/sessionHistory";
-export type { AgentBuiltin, BuiltinOption } from "./Agent/sessionView";
+export {
+  ReferenceChips as AgentReferences,
+  type ReferenceChipsProps as AgentReferencesProps,
+} from "./Agent/Refer";
+export { DefaultSteps, type StepsProps } from "./Agent/Steps";
+export { DefaultToolCard, type ToolCardProps } from "./Agent/ToolCard";
 export { tokenCount } from "./Agent/tokenCount";
 export type { QueuedMessage } from "./Agent/useChatQueue";
+export type { ReferenceCandidate, ReferenceSource } from "./Agent/useReferenceMenu";
 export type { VoiceEngine, VoiceHandlers, VoiceListener, VoiceSpeech } from "./Agent/voice";
 export { agentAttrs } from "./agentAttrs";
 export { animated } from "./animated";

package/ui/overlayLayer.ts

@@ -2,46 +2,25 @@
 import { useContext } from "react";
 import { sharedContext } from "../client/sharedContext";
 
-/**
- * Overlay surfaces render through `createPortal(document.body)`, so they leave the DOM subtree of the
- * component that opened them, and a dismiss check asking `ref.current.contains(target)` reads every
- * click inside a dialog it opened *itself* as an outside click.
- *
- * React context reaches through a portal where the DOM does not, so an overlay can read which
- * dismissable scope rendered it and stamp that owner on the roots it portals out. A scope then
- * recognises its own overlays exactly, instead of guessing from how close a dialog happens to be.
- */
 export const OVERLAY_LAYER_ATTR = "data-akan-overlay";
 
-/**
- * Stacking order for overlays that portal to `document.body`, where nesting no longer decides who is on
- * top. A Popconfirm outranks a dropdown menu because `Model.Remove` draws one from inside a menu item,
- * and its scrim outranks the menu so the click that answers the confirm is not also a menu selection.
- * A Select's options stay under both: it is a field, and whatever opened over it took the click that
- * dismisses it.
- */
 export const overlayZ = { select: 90, dropdown: 100, popconfirmScrim: 105, popconfirm: 110 } as const;
 
-/** Scope that rendered the surrounding content — empty at page level. */
 const OverlayOwnerContext = sharedContext("overlayOwner", "");
 
-/** Wrap the content a dismissable container owns, with the scope from {@link useOverlayScope}. */
+/** Takes the scope from {@link useOverlayScope}. */
 export const OverlayOwnerProvider = OverlayOwnerContext.Provider;
 
-/** Scope a dismissable container hands to its content. Nests as a `parent/child` path. */
+/** Nests under the enclosing scope as a `parent/child` path. */
 export const useOverlayScope = (id: string) => {
   const parent = useContext(OverlayOwnerContext);
   return parent ? `${parent}/${id}` : id;
 };
 
-/** Props an overlay spreads onto every root it portals out of its own tree. */
+/** Spread onto every root an overlay portals out of its own tree. */
 export const useOverlayLayerProps = () => ({ [OVERLAY_LAYER_ATTR]: useContext(OverlayOwnerContext) });
 
-/**
- * True when the click landed in an overlay that `scope` — or a scope nested inside it — rendered.
- * An overlay nobody owns, and one owned by an unrelated scope, both read as an ordinary outside
- * click, so a menu does not linger behind a dialog it has nothing to do with.
- */
+/** True when the click landed in an overlay `scope`, or a scope nested in it, rendered; any other is outside. */
 export const isOwnOverlayClick = (target: EventTarget | null, scope: string) => {
   if (!(target instanceof Element)) return false;
   const owner = target.closest(`[${OVERLAY_LAYER_ATTR}]`)?.getAttribute(OVERLAY_LAYER_ATTR);

package/ui/overlayPosition.ts

@@ -9,23 +9,12 @@ const POINTER_INSET = 16;
 export interface OverlayPosition {
   top: number;
   left: number;
-  /** Placed above the trigger, because there was no room below. */
   above: boolean;
   /** The trigger's centre relative to the panel's left edge, held clear of the panel's rounded corners. */
   anchorOffset: number;
-  /** The trigger's own width, for a panel that lines up with the control it drops out of. */
   anchorWidth: number;
 }
 
-/**
- * Places a portalled panel against its trigger in viewport coordinates.
- *
- * A panel positioned inside its own tree is clipped by every `overflow` ancestor it has — the modal
- * surface, the modal's scrolling body, a table's scroll container, the dropdown menu a row verb sits in —
- * so overlay panels portal out to `document.body` and are placed here instead of by CSS.
- * `position: fixed` in place would not do it either: a fixed element inside a transformed ancestor is laid
- * out and clipped by that ancestor, and the modal surface animates a transform.
- */
 export const useOverlayPosition = ({
   opened,
   triggerRef,
@@ -37,7 +26,6 @@ export const useOverlayPosition = ({
   triggerRef: RefObject<HTMLElement | null>;
   panelRef: RefObject<HTMLElement | null>;
   align: "start" | "end";
-  /** Distance from the trigger. Raise it for a panel whose pointer sticks out past its own edge. */
   gap?: number;
 }) => {
   const [position, setPosition] = useState<OverlayPosition | null>(null);
@@ -66,7 +54,7 @@ export const useOverlayPosition = ({
       anchorOffset: clamp((trigger.left + trigger.right) / 2 - left, POINTER_INSET, width - POINTER_INSET),
       anchorWidth: trigger.width,
     };
-
+    
     setPosition((prev) =>
       prev &&
       prev.top === next.top &&
@@ -88,7 +76,7 @@ export const useOverlayPosition = ({
     
     window.addEventListener("scroll", measure, true);
     window.addEventListener("resize", measure);
-
+    
     const panel = panelRef.current;
     const observer = panel ? new ResizeObserver(measure) : null;
     if (panel && observer) observer.observe(panel);

package/ui/recipe/badgeRecipe.ts

@@ -23,7 +23,7 @@ export const badgeRecipe = recipe(
         md: "px-2.5 py-0.5 text-xs",
         lg: "px-3 py-1 text-sm",
       },
-
+      
       outline: { true: "border-current bg-transparent" },
     },
     compoundVariants: [

package/ui/recipe/buttonRecipe.ts

@@ -3,11 +3,11 @@ import { recipe, tv } from "./factory";
 /** 버튼 look — 시맨틱 variant × size × shape, outline 플래그는 색을 유지한 외곽선 스타일. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
 export const buttonRecipe = recipe(
   tv({
-
+    
     base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-field font-medium transition active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
     variants: {
       variant: {
-
+        
         default: "bg-muted text-foreground hover:bg-muted/80",
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -28,13 +28,13 @@ export const buttonRecipe = recipe(
         lg: "h-12 px-6 text-lg",
         icon: "h-10 w-10 px-0",
       },
-
+      
       shape: {
         default: "",
         square: "aspect-square px-0",
         circle: "aspect-square rounded-full px-0",
       },
-
+      
       outline: { true: "border bg-transparent" },
     },
     compoundVariants: [

package/ui/recipe/factory.ts

@@ -2,30 +2,9 @@ import type { ClassNameValue as ClassValue } from "tailwind-merge";
 import { createTV } from "tailwind-variants";
 import { colorTokens, radiusTokens } from "../../client/cn";
 
-/**
- * recipe 팩토리 모듈 — 변형 팩토리를 만드는 **인프라**. **서버-안전** (절대 `"use client"` 금지).
- * 실제 recipe 정의는 이 폴더의 형제 파일 하나당 하나씩 둔다 — 프레임워크는 `./<name>Recipe.ts`,
- * 각 앱은 `apps/<app>/ui/Recipe/<name>.ts`.
- */
-
 export const tv = createTV({ twMergeConfig: { extend: { theme: { color: colorTokens, radius: radiusTokens } } } });
 
-/**
- * recipe 팩토리 — `tv({...})` 인스턴스를 받아 겉을 `(변형, className?)` 2-인자로 노출하고,
- * className 병합(cn)을 안으로 숨긴다. 타입은 넘겨받은 tv 인스턴스에서 그대로 추론되어 변형 타입이
- * 정확히 보존된다. 반환은 순수 className 문자열이라 서버-안전.
- *
- *   export const xRecipe = recipe(tv({ base, variants }));
- *   xRecipe({ variant: "primary" }, "w-full")            // cn 불필요
- *
- * 2번째 인자는 `ClassNameValue` — 문자열 하나만이 아니라 **배열·중첩 배열·falsy 값**을 그대로 받는다.
- * 여러 클래스를 합칠 때 `cn(...)` 으로 감쌀 이유가 없다(모르면 감싸게 되는데, cn 을 몰아내려고 만든
- * 2-인자 계약이 거기서 새어나간다):
- *
- *   xRecipe({}, ["h-full", className])                   // ✅ cn 불필요
- *   xRecipe({}, ["h-full", isWide && "w-full"])          // ✅ falsy 는 무시됨
- *   xRecipe({}, cn("h-full", className))                 // ❌ 불필요한 래핑
- */
+/** `className` takes arrays and falsy values and is merged inside, so never wrap it in `cn()`. */
 export const recipe =
   <P extends object>(styles: (props?: P) => string) =>
   (variants?: Omit<P, "class" | "className">, className?: ClassValue): string =>

package/ui/recipe/index.ts

@@ -1,17 +1,4 @@
-/**
- * recipe 레이어 — 프리미티브의 스타일 recipe(변형)를 모으는 **서버-안전** 폴더.
- * **여기엔 절대 `"use client"` 를 붙이지 않는다.** 팩토리(`recipe`/`tv`)는 `./factory` 에 있다.
- *
- * 구조: recipe 하나당 파일 하나(`<name>Recipe.ts`), 이 index 는 재수출만 한다. 앱도 같은 구조를
- * `apps/<app>/ui/Recipe/` 에서 계승한다.
- *
- * 호출 규격: `xRecipe(변형객체, 커스텀클래스?)`. 두 번째 인자 className 은 recipe 안에서 tailwind-merge 로
- * 자동 병합되므로 호출부에서 `cn(...)` 으로 감쌀 필요가 없다. 문자열 하나만이 아니라 배열도 받는다:
- *   buttonRecipe({ variant: "primary" }, "w-full rounded-2xl")   // ✅ cn 불필요
- *   buttonRecipe({ variant: "primary" }, ["h-full", className])  // ✅ 배열 — 여기서도 cn 불필요
- *
- * 레이어: styles.css(토큰) → recipe(변형) → 컴포넌트(동작).
- */
+
 export { type BadgeVariants, badgeRecipe } from "./badgeRecipe";
 export { type ButtonVariants, buttonRecipe } from "./buttonRecipe";
 export { recipe, tv } from "./factory";

package/ui/recipe/inputRecipe.ts

@@ -1,6 +1,6 @@
 import { recipe, tv } from "./factory";
 
-/** 입력 표면 look — Input/TextArea/Select 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area), tone 으로 강조/오류 상태를 고른다. */
+/** 입력 표면 look — Input/TextArea/DatePicker 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area), tone 으로 강조/오류 상태를 고른다. */
 export const inputRecipe = recipe(
   tv({
     base: "w-full rounded-field border border-input bg-background text-foreground focus:border-primary focus:outline-none",
@@ -13,7 +13,7 @@ export const inputRecipe = recipe(
         error: "border-destructive focus:border-destructive",
       },
     },
-
+    
     compoundVariants: [
       { kind: "field", size: "xs", class: "h-6" },
       { kind: "field", size: "sm", class: "h-8" },

package/ui/sliceNamesOf.ts

@@ -0,0 +1,26 @@
+import { capitalize } from "akanjs/common";
+import { sliceKeysOf } from "../store/sliceKeys";
+
+export const sliceNamesOf = (model: string, sliceName: string) => {
+  const Model = capitalize(model);
+  const { state, action } = sliceKeysOf(model);
+  const names = {
+    ...state,
+    ...action,
+    model,
+    modelId: `${model}Id`,
+    modelObjList: `${model}ObjList`,
+    modelObjInsight: `${model}ObjInsight`,
+    newModel: `new${Model}`,
+    editModel: `edit${Model}`,
+    viewModel: `view${Model}`,
+    removeModel: `remove${Model}`,
+    setViewOfModel: `setViewOf${Model}`,
+    exportCsvOfModel: `exportCsvOf${Model}`,
+    exportJsonOfModel: `exportJsonOf${Model}`,
+  };
+  const namesOfSlice = Object.fromEntries(
+    Object.entries(names).map(([key, name]) => [key, sliceName.replace(model, name)]),
+  ) as typeof names;
+  return { names, namesOfSlice };
+};