devnonla-ui 0.3.0 → 0.4.1

package/src/scroll/OverlayScroll.tsx

@@ -1,13 +1,16 @@
-import { type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type UIEventHandler, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { type ReactNode, type PointerEvent as ReactPointerEvent, type Ref, type UIEventHandler, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
 export type OverlayScrollVisibility = "hover" | "always";
 
 const HIDE_MS = 1000;
+const MIN_THUMB = 32;
 
 export type OverlayScrollProps = {
   /** `hover` shows the thumb on hover / while scrolling. `always` keeps it visible. */
   visibility?: OverlayScrollVisibility;
+  /** Size to content (honors max-height on `className`) instead of filling the parent. */
+  autoHeight?: boolean;
   className?: string;
   innerClassName?: string;
   children?: ReactNode;
@@ -15,7 +18,10 @@ export type OverlayScrollProps = {
   scrollRef?: Ref<HTMLDivElement>;
 };
 
-type Thumb = { top: number; height: number; shown: boolean };
+type Thumb = { offset: number; size: number; shown: boolean };
+type Axis = "x" | "y";
+
+const HIDDEN: Thumb = { offset: 0, size: 0, shown: false };
 
 function assignRef(ref: Ref<HTMLDivElement> | undefined, node: HTMLDivElement | null) {
   if (!ref) return;
@@ -23,27 +29,36 @@ function assignRef(ref: Ref<HTMLDivElement> | undefined, node: HTMLDivElement |
   else ref.current = node;
 }
 
-export function OverlayScroll({ visibility = "hover", className, innerClassName, children, onScroll, scrollRef }: OverlayScrollProps) {
+function measure(scroll: number, scrollSize: number, client: number): Thumb {
+  const overflow = scrollSize - client;
+  if (overflow <= 1) return HIDDEN;
+  const size = Math.max(MIN_THUMB, (client / scrollSize) * client);
+  const offset = (scroll / overflow) * (client - size);
+  return { offset, size, shown: true };
+}
+
+function canScrollX(el: HTMLDivElement) {
+  const overflow = getComputedStyle(el).overflowX;
+  return overflow === "auto" || overflow === "scroll";
+}
+
+export function OverlayScroll({ visibility = "hover", autoHeight = false, className, innerClassName, children, onScroll, scrollRef }: OverlayScrollProps) {
   const elRef = useRef<HTMLDivElement | null>(null);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const thumbRef = useRef<Thumb>({ top: 0, height: 0, shown: false });
+  const vThumbRef = useRef<Thumb>(HIDDEN);
+  const hThumbRef = useRef<Thumb>(HIDDEN);
   const [scrolling, setScrolling] = useState(false);
   const [dragging, setDragging] = useState(false);
-  const [thumb, setThumb] = useState<Thumb>({ top: 0, height: 0, shown: false });
-  thumbRef.current = thumb;
+  const [vThumb, setVThumb] = useState<Thumb>(HIDDEN);
+  const [hThumb, setHThumb] = useState<Thumb>(HIDDEN);
+  vThumbRef.current = vThumb;
+  hThumbRef.current = hThumb;
 
   const updateThumb = useCallback(() => {
     const el = elRef.current;
     if (!el) return;
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    const overflow = scrollHeight - clientHeight;
-    if (overflow <= 1) {
-      setThumb((prev) => (prev.shown ? { top: 0, height: 0, shown: false } : prev));
-      return;
-    }
-    const height = Math.max(32, (clientHeight / scrollHeight) * clientHeight);
-    const top = (scrollTop / overflow) * (clientHeight - height);
-    setThumb({ top, height, shown: true });
+    setVThumb(measure(el.scrollTop, el.scrollHeight, el.clientHeight));
+    setHThumb(canScrollX(el) ? measure(el.scrollLeft, el.scrollWidth, el.clientWidth) : HIDDEN);
   }, []);
 
   const setNode = useCallback(
@@ -64,7 +79,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     const child = el.firstElementChild;
     if (child) ro.observe(child);
     return () => ro.disconnect();
-  }, [updateThumb]);
+  }, [updateThumb, innerClassName, autoHeight]);
 
   useLayoutEffect(() => {
     return () => {
@@ -82,27 +97,30 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     onScroll?.(e);
   };
 
-  const onThumbPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+  const onThumbPointerDown = (axis: Axis) => (e: ReactPointerEvent<HTMLDivElement>) => {
     const el = elRef.current;
-    const current = thumbRef.current;
+    const current = axis === "y" ? vThumbRef.current : hThumbRef.current;
     if (!el || !current.shown || e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
 
-    const overflow = el.scrollHeight - el.clientHeight;
-    const track = el.clientHeight - current.height;
+    const overflow = axis === "y" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+    const track = (axis === "y" ? el.clientHeight : el.clientWidth) - current.size;
     if (overflow <= 0 || track <= 0) return;
 
-    const startY = e.clientY;
-    const startTop = current.top;
+    const start = axis === "y" ? e.clientY : e.clientX;
+    const startOffset = current.offset;
     e.currentTarget.setPointerCapture(e.pointerId);
     setDragging(true);
     setScrolling(true);
 
     const onMove = (ev: PointerEvent) => {
       if (ev.pointerId !== e.pointerId) return;
-      const nextTop = Math.min(track, Math.max(0, startTop + (ev.clientY - startY)));
-      el.scrollTop = (nextTop / track) * overflow;
+      const delta = (axis === "y" ? ev.clientY : ev.clientX) - start;
+      const next = Math.min(track, Math.max(0, startOffset + delta));
+      const pos = (next / track) * overflow;
+      if (axis === "y") el.scrollTop = pos;
+      else el.scrollLeft = pos;
     };
     const onUp = (ev: PointerEvent) => {
       if (ev.pointerId !== e.pointerId) return;
@@ -119,24 +137,27 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
   };
 
   const thumbVisible = visibility === "always" || dragging || scrolling;
+  const thumbClass = cn(
+    "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",
+  );
 
   return (
     <div className={cn("group/scroll relative min-h-0 min-w-0 w-full overflow-hidden", className)} data-scrolling={thumbVisible ? "true" : undefined}>
-      <div ref={setNode} onScroll={handleScroll} className={cn("nonla-scroll-hidden absolute inset-0 overflow-y-auto overflow-x-hidden [overflow-anchor:none]", innerClassName)}>
+      <div
+        ref={setNode}
+        onScroll={handleScroll}
+        className={cn("nonla-scroll-hidden overflow-y-auto overflow-x-hidden [overflow-anchor:none]", autoHeight ? "max-h-[inherit]" : "absolute inset-0", innerClassName)}
+      >
         {children}
       </div>
-      {thumb.shown ? (
-        <div
-          aria-hidden
-          onPointerDown={onThumbPointerDown}
-          className={cn(
-            "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",
-          )}
-          style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: thumb.height, transform: `translateY(${thumb.top}px)` }}
-        />
+      {vThumb.shown ? (
+        <div aria-hidden onPointerDown={onThumbPointerDown("y")} className={thumbClass} style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: vThumb.size, transform: `translateY(${vThumb.offset}px)` }} />
+      ) : null}
+      {hThumb.shown ? (
+        <div aria-hidden onPointerDown={onThumbPointerDown("x")} className={thumbClass} style={{ bottom: 2, height: "var(--nonla-scrollbar-size)", width: hThumb.size, transform: `translateX(${hThumb.offset}px)` }} />
       ) : null}
     </div>
   );

package/src/select/Select.tsx

@@ -1,10 +1,10 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
+  forwardRef,
+  isValidElement,
   type KeyboardEvent,
   type ReactElement,
   type ReactNode,
-  forwardRef,
-  isValidElement,
   useEffect,
   useLayoutEffect,
   useMemo,

package/src/spin/Spin.tsx

@@ -1,14 +1,14 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, getSizeTokens, useControlSize } from "../lib/sizes";
+import { type ControlSize, getSizeTokens, normalizeSize, useControlSize } from "../lib/sizes";
 
-export type SpinVariant = "default" | "agent" | "subAgent";
+export type SpinVariant = "default" | "agent";
 
 export type SpinProps = {
   spinning?: boolean;
   tip?: ReactNode;
   size?: ControlSize;
-  /** Visual style — agent / subAgent for AI run states. */
+  /** Visual style — `agent` is the 3×3 snake for AI run states. */
   variant?: SpinVariant;
   /** Replace the built-in indicator entirely. */
   indicator?: ReactNode;
@@ -75,11 +75,17 @@ function stepSnake(snake: Snake): Snake {
   return [next, head, mid];
 }
 
+/** 3×3 metrics so `small` is visibly smaller than default (icon-aligned). */
+function matrixMetrics(size: ControlSize | undefined): { cell: number; gap: number } {
+  const s = normalizeSize(size);
+  if (s === "small") return { cell: 3, gap: 1.5 };
+  if (s === "large") return { cell: 6, gap: 3 };
+  return { cell: 4, gap: 2 };
+}
+
 /** 3×3 fixed dots — 3 adjacent lit cells crawl randomly (snake). */
-function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; tickMs?: number }) {
-  const scale = getSizeTokens(size).icon / 16;
-  const cell = Math.max(4, Math.round(5 * scale));
-  const gap = Math.max(2, Math.round(2 * scale));
+function MatrixSnake({ size, tickMs = 240 }: { size: ControlSize | undefined; tickMs?: number }) {
+  const { cell, gap } = matrixMetrics(size);
   const dim = cell * 3 + gap * 2;
   const [snake, setSnake] = useState<Snake>(() => randomSnake());
 
@@ -112,17 +118,8 @@ function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; ti
   );
 }
 
-function AgentSpinner({ size }: { size: ControlSize | undefined }) {
-  return <MatrixSnake size={size} tickMs={240} />;
-}
-
-function SubAgentSpinner({ size }: { size: ControlSize | undefined }) {
-  return <MatrixSnake size={size} tickMs={180} />;
-}
-
 function Spinner({ size, variant }: { size: ControlSize | undefined; variant: SpinVariant }) {
-  if (variant === "agent") return <AgentSpinner size={size} />;
-  if (variant === "subAgent") return <SubAgentSpinner size={size} />;
+  if (variant === "agent") return <MatrixSnake size={size} />;
   return <DefaultSpinner size={size} />;
 }
 

package/src/splitter/Splitter.tsx

@@ -1,12 +1,12 @@
 import {
   Children,
-  Fragment,
   type CSSProperties,
+  Fragment,
+  isValidElement,
   type KeyboardEvent,
   type PointerEvent,
   type ReactElement,
   type ReactNode,
-  isValidElement,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -15,7 +15,7 @@ import {
   useState,
 } from "react";
 import { cn } from "../lib/cn";
-import { applyDrag, distributeSizes, parseSplitterSize, scaleSizes, type SplitterSize } from "./sizes";
+import { applyDrag, distributeSizes, parseSplitterSize, type SplitterSize, scaleSizes } from "./sizes";
 
 export type { SplitterSize };
 export type SplitterOrientation = "horizontal" | "vertical";

package/src/styles.css

@@ -232,6 +232,8 @@
   --color-ink-active: var(--ink-active);
   --color-ink-line: var(--ink-line);
   --color-chat: var(--nonla-chat-bg);
+  --color-well: color-mix(in oklab, var(--foreground) 5.5%, var(--card));
+  --color-well-strong: color-mix(in oklab, var(--foreground) 10%, var(--card));
 
   --shadow-card: none;
   --shadow-whisper: none;
@@ -402,7 +404,7 @@
   }
 }
 
-/* ── Spin: agent / subAgent (3×3 random snake — color only) ─────────────── */
+/* ── Spin: agent (3×3 random snake) ────────────────────────────────────── */
 .nonla-spin-matrix {
   align-content: center;
   justify-content: center;
@@ -413,12 +415,12 @@
   width: 100%;
   height: 100%;
   border-radius: 999px;
-  background: var(--nonla-chip-hover);
+  background: color-mix(in oklab, var(--brand) 10%, transparent);
   transition: background 120ms linear;
 }
 
 .nonla-spin-matrix-cell.is-on {
-  background: var(--nonla-ink);
+  background: var(--brand);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -631,14 +633,6 @@
   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);
@@ -864,6 +858,14 @@
   animation: nonla-pop-out 100ms var(--nonla-ease-in);
 }
 
+.nonla-chat-tool-result-ok {
+  background-image: linear-gradient(
+    165deg,
+    color-mix(in oklab, var(--success) 14%, var(--card)) 0%,
+    color-mix(in oklab, var(--success) 5%, var(--card)) 100%
+  );
+}
+
 .nonla-codeblock-pre code,
 .nonla-codeblock-pre .hljs {
   color: var(--foreground);

package/src/switch/Switch.tsx

@@ -1,5 +1,5 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { type CSSProperties, type ComponentPropsWithoutRef, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, type CSSProperties, forwardRef } from "react";
 import { cn } from "../lib/cn";
 import { type ControlSize, controlRadiusVar, useControlSize } from "../lib/sizes";
 

package/src/table/Table.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from "../checkbox/Checkbox";
 import { Empty } from "../empty/Empty";
 import { cn } from "../lib/cn";
 import { type CanonicalSize, type ControlSize, useControlSize } from "../lib/sizes";
-import { Pagination } from "../pagination/Pagination";
+import { Pagination, type PaginationProps } from "../pagination/Pagination";
 import { Spin } from "../spin/Spin";
 
 export type SortOrder = "ascend" | "descend" | null;
@@ -29,14 +29,29 @@ export type ColumnType<T> = {
 
 export type ColumnsType<T> = ColumnType<T>[];
 
-export type TablePaginationConfig = {
-  current?: number;
-  pageSize?: number;
-  total?: number;
-  onChange?: (page: number, pageSize: number) => void;
-  hideOnSinglePage?: boolean;
-  className?: string;
-};
+export type TablePaginationConfig = Pick<
+  PaginationProps,
+  | "align"
+  | "current"
+  | "defaultCurrent"
+  | "pageSize"
+  | "defaultPageSize"
+  | "total"
+  | "onChange"
+  | "onShowSizeChange"
+  | "hideOnSinglePage"
+  | "className"
+  | "showSizeChanger"
+  | "showQuickJumper"
+  | "showTotal"
+  | "simple"
+  | "disabled"
+  | "size"
+  | "pageSizeOptions"
+  | "showLessItems"
+  | "showTitle"
+  | "itemRender"
+>;
 
 export type TableRowSelection<T> = {
   selectedRowKeys?: Key[];
@@ -157,8 +172,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   const [innerSelected, setInnerSelected] = useState<Key[]>(() => rowSelection?.defaultSelectedRowKeys ?? []);
   const selectedKeys = selectionControlled ? (rowSelection?.selectedRowKeys ?? []) : innerSelected;
 
-  const [innerPage, setInnerPage] = useState(1);
-  const [innerPageSize, setInnerPageSize] = useState(10);
+  const [innerPage, setInnerPage] = useState(() => (typeof pagination === "object" && pagination?.defaultCurrent) || 1);
+  const [innerPageSize, setInnerPageSize] = useState(() => (typeof pagination === "object" && pagination?.defaultPageSize) || 10);
 
   const initialSort = useMemo(() => {
     const col = columns.find((c) => c.defaultSortOrder);
@@ -179,8 +194,9 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   const paginationOff = pagination === false;
   const pageConfig: TablePaginationConfig = paginationOff ? {} : (pagination ?? {});
   const pageControlled = pageConfig.current !== undefined;
+  const pageSizeControlled = pageConfig.pageSize !== undefined;
   const current = pageControlled ? (pageConfig.current ?? 1) : innerPage;
-  const pageSize = pageConfig.pageSize ?? (pageControlled ? 10 : innerPageSize);
+  const pageSize = pageSizeControlled ? (pageConfig.pageSize ?? 10) : innerPageSize;
   const serverSide = pageConfig.total !== undefined;
 
   const sortedData = useMemo(() => {
@@ -227,10 +243,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   };
 
   const handlePageChange = (page: number, nextSize: number) => {
-    if (!pageControlled) {
-      setInnerPage(page);
-      setInnerPageSize(nextSize);
-    }
+    if (!pageControlled) setInnerPage(page);
+    if (!pageSizeControlled) setInnerPageSize(nextSize);
     pageConfig.onChange?.(page, nextSize);
     onChange?.({ current: page, pageSize: nextSize, total }, {}, { columnKey: sortState.key ?? undefined, order: sortState.order });
   };
@@ -377,8 +391,19 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
       </Spin>
 
       {showPagination ? (
-        <div className={cn("mt-4 flex justify-end", pageConfig.className)}>
-          <Pagination current={current} pageSize={pageSize} total={total} size={size} onChange={handlePageChange} />
+        <div className={cn("mt-4", pageConfig.className)}>
+          <Pagination
+            {...pageConfig}
+            className={undefined}
+            hideOnSinglePage={false}
+            align={pageConfig.align ?? "end"}
+            current={current}
+            pageSize={pageSize}
+            total={total}
+            size={pageConfig.size ?? "small"}
+            showSizeChanger={pageConfig.showSizeChanger ?? false}
+            onChange={handlePageChange}
+          />
         </div>
       ) : null}
     </div>

package/src/timepicker/TimePicker.tsx

@@ -2,11 +2,11 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
   type CSSProperties,
   type FocusEvent,
+  Fragment,
+  forwardRef,
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
-  Fragment,
-  forwardRef,
   useCallback,
   useEffect,
   useRef,