cursedbelt 5.81.2 → 5.85.0

package/src/react/media/VideoPlayer.tsx

@@ -615,6 +615,7 @@ export function VideoPlayer({
   fullscreenOnDoubleClick = true,
   fillWindow = false,
   onFillWindowChange,
+  ...rest
 }: VideoPlayerProps) {
   /*
    * 🔴 What the SOURCES have answered, and why a player needs to hold that at all.
@@ -696,6 +697,7 @@ export function VideoPlayer({
     // The wrapper owns the intrinsic size: `aspect-ratio` keeps the player visible when no
     // ancestor resolves a height, `max-height: 100%` letterboxes it when one does.
     <div
+      {...rest}
       ref={hostRef}
       data-testid='video-player'
       style={{ position: 'relative', width: '100%', maxHeight: '100%', aspectRatio }}
@@ -975,6 +977,7 @@ export function ProcessingIndicator({
   status,
   progress,
   playbackDegraded,
+  ...rest
 }: {
   status?: PlayableVideo['processingStatus'];
   progress?: number;
@@ -997,6 +1000,7 @@ export function ProcessingIndicator({
           bar and the corner are siblings rather than two branches of one `if`. */}
       {badges}
       <div
+        {...rest}
         role='progressbar'
         aria-label='Optimizing video'
         aria-valuemin={0}

package/src/react/media/VideoSlideContent.tsx

@@ -14,10 +14,11 @@ import type { MediaVideoSlide } from './mediaPhoto.js';
  * (`.m3u8` → its bundled hls.js loader) and falls back to native playback for MP4.
  * The default skin is themed by the cursedbelt token bridge in styles.css.
  */
-export function VideoSlideContent({ slide }: { slide: MediaVideoSlide }) {
+export function VideoSlideContent({ slide, ...rest }: { slide: MediaVideoSlide }) {
   const isAudio = slide.item.type === 'audio';
   return (
     <div
+      {...rest}
       className='yarl__media-player'
       style={{
         width: 'min(92vw, 1280px)',

package/src/react/media/VideoTrimmer.tsx

@@ -42,6 +42,7 @@ export function VideoTrimmer({
   onClose,
   open = true,
   maxDurationSeconds,
+  ...rest
 }: VideoTrimmerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [duration, setDuration] = useState(0);
@@ -144,6 +145,7 @@ export function VideoTrimmer({
 
   return (
     <Modal
+      {...rest}
       open={open}
       onClose={onClose}
       size='lg'

package/src/react/media/VideoTurner.tsx

@@ -69,6 +69,7 @@ export function VideoTurner({
   open = true,
   onClose,
   onSave,
+  ...rest
 }: VideoTurnerProps) {
   const initial = React.useMemo<PictureEdit>(
     () => ({
@@ -132,6 +133,7 @@ export function VideoTurner({
 
   return (
     <Modal
+      {...rest}
       open={open}
       onClose={onClose}
       size='lg'

package/src/react/media/VirtualizedRows.tsx

@@ -41,6 +41,7 @@ export function VirtualizedRows({
   onOpen,
   onEdit,
   onDelete,
+  ...rest
 }: VirtualizedRowsProps) {
   const [width, setWidth] = useState(0);
   const onWidthChange = useCallback((w: number) => setWidth(w), []);
@@ -56,6 +57,7 @@ export function VirtualizedRows({
 
   return (
     <VirtualList
+      {...rest}
       count={tracks.length}
       estimateSize={(i) => trackHeight(tracks[i]) + spacing}
       /**

package/src/react/media/WaveformStrip.tsx

@@ -12,11 +12,12 @@ export interface WaveformStripProps {
  * paints in `currentColor`, so density/emphasis ride text-color utilities —
  * no hardcoded palette, works over any clip color token.
  */
-export function WaveformStrip({ peaks, height = 24, className }: WaveformStripProps) {
+export function WaveformStrip({ peaks, height = 24, className, ...rest }: WaveformStripProps) {
   if (peaks.length === 0) return null;
   const barWidth = 100 / peaks.length;
   return (
     <svg
+      {...rest}
       role='img'
       aria-label='Audio waveform'
       viewBox='0 0 100 100'

package/src/react/media/sourceFault.tsx

@@ -189,9 +189,10 @@ export function hlsErrorIsAnswer(detail: unknown): boolean {
  * later. The gallery's stages do the opposite and REPLACE their element — there the `<video>`
  * is the spinner, so nothing short of removing it would do.
  */
-export function SourceFaultOverlay({ fault, name }: { fault: SourceFault; name: string }) {
+export function SourceFaultOverlay({ fault, name, ...rest }: { fault: SourceFault; name: string }) {
   return (
     <div
+      {...rest}
       role='status'
       style={{
         position: 'absolute',

package/src/react/media-gallery/GalleryTable.tsx

@@ -219,6 +219,7 @@ export function GalleryTable({
   autoPreview,
   playing,
   exactBytes = false,
+  ...rest
 }: GalleryTableProps) {
   const viewportRef = useRef<HTMLDivElement | null>(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -248,6 +249,7 @@ export function GalleryTable({
 
   return (
     <div
+      {...rest}
       className={`cbgt-root${selection ? ' has-check' : ''}`}
       ref={viewportRef}
       onScroll={onScroll}

package/src/react/media-gallery/MediaGallery.tsx

@@ -1996,6 +1996,7 @@ export function MediaGallery({
   onSaveMeta,
   trimNote,
   meta,
+  ...rest
 }: MediaGalleryProps) {
   const [uncontrolledQuery, setUncontrolledQuery] = useState('');
   /** Controlled when the consumer passes `query`, uncontrolled otherwise — see the prop. */
@@ -2771,6 +2772,7 @@ export function MediaGallery({
       <>
       {capabilityDialogs}
       <DenseGalleryDetail
+        {...rest}
         {...(tileCaptions ? {} : { rowExtraHeight: CBGD_BARE_TILE_HEIGHT })}
         fullStage={fullStage}
         onFullStageChange={setFullStage}
@@ -3335,6 +3337,7 @@ export function MediaGallery({
         about separately. */}
     {capabilityDialogs}
     <DenseGalleryShell<MediaGalleryOrder>
+      {...rest}
       {...(tileCaptions ? {} : { rowExtraHeight: CBGD_BARE_TILE_HEIGHT })}
       rootRef={browseRootRef}
       title={title}

package/src/react/media-gallery/MediaMetaEditor.tsx

@@ -66,6 +66,7 @@ export function MediaMetaEditor({
   open = true,
   onClose,
   onSubmit,
+  ...rest
 }: MediaMetaEditorProps) {
   const single = items.length === 1 ? items[0] : undefined;
   const [tags, setTags] = React.useState<string[]>(() => cleanTags(single?.tags ?? []));
@@ -110,6 +111,7 @@ export function MediaMetaEditor({
 
   return (
     <Modal
+      {...rest}
       open={open}
       onClose={onClose}
       title={single ? `Tags and description — ${single.name}` : `Tag ${what}`}

package/src/react/media-gallery/galleryItemMedia.tsx

@@ -202,6 +202,7 @@ export function ThumbImg({
   alt,
   draggable,
   style,
+  ...rest
 }: {
   src: string;
   fallbackSrc?: string | undefined;
@@ -215,6 +216,7 @@ export function ThumbImg({
   const canFallBack = Boolean(fallbackSrc) && fallbackSrc !== src;
   return (
     <img
+      {...rest}
       src={failed && canFallBack ? (fallbackSrc as string) : src}
       alt={alt}
       // 🔴 Both, on every tile picture: `lazy` keeps an off-screen tile from opening a request,

package/src/react/namespace/NamespaceTargetCapsule.tsx

@@ -89,6 +89,7 @@ export function NamespaceTargetCapsule({
   onChange,
   size = 'md',
   disabled = false,
+  ...rest
 }: NamespaceTargetCapsuleProps) {
   const selected = resolveSelectedOption(options, value);
   const overriding = isOverridingDefault(options, value);
@@ -108,6 +109,7 @@ export function NamespaceTargetCapsule({
 
   return (
     <DropdownMenu
+      {...rest}
       trigger={
         <Button
           type="button"

package/src/react/nav/BreadcrumbMenus.tsx

@@ -68,6 +68,9 @@ export function OverflowMenuPanel({
   linkComponent,
   onNavigate,
   onAfterNavigate,
+  // Named so it stays off the menu's root: each node already carries its rendered icon.
+  resolveIcon: _resolveIcon,
+  ...rest
 }: PanelBase & { nodes: readonly BreadcrumbTrailNode[] } & NavNavigationProps) {
   const items: DropdownMenuItem[] = nodes.map((node) => {
     const go = () => {
@@ -109,6 +112,7 @@ export function OverflowMenuPanel({
 
   return (
     <DropdownMenu
+      {...rest}
       align='start'
       trigger={trigger}
       items={items}
@@ -126,6 +130,7 @@ export function LocalPivotPanel({
   items,
   selected,
   onSelect,
+  ...rest
 }: PanelBase & {
   items: readonly BreadcrumbActionItem[];
   selected?: string;
@@ -133,6 +138,7 @@ export function LocalPivotPanel({
 }) {
   return (
     <DropdownMenu
+      {...rest}
       align='start'
       trigger={trigger}
       items={toMenuItems(items, selected, onSelect)}

package/src/react/nav/BreadcrumbPivot.tsx

@@ -42,9 +42,10 @@ export interface AsyncPivotPanelProps {
   onOpenChange: (open: boolean) => void;
 }
 
-export function AsyncPivotPanel({ action, trigger, open, onOpenChange }: AsyncPivotPanelProps) {
+export function AsyncPivotPanel({ action, trigger, open, onOpenChange, ...rest }: AsyncPivotPanelProps) {
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={onOpenChange}
       align='start'

package/src/react/nav/BreadcrumbProvider.tsx

@@ -57,6 +57,7 @@ export interface BreadcrumbProviderProps {
   initialNodes?: readonly BreadcrumbTrailNode[];
 }
 
+// no-attribute-forward: a context provider; it renders only its children.
 export function BreadcrumbProvider({
   children,
   resetKey,
@@ -223,6 +224,7 @@ export function useRegisterBreadcrumb(
 }
 
 /** The declarative form — renders nothing, registers `node` while mounted. */
+// no-attribute-forward: renders nothing; it registers a crumb while mounted.
 export function BreadcrumbRegister({
   node,
   order,

package/src/react/nav/BreadcrumbTrail.tsx

@@ -353,6 +353,9 @@ export function BreadcrumbTrail({
   onNavigate,
   onAfterNavigate,
   className,
+  // Named so it stays off the root element: each node already carries its rendered icon.
+  resolveIcon: _resolveIcon,
+  ...rest
 }: BreadcrumbTrailProps) {
   const { plan, containerRef } = useOverflowPlan(nodes, overflow === 'collapse');
   if (nodes.length === 0) return null;
@@ -456,6 +459,7 @@ export function BreadcrumbTrail({
   if (!landmark) {
     return (
       <div
+        {...rest}
         ref={containerRef as React.RefObject<HTMLDivElement>}
         className={cn('min-w-0 text-sm', className)}
       >
@@ -465,6 +469,7 @@ export function BreadcrumbTrail({
   }
   return (
     <nav
+      {...rest}
       ref={containerRef as React.RefObject<HTMLElement>}
       aria-label={ariaLabel}
       className={cn('min-w-0 text-sm', className)}

package/src/react/nav/Breadcrumbs.tsx

@@ -74,6 +74,7 @@ export function ItemBreadcrumbs({
   onNavigate,
   onAfterNavigate,
   className,
+  ...rest
 }: ItemBreadcrumbsProps) {
   const nodes: BreadcrumbTrailNode[] = items.map((item, index) => ({
     id: item.key,
@@ -86,6 +87,7 @@ export function ItemBreadcrumbs({
 
   return (
     <BreadcrumbTrail
+      {...rest}
       nodes={nodes}
       separator={separator}
       overflow={overflow}
@@ -127,6 +129,7 @@ export function Breadcrumbs({
   onAfterNavigate,
   resolveIcon,
   className,
+  ...rest
 }: BreadcrumbsProps) {
   const trail = deriveBreadcrumbTrail(model, path, gate);
   const crumbs = homeCrumb && trail[0]?.path !== homeCrumb.path ? [homeCrumb, ...trail] : trail;
@@ -150,6 +153,7 @@ export function Breadcrumbs({
 
   return (
     <BreadcrumbTrail
+      {...rest}
       nodes={nodes}
       separator={separator}
       overflow={overflow}
@@ -179,6 +183,7 @@ export function RegisteredBreadcrumbs({
   onNavigate,
   onAfterNavigate,
   className,
+  ...rest
 }: NavNavigationProps & TrailOptions & { separator?: ReactNode; className?: string }) {
   const { nodes } = useBreadcrumbs();
   if (nodes.length === 0) return null;
@@ -198,6 +203,7 @@ export function RegisteredBreadcrumbs({
 
   return (
     <BreadcrumbTrail
+      {...rest}
       nodes={decorated}
       separator={separator}
       overflow={overflow}

package/src/react/nav/ColorSwatchGrid.tsx

@@ -28,6 +28,7 @@ export function ColorSwatchGrid({
   onCommit,
   resetLabel = 'Default',
   className,
+  ...rest
 }: ColorSwatchGridProps) {
   const pick = (color: string | undefined) => {
     onChange(color);
@@ -35,7 +36,7 @@ export function ColorSwatchGrid({
   };
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div {...rest} className={cn('flex flex-col gap-2', className)}>
       <SwatchPicker
         aria-label='Accent color'
         options={NAV_COLORS.map((color) => ({ value: color.toLowerCase(), color, label: color }))}

package/src/react/nav/CommandBar.tsx

@@ -61,9 +61,10 @@ export function CommandBar({
   captureDesktopOnly = false,
   compact = false,
   className,
+  ...rest
 }: CommandBarProps) {
   return (
-    <div data-cb-commandbar='' className={cn('flex items-center gap-2', className)}>
+    <div {...rest} data-cb-commandbar='' className={cn('flex items-center gap-2', className)}>
       {onOpenCommand && (
         <Button
           variant='ghost'

package/src/react/nav/HeaderSearch.tsx

@@ -74,6 +74,7 @@ export function HeaderSearch({
   onAfterNavigate,
   resolveIcon,
   className,
+  ...rest
 }: HeaderSearchProps) {
   const [query, setQuery] = useState('');
   const [open, setOpen] = useState(false);
@@ -171,7 +172,7 @@ export function HeaderSearch({
   };
 
   return (
-    <div className={cn('relative w-full', className)} data-cb-headersearch=''>
+    <div {...rest} className={cn('relative w-full', className)} data-cb-headersearch=''>
       <div className='relative' ref={refs.setReference} {...getReferenceProps()}>
         <Search
           className='pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground'

package/src/react/nav/HubTileGrid.tsx

@@ -71,6 +71,7 @@ export function HubTileGrid({
   onAfterNavigate,
   resolveIcon,
   className,
+  ...rest
 }: HubTileGridProps) {
   const items = deriveDomainItems(domain, gate);
   const hiddenIds = prefs?.hidden ?? [];
@@ -115,7 +116,7 @@ export function HubTileGrid({
   );
 
   return (
-    <div data-cb-hubtilegrid='' className={cn('flex flex-col gap-4', className)}>
+    <div {...rest} data-cb-hubtilegrid='' className={cn('flex flex-col gap-4', className)}>
       {visible.length === 0 ? (
         <EmptyState title={emptyLabel} />
       ) : canCustomize ? (

package/src/react/nav/NavColorPicker.tsx

@@ -28,10 +28,12 @@ export function NavColorPicker({
   label,
   align = 'start',
   className,
+  ...rest
 }: NavColorPickerProps) {
   const [open, setOpen] = useState(false);
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       align={align}

package/src/react/nav/NavItemMenu.tsx

@@ -45,6 +45,7 @@ export function NavItemMenu({
   trigger,
   onOpenChange,
   className,
+  ...rest
 }: NavItemMenuProps) {
   const [open, setOpen] = useState(false);
   const change = (next: boolean) => {
@@ -54,6 +55,7 @@ export function NavItemMenu({
 
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={change}
       align={align}

package/src/react/nav/PlaceBar.tsx

@@ -14,7 +14,11 @@ import { PRESS } from '../lib/press.js';
 import {
   isDomainActive,
   NAV_BADGE_TONE,
+  type NavBadge,
   type NavBadgeTone,
+  navBadgeText,
+  navBadgeTone,
+  navBadgeValue,
   NavLink,
   type NavNavigationProps,
   navAccent,
@@ -28,8 +32,8 @@ export interface PlaceBarProps extends NavNavigationProps {
   gate?: GateFn;
   /** Current route — the active place lights up. */
   activeHref?: string;
-  /** Dynamic per-place badge (unread dot), keyed by domain id. */
-  badges?: Record<string, number | string>;
+  /** Dynamic per-place badge (unread dot), keyed by domain id. A badge may carry its own tone — see {@link NavBadge}. */
+  badges?: Record<string, NavBadge>;
   /** How those counts read — see {@link NavBadgeTone}. Default `alert` (red). */
   badgeTone?: NavBadgeTone;
   /**
@@ -83,6 +87,7 @@ export function PlaceBar({
   onAfterNavigate,
   resolveIcon,
   className,
+  ...rest
 }: PlaceBarProps) {
   const all = deriveSideNavDomains(model, gate);
   const limit = Math.max(1, max);
@@ -132,12 +137,17 @@ export function PlaceBar({
 
   const overflowActive = overflow.some((p) => isDomainActive(p, activeHref));
   const overflowBadge = overflow.reduce<number>((sum, p) => {
-    const b = badges?.[p.id];
+    const b = navBadgeValue(badges?.[p.id]);
     return sum + (typeof b === 'number' ? b : b ? 1 : 0);
   }, 0);
+  // The More tab reads red if ANY rolled-up badge is an alert; a sheet of plain facts stays quiet.
+  const overflowTone: NavBadgeTone = overflow.some((p) => navBadgeValue(badges?.[p.id]) !== null && navBadgeTone(badges?.[p.id], badgeTone) === 'alert')
+    ? 'alert'
+    : badgeTone;
 
   return (
     <nav
+      {...rest}
       data-cb-placebar=''
       aria-label='Places'
       // gap-3 is the 12px clear space between adjacent links (e2e/touch-targets.spec.ts), so the
@@ -192,9 +202,9 @@ export function PlaceBar({
                 // raising it bursts the circle, and §4's floor is about metadata a reader reads.
                 <span
                   // guardrails-ignore micro-typography-floor: a COUNT glyph inside a 16px dot — raising it bursts the circle, and §4's floor is about metadata a reader reads.
-                  className={cn('absolute -right-1.5 -top-1 min-w-3.5 rounded-full px-1 text-caption font-bold leading-4', NAV_BADGE_TONE[badgeTone])}
+                  className={cn('absolute -right-1.5 -top-1 min-w-3.5 rounded-full px-1 text-caption font-bold leading-4', NAV_BADGE_TONE[overflowTone])}
                 >
-                  {overflowBadge > 99 ? '99+' : overflowBadge}
+                  {navBadgeText(overflowBadge)}
                 </span>
               )}
             </span>
@@ -206,7 +216,7 @@ export function PlaceBar({
               {overflow.map((place) => {
                 const active = isDomainActive(place, activeHref);
                 const icon = renderIcon(resolveIcon, place.icon);
-                const badge = badges?.[place.id];
+                const badge = navBadgeValue(badges?.[place.id]);
                 return (
                   <li key={place.id}>
                     <NavLink
@@ -238,9 +248,9 @@ export function PlaceBar({
                         </span>
                       )}
                       <span className='min-w-0 flex-1 truncate'>{place.label}</span>
-                      {badge != null && badge !== 0 && (
-                        <span className={cn('rounded-full px-1.5 py-0.5 text-xs font-bold', NAV_BADGE_TONE[badgeTone])}>
-                          {typeof badge === 'number' && badge > 99 ? '99+' : badge}
+                      {badge !== null && (
+                        <span className={cn('rounded-full px-1.5 py-0.5 text-xs font-bold tabular-nums', NAV_BADGE_TONE[navBadgeTone(badges?.[place.id], badgeTone)])}>
+                          {navBadgeText(badge)}
                         </span>
                       )}
                     </NavLink>
@@ -259,7 +269,7 @@ export function PlaceBar({
 interface PlaceTabProps extends NavNavigationProps {
   place: NavDomain;
   active: boolean;
-  badge?: number | string;
+  badge?: NavBadge;
   /**
    * 🔴 Threaded 2026-08-22. `PlaceTab` hardcoded `bg-destructive-solid` and ignored
    * the model's tone entirely, while the More sheet's rows twenty lines up honoured
@@ -285,7 +295,8 @@ function PlaceTab({
 }: PlaceTabProps) {
   const accent = navAccent(undefined);
   const icon = renderIcon(resolveIcon, place.icon);
-  const showBadge = badge != null && badge !== 0;
+  const badgeShown = navBadgeValue(badge);
+  const showBadge = badgeShown !== null;
 
   return (
     <NavLink
@@ -324,9 +335,9 @@ function PlaceTab({
           // raising it bursts the circle, and §4's floor is about metadata a reader reads.
           <span
             // guardrails-ignore micro-typography-floor: a COUNT glyph inside a 16px dot — raising it bursts the circle, and §4's floor is about metadata a reader reads.
-            className={cn('absolute -right-1.5 -top-1 min-w-3.5 rounded-full px-1 text-caption font-bold leading-4', NAV_BADGE_TONE[badgeTone])}
+            className={cn('absolute -right-1.5 -top-1 min-w-3.5 rounded-full px-1 text-caption font-bold leading-4', NAV_BADGE_TONE[navBadgeTone(badge, badgeTone)])}
           >
-            {typeof badge === 'number' && badge > 99 ? '99+' : badge}
+            {badgeShown === null ? null : navBadgeText(badgeShown)}
           </span>
         )}
       </span>