@hilum/ui 3.8.5 → 3.10.0

package/src/components/menubar.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Menubar } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useDensityAttributes } from "../lib/density-context";
 import {
   mobilePopperSheetMotionClassName,
   mobilePopperSheetPositionClassName,
@@ -43,8 +44,8 @@ const MenubarTrigger = React.forwardRef<
     className={cn(
       "flex min-h-8 cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
       "hover:bg-muted",
-      "data-[state=open]:bg-muted data-[state=open]:text-foreground",
-      "focus:bg-muted",
+      "data-[state=open]:bg-active data-[state=open]:text-foreground",
+      "focus:bg-active",
       className,
     )}
     {...props}
@@ -60,6 +61,7 @@ const MenubarContent = React.forwardRef<
     <style>{mobilePopperSheetStyle}</style>
     <Menubar.Portal>
       <Menubar.Content
+        {...useDensityAttributes()}
         ref={ref}
         data-hilum-mobile-sheet="true"
         align={align}
@@ -94,11 +96,11 @@ const MenubarItem = React.forwardRef<
   <Menubar.Item
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -113,9 +115,9 @@ const MenubarCheckboxItem = React.forwardRef<
   <Menubar.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5 compact:min-h-7 compact:py-1 compact:pl-7 compact:pr-2 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -138,9 +140,9 @@ const MenubarRadioItem = React.forwardRef<
   <Menubar.RadioItem
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5 compact:min-h-7 compact:py-1 compact:pl-7 compact:pr-2 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -164,7 +166,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <Menubar.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground compact:px-2 compact:text-[11px]", inset && "pl-8 compact:pl-7", className)}
     {...props}
   />
 ));
@@ -174,7 +176,7 @@ const MenubarSeparator = React.forwardRef<
   React.ComponentRef<typeof Menubar.Separator>,
   React.ComponentPropsWithoutRef<typeof Menubar.Separator>
 >(({ className, ...props }, ref) => (
-  <Menubar.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-muted", className)} {...props} />
+  <Menubar.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
 ));
 MenubarSeparator.displayName = "MenubarSeparator";
 
@@ -187,10 +189,10 @@ const MenubarSubTrigger = React.forwardRef<
   <Menubar.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none transition-colors",
-      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
-      inset && "pl-8",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]",
+      "body text-foreground outline-none transition-colors",
+      "focus:bg-active focus:text-foreground data-[state=open]:bg-active",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -208,6 +210,7 @@ const MenubarSubContent = React.forwardRef<
   <>
     <style>{mobilePopperSheetStyle}</style>
     <Menubar.SubContent
+        {...useDensityAttributes()}
       ref={ref}
       data-hilum-mobile-sheet="true"
       className={cn(

package/src/components/native-select.tsx

@@ -19,7 +19,7 @@ const NativeSelect = React.forwardRef<
           "peer h-10 w-full appearance-none border border-border bg-background pl-3 pr-8",
           shape.input,
           "body text-foreground",
-          "focus:border-border focus:outline-none focus:ring-2 focus:ring-ring/30",
+          "focus:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/20",
           className,

package/src/components/navigation-menu.tsx

@@ -43,7 +43,7 @@ const NavigationMenuTrigger = React.forwardRef<
       "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
       "body font-medium text-muted-foreground",
       "hover:bg-muted hover:text-foreground",
-      "data-[active]:bg-muted data-[state=open]:bg-muted",
+      "data-[active]:bg-active data-[state=open]:bg-active",
       "outline-none transition-colors",
       className,
     )}
@@ -140,7 +140,7 @@ function navigationMenuTriggerStyle() {
     "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
     "body font-medium text-muted-foreground",
     "hover:bg-muted hover:text-foreground",
-    "data-[active]:bg-muted data-[state=open]:bg-muted",
+    "data-[active]:bg-active data-[state=open]:bg-active",
     "outline-none transition-colors",
   );
 }

package/src/components/notification.tsx

@@ -95,7 +95,7 @@ function Notification({
               <button
                 type="button"
                 onClick={onClose}
-                className="flex size-9 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                className="flex size-9 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <span className="sr-only">Close</span>
                 <X size={16} />

package/src/components/pagination.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/utils";
-import { buttonVariants } from "./button";
+import { Button, buttonVariants } from "./button";
+import { formatNumber, pluralize, useFormatter } from "../lib/format";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
@@ -27,7 +28,7 @@ PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = React.ComponentProps<"a"> & { isActive?: boolean };
 
-const PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps) => (
+const PaginationLink = ({ className, isActive, children, ...props }: PaginationLinkProps) => (
   <a
     aria-current={isActive ? "page" : undefined}
     className={cn(
@@ -36,7 +37,9 @@ const PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps)
       className,
     )}
     {...props}
-  />
+  >
+    {children}
+  </a>
 );
 PaginationLink.displayName = "PaginationLink";
 
@@ -78,7 +81,97 @@ const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span"
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+/* ─────────────────────── PaginationBar ─────────────────────── */
+
+interface PaginationBarProps {
+  /** 1-based current page. */
+  page: number;
+  pageSize: number;
+  /** Total item count. Omit for cursor pagination (then pass `hasNextPage`). */
+  total?: number;
+  /** Cursor pagination: whether a next page exists when `total` is unknown. */
+  hasNextPage?: boolean;
+  onPageChange: (page: number) => void;
+  /** Noun for the summary — "Showing 1–20 of 124 orders". Default: "result". */
+  itemLabel?: string;
+  /** Plural noun when it isn't `${itemLabel}s`. */
+  itemLabelPlural?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  className?: string;
+}
+
+/**
+ * Compact list/table footer: "Showing 21–40 of 124 orders" plus Previous /
+ * Next. Replaces hand-built Prev/Next rows; use Pagination* for numbered pages.
+ */
+function PaginationBar({
+  page,
+  pageSize,
+  total,
+  hasNextPage,
+  onPageChange,
+  itemLabel = "result",
+  itemLabelPlural,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  className,
+}: PaginationBarProps) {
+  const fmt = useFormatter();
+  const locale = fmt.locale ? { locale: fmt.locale } : {};
+  const start = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const end = total !== undefined ? Math.min(page * pageSize, total) : page * pageSize;
+  const canNext = total !== undefined ? page * pageSize < total : Boolean(hasNextPage);
+  const noun = pluralize(total ?? end, itemLabel, {
+    ...locale,
+    hideCount: true,
+    ...(itemLabelPlural ? { plural: itemLabelPlural } : {}),
+  });
+  const summary =
+    total !== undefined
+      ? `Showing ${formatNumber(start, locale)}–${formatNumber(end, locale)} of ${formatNumber(total, locale)} ${noun}`
+      : `Showing ${formatNumber(start, locale)}–${formatNumber(end, locale)} ${noun}`;
+
+  return (
+    <nav
+      aria-label="Pagination"
+      data-slot="pagination-bar"
+      className={cn("flex min-w-0 items-center justify-between gap-3", className)}
+    >
+      <p className="caption min-w-0 truncate tabular-nums text-muted-foreground" aria-live="polite">
+        {summary}
+      </p>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          aria-label="Go to previous page"
+        >
+          <ChevronLeft size={14} aria-hidden="true" />
+          <span className="max-sm:sr-only">{previousLabel}</span>
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(page + 1)}
+          disabled={!canNext}
+          aria-label="Go to next page"
+        >
+          <span className="max-sm:sr-only">{nextLabel}</span>
+          <ChevronRight size={14} aria-hidden="true" />
+        </Button>
+      </div>
+    </nav>
+  );
+}
+PaginationBar.displayName = "PaginationBar";
+
 export {
+  PaginationBar,
   Pagination,
   PaginationContent,
   PaginationItem,
@@ -87,3 +180,4 @@ export {
   PaginationNext,
   PaginationEllipsis,
 };
+export type { PaginationBarProps };

package/src/components/popover.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Popover } from "radix-ui";
 import { cn } from "../lib/utils";
+import { useDensityAttributes } from "../lib/density-context";
 import { motionClasses } from "../lib/interaction";
 import {
   mobilePopperSheetMotionClassName,
@@ -24,6 +25,7 @@ const PopoverContent = React.forwardRef<
     <Popover.Portal>
       <Popover.Content
         ref={ref}
+        {...useDensityAttributes()}
         data-hilum-mobile-sheet="true"
         align={align}
         sideOffset={sideOffset}

package/src/components/property-row.tsx

@@ -38,10 +38,13 @@ function PropertyRow({
   return (
     <div
       className={cn(
-        "flex w-full min-w-0 py-1",
+        "flex w-full min-w-0 py-1 compact:py-0.5",
         inline
-          ? cn("gap-3", labelAlign === "center" ? "items-center" : "items-start")
-          : "flex-col items-stretch gap-1.5",
+          ? cn(
+              "gap-3 compact:min-h-7 compact:gap-2",
+              labelAlign === "center" ? "items-center" : "items-start",
+            )
+          : "flex-col items-stretch gap-1.5 compact:gap-1",
         className,
       )}
       {...rest}
@@ -49,7 +52,7 @@ function PropertyRow({
       {label !== undefined && (
         <div
           className={cn(
-            "caption select-none text-muted-foreground",
+            "caption select-none text-muted-foreground compact:text-[11px] compact:leading-4",
             inline ? "shrink-0" : "w-full",
           )}
           style={

package/src/components/radio-card.tsx

@@ -44,7 +44,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
             className={cn(
               "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-[background-color,border-color,box-shadow,opacity,scale]",
               "active:scale-[0.96]",
-              "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",
               "disabled:cursor-not-allowed disabled:opacity-50",
               isSelected
                 ? "border-brand-primary bg-card shadow-natural"

package/src/components/radio-group.tsx

@@ -90,6 +90,7 @@ const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
     };
 
     const content = (
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- roving tabindex per WAI-ARIA APG: the radios are focusable, the radiogroup container is not
       <div
         ref={(node) => {
           (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
@@ -194,7 +195,7 @@ const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
         <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/rating.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { Star } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface RatingProps {
+  /** Current rating; fractional values render partial stars (read-only). */
+  value: number;
+  /** Number of stars. Default: 5. */
+  max?: number;
+  /** When set, renders an interactive radio group (whole stars). */
+  onValueChange?: (value: number) => void;
+  size?: "sm" | "md" | "lg";
+  /** Show "4.5" after the stars. */
+  showValue?: boolean;
+  /** Optional count after the value, e.g. "(128)". */
+  count?: number;
+  /** Accessible name for the interactive variant. Default: "Rating". */
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const SIZE: Record<NonNullable<RatingProps["size"]>, number> = { sm: 12, md: 16, lg: 20 };
+
+/**
+ * Star rating. Read-only by default (reviews, product cards); pass
+ * `onValueChange` for an accessible radio-group input. Colours are tokens
+ * (`foreground` fill on a `border` track) so it works in every theme.
+ */
+function Rating({
+  value,
+  max = 5,
+  onValueChange,
+  size = "md",
+  showValue = false,
+  count,
+  label = "Rating",
+  disabled = false,
+  className,
+}: RatingProps) {
+  const px = SIZE[size];
+  const clamped = Math.max(0, Math.min(max, value));
+  const [hover, setHover] = React.useState<number | null>(null);
+  const name = React.useId();
+
+  const summary = (showValue || count !== undefined) && (
+    <span className="caption tabular-nums text-muted-foreground">
+      {showValue && clamped.toFixed(1)}
+      {count !== undefined && ` (${new Intl.NumberFormat().format(count)})`}
+    </span>
+  );
+
+  if (!onValueChange) {
+    return (
+      <span
+        role="img"
+        aria-label={`${clamped.toFixed(1)} out of ${max} stars`}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        data-slot="rating"
+      >
+        <span className="inline-flex items-center gap-0.5" aria-hidden="true">
+          {Array.from({ length: max }, (_, i) => {
+            const fill = Math.max(0, Math.min(1, clamped - i));
+            return (
+              <span key={i} className="relative inline-flex" style={{ width: px, height: px }}>
+                <Star size={px} className="fill-current text-border" strokeWidth={0} />
+                {fill > 0 && (
+                  <span
+                    className="absolute inset-y-0 left-0 overflow-hidden"
+                    style={{ width: `${fill * 100}%` }}
+                  >
+                    <Star size={px} className="fill-current text-foreground" strokeWidth={0} />
+                  </span>
+                )}
+              </span>
+            );
+          })}
+        </span>
+        {summary}
+      </span>
+    );
+  }
+
+  const shown = hover ?? Math.round(clamped);
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", className)} data-slot="rating">
+      {/* Hover preview only; keyboard users move through the native radios. */}
+      <span onMouseLeave={() => setHover(null)} className="inline-flex">
+        <span role="radiogroup" aria-label={label} className="inline-flex items-center gap-0.5">
+          {Array.from({ length: max }, (_, i) => {
+            const starValue = i + 1;
+            const checked = Math.round(clamped) === starValue;
+            return (
+              <label
+                key={starValue}
+                className={cn(
+                  "inline-flex cursor-pointer rounded-sm has-focus-visible:ring-2 has-focus-visible:ring-ring",
+                  disabled && "cursor-not-allowed opacity-50",
+                )}
+                onMouseEnter={() => !disabled && setHover(starValue)}
+              >
+                <input
+                  type="radio"
+                  className="sr-only"
+                  name={name}
+                  value={starValue}
+                  checked={checked}
+                  disabled={disabled}
+                  aria-label={`${starValue} star${starValue === 1 ? "" : "s"}`}
+                  onChange={() => onValueChange(starValue)}
+                />
+                <Star
+                  size={px}
+                  strokeWidth={0}
+                  aria-hidden="true"
+                  className={cn(
+                    "fill-current transition-colors",
+                    starValue <= shown ? "text-foreground" : "text-border",
+                  )}
+                />
+              </label>
+            );
+          })}
+        </span>
+      </span>
+      {summary}
+    </span>
+  );
+}
+
+Rating.displayName = "Rating";
+
+export { Rating };
+export type { RatingProps };

package/src/components/resizable.tsx

@@ -47,7 +47,7 @@ function ResizableHandle({ className, withHandle = true, ...props }: ResizableHa
     <Separator
       className={cn(
         "relative flex shrink-0 items-center justify-center bg-muted",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         // Horizontal (default): vertical bar
         "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
         // Vertical: horizontal bar

package/src/components/resource-item.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/* ─────────────────────── ResourceCell ─────────────────────── */
+
+interface ResourceCellProps {
+  /** Primary line — the resource name / order number. Rendered strongest. */
+  title: React.ReactNode;
+  /** Secondary line — email, SKU, "3 items", date. Rendered muted and smaller. */
+  subtitle?: React.ReactNode;
+  /** Leading thumbnail / avatar (32px works best). */
+  media?: React.ReactNode;
+  /** Inline trailing content on the title line (e.g. a StatusBadge). */
+  badge?: React.ReactNode;
+  /** Link the title (e.g. to the detail page). Use a router link via `title` for SPA navigation. */
+  href?: string;
+  className?: string;
+}
+
+/**
+ * Two-line table cell with the canonical hierarchy: a strong primary line and
+ * a muted secondary line — never the other way round. Use it for the first
+ * column of resource tables (products, orders, customers, merchants).
+ */
+function ResourceCell({ title, subtitle, media, badge, href, className }: ResourceCellProps) {
+  const titleNode = href ? (
+    <a
+      href={href}
+      className="rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {title}
+    </a>
+  ) : (
+    title
+  );
+  return (
+    <div className={cn("flex min-w-0 items-center gap-3", className)} data-slot="resource-cell">
+      {media && <div className="shrink-0">{media}</div>}
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="body min-w-0 truncate font-medium text-foreground">{titleNode}</span>
+          {badge && <span className="shrink-0">{badge}</span>}
+        </div>
+        {subtitle && <div className="caption truncate text-muted-foreground">{subtitle}</div>}
+      </div>
+    </div>
+  );
+}
+ResourceCell.displayName = "ResourceCell";
+
+/* ─────────────────────── ResourceItem ─────────────────────── */
+
+interface ResourceItemProps extends Omit<ResourceCellProps, "href" | "className"> {
+  /** Row-level metadata under the subtitle (e.g. "Sep 26, 2026 · 3 items"). */
+  meta?: React.ReactNode;
+  /** Right-aligned primary value (amount, count). */
+  trailing?: React.ReactNode;
+  /** Right-aligned secondary value under `trailing` (date, status). */
+  trailingSecondary?: React.ReactNode;
+  /** Make the whole row a link. */
+  href?: string;
+  /** Make the whole row a button. Ignored when `href` is set. */
+  onClick?: () => void;
+  /** Accessible name when the row is interactive and `title` isn't plain text. */
+  "aria-label"?: string;
+  className?: string;
+}
+
+/**
+ * List row for `<StackedList>` — the mobile counterpart of a resource table
+ * row. Same primary/secondary hierarchy as ResourceCell, with a trailing
+ * value column. The entire row is one link/button target.
+ */
+function ResourceItem({
+  title,
+  subtitle,
+  media,
+  badge,
+  meta,
+  trailing,
+  trailingSecondary,
+  href,
+  onClick,
+  "aria-label": ariaLabel,
+  className,
+}: ResourceItemProps) {
+  const inner = (
+    <span className={cn("flex min-w-0 items-center gap-3 px-4 py-3.5", className)}>
+      {media && <span className="block shrink-0">{media}</span>}
+      <span className="block min-w-0 flex-1">
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="body min-w-0 truncate font-medium text-foreground">{title}</span>
+          {badge && <span className="shrink-0">{badge}</span>}
+        </span>
+        {subtitle && <span className="caption block truncate text-muted-foreground">{subtitle}</span>}
+        {meta && <span className="caption mt-0.5 block truncate text-muted-foreground">{meta}</span>}
+      </span>
+      {(trailing || trailingSecondary) && (
+        <span className="flex shrink-0 flex-col items-end gap-0.5 text-right">
+          {trailing && (
+            <span className="body font-medium tabular-nums text-foreground">{trailing}</span>
+          )}
+          {trailingSecondary && (
+            <span className="caption text-muted-foreground">{trailingSecondary}</span>
+          )}
+        </span>
+      )}
+    </span>
+  );
+
+  const interactive =
+    "block w-full text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+  return (
+    <li data-slot="resource-item">
+      {href ? (
+        <a href={href} className={interactive} aria-label={ariaLabel}>
+          {inner}
+        </a>
+      ) : onClick ? (
+        <button type="button" onClick={onClick} className={interactive} aria-label={ariaLabel}>
+          {inner}
+        </button>
+      ) : (
+        inner
+      )}
+    </li>
+  );
+}
+ResourceItem.displayName = "ResourceItem";
+
+export { ResourceCell, ResourceItem };
+export type { ResourceCellProps, ResourceItemProps };

package/src/components/rich-text-editor.tsx

@@ -385,6 +385,7 @@ function RichTextEditor({
                 insertLink();
               }
             }}
+            // eslint-disable-next-line jsx-a11y/no-autofocus -- focuses the URL field when the link popover opens (dialog focus management)
             autoFocus
             aria-label="Link URL"
           />