devnonla-ui 0.1.0 → 0.3.0

package/src/form/variants/FieldColor.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
-import { Input } from "../../input/Input";
-import { Popover } from "../../popover/Popover";
+import { ColorPicker, type PresetColorType } from "../../colorpicker/ColorPicker";
+import type { ControlSize } from "../../lib/sizes";
 
 type Props = {
   field: ControllerRenderProps<FieldValues, string>;
@@ -9,55 +8,21 @@ type Props = {
   status?: "error" | "warning";
 };
 
-const FALLBACK = "#000000";
-
 export function FieldColor({ field, options, status }: Props) {
-  const raw = typeof field.value === "string" ? field.value : field.value ? String(field.value) : "";
-  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(raw) ? raw : FALLBACK;
-  const [open, setOpen] = useState(false);
-
+  const opts = options ?? {};
+  const raw = typeof field.value === "string" ? field.value : field.value != null ? String(field.value) : "";
   return (
-    <div className="flex items-center gap-2">
-      <Popover
-        open={open}
-        onOpenChange={setOpen}
-        trigger="click"
-        placement="bottom"
-        content={
-          <div className="flex flex-col gap-2 p-1 min-w-[180px]">
-            <input
-              type="color"
-              value={hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              className="h-24 w-full cursor-pointer border-0 bg-transparent p-0"
-              aria-label="Pick color"
-            />
-            <Input
-              value={raw || hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              placeholder="#000000"
-              status={status}
-              className="font-mono text-sm"
-              {...(options as object)}
-            />
-          </div>
-        }
-      >
-        <button
-          type="button"
-          className="size-9 shrink-0 cursor-pointer rounded border border-input p-0"
-          style={{ backgroundColor: raw || hex }}
-          aria-label="Color picker"
-        />
-      </Popover>
-      <Input
-        className="flex-1 font-mono text-sm"
-        value={raw}
-        onChange={(e) => field.onChange(e.target.value)}
-        onBlur={field.onBlur}
-        placeholder="#000000"
-        status={status}
-      />
-    </div>
+    <ColorPicker
+      value={raw || null}
+      onChange={(color) => field.onChange(color.toHexString())}
+      onClear={() => field.onChange("")}
+      showText
+      allowClear={opts.allowClear !== false}
+      disabled={opts.disabled as boolean | undefined}
+      disabledAlpha={opts.disabledAlpha as boolean | undefined}
+      size={opts.size as ControlSize | undefined}
+      status={status}
+      presets={opts.presets as PresetColorType[] | undefined}
+    />
   );
 }

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";
@@ -22,8 +22,8 @@ export type { SwitchProps, SwitchVariant } from "./switch/Switch";
 export { Checkbox } from "./checkbox/Checkbox";
 export type { CheckboxProps } from "./checkbox/Checkbox";
 
-export { ColorPicker } from "./colorpicker/ColorPicker";
-export type { ColorPickerProps } from "./colorpicker/ColorPicker";
+export { ColorPicker, Color } from "./colorpicker/ColorPicker";
+export type { ColorPickerProps, ColorFormat, ColorType, PresetColorType, ColorPickerSemanticSlot } from "./colorpicker/ColorPicker";
 
 export { Tooltip } from "./tooltip/Tooltip";
 export type { TooltipProps, TooltipPlacement } from "./tooltip/Tooltip";
@@ -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";
 
@@ -77,6 +77,9 @@ export type { PopconfirmProps } from "./popconfirm/Popconfirm";
 export { Drawer } from "./drawer/Drawer";
 export type { DrawerProps, DrawerPlacement } from "./drawer/Drawer";
 
+export { Splitter, SplitterPanel } from "./splitter/Splitter";
+export type { SplitterProps, SplitterPanelProps, SplitterOrientation, SplitterSize, SplitterSemanticSlot } from "./splitter/Splitter";
+
 export { Table } from "./table/Table";
 export type {
   TableProps,
@@ -102,6 +105,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 +149,14 @@ export {
   prettyJson,
   isCallAgentToolName,
   parseCallAgentToolTargetId,
+  matchesToolName,
+  matchesToolHook,
   parseBgTaskRef,
   formatBgElapsed,
   resolveToolUI,
+  builtinToolUis,
+  matchesToolUIName,
+  isToolRunning,
   CallAgentToolUI,
   WebFetchToolUI,
   GetCurrentTimeToolUI,
@@ -173,20 +184,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 = {