devnonla-ui 0.1.0 → 0.2.0

package/src/dropdown/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import type { ReactNode } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import type { MenuItemType, MenuProps } from "./Dropdown";
 import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
@@ -80,6 +81,7 @@ function MenuItems({
 }
 
 export function ContextMenu({ menu, children, open, onOpenChange, className, overlayClassName, disabled }: ContextMenuProps) {
+  const portal = usePopupContainer()?.();
   if (disabled) return children;
 
   const contentClassName = cn(menuContentClass, className, overlayClassName, menu?.className);
@@ -87,7 +89,7 @@ export function ContextMenu({ menu, children, open, onOpenChange, className, ove
   return (
     <ContextMenuPrimitive.Root modal open={open} onOpenChange={onOpenChange}>
       <ContextMenuPrimitive.Trigger asChild>{children}</ContextMenuPrimitive.Trigger>
-      <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Portal container={portal}>
         <ContextMenuPrimitive.Content collisionPadding={8} className={contentClassName} style={menu?.style}>
           <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} contentClassName={contentClassName} />
         </ContextMenuPrimitive.Content>

package/src/dropdown/Dropdown.tsx

@@ -1,5 +1,6 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { type CSSProperties, type MouseEvent, type ReactNode, useState } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
 import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
@@ -34,7 +35,7 @@ export type DropdownProps = {
   className?: string;
   overlayClassName?: string;
   disabled?: boolean;
-  /** antd 5.25+ alias — accepted, no-op (Radix unmounts when closed). */
+  /** Alias — accepted, no-op (Radix unmounts when closed). */
   destroyOnHidden?: boolean;
   classNames?: { root?: string; overlay?: string };
 };
@@ -51,7 +52,7 @@ function itemKey(item: MenuItemType, i: number) {
   return item.key ?? (item.type === "divider" ? `divider-${i}` : `item-${i}`);
 }
 
-function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined)[]; onClick?: MenuProps["onClick"] }) {
+function MenuItems({ items, onClick, portal }: { items: (MenuItemType | null | undefined)[]; onClick?: MenuProps["onClick"]; portal?: HTMLElement }) {
   return (
     <>
       {items.map((item, i) => {
@@ -68,9 +69,9 @@ function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined
                 <span className="min-w-0 flex-1">{item.label}</span>
                 <ChevronRight />
               </DropdownMenu.SubTrigger>
-              <DropdownMenu.Portal>
+              <DropdownMenu.Portal container={portal}>
                 <DropdownMenu.SubContent sideOffset={4} className={cn(menuContentClass, "nonla-popper")}>
-                  <MenuItems items={item.children} onClick={onClick} />
+                  <MenuItems items={item.children} onClick={onClick} portal={portal} />
                 </DropdownMenu.SubContent>
               </DropdownMenu.Portal>
             </DropdownMenu.Sub>
@@ -98,6 +99,7 @@ function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined
 
 export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChange, placement = "bottomLeft", className, overlayClassName, disabled }: DropdownProps) {
   const { side, align } = placementToRadix(placement);
+  const portal = usePopupContainer()?.();
   const hover = trigger.includes("hover");
   const contextMenu = trigger.includes("contextMenu");
   const click = trigger.includes("click") || (!hover && !contextMenu);
@@ -119,7 +121,7 @@ export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChan
       <DropdownMenu.Trigger asChild disabled={disabled} onClick={click || contextMenu ? undefined : (e) => e.preventDefault()} onMouseEnter={hover && !disabled ? () => setIsOpen(true) : undefined} onMouseLeave={hover ? () => setIsOpen(false) : undefined} onContextMenu={handleContext}>
         {children}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={portal}>
         <DropdownMenu.Content
           side={side}
           align={align === "center" ? "start" : align}
@@ -129,7 +131,7 @@ export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChan
           onMouseEnter={hover ? () => setIsOpen(true) : undefined}
           onMouseLeave={hover ? () => setIsOpen(false) : undefined}
         >
-          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} />
+          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} portal={portal} />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

package/src/form/Form.tsx

@@ -20,10 +20,10 @@ export type FormProps<T extends FieldValues = FieldValues> = {
 function evalCondition(fieldValue: unknown, operator: string, compareValue: unknown): boolean {
   switch (operator) {
     case "==":
-      // eslint-disable-next-line eqeqeq
+      // biome-ignore lint/suspicious/noDoubleEquals: form condition operator is loose equality
       return fieldValue == compareValue;
     case "!=":
-      // eslint-disable-next-line eqeqeq
+      // biome-ignore lint/suspicious/noDoubleEquals: form condition operator is loose equality
       return fieldValue != compareValue;
     case ">=":
       return (fieldValue as number) >= (compareValue as number);

package/src/form/FormItem.tsx

@@ -111,10 +111,10 @@ export function FormItem(props: FormItemProps) {
                   </svg>
                 </button>
               ) : null}
-              <label className="text-sm text-foreground">
+              <div className="text-sm text-foreground">
                 {label}
                 {required ? <span className="ml-1 text-destructive">*</span> : null}
-              </label>
+              </div>
             </div>
           ) : null}
 

package/src/form/partials/FormItemHelps.tsx

@@ -23,8 +23,8 @@ export function FormItemHelps({ items, className }: FormItemHelpsProps) {
   if (!items?.length) return null;
   return (
     <div className={cn("mt-1 flex flex-col gap-1 pl-2.75", className)}>
-      {items.map((item, index) => (
-        <FormItemHelp key={`${index}-${item.text}`} text={item.text} className={item.className} iconClassName={item.iconClassName} />
+      {items.map((item) => (
+        <FormItemHelp key={item.text} text={item.text} className={item.className} iconClassName={item.iconClassName} />
       ))}
     </div>
   );

package/src/form/variants/FieldColor.tsx

@@ -24,7 +24,7 @@ export function FieldColor({ field, options, status }: Props) {
         trigger="click"
         placement="bottom"
         content={
-          <div className="flex flex-col gap-2 p-1 min-w-[180px]">
+          <div className="flex flex-col gap-2 p-1 min-w-45">
             <input
               type="color"
               value={hex}

package/src/form/variants/FieldObject.tsx

@@ -13,11 +13,11 @@ export function FieldObject({ control, name, childItems }: Props) {
   const prefix = fieldNameOf(name);
   return (
     <div className="grid grid-cols-12 gap-x-4">
-      {(childItems ?? []).map((child, index) => {
+      {(childItems ?? []).map((child) => {
         const childName = fieldNameOf(child.name);
         return (
           <FormItem
-            key={`${prefix}.${childName}-${index}`}
+            key={`${prefix}.${childName}`}
             {...child}
             name={`${prefix}.${childName}`}
             control={control}

package/src/form/variants/FieldRepeaterItem.tsx

@@ -17,7 +17,7 @@ export function FieldRepeaterItem({ index, remove, namePrefix, childItems, contr
 
   return (
     <div className="relative">
-      <div className={`absolute bottom-0 left-0 border-l border-dashed border-border ${index === 0 ? "top-0" : "top-[-20px]"}`} />
+      <div className={`absolute bottom-0 left-0 border-l border-dashed border-border ${index === 0 ? "top-0" : "-top-5"}`} />
 
       <div className="flex items-center gap-2">
         <div className="flex flex-1 items-center gap-2">
@@ -37,7 +37,7 @@ export function FieldRepeaterItem({ index, remove, namePrefix, childItems, contr
         <button
           type="button"
           aria-label="Remove item"
-          className="inline-flex size-5 items-center justify-center rounded border-0 bg-muted text-muted-foreground cursor-pointer hover:bg-destructive hover:text-[var(--destructive-foreground)]"
+          className="inline-flex size-5 items-center justify-center rounded border-0 bg-muted text-muted-foreground cursor-pointer hover:bg-destructive hover:text-destructive-foreground"
           onClick={() => remove(index)}
         >
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
@@ -47,11 +47,11 @@ export function FieldRepeaterItem({ index, remove, namePrefix, childItems, contr
       </div>
 
       <div className={`mt-2 grid grid-cols-12 gap-x-4 overflow-hidden pl-8 ${collapsed ? "max-h-0" : ""}`}>
-        {(childItems ?? []).map((child, childIndex) => {
+        {(childItems ?? []).map((child) => {
           const childName = fieldNameOf(child.name);
           return (
             <FormItem
-              key={`${namePrefix}.${childName}-${childIndex}`}
+              key={`${namePrefix}.${childName}`}
               {...child}
               name={`${namePrefix}.${childName}`}
               control={control}

package/src/form-layout/FormLayout.tsx

@@ -1,8 +1,8 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type FormLayoutProps = HTMLAttributes<HTMLDivElement> & {
-  /** antd Form layout — only vertical is used in this app. */
+  /** Form layout — only vertical is used in this app. */
   layout?: "horizontal" | "vertical" | "inline";
   children?: ReactNode;
 };
@@ -25,7 +25,7 @@ function FormRoot({ layout = "vertical", className, children, ...rest }: FormLay
 export type FormLayoutItemProps = {
   label?: ReactNode;
   required?: boolean;
-  /** antd `extra` — help text under the control. */
+  /** Help text under the control. */
   extra?: ReactNode;
   help?: ReactNode;
   validateStatus?: "success" | "warning" | "error" | "validating";
@@ -53,10 +53,10 @@ function FormItem({
       )}
     >
       {label != null && label !== false ? (
-        <label className={cn("text-sm text-foreground", layout === "horizontal" && "pt-1.5 shrink-0")}>
+        <div className={cn("text-sm text-foreground", layout === "horizontal" && "pt-1.5 shrink-0")}>
           {label}
           {required ? <span className="ml-1 text-destructive">*</span> : null}
-        </label>
+        </div>
       ) : null}
       <div className="min-w-0 flex-1">
         {children}
@@ -69,6 +69,6 @@ function FormItem({
   );
 }
 
-/** Layout-only Form (antd Form / Form.Item drop-in). Schema forms use `SchemaForm`. */
+/** Layout-only Form (`Form` / `Form.Item`). Schema forms use `SchemaForm`. */
 export const Form = Object.assign(FormRoot, { Item: FormItem });
 export { FormItem };

package/src/index.ts

@@ -1,4 +1,4 @@
-export { App, useAppConfig } from "./app/App";
+export { App, useApp, useAppConfig, usePopupContainer, useToken } from "./app/App";
 export type { AppProps, NonlaAppConfig } from "./app/App";
 
 export { Button } from "./button/Button";
@@ -10,7 +10,7 @@ export { Input, TextArea, InputNumber } from "./input/Input";
 export type { InputProps, TextAreaProps, InputNumberProps, InputSize, TextAreaRef, PasswordProps } from "./input/Input";
 export { SearchInput } from "./input/SearchInput";
 export type { SearchInputProps } from "./input/SearchInput";
-/** antd `InputRef` compatibility — native input element. */
+/** Native input element ref. */
 export type InputRef = HTMLInputElement;
 
 export { Select, SelectOption } from "./select/Select";
@@ -55,7 +55,7 @@ export type {
   IFormItemHelpProps,
 } from "./form";
 
-/** Layout-only Form + Form.Item (antd drop-in for labeled fields). */
+/** Layout-only Form + Form.Item for labeled fields. */
 export { Form } from "./form-layout/FormLayout";
 export type { FormLayoutProps, FormLayoutItemProps } from "./form-layout/FormLayout";
 
@@ -102,6 +102,9 @@ export type { SpinProps, SpinVariant } from "./spin/Spin";
 export { Skeleton } from "./skeleton/Skeleton";
 export type { SkeletonProps } from "./skeleton/Skeleton";
 
+export { Shimmer } from "./shimmer/Shimmer";
+export type { ShimmerProps } from "./shimmer/Shimmer";
+
 export { Segmented } from "./segmented/Segmented";
 export type { SegmentedProps, SegmentedOption } from "./segmented/Segmented";
 
@@ -143,9 +146,14 @@ export {
   prettyJson,
   isCallAgentToolName,
   parseCallAgentToolTargetId,
+  matchesToolName,
+  matchesToolHook,
   parseBgTaskRef,
   formatBgElapsed,
   resolveToolUI,
+  builtinToolUis,
+  matchesToolUIName,
+  isToolRunning,
   CallAgentToolUI,
   WebFetchToolUI,
   GetCurrentTimeToolUI,
@@ -173,20 +181,26 @@ export type {
   AgentStreamRequest,
   AgentPanelEndpoint,
   AgentToolAction,
+  AgentToolHook,
+  AgentToolCallEvent,
+  AgentToolResultEvent,
+  AgentToolNameMatch,
   ToolUIProps,
   ChatToolMessage,
+  AgentToolUI,
+  AgentToolUIName,
   ChatBgTask,
   BackgroundTasksBarProps,
 } from "./chat";
 
 export { cn } from "./lib/cn";
 export { glassSurfaceClass, glassOverlayClass, meadowSurfaceClass } from "./lib/surface";
-export { CONTROL_SIZES, normalizeSize, getSizeTokens, controlHeightVar, controlRadiusVar, controlStatusClass } from "./lib/sizes";
+export { CONTROL_SIZES, normalizeSize, getSizeTokens, controlHeightVar, controlRadiusVar, controlStatusClass, useControlSize } from "./lib/sizes";
 export type { ControlSize, CanonicalSize, ControlSizeTokens } from "./lib/sizes";
 export { placementToRadix } from "./lib/placement";
 export type { PopperPlacement } from "./lib/placement";
-export { NONLA_THEME_KNOBS, NONLA_THEME_KEYS, applyNonlaTheme } from "./theme";
-export type { NonlaThemeKnob, NonlaThemeKnobName, NonlaThemeColorName, NonlaThemeColors, NonlaThemeConfig } from "./theme";
+export { NONLA_THEME_KNOBS, NONLA_THEME_KEYS, applyNonlaTheme, getDesignToken } from "./theme";
+export type { NonlaThemeKnob, NonlaThemeKnobName, NonlaThemeColorName, NonlaThemeColors, NonlaThemeConfig, NonlaTokenSnapshot } from "./theme";
 
 export { FluentIcon } from "./icon/FluentIcon";
 export {

package/src/input/Input.tsx

@@ -1,6 +1,6 @@
 import { type CSSProperties, type InputHTMLAttributes, type KeyboardEvent, type ReactNode, type TextareaHTMLAttributes, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlHeightVar, controlRadiusVar, controlStatusClass, getSizeTokens, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlHeightVar, controlRadiusVar, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type InputSize = ControlSize;
 
@@ -11,7 +11,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "p
   suffix?: ReactNode;
   allowClear?: boolean;
   variant?: "outlined" | "borderless" | "filled";
-  /** antd — fires on Enter (ignored while composing). */
+  /** Fires on Enter (ignored while composing). */
   onPressEnter?: (e: KeyboardEvent<HTMLInputElement>) => void;
 };
 
@@ -24,7 +24,7 @@ function variantClass(variant: InputProps["variant"]) {
 }
 
 const InputRoot = forwardRef<HTMLInputElement, InputProps>(function Input({ className, size, status, prefix, suffix, allowClear, variant = "outlined", disabled, value, onChange, onPressEnter, onKeyDown, style, ...rest }, ref) {
-  const fieldStyle = controlFieldStyle(size);
+  const fieldStyle = controlFieldStyle(useControlSize(size));
   const showClear = allowClear && !disabled && value != null && String(value).length > 0;
   const wrapped = Boolean(prefix || suffix || showClear);
 
@@ -72,13 +72,13 @@ export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   size?: ControlSize;
 };
 
-/** antd-compatible ref used by chat InputArea (`resizableTextArea.textArea`). */
+/** Ref used by chat InputArea (`resizableTextArea.textArea`). */
 export type TextAreaRef = HTMLTextAreaElement & {
   resizableTextArea?: { textArea: HTMLTextAreaElement };
 };
 
 const TextArea = forwardRef<TextAreaRef, TextAreaProps>(function TextArea({ className, status, variant = "outlined", autoSize, rows, style, size, onChange, value, ...rest }, ref) {
-  const tok = getSizeTokens(size);
+  const tok = getSizeTokens(useControlSize(size));
   const innerRef = useRef<HTMLTextAreaElement | null>(null);
   const minRows = typeof autoSize === "object" ? (autoSize.minRows ?? 1) : autoSize ? 1 : undefined;
   const maxRows = typeof autoSize === "object" ? autoSize.maxRows : undefined;
@@ -139,7 +139,7 @@ export type InputNumberProps = Omit<InputProps, "type" | "onChange" | "value" |
   min?: number;
   max?: number;
   step?: number;
-  /** Show antd-style up/down handlers (default true). */
+  /** Show up/down handlers (default true). */
   controls?: boolean;
   /** Precision after decimal; omit to keep free typing. */
   precision?: number;
@@ -175,8 +175,9 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
   const [text, setText] = useState(() => (numeric == null ? "" : String(numeric)));
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const tok = getSizeTokens(size);
-  const fieldStyle = controlFieldStyle(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const fieldStyle = controlFieldStyle(resolvedSize);
 
   // Sync display from external value when not editing
   useEffect(() => {
@@ -215,7 +216,7 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
 
   const atMin = numeric != null && min != null && numeric <= min;
   const atMax = numeric != null && max != null && numeric >= max;
-  const handlerW = normalizeSize(size) === "small" ? 18 : 22;
+  const handlerW = resolvedSize === "small" ? 18 : 22;
 
   const setRefs = (node: HTMLInputElement | null) => {
     inputRef.current = node;
@@ -254,7 +255,7 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
         onChange={(e) => {
           const raw = e.target.value;
           setText(raw);
-          // Live update when parseable (antd-like); keep typing free otherwise
+          // Live update when parseable; keep typing free otherwise
           if (raw === "" || raw === "-" || raw === "." || raw === "-.") return;
           const n = parseRaw(raw);
           if (n != null) {

package/src/lib/sizes.ts

@@ -1,8 +1,9 @@
-import type { CSSProperties } from "react";
+import { createContext, useContext, type CSSProperties } from "react";
 
 /**
  * Canonical control sizes for NonlaUI.
- * Height + radius live as `--nonla-*` CSS knobs (theme). Other metrics stay here.
+ * Live height / radius come from `--nonla-height*` / `--nonla-radius*` (seed).
+ * Numbers here are fallbacks for padding / font / icon — keep in sync with CSS 24 / 32 / 40.
  * Radius small/large = `--nonla-radius` ± 2px.
  */
 export const CONTROL_SIZES = {
@@ -45,7 +46,7 @@ export type ControlSize = CanonicalSize | "middle" | "medium" | "xs";
 
 export type ControlSizeTokens = (typeof CONTROL_SIZES)[CanonicalSize];
 
-/** Map legacy / antd aliases → small | default | large */
+/** Map legacy aliases → small | default | large */
 export function normalizeSize(size: ControlSize | undefined): CanonicalSize {
   if (size === "small" || size === "xs") return "small";
   if (size === "large") return "large";
@@ -53,6 +54,15 @@ export function normalizeSize(size: ControlSize | undefined): CanonicalSize {
   return "default";
 }
 
+/** App `componentSize` — prop on the control wins, then this. */
+export const ControlSizeContext = createContext<CanonicalSize | undefined>(undefined);
+
+/** Resolve size: control prop → App `componentSize` → default. */
+export function useControlSize(size?: ControlSize): CanonicalSize {
+  const fromApp = useContext(ControlSizeContext);
+  return normalizeSize(size ?? fromApp);
+}
+
 export function getSizeTokens(size: ControlSize | undefined): ControlSizeTokens {
   return CONTROL_SIZES[normalizeSize(size)];
 }

package/src/lib/surface.ts

@@ -2,7 +2,8 @@
 export const glassSurfaceClass = "nonla-glass";
 
 /** Floating overlay chrome (Popover / Dropdown / Select / pickers / Tooltip). */
-export const glassOverlayClass = "z-[9999] rounded-xl nonla-glass outline-none nonla-popper";
+export const glassOverlayClass =
+  "nonla-popup-layer z-[var(--nonla-z-popup,1050)] rounded-xl nonla-glass outline-none nonla-popper";
 
 /** Meadow menus — same panel as overlays. */
 export const meadowSurfaceClass = "rounded-xl nonla-glass";

package/src/menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import { FluentIcon } from "../icon/FluentIcon";
 import { cn } from "../lib/cn";
 import type { PopperPlacement } from "../lib/placement";
@@ -20,7 +20,7 @@ export function Menu({ open, onOpenChange, trigger, children, contentClassName,
       onOpenChange={onOpenChange}
       trigger="click"
       placement={placement}
-      contentClassName={cn("w-[220px] p-1", contentClassName)}
+      contentClassName={cn("w-55 p-1", contentClassName)}
       content={<div className="flex flex-col gap-px">{children}</div>}
     >
       {trigger}

package/src/message/message.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { type CSSProperties, type ReactNode, useLayoutEffect, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
 export type MessageType = "success" | "error" | "info" | "warning" | "loading";
@@ -117,8 +117,19 @@ function MessageList({ list }: { list: Active[] }) {
   );
 }
 
+type MessageRenderer = (list: Active[]) => void;
+let renderer: MessageRenderer | null = null;
+
+function dropFallbackHost() {
+  if (!hostEl) return;
+  root?.unmount();
+  hostEl.remove();
+  hostEl = null;
+  root = null;
+}
+
 function ensureHost() {
-  if (hostEl && root) return;
+  if (renderer || (hostEl && root)) return;
   hostEl = document.createElement("div");
   hostEl.className = "nonla-message-host";
   document.body.appendChild(hostEl);
@@ -126,10 +137,32 @@ function ensureHost() {
 }
 
 function render() {
+  if (renderer) {
+    renderer(items);
+    return;
+  }
   ensureHost();
   root?.render(<MessageList list={items} />);
 }
 
+/** Mounted by `App` so toasts inherit theme. Falls back to `document.body` if no App. */
+export function MessageHolder() {
+  const [list, setList] = useState<Active[]>(items);
+  useLayoutEffect(() => {
+    dropFallbackHost();
+    renderer = setList;
+    setList(items);
+    return () => {
+      renderer = null;
+    };
+  }, []);
+  return (
+    <div className="nonla-message-host" aria-live="polite" aria-relevant="additions">
+      <MessageList list={list} />
+    </div>
+  );
+}
+
 function beginLeave(id: string) {
   const found = items.find((i) => i.id === id);
   if (!found || found.leaving) return;

package/src/modal/Modal.tsx

@@ -4,10 +4,12 @@ import {
   type CSSProperties,
   type ReactNode,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { usePopupContainer } from "../app/context";
 import { Button } from "../button/Button";
 import { cn } from "../lib/cn";
 import { glassSurfaceClass } from "../lib/surface";
@@ -37,7 +39,7 @@ export type ModalProps = {
   closable?: boolean;
   maskClosable?: boolean;
   className?: string;
-  /** Root positioning (antd `style={{ top }}`). */
+  /** Root positioning (`style={{ top }}`). */
   style?: CSSProperties;
   styles?: { body?: CSSProperties; content?: CSSProperties; header?: CSSProperties; footer?: CSSProperties; container?: CSSProperties };
   onOpenChange?: (open: boolean) => void;
@@ -154,6 +156,8 @@ function ModalView({
     if (!isOpen) finishExit();
   };
 
+  const portal = usePopupContainer()?.();
+
   return (
     <Dialog.Root
       open={isOpen}
@@ -166,7 +170,7 @@ function ModalView({
       }}
     >
       {isOpen || present ? (
-        <Dialog.Portal>
+        <Dialog.Portal container={portal}>
           <Dialog.Overlay className="nonla-modal-overlay" />
           <Dialog.Content
             className={cn("nonla-modal-content", glassSurfaceClass, className)}
@@ -210,6 +214,10 @@ function ConfirmHost({ initial, onDone }: { initial: ModalConfirmProps; onDone:
   const [props, setProps] = useState(initial);
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    setProps(initial);
+  }, [initial]);
+
   useEffect(() => {
     (ConfirmHost as unknown as { _update?: (p: Partial<ModalConfirmProps>) => void })._update = (p) => setProps((prev) => ({ ...prev, ...p }));
   }, []);
@@ -253,7 +261,12 @@ function ConfirmHost({ initial, onDone }: { initial: ModalConfirmProps; onDone:
   );
 }
 
-function mountConfirm(props: ModalConfirmProps): ConfirmHandle {
+type ConfirmJob = { id: number; props: ModalConfirmProps };
+type ConfirmOpener = (props: ModalConfirmProps) => ConfirmHandle;
+
+let openConfirm: ConfirmOpener | null = null;
+
+function mountFallback(props: ModalConfirmProps): ConfirmHandle {
   const el = document.createElement("div");
   document.body.appendChild(el);
   const root: Root = createRoot(el);
@@ -268,6 +281,39 @@ function mountConfirm(props: ModalConfirmProps): ConfirmHandle {
   };
 }
 
+function mountConfirm(props: ModalConfirmProps): ConfirmHandle {
+  return openConfirm ? openConfirm(props) : mountFallback(props);
+}
+
+/** Mounted by `App` so `Modal.confirm` shares theme / context. */
+export function ConfirmHolder() {
+  const [jobs, setJobs] = useState<ConfirmJob[]>([]);
+  const seq = useRef(0);
+
+  useLayoutEffect(() => {
+    openConfirm = (props) => {
+      const id = ++seq.current;
+      setJobs((list) => [...list, { id, props }]);
+      return {
+        destroy: () => setJobs((list) => list.filter((job) => job.id !== id)),
+        update: (p) =>
+          setJobs((list) => list.map((job) => (job.id === id ? { ...job, props: { ...job.props, ...p } } : job))),
+      };
+    };
+    return () => {
+      openConfirm = null;
+    };
+  }, []);
+
+  return (
+    <>
+      {jobs.map((job) => (
+        <ConfirmHost key={job.id} initial={job.props} onDone={() => setJobs((list) => list.filter((j) => j.id !== job.id))} />
+      ))}
+    </>
+  );
+}
+
 export const Modal = Object.assign(ModalView, {
   confirm: (props: ModalConfirmProps) => mountConfirm(props),
   info: (props: ModalConfirmProps) => mountConfirm(props),

package/src/pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlHeightVar, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlHeightVar, useControlSize } from "../lib/sizes";
 
 export type PaginationItemType = "page" | "prev" | "next" | "jump-prev" | "jump-next";
 
@@ -20,8 +20,8 @@ export type PaginationProps = {
 function pageList(current: number, pages: number): (number | "ellipsis")[] {
   if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
   const set = new Set<number>([1, pages, current, current - 1, current + 1]);
-  if (current <= 3) [2, 3, 4].forEach((n) => set.add(n));
-  if (current >= pages - 2) [pages - 1, pages - 2, pages - 3].forEach((n) => set.add(n));
+  if (current <= 3) for (const n of [2, 3, 4]) set.add(n);
+  if (current >= pages - 2) for (const n of [pages - 1, pages - 2, pages - 3]) set.add(n);
   const nums = [...set].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b);
   const out: (number | "ellipsis")[] = [];
   for (let i = 0; i < nums.length; i++) {
@@ -58,9 +58,10 @@ function ItemBtn({
 }
 
 export function Pagination({ current = 1, pageSize = 10, total = 0, onChange, className, disabled, size, itemRender }: PaginationProps) {
+  const resolvedSize = useControlSize(size);
+  const compact = resolvedSize === "small";
+  const h = compact ? controlHeightVar(resolvedSize) : 28;
   const pages = Math.max(1, Math.ceil(total / pageSize));
-  const compact = normalizeSize(size) === "small";
-  const h = compact ? controlHeightVar(size) : 28;
 
   const wrap = (page: number, type: PaginationItemType, node: ReactNode) => (itemRender ? itemRender(page, type, node) : node);
 

package/src/popconfirm/Popconfirm.tsx

@@ -1,7 +1,7 @@
 import { type CSSProperties, type ReactNode, useState } from "react";
 import { Button } from "../button/Button";
 import { cn } from "../lib/cn";
-import { type PopperPlacement } from "../lib/placement";
+import type { PopperPlacement } from "../lib/placement";
 import { Popover } from "../popover/Popover";
 
 export type PopconfirmProps = {