@hilum/ui 3.3.4 → 3.5.0

package/src/components/tabs.tsx

@@ -1,55 +1,465 @@
 "use client";
 
-import * as React from "react";
-import { Tabs } from "radix-ui";
+import {
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  createContext,
+  useContext,
+  forwardRef,
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion, AnimatePresence } from "framer-motion";
+import type { IconComponent } from "../lib/icon-context";
 import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { fontWeights } from "../lib/font-weight";
+import { useShape } from "../lib/shape-context";
+import { useSurface } from "../lib/surface-context";
+import { surfaceClasses } from "../lib/surface-classes";
+import { useProximityHover } from "../hooks/use-proximity-hover";
+
+/* ─────────────────────── Contexts ─────────────────────── */
+
+interface TabsValueOrderContextValue {
+  valueOrder: string[];
+  setValueOrder: (order: string[]) => void;
+  selectedValue: string | undefined;
+}
+
+const TabsValueOrderContext = createContext<TabsValueOrderContextValue | null>(null);
+
+interface TabsListContextValue {
+  registerTab: (index: number, value: string, el: HTMLElement | null) => void;
+  hoveredIndex: number | null;
+  selectedValue: string | undefined;
+  /** Optimistically set selectedIdx so the indicator moves immediately on click. */
+  setOptimisticIdx: (index: number) => void;
+}
+
+const TabsListContext = createContext<TabsListContextValue | null>(null);
+
+function useTabsList() {
+  const ctx = useContext(TabsListContext);
+  if (!ctx) throw new Error("TabItem must be used within a TabsList");
+  return ctx;
+}
+
+/* ─────────────────────── Tabs (Root) ─────────────────────── */
+
+interface TabsProps extends Omit<
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,
+  "onValueChange" | "onSelect"
+> {
+  /** Controlled value (takes precedence over selectedIndex). */
+  value?: string;
+  /** Called when the active tab changes. */
+  onValueChange?: (value: string) => void;
+  /** Index-based controlled alternative. */
+  selectedIndex?: number;
+  /** Called with the new index when the active tab changes. */
+  onSelect?: (index: number) => void;
+}
+
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ value, onValueChange, selectedIndex, onSelect, defaultValue, children, ...props }, ref) => {
+    const [valueOrder, setValueOrder] = useState<string[]>([]);
+    const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>(defaultValue);
+    const updateValueOrder = useCallback((order: string[]) => {
+      setValueOrder((current) => {
+        if (
+          current.length === order.length &&
+          current.every((value, index) => value === order[index])
+        ) {
+          return current;
+        }
+        return order;
+      });
+    }, []);
+
+    // Resolve value: explicit value > selectedIndex lookup > defaultValue
+    const resolvedValue =
+      value ?? (selectedIndex != null ? valueOrder[selectedIndex] : uncontrolledValue);
+
+    const handleValueChange = useCallback(
+      (newValue: string) => {
+        if (value === undefined && selectedIndex == null) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+        if (onSelect) {
+          const idx = valueOrder.indexOf(newValue);
+          if (idx !== -1) onSelect(idx);
+        }
+      },
+      [onValueChange, onSelect, valueOrder],
+    );
+
+    return (
+      <TabsValueOrderContext.Provider
+        value={{
+          valueOrder,
+          setValueOrder: updateValueOrder,
+          selectedValue: resolvedValue,
+        }}
+      >
+        <TabsPrimitive.Root
+          ref={ref}
+          onValueChange={handleValueChange}
+          {...(resolvedValue !== undefined ? { value: resolvedValue } : {})}
+          {...(resolvedValue == null && defaultValue !== undefined ? { defaultValue } : {})}
+          activationMode="automatic"
+          {...props}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabsValueOrderContext.Provider>
+    );
+  },
+);
+
+Tabs.displayName = "Tabs";
+
+/* ─────────────────────── TabsList ─────────────────────── */
+
+type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+
+const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  ({ children, className, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isMouseInside = useRef(false);
+    const shape = useShape();
+    const substrate = useSurface();
+    // Active pill lifts 3 levels above substrate (1 above the muted track + 2 for pop).
+    // On the page (substrate 1) this lands on surface 4 — matches the original design.
+    // Inside a dialog (substrate 5) it lifts to surface 8 instead of staying at 4.
+    const indicatorLevel = Math.min(substrate + 3, 8);
+    const valueOrderCtx = useContext(TabsValueOrderContext);
+    const [optimisticIdx, setOptimisticIdx] = useState<number | null>(null);
+
+    // Derive value order from children synchronously
+    const values = Children.toArray(children)
+      .filter(isValidElement)
+      .map((child) => (child.props as { value?: string }).value)
+      .filter((v): v is string => typeof v === "string");
+    const valueOrderKey = values.join(",");
+    const setValueOrder = valueOrderCtx?.setValueOrder;
+
+    // Report value order up to Tabs root
+    useLayoutEffect(() => {
+      setValueOrder?.(values);
+    }, [setValueOrder, valueOrderKey]);
+
+    // Proximity hover
+    const {
+      activeIndex: hoveredIndex,
+      setActiveIndex: setHoveredIndex,
+      itemRects,
+      handlers,
+      registerItem,
+      measureItems,
+    } = useProximityHover(containerRef, { axis: "x" });
+
+    // Register items: bridge from (index, value, el) → registerItem(index, el)
+    const registerTab = useCallback(
+      (index: number, _value: string, el: HTMLElement | null) => {
+        registerItem(index, el);
+      },
+      [registerItem],
+    );
+
+    // Measure on children change
+    useEffect(() => {
+      measureItems();
+    }, [measureItems, children]);
+
+    // Remeasure on resize
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const ro = new ResizeObserver(() => measureItems());
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, [measureItems]);
+
+    // Track mouse inside
+    const handleMouseMove = useCallback(
+      (e: React.MouseEvent) => {
+        isMouseInside.current = true;
+        handlers.onMouseMove(e);
+      },
+      [handlers],
+    );
+
+    const handleMouseLeave = useCallback(() => {
+      isMouseInside.current = false;
+      handlers.onMouseLeave();
+    }, [handlers]);
+
+    // Focus ring
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const selectedValue = valueOrderCtx?.selectedValue;
+    const selectedIdx = selectedValue !== undefined ? values.indexOf(selectedValue) : -1;
+
+    useEffect(() => {
+      setOptimisticIdx(selectedIdx >= 0 ? selectedIdx : null);
+    }, [selectedIdx]);
+
+    const activeSelectedIdx = optimisticIdx;
+    const selectedRect = activeSelectedIdx !== null ? itemRects[activeSelectedIdx] : null;
+    const hoverRect = hoveredIndex !== null ? itemRects[hoveredIndex] : null;
+    const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+    const isHoveringSelected = hoveredIndex === activeSelectedIdx;
+    const isHovering = hoveredIndex !== null && !isHoveringSelected;
+
+    // Auto-assign _index to children
+    const indexedChildren = Children.map(children, (child, i) => {
+      if (isValidElement(child)) {
+        return cloneElement(child, { _index: i } as Record<string, unknown>);
+      }
+      return child;
+    });
+
+    return (
+      <TabsListContext.Provider
+        value={{
+          registerTab,
+          hoveredIndex,
+          selectedValue,
+          setOptimisticIdx,
+        }}
+      >
+        <TabsPrimitive.List
+          ref={(node) => {
+            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onFocus={(e) => {
+            const trigger = (e.target as HTMLElement).closest('[role="tab"]');
+            if (!trigger) return;
+            const indexAttr = trigger.getAttribute("data-proximity-index");
+            if (indexAttr != null) {
+              const idx = Number(indexAttr);
+              setHoveredIndex(idx);
+              setFocusedIndex((e.target as HTMLElement).matches(":focus-visible") ? idx : null);
+            }
+          }}
+          onBlur={(e) => {
+            if (containerRef.current?.contains(e.relatedTarget as Node)) return;
+            setFocusedIndex(null);
+            if (isMouseInside.current) return;
+            setHoveredIndex(null);
+          }}
+          className={cn(
+            "relative inline-flex items-center gap-0.5 p-1 select-none bg-muted",
+            shape.container,
+            className,
+          )}
+          {...props}
+        >
+          {/* Active segment indicator */}
+          {selectedRect && (
+            <motion.div
+              className={cn(
+                "absolute pointer-events-none",
+                surfaceClasses(indicatorLevel),
+                shape.bg,
+              )}
+              initial={false}
+              animate={{
+                left: selectedRect.left,
+                width: selectedRect.width,
+                top: selectedRect.top,
+                height: selectedRect.height,
+                opacity: isHovering ? 0.85 : 1,
+              }}
+              transition={{
+                ...spring.moderate,
+                opacity: { duration: 0.08 },
+              }}
+            />
+          )}
+
+          {/* Hover indicator */}
+          <AnimatePresence>
+            {hoverRect && !isHoveringSelected && selectedRect && (
+              <motion.div
+                className={cn("absolute pointer-events-none bg-hover", shape.bg)}
+                initial={{
+                  left: selectedRect.left,
+                  width: selectedRect.width,
+                  top: selectedRect.top,
+                  height: selectedRect.height,
+                  opacity: 0,
+                }}
+                animate={{
+                  left: hoverRect.left,
+                  width: hoverRect.width,
+                  top: hoverRect.top,
+                  height: hoverRect.height,
+                  opacity: 0.4,
+                }}
+                exit={
+                  !isMouseInside.current && selectedRect
+                    ? {
+                        left: selectedRect.left,
+                        width: selectedRect.width,
+                        top: selectedRect.top,
+                        height: selectedRect.height,
+                        opacity: 0,
+                        transition: {
+                          ...spring.moderate,
+                          opacity: { duration: 0.06 },
+                        },
+                      }
+                    : { opacity: 0, transition: spring.fast.exit }
+                }
+                transition={{
+                  ...spring.fast,
+                  opacity: { duration: 0.08 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+
+          {/* Focus ring */}
+          <AnimatePresence>
+            {focusRect && (
+              <motion.div
+                className={cn(
+                  "absolute pointer-events-none z-20 border border-[#6B97FF]",
+                  shape.focusRing,
+                )}
+                initial={false}
+                animate={{
+                  left: focusRect.left - 2,
+                  top: focusRect.top - 2,
+                  width: focusRect.width + 4,
+                  height: focusRect.height + 4,
+                }}
+                exit={{ opacity: 0, transition: spring.fast.exit }}
+                transition={{
+                  ...spring.fast,
+                  opacity: { duration: 0.08 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+
+          {indexedChildren}
+        </TabsPrimitive.List>
+      </TabsListContext.Provider>
+    );
+  },
+);
 
-const TabsRoot = React.forwardRef<
-  React.ComponentRef<typeof Tabs.Root>,
-  React.ComponentPropsWithoutRef<typeof Tabs.Root>
->(({ className, ...props }, ref) => (
-  <Tabs.Root ref={ref} className={cn("w-full", className)} {...props} />
-));
-TabsRoot.displayName = "Tabs";
-
-const TabsList = React.forwardRef<
-  React.ComponentRef<typeof Tabs.List>,
-  React.ComponentPropsWithoutRef<typeof Tabs.List>
->(({ className, ...props }, ref) => (
-  <Tabs.List
-    ref={ref}
-    className={cn("inline-flex items-center gap-1 border-b border-border w-full", className)}
-    {...props}
-  />
-));
 TabsList.displayName = "TabsList";
 
-const TabsTrigger = React.forwardRef<
-  React.ComponentRef<typeof Tabs.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Tabs.Trigger>
->(({ className, ...props }, ref) => (
-  <Tabs.Trigger
-    ref={ref}
-    className={cn(
-      "px-0 pb-2.5 body font-medium text-muted-foreground",
-      "border-b-2 border-transparent -mb-px",
-      "transition-colors cursor-pointer",
-      "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20",
-      "disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = "TabsTrigger";
-
-const TabsContent = React.forwardRef<
-  React.ComponentRef<typeof Tabs.Content>,
-  React.ComponentPropsWithoutRef<typeof Tabs.Content>
->(({ className, ...props }, ref) => (
-  <Tabs.Content ref={ref} className={cn("mt-4", className)} {...props} />
-));
-TabsContent.displayName = "TabsContent";
-
-export { TabsRoot as Tabs, TabsList, TabsTrigger, TabsContent };
+/* ─────────────────────── TabItem ─────────────────────── */
+
+interface TabItemProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+  /** Unique value for this tab. */
+  value: string;
+  /** Optional leading icon. */
+  icon?: IconComponent;
+  /** Text label. */
+  label?: string;
+  /** @internal Auto-assigned by TabsList. */
+  _index?: number;
+}
+
+const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
+  ({ value, icon: Icon, label, children, _index = 0, className, ...props }, ref) => {
+    const internalRef = useRef<HTMLButtonElement>(null);
+    const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
+
+    useEffect(() => {
+      registerTab(_index, value, internalRef.current);
+      return () => registerTab(_index, value, null);
+    }, [_index, value, registerTab]);
+
+    const isSelected = selectedValue === value;
+    const isActive = hoveredIndex === _index || isSelected;
+
+    return (
+      <TabsPrimitive.Trigger
+        onClick={() => setOptimisticIdx(_index)}
+        ref={(node) => {
+          (internalRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+        }}
+        value={value}
+        data-proximity-index={_index}
+        className={cn(
+          "relative z-10 flex items-center gap-2 px-3 py-1.5 cursor-pointer bg-transparent border-none outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {Icon && (
+          <Icon
+            size={16}
+            strokeWidth={isActive ? 2 : 1.5}
+            className={cn(
+              "transition-[color,stroke-width] duration-80",
+              isActive ? "text-foreground" : "text-muted-foreground",
+            )}
+          />
+        )}
+        <span className="inline-grid text-[13px] whitespace-nowrap">
+          <span
+            className="col-start-1 row-start-1 invisible"
+            style={{ fontVariationSettings: fontWeights.semibold }}
+            aria-hidden="true"
+          >
+            {label ?? children}
+          </span>
+          <span
+            className={cn(
+              "col-start-1 row-start-1 transition-[color,font-variation-settings] duration-80",
+              isActive ? "text-foreground" : "text-muted-foreground",
+            )}
+            style={{
+              fontVariationSettings: isSelected ? fontWeights.semibold : fontWeights.normal,
+            }}
+          >
+            {label ?? children}
+          </span>
+        </span>
+      </TabsPrimitive.Trigger>
+    );
+  },
+);
+
+TabItem.displayName = "TabItem";
+
+/* ─────────────────────── TabPanel ─────────────────────── */
+
+interface TabPanelProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+  /** Must match a TabItem value. */
+  value: string;
+}
+
+const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(({ className, ...props }, ref) => {
+  return <TabsPrimitive.Content ref={ref} className={cn("outline-none", className)} {...props} />;
+});
+
+TabPanel.displayName = "TabPanel";
+
+/* ─────────────────────── Exports ─────────────────────── */
+
+const TabsTrigger = TabItem;
+const TabsContent = TabPanel;
+
+export { Tabs, TabsList, TabItem, TabPanel, TabsTrigger, TabsContent };
+export type { TabsProps, TabsListProps, TabItemProps, TabPanelProps };

package/src/components/textarea.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
+import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-border bg-card px-3 py-2",
+        "flex min-h-[80px] w-full rounded-md px-3 py-2",
         "body text-foreground placeholder:text-muted-foreground",
-        "resize-none transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:border-border",
+        "resize-none",
+        controlSurfaceClasses,
+        motionClasses,
+        focusRingClasses,
+        "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className,
       )}

package/src/components/thinking-indicator.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { forwardRef, useState, useEffect, type HTMLAttributes } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../lib/utils";
+import { fontWeights } from "../lib/font-weight";
+
+const circleA =
+  "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
+
+const infinity =
+  "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
+
+const circleB =
+  "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
+
+const words = ["Thinking", "Moonwalking", "Planning", "Refining"];
+
+interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  /** Show the morphing circle⇄infinity glyph before the label. Set to `false`
+   *  for a text-only indicator (e.g. inline before a streamed reply). */
+  showIcon?: boolean;
+}
+
+const ThinkingIndicator = forwardRef<HTMLDivElement, ThinkingIndicatorProps>(
+  ({ className, label, showIcon = true, ...props }, ref) => {
+    const [index, setIndex] = useState(0);
+    const currentLabel = label ?? words[index];
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setIndex((i) => (i + 1) % words.length);
+      }, 4000);
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label={currentLabel}
+        className={cn("flex items-center gap-2 px-3 py-2", className)}
+        {...props}
+      >
+        {showIcon && (
+          <motion.svg
+            aria-hidden
+            width={20}
+            height={20}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-muted-foreground shrink-0"
+          >
+            <motion.path
+              animate={{
+                d: [circleA, infinity, circleB, infinity, circleA],
+              }}
+              transition={{
+                d: {
+                  duration: 6,
+                  ease: "easeInOut",
+                  repeat: Infinity,
+                  times: [0, 0.25, 0.5, 0.75, 1.0],
+                },
+              }}
+            />
+          </motion.svg>
+        )}
+        <span
+          className="inline-grid text-[13px] overflow-hidden"
+          style={{ fontVariationSettings: fontWeights.medium }}
+        >
+          <span className="col-start-1 row-start-1 invisible shimmer-text" aria-hidden="true">
+            {"\u00a0"}
+          </span>
+          <AnimatePresence mode="popLayout" initial={false}>
+            <motion.span
+              key={currentLabel}
+              className="col-start-1 row-start-1 shimmer-text"
+              initial={{ y: "80%", opacity: 0 }}
+              animate={{ y: 0, opacity: 1, transition: { duration: 0.24, ease: [0.4, 0, 0.2, 1] } }}
+              exit={{
+                y: "-80%",
+                opacity: 0,
+                transition: { duration: 0.16, ease: [0.4, 0, 0.2, 1] },
+              }}
+            >
+              {currentLabel}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      </div>
+    );
+  },
+);
+
+ThinkingIndicator.displayName = "ThinkingIndicator";
+
+export { ThinkingIndicator };
+export type { ThinkingIndicatorProps };
+export default ThinkingIndicator;