cursedbelt 5.82.0 → 5.85.0

package/src/react/nav/navShared.tsx

@@ -74,6 +74,7 @@ export function NavLink({
   tabIndex,
   disabled,
   children,
+  ...rest
 }: NavLinkProps) {
   const handleClick = () => {
     onNavigate?.(path);
@@ -91,6 +92,7 @@ export function NavLink({
     const row = (
       // biome-ignore lint/a11y/useSemanticElements: HTML has no disabled anchor; an <a> without href carries no link role at all, and one WITH href is followable — the bug this branch exists to stop.
       <span
+        {...rest}
         // `role='link'` so the row still ANNOUNCES as the destination it is, with
         // `aria-disabled` saying it cannot be followed here — a bare <span> with an
         // aria-label is not a supported combination and reads as nothing.
@@ -113,6 +115,7 @@ export function NavLink({
       const Link = linkComponent;
       return (
         <Link
+          {...rest}
           to={path}
           href={path}
           className={className}
@@ -128,6 +131,7 @@ export function NavLink({
     })()
   ) : (
     <a
+      {...rest}
       href={path}
       className={className}
       style={style}
@@ -225,3 +229,24 @@ export const NAV_BADGE_TONE: Record<NavBadgeTone, string> = {
   neutral: 'bg-muted text-muted-foreground',
   accent: 'bg-accent/15 text-accent-strong',
 };
+
+/**
+ * A place's badge: a bare count or word (the shell's one `badgeTone` applies), or a count WITH
+ * its own tone — so one sidebar can say "3 problems you have not seen" in red beside "12 queued"
+ * in grey. Station asked for exactly that on 2026-10-20 (forge task station-evolution): the red
+ * number is reserved for what the owner has not looked at yet, and a plain fact never shares it.
+ */
+export type NavBadge = number | string | { value: number | string; tone?: NavBadgeTone };
+
+/** The count or word a badge shows — `null` for nothing to draw (absent, `0`, an empty string). */
+export function navBadgeValue(badge: NavBadge | undefined): number | string | null {
+  const v = badge !== null && typeof badge === 'object' ? badge.value : badge;
+  return v == null || v === 0 || v === '' ? null : v;
+}
+
+/** The badge's own tone, else the shell's. */
+export const navBadgeTone = (badge: NavBadge | undefined, fallback: NavBadgeTone): NavBadgeTone =>
+  badge !== null && typeof badge === 'object' && badge.tone ? badge.tone : fallback;
+
+/** `150` → `99+`: a badge is a glance, not a figure. */
+export const navBadgeText = (value: number | string): string => (typeof value === 'number' && value > 99 ? '99+' : String(value));

package/src/react/notifications/NotificationBell.tsx

@@ -48,12 +48,14 @@ export function NotificationBell({
   feedMaxHeight = '420px',
   onOpen,
   className,
+  ...rest
 }: NotificationBellProps) {
   const unreadCount = useNotificationStore(store, (s) => s.unreadCount);
   const [open, setOpen] = useState(false);
 
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       width={feedWidth}

package/src/react/notifications/NotificationFeed.tsx

@@ -187,6 +187,7 @@ export function NotificationFeed({
   maxHeight = '400px',
   onOpen,
   className,
+  ...rest
 }: NotificationFeedProps) {
   const notifications = useNotificationStore(store, (s) => s.notifications);
   const unreadCount = useNotificationStore(store, (s) => s.unreadCount);
@@ -199,7 +200,7 @@ export function NotificationFeed({
   const read = notifications.filter((n) => n.read);
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div {...rest} className={cn('flex flex-col', className)}>
       {/* Header */}
       <div className='flex items-center justify-between border-b border-border px-4 py-2'>
         <span className='text-sm font-semibold text-foreground'>

package/src/react/notifications/NotificationInbox.tsx

@@ -199,10 +199,11 @@ export function NotificationInbox({
   onOpen,
   focusId,
   className,
+  ...rest
 }: NotificationInboxProps) {
   const anyUnread = items.some((n) => !n.read && !n.done);
   return (
-    <div className={cn('flex min-w-0 flex-col', className)}>
+    <div {...rest} className={cn('flex min-w-0 flex-col', className)}>
       {/* pt gives the filter row breathing room under the page header; pb separates
           it from the list/empty state below. */}
       <div className='flex flex-wrap items-center justify-between gap-2 pb-4 pt-2'>

package/src/react/palette/CommandPalette.tsx

@@ -190,6 +190,7 @@ export function CommandPalette({
   placeholder = 'Search pages, run a command…',
   emptyContent = 'No matches.',
   className,
+  ...rest
 }: CommandPaletteProps) {
   const [query, setQuery] = useState('');
   const trimmed = query.trim();
@@ -375,6 +376,7 @@ export function CommandPalette({
       <Dialog.Portal>
         <Dialog.Overlay className={cn('fixed inset-0 z-50 bg-black/50 backdrop-blur-sm', SCRIM_MOTION)} />
         <Dialog.Content
+          {...rest}
           data-cb-command-palette=''
           onOpenAutoFocus={(e) => {
             // Let cmdk's input keep the autofocus (Radix would otherwise focus the

package/src/react/palette/Kbd.tsx

@@ -26,13 +26,13 @@ const CAP =
   'rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-caption font-medium text-muted-foreground';
 
 /** One key cap, in the platform's notation. */
-export function Kbd({ keys, platform, children, className }: KbdProps) {
+export function Kbd({ keys, platform, children, className, ...rest }: KbdProps) {
   if (keys !== undefined && platform === 'both') {
     const mac = formatHotkey(keys, true);
     const windows = formatHotkey(keys, false);
     if (mac !== windows) {
       return (
-        <span className={cn('inline-flex items-center gap-1', className)}>
+        <span {...rest} className={cn('inline-flex items-center gap-1', className)}>
           <kbd className={CAP}>{mac}</kbd>
           <span className='text-caption text-muted-foreground'>
             (<kbd className={CAP}>{windows}</kbd>)
@@ -42,5 +42,5 @@ export function Kbd({ keys, platform, children, className }: KbdProps) {
     }
   }
   const apple = platform === 'mac' ? true : platform === 'windows' ? false : undefined;
-  return <kbd className={cn(CAP, className)}>{keys !== undefined ? formatHotkey(keys, apple) : children}</kbd>;
+  return <kbd {...rest} className={cn(CAP, className)}>{keys !== undefined ? formatHotkey(keys, apple) : children}</kbd>;
 }

package/src/react/palette/ShortcutSheet.tsx

@@ -51,9 +51,11 @@ export function ShortcutSheet({
   title = 'Keyboard shortcuts',
   subtitle = 'Keys work anywhere outside a text field.',
   platform,
+  ...rest
 }: ShortcutSheetProps) {
   return (
     <Modal
+      {...rest}
       open={open}
       onClose={onClose}
       size='md'

package/src/react/palette/commandSources.tsx

@@ -92,6 +92,7 @@ export class CommandSourceStore {
 const SourceContext = createContext<CommandSourceStore | null>(null);
 
 /** Holds the sources pages contribute. `AppShell` mounts one; an app without it can too. */
+// no-attribute-forward: a context provider; it renders only its children.
 export function CommandSourceProvider({ children }: { children: ReactNode }) {
   const [store] = useState(() => new CommandSourceStore());
   return <SourceContext.Provider value={store}>{children}</SourceContext.Provider>;

package/src/react/pdf-viewer/PdfPage.tsx

@@ -30,7 +30,7 @@ export interface PdfPageProps {
  *  so a list of pages does not jump as each one renders (STA-5). */
 const LETTER_ASPECT = 11 / 8.5;
 
-export function PdfPage({ doc, pageNumber, width, className, onRendered }: PdfPageProps) {
+export function PdfPage({ doc, pageNumber, width, className, onRendered, ...rest }: PdfPageProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(0);
@@ -112,6 +112,7 @@ export function PdfPage({ doc, pageNumber, width, className, onRendered }: PdfPa
   const busy = !rendered && !failed;
   return (
     <div
+      {...rest}
       className={cn(
         'relative mx-auto',
         // Paper is white in both themes; the placeholder and the failure are app surfaces, so

package/src/react/pdf-viewer/PdfViewer.tsx

@@ -49,6 +49,7 @@ export function PdfViewer({
   initialPage = 1,
   height = '100%',
   className,
+  ...rest
 }: PdfViewerProps) {
   const [pdf, setPdf] = useState<LoadedPdf | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -126,7 +127,7 @@ export function PdfViewer({
 
   if (loading) {
     return (
-      <div className={cn('flex flex-col gap-3 p-4', className)} style={{ height }}>
+      <div {...rest} className={cn('flex flex-col gap-3 p-4', className)} style={{ height }}>
         <Skeleton className='h-8 w-40' />
         <Skeleton className='h-full w-full' />
       </div>
@@ -136,6 +137,7 @@ export function PdfViewer({
   if (error) {
     return (
       <EmptyState
+        {...rest}
         className={className}
         title="This PDF couldn't be opened"
         description={error}
@@ -146,6 +148,7 @@ export function PdfViewer({
   if (!pdf) {
     return (
       <EmptyState
+        {...rest}
         className={className}
         title='No PDF loaded'
         description='The original file is stored and can still be downloaded.'
@@ -154,7 +157,7 @@ export function PdfViewer({
   }
 
   return (
-    <div className={cn('flex min-h-0 flex-col', className)} style={{ height }}>
+    <div {...rest} className={cn('flex min-h-0 flex-col', className)} style={{ height }}>
       <div className='flex shrink-0 flex-wrap items-center gap-1 border-b border-border px-2 py-1.5'>
         <IconButton
           label='Previous page'

package/src/react/portal/CCPortalProvider.tsx

@@ -68,6 +68,7 @@ export interface CCPortalProviderProps {
   container?: HTMLElement | null;
 }
 
+// no-attribute-forward: a context provider; it renders only its children.
 export function CCPortalProvider({ children, container }: CCPortalProviderProps) {
   /**
    * The ref is the SOURCE OF TRUTH and is mutated synchronously; the state is a

package/src/react/problem-detail/ProblemDetailView.tsx

@@ -115,11 +115,12 @@ export function ProblemDetailView({
   createdAt,
   actions,
   className,
+  ...rest
 }: ProblemDetailViewProps) {
   return (
     // `select-text` makes the whole drill-down explicitly selectable for copy — the
     // owner asked to be able to highlight and copy any of this.
-    <div className={cn('flex select-text flex-col gap-4 text-sm', className)}>
+    <div {...rest} className={cn('flex select-text flex-col gap-4 text-sm', className)}>
       <header className='flex flex-col gap-1'>
         <div className='flex items-start justify-between gap-2'>
           <div className='flex min-w-0 items-center gap-2'>

package/src/react/rich-text/RichTextEditor.tsx

@@ -86,6 +86,7 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
       maxLength,
       className,
       toolbarClassName,
+      ...rest
     },
     ref,
   ) {
@@ -142,6 +143,7 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
 
     return (
       <div
+        {...rest}
         className={cn(
           'cb-rich-text flex flex-col rounded-md border border-border bg-background',
           'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',

package/src/react/rich-text/RichTextToolbar.tsx

@@ -192,7 +192,7 @@ export interface RichTextToolbarProps {
   className?: string;
 }
 
-export function RichTextToolbar({ editor, className }: RichTextToolbarProps) {
+export function RichTextToolbar({ editor, className, ...rest }: RichTextToolbarProps) {
   const [linkOpen, setLinkOpen] = useState(false);
   const [imageOpen, setImageOpen] = useState(false);
   /*
@@ -223,7 +223,7 @@ export function RichTextToolbar({ editor, className }: RichTextToolbarProps) {
   const disabled = !editor.isEditable;
 
   return (
-    <div className={cn('relative border-b border-border', className)}>
+    <div {...rest} className={cn('relative border-b border-border', className)}>
       <ScrollArea axis='x' space='none'>
         {/* Wraps from `sm:` up, scrolls sideways only on a phone. In one unbroken row the
             link and image buttons sat past the right edge of a 576px form with nothing to

package/src/react/sharing/SharePanel.tsx

@@ -90,6 +90,7 @@ export function SharePanel({
 	onGrant,
 	onRevoke,
 	className,
+	...rest
 }: SharePanelProps) {
 	const [address, setAddress] = useState("");
 	const [level, setLevel] = useState<ShareLevel>("read");
@@ -123,7 +124,7 @@ export function SharePanel({
 	};
 
 	return (
-		<div className={`flex flex-col gap-3 ${className ?? ""}`}>
+		<div {...rest} className={`flex flex-col gap-3 ${className ?? ""}`}>
 			{grants.length === 0 ? (
 				<EmptyState
 					compact

package/src/react/slots/Slot.tsx

@@ -119,6 +119,7 @@ export interface SlotProps {
  * preconditions — and so a fill that must not exist for this user is never
  * constructed at all.
  */
+// no-attribute-forward: renders its fills in place, with no element of its own.
 export const Slot = memo(function Slot({ id, fills, claims, pending, empty }: SlotProps) {
   const effective = useMemo(
     () =>

package/src/react/spreadsheet/SpreadsheetGrid.tsx

@@ -93,6 +93,7 @@ export function SpreadsheetGrid<C extends GridCell = GridCell>({
   height = '100%',
   className,
   theme,
+  ...rest
 }: SpreadsheetGridProps<C>) {
   const containerRef = useRef<HTMLDivElement>(null);
   const { width, height: measuredHeight } = useElementSize(containerRef, { layout: true });
@@ -100,6 +101,7 @@ export function SpreadsheetGrid<C extends GridCell = GridCell>({
 
   return (
     <div
+      {...rest}
       ref={containerRef}
       className={cn('cb-spreadsheet-grid relative w-full overflow-hidden', className)}
       style={{ height }}

package/src/react/testReport/TestReportViewer.tsx

@@ -61,6 +61,7 @@ export const TestReportViewer = ({
   artifactUrl,
   onError,
   className,
+  ...rest
 }: TestReportViewerProps) => {
   const [summaries, setSummaries] = useState<TestRunSummary[] | null>(null);
   const [selected, setSelected] = useState<TestRunReport | null>(null);
@@ -89,7 +90,7 @@ export const TestReportViewer = ({
 
   if (selected) {
     return (
-      <div className={className}>
+      <div {...rest} className={className}>
         <ReportDetail
           report={selected}
           artifactUrl={artifactUrl}
@@ -100,7 +101,7 @@ export const TestReportViewer = ({
   }
   if (summaries === null) {
     return (
-      <div className={className}>
+      <div {...rest} className={className}>
         <div className='flex items-center gap-2'>
           <Spinner /> <span className='text-sm text-muted-foreground'>Loading test runs…</span>
         </div>
@@ -109,7 +110,7 @@ export const TestReportViewer = ({
   }
   if (summaries.length === 0) {
     return (
-      <div className={className}>
+      <div {...rest} className={className}>
         <EmptyState
           title='No test reports yet'
           message='Run the functional or e2e suite — each run drops a report here.'
@@ -118,7 +119,7 @@ export const TestReportViewer = ({
     );
   }
   return (
-    <div className={className}>
+    <div {...rest} className={className}>
       <div className='flex flex-col gap-3'>
         {summaries.map((r) => (
           <RunRow key={r.id} run={r} busy={loadingDetail} onOpen={() => open(r.id)} />

package/src/react/uiScale/UiScaleControl.tsx

@@ -22,10 +22,11 @@ export function UiScaleControl({
   showStepper = true,
   showValue = true,
   className,
+  ...rest
 }: UiScaleControlProps) {
   const { scale, level, levels, setLevel, increase, decrease, atMin, atMax } = useUiScale();
   return (
-    <div className={cx('flex flex-wrap items-center gap-2', className)}>
+    <div {...rest} className={cx('flex flex-wrap items-center gap-2', className)}>
       {showStepper && (
         <IconButton label='Decrease UI size' onClick={decrease} disabled={atMin}>
           <span aria-hidden className='text-sm font-semibold'>

package/src/react/workbook-viewer/WorkbookViewer.tsx

@@ -61,6 +61,7 @@ export function WorkbookViewer({
   onExtract,
   height = '100%',
   className,
+  ...rest
 }: WorkbookViewerProps) {
   const [workbook, setWorkbook] = useState<Workbook | null>(provided ?? null);
   const [error, setError] = useState<string | null>(null);
@@ -199,7 +200,7 @@ export function WorkbookViewer({
 
   if (loading) {
     return (
-      <div className={cn('flex flex-col gap-2 p-3', className)} style={{ height }}>
+      <div {...rest} className={cn('flex flex-col gap-2 p-3', className)} style={{ height }}>
         <Skeleton className='h-8 w-48' />
         <Skeleton className='h-full w-full' />
       </div>
@@ -209,6 +210,7 @@ export function WorkbookViewer({
   if (error) {
     return (
       <EmptyState
+        {...rest}
         className={className}
         title="This spreadsheet couldn't be opened"
         description={error}
@@ -219,6 +221,7 @@ export function WorkbookViewer({
   if (!sheet || sheet.rows === 0) {
     return (
       <EmptyState
+        {...rest}
         className={className}
         title={workbook ? 'This sheet is empty' : 'No spreadsheet loaded'}
         description={
@@ -231,7 +234,7 @@ export function WorkbookViewer({
   }
 
   return (
-    <div className={cn('flex min-h-0 flex-col', className)} style={{ height }}>
+    <div {...rest} className={cn('flex min-h-0 flex-col', className)} style={{ height }}>
       {sheets.length > 1 && (
         <div className='shrink-0 border-b border-border px-2 py-1.5'>
           <SegmentedControl

package/src/styles-areas/analytics.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 154 candidate(s).
+ * 156 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -32,9 +32,9 @@
 @source inline("@max-6xl:[&>*]:hidden @max-6xl:border-0 @max-6xl:invisible @max-6xl:min-w-0! @max-6xl:p-0!");
 @source inline("@max-6xl:text-[length:0] @max-6xl:w-0! @max-xl:contents @xl:basis-auto @xl:block @xl:hidden");
 @source inline("[&>*]:hidden [&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 active:cursor-grabbing basis");
-@source inline("basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50");
-@source inline("border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col collapse");
-@source inline("cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
+@source inline("basis-full bg-[var(--cb-frozen-bg)] bg-accent/15 bg-card/95 bg-gradient-to-t bg-muted/30");
+@source inline("bg-muted/50 border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col");
+@source inline("collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
 @source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
 @source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95 disabled:opacity-40 duration-100");
 @source inline("fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
@@ -45,8 +45,8 @@
 @source inline("max-sm:min-w-24 max-sm:min-w-32 max-sm:ml-13.5 max-sm:w-auto max-w-32 max-w-36 max-w-45 max-w-48");
 @source inline("max-w-60 min-h-20 min-h-dvh min-w-0! min-w-20 min-w-24 min-w-4 min-w-52");
 @source inline("min-w-[var(--anchor-width)] min-w-max mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5");
-@source inline("pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pt-1 resize-none resize-y right-3 ring-field-error/30");
-@source inline("self self-stretch shadow-[1px_0_0_0_var(--color-border)] shrink-[2] size-7 slide-in-from-top-1");
-@source inline("table-fixed text-[length:0] text-accent-solid-foreground text-field-placeholder text-success");
-@source inline("text-xl to-transparent top-3 transition-[transform,opacity] w-0 w-0! w-11 w-12 w-20 w-32 w-36");
-@source inline("w-40 w-88");
+@source inline("pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9 pt-1 resize-none resize-y right-3");
+@source inline("ring-field-error/30 self self-stretch shadow-[1px_0_0_0_var(--color-border)] shrink-[2] size-7");
+@source inline("slide-in-from-top-1 table-fixed text-[length:0] text-accent-solid-foreground");
+@source inline("text-field-placeholder text-success text-xl to-transparent top-3 transition-[transform,opacity]");
+@source inline("w-0 w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");

package/src/styles-areas/core.css

@@ -15,7 +15,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 926 candidate(s).
+ * 927 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -146,18 +146,18 @@
 @source inline("max-sm:max-h-[var(--sheet-h-phone)] max-sm:max-h-dvh max-sm:max-w-none max-sm:pt-6");
 @source inline("max-sm:rounded-b-none max-sm:rounded-none max-sm:rounded-t-2xl max-sm:touch-none max-sm:w-full");
 @source inline("max-w-(--radix-popover-content-available-width) max-w-2xl max-w-40 max-w-[calc(100vw-2rem)]");
-@source inline("max-w-[var(--modal-w-sm)] max-w-[var(--page-w-dashboard)] max-w-[var(--page-w-form)]");
-@source inline("max-w-[var(--page-w-wide)] max-w-[var(--reading-width)] max-w-full max-w-lg max-w-md max-w-sm");
-@source inline("max-w-xl max-w-xs mb-0.5 mb-1 mb-3 md md:divide-border md:divide-x md:flex-none md:flex-row");
-@source inline("md:grid-cols-4 md:inline md:w-1/3 md:w-2/5 min min-h-0 min-h-11 min-h-14 min-h-[1lh]");
-@source inline("min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-h-row");
-@source inline("min-w-0 min-w-11 min-w-32 min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion");
-@source inline("motion-reduce:active:scale-100 motion-reduce:animate-none motion-reduce:duration-0");
-@source inline("motion-reduce:transition-none mt-0.5 mt-1 mt-2 mx-auto my my-1 object object-cover opacity");
-@source inline("opacity-0 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 out outline outline-none over");
-@source inline("overflow overflow-auto overflow-hidden overflow-x-auto overflow-x-clip overflow-x-hidden");
-@source inline("overflow-y-auto overscroll-contain p p-0 p-0.5 p-1 p-1.5 p-2 p-3 p-4 p-6 p-[7px]");
-@source inline("p-[var(--panel-pad)] pause paused pb-0 pb-1 pb-2 pb-3 pb-4");
+@source inline("max-w-[var(--modal-w-sm)] max-w-[var(--page-w-dashboard)] max-w-[var(--page-w-fluid)]");
+@source inline("max-w-[var(--page-w-form)] max-w-[var(--page-w-wide)] max-w-[var(--reading-width)] max-w-full");
+@source inline("max-w-lg max-w-md max-w-sm max-w-xl max-w-xs mb-0.5 mb-1 mb-3 md md:divide-border md:divide-x");
+@source inline("md:flex-none md:flex-row md:grid-cols-4 md:inline md:w-1/3 md:w-2/5 min min-h-0 min-h-11");
+@source inline("min-h-14 min-h-[1lh] min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)]");
+@source inline("min-h-[var(--control-h-sm)] min-h-row min-w-0 min-w-11 min-w-32");
+@source inline("min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion motion-reduce:active:scale-100");
+@source inline("motion-reduce:animate-none motion-reduce:duration-0 motion-reduce:transition-none mt-0.5 mt-1");
+@source inline("mt-2 mx-auto my my-1 object object-cover opacity opacity-0 opacity-30 opacity-40 opacity-50");
+@source inline("opacity-60 opacity-70 out outline outline-none over overflow overflow-auto overflow-hidden");
+@source inline("overflow-x-auto overflow-x-clip overflow-x-hidden overflow-y-auto overscroll-contain p p-0 p-0.5");
+@source inline("p-1 p-1.5 p-2 p-3 p-4 p-6 p-[7px] p-[var(--panel-pad)] pause paused pb-0 pb-1 pb-2 pb-3 pb-4");
 @source inline("pb-[max(env(safe-area-inset-bottom,0px),0.75rem)] pb-[var(--empty-lift)] pl-4 pl-8 place");
 @source inline("placeholder placeholder:text-field-placeholder point pointer pointer-coarse pointer-coarse:-m-2");
 @source inline("pointer-coarse:data-[state=checked]:translate-x-8 pointer-coarse:h-11 pointer-coarse:min-h-11");

package/src/styles-areas/data-table.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 149 candidate(s).
+ * 151 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -32,20 +32,20 @@
 @source inline("@max-6xl:[&>*]:hidden @max-6xl:border-0 @max-6xl:invisible @max-6xl:min-w-0! @max-6xl:p-0!");
 @source inline("@max-6xl:text-[length:0] @max-6xl:w-0! @max-xl:contents @xl:basis-auto @xl:block @xl:hidden");
 @source inline("[&>*]:hidden [&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 active:cursor-grabbing basis-full");
-@source inline("bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50 border-accent-solid");
-@source inline("border-accent/60 border-field-error border-solid border-t-2 col collapse cursor-grab");
-@source inline("data-[ending-style]:opacity-0 data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
-@source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
-@source inline("data-[starting-style]:scale-95 disabled:opacity-40 duration-100 fade-in");
-@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
+@source inline("bg-[var(--cb-frozen-bg)] bg-accent/15 bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50");
+@source inline("border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col collapse");
+@source inline("cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
+@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
+@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95 disabled:opacity-40 duration-100");
+@source inline("fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
 @source inline("focus-within:ring-field-ring/30 from-card gap-x-6 h-105");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-muted/40");
 @source inline("hover:border-field-ring hover:text-warning justify-self-end last:border-0 left-11 left-2.5");
 @source inline("list-none max-h-64 max-h-88 max-sm:flex-1 max-sm:flex-wrap max-sm:min-w-0 max-sm:min-w-24");
 @source inline("max-sm:min-w-32 max-sm:ml-13.5 max-sm:w-auto max-w-32 max-w-36 max-w-45 max-w-48 max-w-60");
 @source inline("min-h-20 min-h-dvh min-w-0! min-w-24 min-w-4 min-w-52 min-w-[var(--anchor-width)] min-w-max mr-2");
-@source inline("mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pt-1");
-@source inline("resize-none resize-y right-3 ring-field-error/30 self self-stretch");
+@source inline("mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9");
+@source inline("pt-1 resize-none resize-y right-3 ring-field-error/30 self self-stretch");
 @source inline("shadow-[1px_0_0_0_var(--color-border)] size-7 slide-in-from-top-1 table-fixed text-[length:0]");
 @source inline("text-accent-solid-foreground text-field-placeholder text-success text-xl to-transparent top-3");
 @source inline("transition-[transform,opacity] w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");

package/src/styles-areas/filter-rail.css

@@ -18,14 +18,14 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 29 candidate(s).
+ * 30 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
 @source inline("-mx-2 -outline-offset-2 [&_button]:min-h-0 [&_button]:min-w-0 [&_button]:p-0 [&_button]:size-7");
-@source inline("bg-card-overlay duration-150 group-data-[state=open]/rail-section:rotate-90");
+@source inline("bg-card-overlay collapse duration-150 group-data-[state=open]/rail-section:rotate-90");
 @source inline("group-focus-within/rail-row:opacity-100 group-hover/rail-row:opacity-100 group/rail-row");
 @source inline("group/rail-section last:mb-0 mx-2 opacity-100 outline-2 outline-accent outline-dashed");
 @source inline("place-items-center pointer-coarse:[&_button]:min-h-11 pointer-coarse:[&_button]:min-w-11");

package/src/styles-areas/nav.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 126 candidate(s).
+ * 128 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -31,8 +31,8 @@
 @source inline("[&_[cmdk-group-heading]]:uppercase [&_[data-cb-banner-icon]]:text-accent");
 @source inline("[&_[data-cb-banner-icon]]:text-destructive [&_[data-cb-banner-icon]]:text-warning");
 @source inline("[&_svg]:size-3.5 [scrollbar-width:none] aria-checked:ring-2 aria-checked:ring-foreground");
-@source inline("aria-checked:ring-offset-1 bg-accent/15 bg-destructive/10 bg-warning/10 border-border/40");
-@source inline("border-dashed collapse cursor-grab data-[disabled=true]:opacity-50");
+@source inline("aria-checked:ring-offset-1 bg-accent/15 bg-card-overlay bg-destructive/10 bg-warning/10");
+@source inline("border-border/40 border-dashed collapse cursor-grab data-[disabled=true]:opacity-50");
 @source inline("data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted");
 @source inline("data-[selected=true]:text-foreground disabled:hover:scale-100 disabled:opacity-40");
 @source inline("focus-within:opacity-100 g grid-cols-4 group-hover/navitem:opacity-100");
@@ -46,7 +46,7 @@
 @source inline("md:pointer-coarse:w-auto md:px-3 md:px-6 md:shrink-0 min-h-10 min-h-12 min-h-dvh min-w-3.5");
 @source inline("min-w-8 min-w-9 mix-blend-difference mt-auto mx-1 no-underline opacity-55 opacity-80");
 @source inline("pb-[env(safe-area-inset-bottom,0px)] pl-11 pl-9 place-items-center");
-@source inline("placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1 rotate-180 shadow-lg");
-@source inline("size-7 size-9 sm:inline sm:inline-block sm:inline-flex space-y-0.5 space-y-2");
-@source inline("top-[var(--palette-top)] w-52 w-56 w-60 w-[calc(100%-2rem)] w-[var(--rail-w)]");
-@source inline("w-[var(--rail-w-collapsed)] w-max");
+@source inline("placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1 rotate-180");
+@source inline("shadow-[inset_3px_0_0_0_var(--accent)] shadow-lg size-7 size-9 sm:inline sm:inline-block");
+@source inline("sm:inline-flex space-y-0.5 space-y-2 top-[var(--palette-top)] w-52 w-56 w-60 w-[calc(100%-2rem)]");
+@source inline("w-[var(--rail-w)] w-[var(--rail-w-collapsed)] w-max");