@hilum/ui 3.8.5 → 3.10.0

package/src/components/ask-user-questions.tsx

@@ -254,6 +254,7 @@ const AskUserQuestions = forwardRef<HTMLDivElement, AskUserQuestionsProps>(
     // height morph and the footer move together. A ResizeObserver keeps the
     // target in sync across question swaps, shape changes, and text wrapping.
     const contentMeasureRef = useRef<HTMLDivElement>(null);
+    const hasQuestion = question != null;
     const [contentHeight, setContentHeight] = useState<number | "auto">("auto");
     useEffect(() => {
       const el = contentMeasureRef.current;
@@ -263,7 +264,9 @@ const AskUserQuestions = forwardRef<HTMLDivElement, AskUserQuestionsProps>(
       const ro = new ResizeObserver(update);
       ro.observe(el);
       return () => ro.disconnect();
-    }, []);
+      // hasQuestion: the measured node only mounts once there is a question
+      // to render, so re-attach when it appears (e.g. questions load async).
+    }, [hasQuestion]);
 
     const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
@@ -527,22 +530,6 @@ const AskUserQuestions = forwardRef<HTMLDivElement, AskUserQuestionsProps>(
       if (hasAnswer) handleMultiNext();
     };
 
-    if (!question) {
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "w-full max-w-[520px] p-5 bg-card border border-border",
-            shape.container,
-            className,
-          )}
-          {...rest}
-        >
-          <p className="text-[13px] text-muted-foreground">No questions.</p>
-        </div>
-      );
-    }
-
     // ── Layout calculations for hover/focus indicators ───────────
     const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
     // The blue morphing focus ring is intentionally suppressed for the Other
@@ -616,11 +603,30 @@ const AskUserQuestions = forwardRef<HTMLDivElement, AskUserQuestionsProps>(
     // use shape.bg, so corners animate around its radius.
     const blocks = useMergeSplitBlocks(selectedGroups, itemRects, shape.bgRadius);
 
+    // Empty state. Kept below every hook call so the hook order stays stable
+    // when `questions` goes from [] to populated (e.g. loaded async).
+    if (!question) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "w-full max-w-[520px] p-5 bg-card border border-border",
+            shape.container,
+            className,
+          )}
+          {...rest}
+        >
+          <p className="text-[13px] text-muted-foreground">No questions.</p>
+        </div>
+      );
+    }
+
     const showBack = total > 1 && safeIndex > 0;
     const showSkip = total > 1 && isSkippable;
     const showFooter = showBack || showSkip || isMulti;
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- delegated Cmd/Ctrl+Enter handler for keys bubbling from the focusable rows/buttons inside; the card itself isn't a control
       <div
         ref={ref}
         className={cn(
@@ -770,7 +776,7 @@ const AskUserQuestions = forwardRef<HTMLDivElement, AskUserQuestionsProps>(
                     <motion.div
                       aria-hidden
                       className={cn(
-                        "absolute pointer-events-none border border-[#6B97FF] z-20",
+                        "absolute pointer-events-none border-2 border-ring z-20",
                         shape.focusRing,
                       )}
                       initial={{

package/src/components/badge.tsx

@@ -27,6 +27,30 @@ const badgeColors = {
 
 type BadgeColor = keyof typeof badgeColors;
 
+/**
+ * Semantic tones — the convention every product surface should use instead
+ * of picking badge colours by hand:
+ *
+ * - `success`   — finished and healthy: paid, fulfilled, active, delivered.
+ * - `info`      — in motion, nothing to do yet: processing, shipped, scheduled.
+ * - `attention` — needs a merchant action soon: unfulfilled, partially paid, on hold.
+ * - `warning`   — at risk / waiting on someone else: pending, past due, expiring.
+ * - `critical`  — failed or blocked: failed, cancelled, suspended, declined.
+ * - `neutral`   — inactive or terminal-but-fine: draft, archived, refunded, closed.
+ */
+type StatusTone = "success" | "info" | "attention" | "warning" | "critical" | "neutral";
+
+type ToneBadgeVariant = "success" | "brand" | "warning" | "destructive" | "secondary";
+
+const STATUS_TONE_BADGE: Record<StatusTone, { variant: ToneBadgeVariant; color?: BadgeColor }> = {
+  success: { variant: "success" },
+  info: { variant: "brand", color: "blue" },
+  attention: { variant: "warning", color: "orange" },
+  warning: { variant: "warning" },
+  critical: { variant: "destructive" },
+  neutral: { variant: "secondary" },
+};
+
 const badgeVariants = cva("inline-flex items-center font-medium whitespace-nowrap", {
   variants: {
     variant: {
@@ -55,11 +79,19 @@ const badgeVariants = cva("inline-flex items-center font-medium whitespace-nowra
 interface BadgeProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
   color?: BadgeColor;
+  /** Semantic tone — wins over `variant`/`color`. See `StatusTone`. */
+  tone?: StatusTone;
 }
 
 const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant = "solid", size = "md", color, children, style, ...props }, ref) => {
+  (
+    { className, variant: variantProp = "solid", size = "md", color: colorProp, tone, children, style, ...props },
+    ref,
+  ) => {
     const shape = useShape();
+    const toneBadge = tone ? STATUS_TONE_BADGE[tone] : undefined;
+    const variant = toneBadge?.variant ?? variantProp;
+    const color = toneBadge?.color ?? colorProp;
     const resolvedColor =
       color ??
       (variant === "brand"
@@ -90,6 +122,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
       <span
         ref={ref}
         className={cn(badgeVariants({ variant, size }), shape.item, className)}
+        {...(tone ? { "data-tone": tone } : {})}
         style={{ ...colorStyle, ...style }}
         {...props}
       >
@@ -111,5 +144,5 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
 
 Badge.displayName = "Badge";
 
-export { Badge, badgeVariants, badgeColors };
-export type { BadgeProps, BadgeColor };
+export { Badge, badgeVariants, badgeColors, STATUS_TONE_BADGE };
+export type { BadgeProps, BadgeColor, StatusTone };

package/src/components/breadcrumb.tsx

@@ -27,8 +27,10 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li"
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(
-  ({ className, ...props }, ref) => (
-    <a ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />
+  ({ className, children, ...props }, ref) => (
+    <a ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props}>
+      {children}
+    </a>
   ),
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";

package/src/components/button-group.tsx

@@ -30,7 +30,7 @@ function ButtonGroupItem({ active, className, children, ...props }: ButtonGroupI
       className={cn(
         "relative inline-flex min-h-8 items-center justify-center gap-1 rounded-[10px] px-3 py-1 body-sm font-medium",
         "transition-[background-color,box-shadow,color,opacity,scale] active:scale-[0.96]",
-        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         active
           ? "bg-card text-foreground shadow-natural"
           : "text-muted-foreground hover:text-foreground",

package/src/components/button.tsx

@@ -20,31 +20,34 @@ const buttonVariants = cva(
     "text-box-trim-both text-box-edge-cap-alphabetic",
     "transition-colors duration-80",
     "disabled:opacity-50 disabled:pointer-events-none",
-    "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+    "compact:rounded-[5px]",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
   ],
   {
     variants: {
       variant: {
         default: "text-background",
         primary: "text-background",
-        brand: "text-background",
+        brand: "text-primary-foreground",
         secondary: "text-foreground",
-        outline: "border border-border text-foreground",
-        tertiary: "border border-border text-foreground",
+        outline: "border border-border text-foreground hover:border-border-strong",
+        tertiary: "border border-border text-foreground hover:border-border-strong",
         destructive: "text-destructive border border-destructive/30",
         ghost: "text-muted-foreground hover:text-foreground",
         link: "text-foreground underline-offset-4 hover:underline",
       },
+      // `compact:` classes apply under data-density="compact" (editor chrome):
+      // 24px controls, 12px text, 8–10px padding, 5px radius.
       size: {
-        xs: "h-6 px-2.5 text-[11px] gap-1",
-        sm: "h-7 px-3 text-[12px] gap-1",
-        default: "h-8 px-4 text-[13px] gap-1.5",
-        md: "h-8 px-4 text-[13px] gap-1.5",
-        lg: "h-9 px-5 text-[14px] gap-1.5",
-        "icon-xs": "h-7 w-7 p-0 [&_svg]:h-3 [&_svg]:w-3",
-        "icon-sm": "h-8 w-8 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5",
-        icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
-        "icon-lg": "h-10 w-10 p-0 [&_svg]:h-5 [&_svg]:w-5",
+        xs: "h-6 px-2.5 text-[11px] gap-1 compact:px-2",
+        sm: "h-7 px-3 text-[12px] gap-1 compact:h-6 compact:px-2",
+        default: "h-8 px-4 text-[13px] gap-1.5 compact:h-6 compact:px-2.5 compact:text-[12px]",
+        md: "h-8 px-4 text-[13px] gap-1.5 compact:h-6 compact:px-2.5 compact:text-[12px]",
+        lg: "h-9 px-5 text-[14px] gap-1.5 compact:h-7 compact:px-3 compact:text-[12px]",
+        "icon-xs": "h-7 w-7 p-0 [&_svg]:h-3 [&_svg]:w-3 compact:h-6 compact:w-6",
+        "icon-sm": "h-8 w-8 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5 compact:h-6 compact:w-6",
+        icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4 compact:h-7 compact:w-7",
+        "icon-lg": "h-10 w-10 p-0 [&_svg]:h-5 [&_svg]:w-5 compact:h-8 compact:w-8",
       },
       iconLeft: { true: "" },
       iconRight: { true: "" },
@@ -76,27 +79,32 @@ interface ButtonProps
   active?: boolean;
 }
 
+// Variant fills. Neutral variants tint with `foreground` alpha rather than a
+// fixed palette colour so they mean the same thing in light, mid and dark:
+// primary = inverted foreground, secondary = soft neutral fill, outline /
+// tertiary / ghost = transparent with a neutral hover wash.
 const bgVariants: Record<string, string> = {
   default: "bg-foreground group-hover:bg-foreground/90 group-active:bg-foreground/80",
   primary: "bg-foreground group-hover:bg-foreground/90 group-active:bg-foreground/80",
-  brand: "bg-brand group-hover:bg-brand/90 group-active:bg-brand/80",
-  secondary: "bg-accent group-hover:bg-accent/80 group-active:bg-accent",
-  outline: "bg-transparent group-hover:bg-hover group-active:bg-active",
-  tertiary: "bg-transparent group-hover:bg-hover group-active:bg-active",
+  brand: "bg-primary group-hover:bg-primary/90 group-active:bg-primary/80",
+  secondary:
+    "bg-foreground/[0.07] group-hover:bg-foreground/[0.11] group-active:bg-foreground/[0.15]",
+  outline: "bg-transparent group-hover:bg-foreground/[0.05] group-active:bg-foreground/[0.09]",
+  tertiary: "bg-transparent group-hover:bg-foreground/[0.05] group-active:bg-foreground/[0.09]",
   destructive: "bg-destructive/10 group-hover:bg-destructive/15 group-active:bg-destructive/20",
-  ghost: "bg-transparent group-hover:bg-hover group-active:bg-active",
+  ghost: "bg-transparent group-hover:bg-foreground/[0.06] group-active:bg-foreground/[0.1]",
   link: "bg-transparent",
 };
 
 const activeBgVariants: Record<string, string> = {
   default: "bg-foreground/80",
   primary: "bg-foreground/80",
-  brand: "bg-brand/80",
-  secondary: "bg-accent",
-  outline: "bg-active",
-  tertiary: "bg-active",
+  brand: "bg-primary/80",
+  secondary: "bg-foreground/[0.15]",
+  outline: "bg-foreground/[0.09]",
+  tertiary: "bg-foreground/[0.09]",
   destructive: "bg-destructive/20",
-  ghost: "bg-active",
+  ghost: "bg-foreground/[0.1]",
   link: "bg-transparent",
 };
 

package/src/components/calendar.tsx

@@ -34,7 +34,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         day_button: cn(
           "flex h-9 w-9 items-center justify-center rounded-full body font-normal",
           "text-foreground hover:bg-muted transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         ),
         selected:
           "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:hover:bg-brand-primary/90",

package/src/components/card.tsx

@@ -65,13 +65,15 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<"h3">>(
-  ({ className, ...props }, ref) => (
+  ({ className, children, ...props }, ref) => (
     <h3
       ref={ref}
       data-slot="card-title"
       className={cn("subheading text-balance text-foreground", className)}
       {...props}
-    />
+    >
+      {children}
+    </h3>
   ),
 );
 CardTitle.displayName = "CardTitle";

package/src/components/checkbox-card.tsx

@@ -28,7 +28,7 @@ const CheckboxCard = React.forwardRef<HTMLLabelElement, CheckboxCardProps>(
           "group flex min-w-0 items-start gap-3 rounded-lg border border-border bg-card p-3",
           "text-sm text-foreground shadow-natural transition-[background-color,border-color,box-shadow,opacity,scale]",
           "hover:bg-muted/40 active:scale-[0.98]",
-          "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[#6B97FF]",
+          "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
           className,
         )}

package/src/components/checkbox-group.tsx

@@ -138,6 +138,7 @@ const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
 
     return (
       <CheckboxGroupContext.Provider value={{ registerItem, activeIndex }}>
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- roving-focus group: focus/key events bubble up from the focusable checkbox rows */}
         <div
           ref={(node) => {
             (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
@@ -230,7 +231,7 @@ const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
           <AnimatePresence>
             {focusRect && (
               <motion.div
-                className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                className={`absolute ${shape.focusRing} pointer-events-none z-20 border-2 border-ring`}
                 initial={false}
                 animate={{
                   left: focusRect.left - 2,

package/src/components/code-block.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import * as React from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface CodeBlockProps {
+  /** Code as a string (copied verbatim). */
+  children: string;
+  /** Optional language / filename label in the header. */
+  language?: string;
+  /** Max height before the block scrolls, e.g. 320 or "20rem". */
+  maxHeight?: number | string;
+  /** Show a copy button. Default: true. */
+  copy?: boolean;
+  /** Soft-wrap long lines instead of scrolling horizontally. Default: false. */
+  wrap?: boolean;
+  className?: string;
+}
+
+/**
+ * Styled, scrollable `<pre>` with copy-to-clipboard — for API keys, webhook
+ * payloads, snippets and logs. No syntax highlighting (bring your own).
+ */
+function CodeBlock({
+  children,
+  language,
+  maxHeight,
+  copy = true,
+  wrap = false,
+  className,
+}: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+  React.useEffect(() => {
+    if (!copied) return;
+    const id = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(id);
+  }, [copied]);
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <div
+      data-slot="code-block"
+      className={cn(
+        "relative min-w-0 overflow-hidden rounded-lg border border-border bg-muted text-foreground",
+        className,
+      )}
+    >
+      {(language || copy) && (
+        <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1.5">
+          <span className="caption-sm font-mono text-muted-foreground">{language}</span>
+          {copy && (
+            <button
+              type="button"
+              onClick={onCopy}
+              aria-label={copied ? "Copied" : "Copy code"}
+              className="flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {copied ? (
+                <Check size={14} aria-hidden="true" />
+              ) : (
+                <Copy size={14} aria-hidden="true" />
+              )}
+            </button>
+          )}
+        </div>
+      )}
+      <pre
+        // Scrollable regions must be keyboard-focusable (axe scrollable-region-focusable).
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        className={cn(
+          "overflow-auto p-3 font-mono text-xs leading-relaxed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre",
+        )}
+        style={
+          maxHeight !== undefined
+            ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }
+            : undefined
+        }
+      >
+        <code>{children}</code>
+      </pre>
+    </div>
+  );
+}
+
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };
+export type { CodeBlockProps };

package/src/components/color-input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { motionClasses } from "../lib/interaction";
+import { inputFocusWithinClasses, motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
 import { ColorPickerPopover } from "./color-picker";
 import type { ControlMobileSurface } from "./input";
@@ -53,9 +53,10 @@ function ColorInput({
   return (
     <div
       className={cn(
-        "inline-flex h-8 items-stretch gap-0 overflow-hidden border border-border bg-background",
+        "inline-flex h-8 items-stretch gap-0 overflow-hidden border border-border bg-background hover:border-border-strong",
         shape.input,
-        "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
+        "compact:h-6 compact:rounded-[5px]",
+        inputFocusWithinClasses,
         motionClasses,
         mobileSurfaceClass,
         disabled && "opacity-50 pointer-events-none",
@@ -69,7 +70,7 @@ function ColorInput({
         {...(disabled !== undefined && { disabled })}
         triggerShowValue={false}
         hideEyedropper
-        triggerClassName="h-full w-8 border-0 rounded-none bg-transparent px-1 hover:bg-hover focus-visible:ring-0"
+        triggerClassName="h-full w-8 border-0 rounded-none bg-transparent px-1 hover:bg-hover focus-visible:ring-0 compact:h-full compact:w-6 compact:px-0 compact:justify-center compact:rounded-none compact:[&>span]:!size-4"
       />
       <input
         type="text"
@@ -81,7 +82,8 @@ function ColorInput({
             commitHex("#" + (e.target as HTMLInputElement).value.replace(/^#/, ""));
         }}
         spellCheck={false}
-        className="w-[5.5rem] caption text-foreground px-2 bg-transparent border-l border-border focus:outline-none uppercase"
+        aria-label="Hex colour"
+        className="w-[5.5rem] caption tabular-nums text-foreground px-2 bg-transparent border-l border-border focus:outline-none uppercase compact:w-[4.5rem] compact:px-1.5 compact:text-[12px]"
       />
       {typeof opacity === "number" && onOpacityChange && (
         <div className="relative flex items-center border-l border-border">
@@ -91,7 +93,8 @@ function ColorInput({
             max={100}
             value={Math.round(opacity)}
             onChange={(e) => onOpacityChange(Number(e.target.value))}
-            className="w-12 caption text-foreground px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            aria-label="Opacity"
+            className="w-12 caption tabular-nums text-foreground px-2 bg-transparent focus:outline-none text-right compact:w-10 compact:px-1.5 compact:text-[12px] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
           />
           <span aria-hidden className="caption-xs text-muted-foreground pr-2">
             %