devnonla-ui 0.1.0 → 0.2.0

package/src/popover/Popover.tsx

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
-import { useAppConfig } from "../app/App";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
 import { glassOverlayClass } from "../lib/surface";
@@ -17,14 +17,14 @@ export type PopoverProps = {
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   getPopupContainer?: () => HTMLElement;
-  /** Show arrow pointing at the trigger (antd default for Popconfirm). */
+  /** Show arrow pointing at the trigger (Popconfirm default). */
   arrow?: boolean | { pointAtCenter?: boolean };
   className?: string;
   overlayClassName?: string;
   /** Extra class on the content panel (padding / width). */
   contentClassName?: string;
   style?: CSSProperties;
-  /** antd `styles` — `root`/`body` map to content panel; `container` accepted as alias. */
+  /** `styles` — `root`/`body` map to content panel; `container` accepted as alias. */
   styles?: {
     root?: CSSProperties;
     body?: CSSProperties;
@@ -52,11 +52,11 @@ export function Popover({
   style,
   styles,
 }: PopoverProps) {
+  const hover = trigger === "hover";
   const showArrow = Boolean(arrow);
   const panelStyle = { ...style, ...styles?.root, ...styles?.content, ...styles?.container, ...styles?.body };
-  const app = useAppConfig();
+  const getContainer = usePopupContainer(getPopupContainer);
   const { side, align } = placementToRadix(placement);
-  const hover = trigger === "hover";
   const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
   const open = openProp ?? innerOpen;
   const enterTimer = useRef<number>(0);
@@ -83,8 +83,6 @@ export function Popover({
     leaveTimer.current = window.setTimeout(() => setOpen(false), mouseLeaveDelay * 1000);
   };
 
-  const container = getPopupContainer ?? app.getPopupContainer;
-
   return (
     <PopoverPrimitive.Root
       open={open}
@@ -96,7 +94,7 @@ export function Popover({
       <PopoverPrimitive.Trigger asChild onMouseEnter={onEnter} onMouseLeave={onLeave}>
         {children}
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal container={container?.()}>
+      <PopoverPrimitive.Portal container={getContainer()}>
         <PopoverPrimitive.Content
           side={side}
           align={align}

package/src/scroll/OverlayScroll.tsx

@@ -3,6 +3,8 @@ import { cn } from "../lib/cn";
 
 export type OverlayScrollVisibility = "hover" | "always";
 
+const HIDE_MS = 1000;
+
 export type OverlayScrollProps = {
   /** `hover` shows the thumb on hover / while scrolling. `always` keeps it visible. */
   visibility?: OverlayScrollVisibility;
@@ -75,7 +77,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     if (visibility === "hover" && !dragging) {
       setScrolling(true);
       if (hideTimer.current) clearTimeout(hideTimer.current);
-      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+      hideTimer.current = setTimeout(() => setScrolling(false), HIDE_MS);
     }
     onScroll?.(e);
   };
@@ -109,7 +111,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
       window.removeEventListener("pointercancel", onUp, true);
       setDragging(false);
       if (hideTimer.current) clearTimeout(hideTimer.current);
-      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+      hideTimer.current = setTimeout(() => setScrolling(false), HIDE_MS);
     };
     window.addEventListener("pointermove", onMove, true);
     window.addEventListener("pointerup", onUp, true);
@@ -131,7 +133,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
             "nonla-overlay-thumb absolute z-20 rounded-full transition-opacity duration-150",
             visibility === "always" || dragging
               ? "pointer-events-auto opacity-100"
-              : "pointer-events-none opacity-0 group-hover/scroll:pointer-events-auto group-hover/scroll:opacity-100 group-data-[scrolling]/scroll:pointer-events-auto group-data-[scrolling]/scroll:opacity-100",
+              : "pointer-events-none opacity-0 group-hover/scroll:pointer-events-auto group-hover/scroll:opacity-100 group-data-scrolling/scroll:pointer-events-auto group-data-scrolling/scroll:opacity-100",
           )}
           style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: thumb.height, transform: `translateY(${thumb.top}px)` }}
         />

package/src/segmented/Segmented.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlHeightVar, controlRadiusVar, getSizeTokens, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlHeightVar, controlRadiusVar, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type SegmentedOption<V extends string | number = string | number> = V | { label: ReactNode; value: V; disabled?: boolean; icon?: ReactNode };
 
@@ -23,16 +23,17 @@ function norm<V extends string | number>(opt: SegmentedOption<V>): { label: Reac
 export function Segmented<V extends string | number = string | number>({ options, value, defaultValue, onChange, size, block, disabled, className }: SegmentedProps<V>) {
   const items = options.map((o) => norm(o));
   const current = value ?? defaultValue ?? items[0]?.value;
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
   const itemPadX = Math.max(tok.paddingInline - 4, 6);
-  const radius = controlRadiusVar(size);
+  const radius = controlRadiusVar(resolvedSize);
 
   return (
     <div
       className={cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-lg bg-brand-50 p-0.5", block && "flex w-full", className)}
       role="tablist"
       style={{ borderRadius: radius }}
-      data-size={normalizeSize(size)}
+      data-size={resolvedSize}
     >
       {items.map((item) => {
         const active = item.value === current;
@@ -49,7 +50,7 @@ export function Segmented<V extends string | number = string | number>({ options
               active ? "bg-brand-200 text-foreground" : "bg-transparent text-foreground hover:bg-brand-100",
             )}
             style={{
-              height: `max(22px, calc(${controlHeightVar(size)} - 4px))`,
+              height: `max(22px, calc(${controlHeightVar(resolvedSize)} - 4px))`,
               paddingLeft: itemPadX,
               paddingRight: itemPadX,
               fontSize: tok.fontSize,

package/src/select/Select.tsx

@@ -11,8 +11,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";
 
 export type SelectValue = string | number;
@@ -26,10 +27,10 @@ export type SelectOptionConfig = {
 export type SelectProps = {
   value?: SelectValue | null;
   defaultValue?: SelectValue | null;
-  // antd interop: call sites often use (v: string) => void
+  // Call sites often use (v: string) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: any) => void;
-  // Looser antd interop — many call sites type handlers as `(v: string) => void`.
+  // Many call sites type handlers as `(v: string) => void`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options?: SelectOptionConfig[];
   placeholder?: string;
@@ -42,7 +43,7 @@ export type SelectProps = {
   className?: string;
   popupClassName?: string;
   children?: ReactNode;
-  /** antd alias */
+  /** Alias of `onChange` for a single pick. */
   onSelect?: (value: SelectValue) => void;
 };
 
@@ -104,6 +105,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const searchRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const resolvedSize = useControlSize(size);
+  const portal = usePopupContainer()?.();
 
   const searchable = Boolean(showSearch);
   const filterProp =
@@ -219,7 +222,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
             controlStatusClass(status),
             className,
           )}
-          style={controlFieldStyle(size)}
+          style={controlFieldStyle(resolvedSize)}
           onKeyDown={onTriggerKey}
         >
           <span className={cn("min-w-0 flex-1 truncate", selected == null || selected === "" ? "text-quaternary-foreground" : "")}>
@@ -244,7 +247,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
           <Chevron />
         </button>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={4}

package/src/shimmer/Shimmer.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type ShimmerProps = HTMLAttributes<HTMLSpanElement> & {
+  /** When false, children render as static text. Default true. */
+  active?: boolean;
+  children?: ReactNode;
+};
+
+/** Sweep highlight on live status text (Thinking, Fetching, …). */
+export function Shimmer({ active = true, className, children, ...rest }: ShimmerProps) {
+  return (
+    <span className={cn(active && "nonla-shimmer", className)} aria-busy={active || undefined} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type SkeletonProps = {
@@ -20,8 +20,8 @@ function SkeletonRoot({ active = true, loading = true, paragraph = true, title =
       {avatar ? <div className={cn("size-10 shrink-0 rounded-full bg-secondary", pulse)} /> : null}
       <div className="flex-1 space-y-2">
         {title ? <div className={cn("h-4 w-1/3 rounded bg-secondary", pulse)} /> : null}
-        {Array.from({ length: rows }).map((_, i) => (
-          <div key={i} className={cn("h-3 rounded bg-secondary", pulse, i === rows - 1 ? "w-2/3" : "w-full")} />
+        {Array.from({ length: rows }, (_, i) => `sk-${i}`).map((key, i) => (
+          <div key={key} className={cn("h-3 rounded bg-secondary", pulse, i === rows - 1 ? "w-2/3" : "w-full")} />
         ))}
       </div>
     </div>

package/src/spin/Spin.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, getSizeTokens } from "../lib/sizes";
+import { type ControlSize, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type SpinVariant = "default" | "agent" | "subAgent";
 
@@ -35,6 +35,8 @@ type Cell = number; // 0..8 on a 3×3 grid
 /** Snake = [head, mid, tail] — always 3 orthogonally adjacent cells. */
 type Snake = [Cell, Cell, Cell];
 
+const MATRIX_CELLS = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
+
 const NEIGHBORS: Record<number, number[]> = {
   0: [1, 3],
   1: [0, 2, 4],
@@ -103,8 +105,8 @@ function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; ti
       }}
       aria-hidden
     >
-      {Array.from({ length: 9 }, (_, i) => (
-        <span key={`c${i % 3}-r${Math.floor(i / 3)}`} className={cn("nonla-spin-matrix-cell", lit.has(i) && "is-on")} />
+      {MATRIX_CELLS.map((cell) => (
+        <span key={cell} className={cn("nonla-spin-matrix-cell", lit.has(cell) && "is-on")} />
       ))}
     </span>
   );
@@ -138,10 +140,11 @@ function Indicator({
 }
 
 export function Spin({ spinning = true, tip, size, variant = "default", indicator, children, className }: SpinProps) {
+  const resolvedSize = useControlSize(size);
   if (children == null) {
     return (
       <div className={cn("inline-flex flex-col items-center gap-2", className)} role={spinning ? "status" : undefined} aria-live={spinning ? "polite" : undefined}>
-        {spinning ? <Indicator size={size} variant={variant} indicator={indicator} /> : null}
+        {spinning ? <Indicator size={resolvedSize} variant={variant} indicator={indicator} /> : null}
         {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
       </div>
     );
@@ -151,7 +154,7 @@ export function Spin({ spinning = true, tip, size, variant = "default", indicato
       {children}
       {spinning ? (
         <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/50" role="status" aria-live="polite">
-          <Indicator size={size} variant={variant} indicator={indicator} />
+          <Indicator size={resolvedSize} variant={variant} indicator={indicator} />
           {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
         </div>
       ) : null}

package/src/styles.css

@@ -3,26 +3,30 @@
 /**
  * NonlaUI theme — single source of color.
  *
- * Light-only. Warm paper + charcoal ink, amber brand.
+ * Layers:
+ *   Seed  — `--nonla-*` knobs in the first block. Consumer overrides these.
+ *   Map   — derived (brand-50…800, radius-sm/lg, z-popup). Do not set unless exception.
+ *   Alias — `--background`, `--brand`, `--destructive` (shadcn + Nonla names).
+ *
+ * Light-only defaults. `.dark` is not an alias of this sheet.
  * Override `--nonla-*` knobs in the consuming app (CSS or `<App theme>`).
  * Components read only these tokens — never edit Button/Tag/… to retheme.
  */
 
 :root,
-.dark,
 .nonla-ui {
   color-scheme: light;
 
-  /* ── Knobs (override these) ──────────────────────────────────────────── */
+  /* ── Knobs / Seed (override these) ──────────────────────────────────── */
   --nonla-bg: #fffcf1;
   --nonla-fg: #1f1f1e;
   /* Text rank on cream — same ink, contrast steps ~13.6 / 7 / 4.5 / 3 (WCAG AAA body → AA body → AA UI). */
   --nonla-fg-muted: color-mix(in oklab, var(--nonla-fg) 78%, var(--nonla-bg));
   --nonla-fg-tertiary: color-mix(in oklab, var(--nonla-fg) 64%, var(--nonla-bg));
   --nonla-fg-quaternary: color-mix(in oklab, var(--nonla-fg) 50%, var(--nonla-bg));
-  --nonla-brand: #eb9d29;
-  /* Ink on brand fills — charcoal, not white (white fails WCAG on amber). */
-  --nonla-solid-fg: var(--nonla-fg);
+  --nonla-brand: #f18d00;
+  /* Label on brand fills (Button primary, Tag solid, Checkbox). Override via `colors.solidFg`. */
+  --nonla-solid-fg: #ffffff;
   --nonla-danger: #c0392b;
   --nonla-success: #1f9d55;
   --nonla-warn: #c47d12;
@@ -53,6 +57,11 @@
   --nonla-ink-active: color-mix(in srgb, var(--nonla-ink) 8%, transparent);
   --nonla-ink-line: color-mix(in srgb, var(--nonla-ink) 14%, transparent);
   --nonla-desktop-bar-height: 42px;
+  --nonla-z-base: 0;
+  --nonla-z-desktop: 20;
+  --nonla-z-window: 30;
+  --nonla-z-header: 40;
+  --nonla-z-popup-base: 1000;
 
   /* Preset accents — Button color="blue" / Tag color="purple" / … */
   --nonla-blue: #1677ff;
@@ -69,9 +78,13 @@
   --nonla-lime: #a0d911;
   --nonla-gold: #faad14;
 
-  /* ── Derived map (do not set unless you need a one-off exception) ───── */
+  /* ── Map + Alias (do not set unless you need a one-off exception) ───── */
   --nonla-radius-sm: max(0px, calc(var(--nonla-radius) - 2px));
   --nonla-radius-lg: calc(var(--nonla-radius) + 2px);
+  --nonla-z-drawer: var(--nonla-z-popup-base);
+  --nonla-z-modal: var(--nonla-z-popup-base);
+  --nonla-z-message: calc(var(--nonla-z-popup-base) + 10);
+  --nonla-z-popup: calc(var(--nonla-z-popup-base) + 50);
   --radius: var(--nonla-radius);
   --background: var(--nonla-bg);
   --foreground: var(--nonla-fg);
@@ -106,6 +119,7 @@
   --brand-800: color-mix(in oklab, var(--nonla-brand) 48%, black);
   --brand: var(--brand-500);
   --brand-text: var(--brand-700);
+  --solid-fg: var(--nonla-solid-fg);
   --link: var(--nonla-link);
   --success: var(--nonla-success);
   --warn: var(--nonla-warn);
@@ -202,6 +216,7 @@
   --color-brand-700: var(--brand-700);
   --color-brand-800: var(--brand-800);
   --color-brand-text: var(--brand-text);
+  --color-solid-fg: var(--solid-fg);
   --color-link: var(--link);
   --color-success: var(--success);
   --color-warn: var(--warn);
@@ -225,13 +240,13 @@
   --shadow-panel: 0 0 0 1px var(--border), 0 4px 16px color-mix(in oklab, var(--nonla-fg) 10%, transparent);
 
   --spacing-control-xs: 24px;
-  --spacing-control-sm: 28px;
+  --spacing-control-sm: 24px;
   --spacing-control-md: 32px;
-  --spacing-control-lg: 36px;
+  --spacing-control-lg: 40px;
   --spacing-nav-item: 32px;
-  --spacing-field-sm: 28px;
+  --spacing-field-sm: 24px;
   --spacing-field-md: 32px;
-  --spacing-field-lg: 36px;
+  --spacing-field-lg: 40px;
   --spacing-field-nav: 32px;
   --spacing-desktop-bar: var(--nonla-desktop-bar-height);
 
@@ -271,7 +286,7 @@
   }
 }
 
-@keyframes nonla-chat-shimmer {
+@keyframes nonla-shimmer {
   0% {
     background-position: 100% 0;
   }
@@ -280,21 +295,31 @@
   }
 }
 
-.nonla-chat-shimmer {
-  background-image: linear-gradient(90deg, var(--muted-foreground) 0%, var(--foreground) 45%, var(--muted-foreground) 90%);
-  background-size: 200% 100%;
+.nonla-shimmer {
+  display: inline-block;
+  background-image: linear-gradient(
+    90deg,
+    var(--tertiary-foreground) 0%,
+    var(--foreground) 40%,
+    color-mix(in oklab, var(--foreground) 25%, white) 50%,
+    var(--foreground) 60%,
+    var(--tertiary-foreground) 100%
+  );
+  background-size: 220% 100%;
   background-clip: text;
   -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   color: transparent;
-  animation: nonla-chat-shimmer 1.8s ease-in-out infinite;
+  animation: nonla-shimmer 1.6s ease-in-out infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .nonla-chat-shimmer {
+  .nonla-shimmer {
     animation: none;
     background-image: none;
     background-clip: border-box;
     -webkit-background-clip: border-box;
+    -webkit-text-fill-color: unset;
     color: var(--muted-foreground);
   }
 }
@@ -305,7 +330,7 @@
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 10000;
+  z-index: var(--nonla-z-message);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -589,20 +614,31 @@
   }
 }
 
-/* Frosted overlay — macOS menu chrome: outer hairline + inner white rim */
+/* Frosted overlay — one hairline + lift. No stacked black/white rings. */
 .nonla-glass {
-  border: 1px solid rgb(255 255 255 / 0.78);
+  border: 1px solid var(--glass-border);
   background: var(--glass);
   color: var(--foreground);
-  box-shadow:
-    0 0 0 0.5px color-mix(in srgb, black 22%, transparent),
-    0 10px 28px color-mix(in srgb, black 14%, transparent),
-    inset 0 0 0 0.5px rgb(255 255 255 / 0.55),
-    inset 0 1px 0 rgb(255 255 255 / 0.92);
+  box-shadow: 0 10px 28px color-mix(in srgb, black 12%, transparent);
   -webkit-backdrop-filter: blur(24px) saturate(160%);
   backdrop-filter: blur(24px) saturate(160%);
 }
 
+/* Desktop window — cream wash + less saturate so meadow doesn't tint the panel. */
+.nonla-window-glass {
+  background: color-mix(in srgb, var(--nonla-bg) 81%, transparent);
+  -webkit-backdrop-filter: blur(40px) saturate(108%);
+  backdrop-filter: blur(40px) saturate(108%);
+}
+
+/* Fluent Color desktop tile — same frost as the window, macOS squircle. */
+.nonla-desktop-icon-plate {
+  overflow: hidden;
+  border: 0;
+  border-radius: 22%;
+  box-shadow: none;
+}
+
 .nonla-btn-glass {
   border-color: var(--glass-border);
   background: var(--glass);
@@ -646,6 +682,7 @@
 .nonla-overlay {
   position: fixed;
   inset: 0;
+  z-index: var(--nonla-z-drawer);
   background: var(--mask);
 }
 .nonla-overlay[data-state="open"] {
@@ -658,7 +695,7 @@
 .nonla-modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 9990;
+  z-index: var(--nonla-z-modal);
   background: var(--mask);
 }
 .nonla-modal-overlay[data-state="open"] {
@@ -673,7 +710,7 @@
   position: fixed;
   left: 50%;
   top: 60px;
-  z-index: 9991;
+  z-index: calc(var(--nonla-z-modal) + 1);
   transform: translate(-50%, 0);
   display: flex;
   flex-direction: column;
@@ -761,6 +798,7 @@
 
 .nonla-drawer-panel {
   will-change: transform;
+  z-index: calc(var(--nonla-z-drawer) + 1);
 }
 .nonla-drawer-panel[data-side="right"][data-state="open"] {
   animation: nonla-drawer-in-right var(--nonla-dur-slow) var(--nonla-ease-out);
@@ -787,6 +825,22 @@
   animation: nonla-drawer-out-top var(--nonla-dur) var(--nonla-ease-in);
 }
 
+.nonla-popup-layer {
+  z-index: var(--nonla-z-popup, 1050);
+}
+
+.nonla-desktop-layer {
+  z-index: var(--nonla-z-desktop, 20);
+}
+
+.nonla-window-layer {
+  z-index: var(--nonla-z-window, 30);
+}
+
+.nonla-header-layer {
+  z-index: var(--nonla-z-header, 40);
+}
+
 .nonla-popper {
   will-change: transform, opacity;
   transform-origin: var(--radix-popover-content-transform-origin, var(--radix-dropdown-menu-content-transform-origin, var(--radix-select-content-transform-origin, var(--radix-tooltip-content-transform-origin, center))));

package/src/switch/Switch.tsx

@@ -1,29 +1,30 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { type CSSProperties, type ComponentPropsWithoutRef, forwardRef } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlRadiusVar, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlRadiusVar, useControlSize } from "../lib/sizes";
 
 export type SwitchVariant = "default" | "square";
 
 export type SwitchProps = Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {
   checked?: boolean;
   defaultChecked?: boolean;
-  /** antd-style — receives the next checked boolean (not a DOM event). */
+  /** Receives the next checked boolean (not a DOM event). */
   onChange?: (checked: boolean) => void;
   size?: ControlSize;
   variant?: SwitchVariant;
 };
 
-/** Switch track heights — shorter than Button/Input (antd-like). */
+/** Switch track heights — shorter than Button/Input. */
 const SWITCH_TRACK_H = { small: 16, default: 22, large: 28 } as const;
 
 export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch({ className, checked, defaultChecked, onChange, size, variant = "default", disabled, style, ...rest }, ref) {
-  const trackH = SWITCH_TRACK_H[normalizeSize(size)];
+  const resolvedSize = useControlSize(size);
+  const trackH = SWITCH_TRACK_H[resolvedSize];
   const trackW = Math.round(trackH * 1.8);
   const thumb = trackH - 4;
   const travel = trackW - thumb - 3;
   const square = variant === "square";
-  const squareRadius = `max(3px, calc(${controlRadiusVar(size)} * 0.55))`;
+  const squareRadius = `max(3px, calc(${controlRadiusVar(resolvedSize)} * 0.55))`;
 
   return (
     <SwitchPrimitive.Root

package/src/table/Table.tsx

@@ -2,7 +2,7 @@ import { type CSSProperties, type Key, type ReactNode, useMemo, useState } from
 import { Checkbox } from "../checkbox/Checkbox";
 import { Empty } from "../empty/Empty";
 import { cn } from "../lib/cn";
-import { type ControlSize, normalizeSize } from "../lib/sizes";
+import { type CanonicalSize, type ControlSize, useControlSize } from "../lib/sizes";
 import { Pagination } from "../pagination/Pagination";
 import { Spin } from "../spin/Spin";
 
@@ -15,7 +15,7 @@ export type ColumnType<T> = {
   width?: number | string;
   minWidth?: number | string;
   align?: "left" | "center" | "right";
-  /** Custom cell — Ant Design style `(value, record, index) => ReactNode`. */
+  /** Custom cell — `(value, record, index) => ReactNode`. */
   render?: (value: any, record: T, index: number) => ReactNode;
   className?: string;
   ellipsis?: boolean;
@@ -127,8 +127,7 @@ function SortIcon({ order }: { order: SortOrder | undefined }) {
   );
 }
 
-function sizeClasses(size: ControlSize | undefined) {
-  const s = normalizeSize(size);
+function sizeClasses(s: CanonicalSize) {
   if (s === "small") {
     return {
       head: "h-9 px-2 text-xs",
@@ -152,7 +151,7 @@ function sizeClasses(size: ControlSize | undefined) {
 }
 
 export function Table<T extends object = Record<string, unknown>>({ columns = [], dataSource = [], rowKey, loading, pagination, className, size, bordered, scroll, onRow, locale, showHeader = true, title, footer, rowSelection, rowClassName, onChange }: TableProps<T>) {
-  const sz = sizeClasses(size);
+  const sz = sizeClasses(useControlSize(size));
 
   const selectionControlled = rowSelection?.selectedRowKeys !== undefined;
   const [innerSelected, setInnerSelected] = useState<Key[]>(() => rowSelection?.defaultSelectedRowKeys ?? []);
@@ -324,8 +323,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
                     return (
                       <tr key={key} data-slot="table-row" data-state={selected ? "selected" : undefined} className={cn("border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", rowProps?.className, extraClass)} style={rowProps?.style} onClick={rowProps?.onClick}>
                         {rowSelection ? (
-                          <td data-slot="table-cell" className={cn(sz.cell, sz.check, "align-middle")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined}>
-                            <div className="flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
+                          <td data-slot="table-cell" className={cn(sz.cell, sz.check, "align-middle")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined} onClick={(e) => e.stopPropagation()}>
+                            <div className="flex items-center justify-center">
                               {rowSelection.type === "radio" ? (
                                 <input type="radio" name="nonla-table-row-select" checked={selected} disabled={rowSelection.getCheckboxProps?.(record)?.disabled} aria-label="Select row" className="size-3.5 accent-foreground" onChange={() => emitSelection([key])} />
                               ) : (

package/src/tag/Tag.tsx

@@ -6,7 +6,7 @@ export type TagVariant = "soft" | "solid";
 export type TagProps = {
   children?: ReactNode;
   color?: string;
-  /** @deprecated prefer `variant="soft"` — kept for antd-ish callers */
+  /** @deprecated prefer `variant="soft"` */
   bordered?: boolean;
   /**
    * `soft` — quiet wash (default).
@@ -78,7 +78,7 @@ export function Tag({
   return (
     <span
       className={cn(
-        "inline-flex h-[22px] max-w-full items-center gap-1.5 rounded-full px-2.5 text-[11px] font-medium tracking-[0.01em]",
+        "inline-flex h-5.5 max-w-full items-center gap-1.5 rounded-full px-2.5 text-[11px] font-medium tracking-[0.01em]",
         isDefault && (solid ? "bg-foreground/10 text-(--nonla-ink)" : "bg-muted text-muted-foreground"),
         !isDefault && (solid ? SOLID : SOFT),
         className,