devnonla-ui 0.1.0

package/src/select/Select.tsx

@@ -0,0 +1,319 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../lib/cn";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass } from "../lib/sizes";
+import { glassOverlayClass } from "../lib/surface";
+
+export type SelectValue = string | number;
+
+export type SelectOptionConfig = {
+  label: ReactNode;
+  value: SelectValue;
+  disabled?: boolean;
+};
+
+export type SelectProps = {
+  value?: SelectValue | null;
+  defaultValue?: SelectValue | null;
+  // antd interop: 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`.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options?: SelectOptionConfig[];
+  placeholder?: string;
+  disabled?: boolean;
+  allowClear?: boolean;
+  showSearch?: boolean | { optionFilterProp?: "label" | "value" | string };
+  popupMatchSelectWidth?: boolean;
+  size?: ControlSize;
+  status?: "error" | "warning";
+  className?: string;
+  popupClassName?: string;
+  children?: ReactNode;
+  /** antd alias */
+  onSelect?: (value: SelectValue) => void;
+};
+
+function Chevron() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className="opacity-60">
+      <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ClearIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function textOf(node: ReactNode): string {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join(" ");
+  if (isValidElement(node)) return textOf((node as ReactElement<{ children?: ReactNode }>).props.children);
+  return "";
+}
+
+function optionSearchText(opt: SelectOptionConfig, prop: string): string {
+  if (prop === "value") return String(opt.value);
+  return textOf(opt.label) || String(opt.value);
+}
+
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(
+  {
+    value,
+    defaultValue,
+    onChange,
+    onSelect,
+    options = [],
+    placeholder = "Select",
+    disabled,
+    allowClear,
+    showSearch,
+    popupMatchSelectWidth = true,
+    size,
+    status,
+    className,
+    popupClassName,
+  },
+  ref,
+) {
+  const controlled = value !== undefined;
+  const [inner, setInner] = useState<SelectValue | null>(defaultValue ?? null);
+  const selected = controlled ? (value ?? null) : inner;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [triggerW, setTriggerW] = useState<number>();
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const searchable = Boolean(showSearch);
+  const filterProp =
+    typeof showSearch === "object" ? (showSearch.optionFilterProp ?? "value") : "value";
+
+  const selectedOpt = options.find((o) => o.value === selected);
+
+  const filtered = useMemo(() => {
+    if (!searchable || !query.trim()) return options;
+    const q = query.trim().toLowerCase();
+    return options.filter((o) => optionSearchText(o, filterProp).toLowerCase().includes(q));
+  }, [options, query, searchable, filterProp]);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const w = triggerRef.current?.offsetWidth;
+    if (w) setTriggerW(w);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActive(0);
+      return;
+    }
+    const idx = options.findIndex((o) => o.value === selected);
+    setActive(idx >= 0 ? idx : 0);
+    if (searchable) {
+      const t = window.setTimeout(() => searchRef.current?.focus(), 0);
+      return () => window.clearTimeout(t);
+    }
+  }, [open, searchable]);
+
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>("[data-active='true']");
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, filtered]);
+
+  const commit = (next: SelectValue | null) => {
+    if (!controlled) setInner(next);
+    onChange?.(next);
+    if (next != null) onSelect?.(next);
+    setOpen(false);
+  };
+
+  const move = (dir: 1 | -1) => {
+    const enabledIdx = filtered.map((o, i) => ({ o, i })).filter((x) => !x.o.disabled);
+    if (!enabledIdx.length) return;
+    const cur = enabledIdx.findIndex((x) => x.i === active);
+    const from = cur < 0 ? (dir === 1 ? -1 : 0) : cur;
+    const next = enabledIdx[(from + dir + enabledIdx.length) % enabledIdx.length];
+    if (next) setActive(next.i);
+  };
+
+  const pickActive = () => {
+    const opt = filtered[active];
+    if (opt && !opt.disabled) commit(opt.value);
+  };
+
+  const onTriggerKey = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  const onListKey = (e: KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      pickActive();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+
+  const setRefs = (node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) (ref as { current: HTMLButtonElement | null }).current = node;
+  };
+
+  const showClear = allowClear && selected != null && selected !== "" && !disabled;
+
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={(v) => {
+        if (disabled) return;
+        setOpen(v);
+      }}
+    >
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          ref={setRefs}
+          type="button"
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          className={cn(
+            "group/select inline-flex w-full cursor-pointer items-center gap-2 text-left",
+            controlFieldSurface,
+            controlFieldTransition,
+            controlFieldFocusBorder,
+            "focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45",
+            controlStatusClass(status),
+            className,
+          )}
+          style={controlFieldStyle(size)}
+          onKeyDown={onTriggerKey}
+        >
+          <span className={cn("min-w-0 flex-1 truncate", selected == null || selected === "" ? "text-quaternary-foreground" : "")}>
+            {selectedOpt ? selectedOpt.label : selected != null && selected !== "" ? String(selected) : placeholder}
+          </span>
+          {showClear ? (
+            <span
+              role="button"
+              tabIndex={-1}
+              aria-label="Clear"
+              className="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground opacity-0 transition-opacity hover:bg-foreground/6 hover:text-foreground group-hover/select:opacity-100"
+              onPointerDown={(e) => e.preventDefault()}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                commit(null);
+              }}
+            >
+              <ClearIcon />
+            </span>
+          ) : null}
+          <Chevron />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="start"
+          sideOffset={4}
+          onOpenAutoFocus={(e) => {
+            if (searchable) {
+              e.preventDefault();
+              searchRef.current?.focus();
+            }
+          }}
+          onKeyDown={onListKey}
+          className={cn(
+            glassOverlayClass,
+            "overflow-hidden p-0",
+            popupClassName,
+          )}
+          style={{
+            minWidth: triggerW,
+            width: popupMatchSelectWidth ? triggerW : undefined,
+          }}
+        >
+          {searchable ? (
+            <div className="border-b border-glass-border p-1.5">
+              <input
+                ref={searchRef}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActive(0);
+                }}
+                placeholder="Search…"
+                className="h-7 w-full rounded-md border-0 bg-transparent px-2 text-sm text-foreground outline-none placeholder:text-quaternary-foreground"
+              />
+            </div>
+          ) : null}
+          <div ref={listRef} role="listbox" tabIndex={-1} className="flex max-h-72 flex-col gap-px overflow-auto p-1">
+            {filtered.length === 0 ? (
+              <div className="px-2.5 py-2 text-sm text-muted-foreground">No results</div>
+            ) : (
+              filtered.map((opt, i) => (
+                <div
+                  key={String(opt.value)}
+                  role="option"
+                  tabIndex={-1}
+                  aria-selected={opt.value === selected}
+                  data-active={i === active ? "true" : undefined}
+                  className={cn(
+                    "relative flex cursor-pointer select-none items-center rounded-md border border-solid border-transparent px-2.5 py-1.5 text-sm outline-none",
+                    opt.disabled && "pointer-events-none opacity-40",
+                    !opt.disabled && opt.value === selected && "nonla-glass-chip-on text-foreground",
+                    !opt.disabled && i === active && opt.value !== selected && "nonla-glass-chip",
+                  )}
+                  onMouseEnter={() => setActive(i)}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => {
+                    if (!opt.disabled) commit(opt.value);
+                  }}
+                >
+                  {opt.label}
+                </div>
+              ))
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+});
+
+/** API compat — options-as-children is not parsed; pass `options`. */
+export function SelectOption({ children }: { value: SelectValue; disabled?: boolean; children?: ReactNode }) {
+  return <>{children}</>;
+}

package/src/skeleton/Skeleton.tsx

@@ -0,0 +1,47 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type SkeletonProps = {
+  active?: boolean;
+  loading?: boolean;
+  paragraph?: boolean | { rows?: number };
+  title?: boolean;
+  avatar?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+function SkeletonRoot({ active = true, loading = true, paragraph = true, title = true, avatar, className, children }: SkeletonProps) {
+  if (!loading && children) return <>{children}</>;
+  const rows = typeof paragraph === "object" ? (paragraph.rows ?? 3) : paragraph ? 3 : 0;
+  const pulse = active ? "animate-pulse" : "";
+  return (
+    <div className={cn("flex gap-3", className)}>
+      {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")} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export type SkeletonInputProps = {
+  active?: boolean;
+  block?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+
+function SkeletonInput({ active = true, block, className, style }: SkeletonInputProps) {
+  return (
+    <div
+      className={cn("h-8 rounded-md bg-secondary", active && "animate-pulse", block ? "w-full" : "w-40", className)}
+      style={style}
+    />
+  );
+}
+
+export const Skeleton = Object.assign(SkeletonRoot, { Input: SkeletonInput });

package/src/spin/Spin.tsx

@@ -0,0 +1,160 @@
+import { type ReactNode, useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+import { type ControlSize, getSizeTokens } from "../lib/sizes";
+
+export type SpinVariant = "default" | "agent" | "subAgent";
+
+export type SpinProps = {
+  spinning?: boolean;
+  tip?: ReactNode;
+  size?: ControlSize;
+  /** Visual style — agent / subAgent for AI run states. */
+  variant?: SpinVariant;
+  /** Replace the built-in indicator entirely. */
+  indicator?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+};
+
+function dimFor(size: ControlSize | undefined) {
+  return Math.round(getSizeTokens(size).icon * 1.25);
+}
+
+function DefaultSpinner({ size }: { size: ControlSize | undefined }) {
+  const dim = dimFor(size);
+  return (
+    <span
+      className="inline-block rounded-full border-2 border-current/25 border-t-current animate-spin text-brand"
+      style={{ width: dim, height: dim }}
+      aria-hidden
+    />
+  );
+}
+
+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 NEIGHBORS: Record<number, number[]> = {
+  0: [1, 3],
+  1: [0, 2, 4],
+  2: [1, 5],
+  3: [0, 4, 6],
+  4: [1, 3, 5, 7],
+  5: [2, 4, 8],
+  6: [3, 7],
+  7: [4, 6, 8],
+  8: [5, 7],
+};
+
+function pick<T>(items: T[]): T {
+  return items[Math.floor(Math.random() * items.length)]!;
+}
+
+function randomSnake(): Snake {
+  const head = Math.floor(Math.random() * 9);
+  const mid = pick(NEIGHBORS[head]!);
+  const tail = pick(NEIGHBORS[mid]!.filter((c) => c !== head && c !== mid));
+  return [head, mid, tail];
+}
+
+/** Step the snake: head walks to a random free neighbor; body follows. */
+function stepSnake(snake: Snake): Snake {
+  const [head, mid, tail] = snake;
+  let nextHeads = NEIGHBORS[head]!.filter((c) => c !== mid);
+  if (nextHeads.length === 0) {
+    // Dead-end — reverse direction from current pose.
+    return [tail, mid, head];
+  }
+  // Bias away from immediately reversing into the tail when other choices exist.
+  const forward = nextHeads.filter((c) => c !== tail);
+  if (forward.length) nextHeads = forward;
+  const next = pick(nextHeads);
+  return [next, head, mid];
+}
+
+/** 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));
+  const dim = cell * 3 + gap * 2;
+  const [snake, setSnake] = useState<Snake>(() => randomSnake());
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const id = window.setInterval(() => setSnake((s) => stepSnake(s)), tickMs);
+    return () => window.clearInterval(id);
+  }, [tickMs]);
+
+  const lit = new Set(snake);
+
+  return (
+    <span
+      className="nonla-spin-matrix inline-grid"
+      style={{
+        width: dim,
+        height: dim,
+        gridTemplateColumns: `repeat(3, ${cell}px)`,
+        gridTemplateRows: `repeat(3, ${cell}px)`,
+        gap,
+      }}
+      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")} />
+      ))}
+    </span>
+  );
+}
+
+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} />;
+  return <DefaultSpinner size={size} />;
+}
+
+function Indicator({
+  size,
+  variant,
+  indicator,
+}: {
+  size: ControlSize | undefined;
+  variant: SpinVariant;
+  indicator?: ReactNode;
+}) {
+  if (indicator != null) return <>{indicator}</>;
+  return <Spinner size={size} variant={variant} />;
+}
+
+export function Spin({ spinning = true, tip, size, variant = "default", indicator, children, className }: SpinProps) {
+  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}
+        {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
+      </div>
+    );
+  }
+  return (
+    <div className={cn("relative", className)}>
+      {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} />
+          {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}