cursedbelt 5.26.0 → 5.28.0

package/src/react/components/calendar/WeekView.tsx

@@ -16,6 +16,7 @@ import { EventChip } from './EventChip.js';
 import { filterOccurrences } from './occurrences.js';
 import type { CalendarEventBase, OccurrenceFilters } from './types.js';
 import { TAP_TARGET_ALWAYS } from '../../lib/tapTarget.js';
+import { Surface } from '../Surface.js';
 
 export interface WeekViewProps {
   /** Any date within the week to render. */
@@ -62,7 +63,7 @@ export function WeekView({
   const labels = WEEKDAY_LABELS[weekStart];
 
   return (
-    <div className={cn('overflow-hidden rounded-xl border border-border bg-card', className)}>
+    <Surface level="flat" pad="none" radius="xl" className={cn('overflow-hidden bg-card', className)}>
       {/* Weekday header with date numbers */}
       <div className='grid grid-cols-[repeat(7,minmax(0,1fr))] border-b border-border bg-muted/40'>
         {days.map((dayKey, i) => (
@@ -133,6 +134,6 @@ export function WeekView({
           );
         })}
       </div>
-    </div>
+    </Surface>
   );
 }

package/src/react/components/sharing/RecipientPicker.tsx

@@ -113,7 +113,10 @@ export function RecipientPicker({
       </div>
 
       {showDropdown && (
-        <div className='mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-overlay'>
+        <div
+          // guardrails-ignore no-hand-rolled-surface: the suggestions dropdown under the field — an overlay listbox (bg-popover, shadow-overlay), not a card
+          className='mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-overlay'
+        >
           <ScrollArea className='max-h-56'>
             <div role='listbox' className='py-1'>
               {visible.map((r) => {

package/src/react/dashboard-grid/WidgetFrame.tsx

@@ -3,6 +3,7 @@ import { DismissButton } from '../components/DismissButton.js';
 import { ScrollArea } from '../components/ScrollArea.js';
 import { WidgetHeader } from '../components/WidgetHeader.js';
 import { cn } from '../lib/cn.js';
+import { Surface } from '../components/Surface.js';
 
 export interface WidgetFrameProps {
   /** Widget title shown in the chrome header. */
@@ -59,11 +60,8 @@ export function WidgetFrame({
     onRemove !== undefined;
 
   return (
-    <div
-      className={cn(
-        'flex h-full flex-col overflow-hidden rounded-md border border-border bg-surface',
-        className,
-      )}
+    <Surface
+      level="flat" pad="none" radius="md" className={cn('flex h-full flex-col overflow-hidden', className)}
     >
       {hasHeader && (
         <WidgetHeader
@@ -101,6 +99,6 @@ export function WidgetFrame({
       <ScrollArea axis='y' space='none' safeArea={false} className='p-3'>
         {children}
       </ScrollArea>
-    </div>
+    </Surface>
   );
 }

package/src/react/diff-viewer/TextComparePane.tsx

@@ -16,6 +16,7 @@ import { useMemo } from 'react';
 import { cn } from '../lib/cn.js';
 import { DiffViewer } from './DiffViewer.js';
 import { diffStats } from './diff.js';
+import { Surface } from '../components/Surface.js';
 
 /** One text source in the comparison. */
 export interface TextSource {
@@ -89,15 +90,12 @@ export function TextComparePane({
 
   if (sources.length === 0) {
     return (
-      <div
-        className={cn(
-          'cb-text-compare rounded-md border border-border bg-muted p-4 text-center text-sm text-muted-foreground',
-          className,
-        )}
+      <Surface
+        level="flat" pad="none" radius="md" className={cn('cb-text-compare bg-muted p-4 text-center text-sm text-muted-foreground', className)}
         style={style}
       >
         Nothing to compare.
-      </div>
+      </Surface>
     );
   }
 

package/src/react/emoji/EmojiAutocomplete.tsx

@@ -111,6 +111,7 @@ export function EmojiAutocomplete({
   return (
     <FloatingPortal>
       <div
+        // guardrails-ignore no-hand-rolled-surface: a floating-ui popup panel, positioned by its own `floatingStyles`; Popover owns its own frame the same way
         ref={refs.setFloating}
         style={floatingStyles}
         // floating-ui's own positioning `style` (set above) is required on this exact

package/src/react/folder-tree/FolderPicker.tsx

@@ -18,6 +18,7 @@ import { Input } from "../components/Input.js";
 import { FolderBreadcrumb } from "./FolderBreadcrumb.js";
 import { formatFolderPath, isValidFolderName, normalizeFolderName } from "cursedbelt-core/folder-tree/path";
 import { type FolderNode, flattenFolderTree } from "cursedbelt-core/folder-tree/tree";
+import { Surface } from "../components/Surface.js";
 
 export interface FolderPickerProps {
 	/** The current derived tree (from the items' folder paths). */
@@ -111,7 +112,7 @@ export function FolderPicker({
 			</button>
 
 			{open && (
-				<div className="flex flex-col gap-1 rounded-md border border-[var(--border)] bg-[var(--card)] p-1.5">
+				<Surface level="flat" pad="none" radius="md" className="flex flex-col gap-1 bg-[var(--card)] p-1.5">
 					{allowNone && (
 						<button
 							// guardrails-ignore no-raw-action-button: option selection, no data mutation
@@ -165,7 +166,7 @@ export function FolderPicker({
 							＋ New folder…
 						</Button>
 					) : (
-						<div className="flex flex-col gap-1 rounded-md border border-[var(--border)] bg-[var(--muted)]/10 p-2">
+						<Surface level="flat" pad="none" radius="md" className="flex flex-col gap-1 bg-[var(--muted)]/10 p-2">
 							<span className="text-xs text-[var(--muted-foreground)]">
 								New folder in{" "}
 								{creatingUnder.length === 0 ? (
@@ -210,9 +211,9 @@ export function FolderPicker({
 									Cancel
 								</Button>
 							</div>
-						</div>
+						</Surface>
 					)}
-				</div>
+				</Surface>
 			)}
 		</div>
 	);

package/src/react/layoutEngine/LayoutCanvas.tsx

@@ -421,6 +421,7 @@ export function LayoutCanvas<F extends LayoutField = LayoutField>({
       </RootZone>
       {activeNode && pointer && (
         <div
+          // guardrails-ignore no-hand-rolled-surface: the drag ghost follows the pointer (position: fixed) — a transient cursor companion, not a container
           aria-hidden
           style={{
             position: 'fixed',

package/src/react/layoutEngine/NodeInspector.tsx

@@ -18,6 +18,7 @@ import { cn } from '../lib/cn.js';
 import type { BindingResolver } from './LayoutRenderer.js';
 import { compatibleWidgets, widgetDef } from './registry.js';
 import type { WidgetRegistry } from './types.js';
+import { Surface } from '../components/Surface.js';
 
 // The property panel for the selected node — rebuilt for NON-TECHNICAL editing. The
 // primary layer answers "what should this block look like?" in plain language: pick a
@@ -177,7 +178,7 @@ function Preview<F extends LayoutField>({
     resolved.kind === 'column' || resolved.kind === 'aggregate' ? resolved.field : undefined;
   return (
     <Labeled label='Preview'>
-      <div className='min-w-0 break-words rounded-md border border-border bg-surface p-3 text-sm text-foreground'>
+      <Surface level="flat" pad="sm" radius="md" className='min-w-0 break-words text-sm text-foreground'>
         {def?.render({
           node,
           resolved,
@@ -187,7 +188,7 @@ function Preview<F extends LayoutField>({
           row: sampleRow,
           rows: sampleRows,
         }) ?? <span className='text-muted-foreground'>No preview</span>}
-      </div>
+      </Surface>
     </Labeled>
   );
 }

package/src/react/media/TrimRangeSlider.tsx

@@ -92,6 +92,7 @@ export function TrimRangeSlider({
   return (
     <div className='select-none' data-cb-trim-slider>
       <div
+        // guardrails-ignore no-hand-rolled-surface: the trim slider's TRACK — a pointer-driven control, not a container
         ref={trackRef}
         className='relative h-16 w-full cursor-pointer overflow-hidden rounded-md border border-border bg-muted'
         onPointerMove={onPointerMove}

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

@@ -474,6 +474,28 @@ describe('MediaGallery navigation and orientation', () => {
     fireEvent.click(second.getByRole('button', { name: /Pinned/ }));
     expect(second.container.querySelector('.cbgd-watch-sticky')).toBeNull();
   });
+
+  test('🔴 `pinStage` hands the pin to the APP — its own chrome pins it, and the titlebar button asks', () => {
+    const asked: boolean[] = [];
+    function App({ pinned }: { pinned: boolean }) {
+      return <MediaGallery items={ITEMS} pinStage={pinned} onPinStageChange={(next) => asked.push(next)} />;
+    }
+    const { container, getByRole, rerender } = render(<App pinned={false} />);
+    fireEvent.click(getByRole('button', { name: 'Open clip.mp4' }));
+    expect(container.querySelector('.cbgd-watch-sticky')).toBeNull();
+
+    // The app's own control (collections' rail) flips the prop — the stage pins with no click inside.
+    rerender(<App pinned={true} />);
+    expect(container.querySelector('.cbgd-watch-sticky')).not.toBeNull();
+    expect(getByRole('button', { name: /Pinned/ }).getAttribute('aria-pressed')).toBe('true');
+
+    // The titlebar button is now a REQUEST: it asks, and until the app answers nothing moves.
+    fireEvent.click(getByRole('button', { name: /Pinned/ }));
+    expect(asked).toEqual([false]);
+    expect(container.querySelector('.cbgd-watch-sticky')).not.toBeNull();
+    // Controlled does not move the remembering — the gallery still wrote the shared key.
+    expect(globalThis.localStorage.getItem('cbmg:pin-stage')).toBe('0');
+  });
 });
 
 /**

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

@@ -1555,6 +1555,19 @@ export interface MediaGalleryProps {
    * detail view from its own chrome — see the note by `selectedId` in the body.
    */
   selectedId?: string | null;
+  /**
+   * Whether the stage is PINNED to the top while the related grid scrolls under it, when the
+   * consumer owns that — the titlebar's pin button then asks through `onPinStageChange`.
+   *
+   * The case that needed it (collections, 2026-09-29): *"add a … sidebar icon button to press
+   * that toggles locking the media player at the top of the screen"* — the app's own chrome
+   * has to reach a switch the gallery used to hold privately. Same shape as `viewMode`, and
+   * 🔴 the same rule: controlled does NOT move the remembering. The gallery writes
+   * `readPinStage`'s key when its own button is pressed, in both modes; an app toggling it from
+   * its own chrome calls `writePinStage` itself.
+   */
+  pinStage?: boolean;
+  onPinStageChange?: (pinned: boolean) => void;
   /** Custom byte loader for the pdf/sheet/text/html stages (default: `fetch(item.url)`). */
   loadBytes?: (item: MediaGalleryItem) => Promise<ArrayBuffer>;
   /** Shown when there are no items and not loading. */
@@ -1833,6 +1846,8 @@ export function MediaGallery({
   onQueryChange,
   onSelectedChange,
   selectedId: controlledSelectedId,
+  pinStage: controlledPinStage,
+  onPinStageChange,
   loadBytes,
   empty,
   emptyAction,
@@ -1888,7 +1903,17 @@ export function MediaGallery({
   // What happens when a video ends — remembered across visits. See playbackPreferences.ts.
   const [playbackEnd, setPlaybackEnd] = useState<PlaybackEndBehavior>(readPlaybackEnd);
   // Whether the stage stays pinned at the top while the related grid scrolls under it.
-  const [pinStage, setPinStage] = useState<boolean>(readPinStage);
+  // Controlled when the consumer passes `pinStage` — see the prop.
+  const [uncontrolledPinStage, setUncontrolledPinStage] = useState<boolean>(readPinStage);
+  const pinStage = controlledPinStage !== undefined ? controlledPinStage : uncontrolledPinStage;
+  const setPinStage = useCallback(
+    (next: boolean): void => {
+      if (controlledPinStage === undefined) setUncontrolledPinStage(next);
+      writePinStage(next);
+      onPinStageChange?.(next);
+    },
+    [controlledPinStage, onPinStageChange],
+  );
   /*
    * 🔴 The shell's `⤢ Fullscreen` lives HERE rather than inside `DenseGalleryDetail`,
    * because the video stage has to know about it.
@@ -2712,11 +2737,7 @@ export function MediaGallery({
                 className={`cbgd-order-btn is-icon${pinStage ? ' is-active' : ''}`}
                 aria-pressed={pinStage}
                 aria-label={pinStage ? 'Pinned — unpin the stage' : 'Pin the stage'}
-                onClick={() => {
-                  const next = !pinStage;
-                  setPinStage(next);
-                  writePinStage(next);
-                }}
+                onClick={() => setPinStage(!pinStage)}
               >
                 <Pin aria-hidden />
               </button>

package/src/react/media-gallery/index.ts

@@ -50,11 +50,13 @@ export {
   type PlaybackEndBehavior,
   nextPlaybackEnd,
   readImageDwell,
+  readPinStage,
   readPlaybackEnd,
   type GalleryViewMode,
   readThumbAutoplay,
   readViewMode,
   writeImageDwell,
+  writePinStage,
   writePlaybackEnd,
   writeThumbAutoplay,
   writeViewMode,

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

@@ -5,6 +5,7 @@ import { Badge } from '../components/Badge.js';
 import { CopyButton } from '../components/CopyButton.js';
 import { PathText } from '../components/PathText.js';
 import { cn } from '../lib/cn.js';
+import { Surface } from '../components/Surface.js';
 
 /**
  * A reusable, presentational "why is this problem happening" drill-down.
@@ -153,13 +154,13 @@ export function ProblemDetailView({
         <section className='grid gap-2 sm:grid-cols-2'>
           {EXPLAIN_ROWS.map(({ key, label, icon }) =>
             explain[key] ? (
-              <div key={key} className='rounded-lg border border-border bg-card p-3'>
+              <Surface key={key} level="flat" pad="sm" radius="lg" className='bg-card'>
                 <div className='mb-1 flex items-center gap-1.5 text-muted-foreground'>
                   <span className='shrink-0'>{icon}</span>
                   <span className='text-caption font-semibold uppercase tracking-wide'>{label}</span>
                 </div>
                 <p className='leading-snug text-foreground'>{explain[key]}</p>
-              </div>
+              </Surface>
             ) : null,
           )}
         </section>
@@ -208,10 +209,15 @@ export function ProblemDetailView({
           </div>
           <ul className='flex flex-col gap-1'>
             {ready.slice(0, 12).map((t) => (
-              <li
+              <Surface
                 key={t.file}
-                className='flex items-center gap-2 rounded border border-border/60 bg-card/50 px-2 py-1'
+                asChild
+                level='flat'
+                pad='none'
+                radius='md'
+                className='flex items-center gap-2 rounded border-border/60 bg-card/50 px-2 py-1'
               >
+                <li>
                 <span className='min-w-0 flex-1 truncate font-mono text-caption text-foreground'>
                   {t.file}
                 </span>
@@ -221,6 +227,7 @@ export function ProblemDetailView({
                   </Badge>
                 )}
               </li>
+            </Surface>
             ))}
           </ul>
           {ready.length > 12 && (
@@ -268,7 +275,8 @@ export function ProblemDetailView({
       )}
 
       {triage && (
-        <section className='rounded-lg border border-border bg-muted/30 p-3 text-xs'>
+        <Surface asChild level='flat' pad='sm' radius='lg' className='bg-muted/30 text-xs'>
+          <section>
           <span className='text-caption font-semibold uppercase tracking-wide text-muted-foreground'>
             System verdict · {triage.status}
           </span>
@@ -278,6 +286,7 @@ export function ProblemDetailView({
             <p className='mt-1 text-caption text-muted-foreground'>decided by {triage.decidedBy}</p>
           )}
         </section>
+      </Surface>
       )}
 
       {detail?.trim() && (

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.
- * 715 candidate(s).
+ * 718 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
@@ -43,21 +43,21 @@
 @source inline("bg-background bg-background/80 bg-background/90 bg-background/95 bg-black/50 bg-border bg-card");
 @source inline("bg-current bg-destructive bg-destructive-solid bg-destructive/15 bg-destructive/5");
 @source inline("bg-destructive/8 bg-emerald-100 bg-field-bg bg-muted bg-muted-foreground/40");
-@source inline("bg-muted-foreground/50 bg-muted/20 bg-popover bg-success bg-success/15 bg-success/5 bg-surface");
-@source inline("bg-surface-sunken bg-tone-amber-bg bg-tone-cyan-bg bg-tone-emerald-bg bg-tone-fuchsia-bg");
-@source inline("bg-tone-lime-bg bg-tone-orange-bg bg-tone-purple-bg bg-tone-rose-bg bg-tone-sky-bg");
-@source inline("bg-tone-slate-bg bg-tone-teal-bg bg-tone-violet-bg bg-transparent bg-warning bg-warning/15");
-@source inline("bg-warning/5 bg-warning/8 bg-white block blur border border-accent/40 border-accent/50 border-b");
-@source inline("border-b-2 border-b-[7px] border-b-current border-border border-border-strong border-border/60");
-@source inline("border-collapse border-current border-destructive/30 border-destructive/40 border-destructive/50");
-@source inline("border-field-border border-success/30 border-success/40 border-success/50 border-t");
-@source inline("border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent border-warning/30");
-@source inline("border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom bottom-0 break");
-@source inline("break-all break-words c ca cap capitalize co com contain container content contents cursor");
-@source inline("cursor-col-resize cursor-default cursor-ew-resize cursor-pointer cursor-row-resize d dark");
-@source inline("dark:bg-card-overlay dark:bg-card-raised dark:bg-gray-800 data data-[disabled]:hover:bg-border");
-@source inline("data-[disabled]:opacity-50 data-[disabled]:pointer-events-none");
-@source inline("data-[interactive=true]:duration-[var(--duration-base)]");
+@source inline("bg-muted-foreground/50 bg-muted/20 bg-popover bg-success bg-success-solid bg-success/15");
+@source inline("bg-success/5 bg-surface bg-surface-sunken bg-tone-amber-bg bg-tone-cyan-bg bg-tone-emerald-bg");
+@source inline("bg-tone-fuchsia-bg bg-tone-lime-bg bg-tone-orange-bg bg-tone-purple-bg bg-tone-rose-bg");
+@source inline("bg-tone-sky-bg bg-tone-slate-bg bg-tone-teal-bg bg-tone-violet-bg bg-transparent bg-warning");
+@source inline("bg-warning/15 bg-warning/5 bg-warning/8 bg-white block blur border border-accent/40");
+@source inline("border-accent/50 border-b border-b-2 border-b-[7px] border-b-current border-border");
+@source inline("border-border-strong border-border/60 border-collapse border-current border-destructive/30");
+@source inline("border-destructive/40 border-destructive/50 border-field-border border-success/30");
+@source inline("border-success/40 border-success/50 border-t border-tone-sky-fg/30 border-tone-slate-fg/30");
+@source inline("border-transparent border-warning/30 border-warning/40 border-warning/50 border-x-4");
+@source inline("border-x-transparent bot bottom bottom-0 break break-all break-words c ca cap capitalize co com");
+@source inline("contain container content contents cursor cursor-col-resize cursor-default cursor-ew-resize");
+@source inline("cursor-pointer cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised");
+@source inline("dark:bg-gray-800 data data-[disabled]:hover:bg-border data-[disabled]:opacity-50");
+@source inline("data-[disabled]:pointer-events-none data-[interactive=true]:duration-[var(--duration-base)]");
 @source inline("data-[interactive=true]:ease-[var(--ease-out)] data-[interactive=true]:hover:-translate-y-0.5");
 @source inline("data-[interactive=true]:hover:border-border-strong data-[interactive=true]:hover:shadow-overlay");
 @source inline("data-[interactive=true]:transition-all data-[placeholder]:text-muted-foreground");
@@ -86,11 +86,11 @@
 @source inline("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent");
 @source inline("focus-visible:ring-accent-solid focus-visible:ring-destructive focus-visible:ring-field-ring/30");
 @source inline("focus-visible:ring-offset-1 focus-visible:ring-offset-2 focus-visible:ring-offset-background");
-@source inline("focus-visible:ring-ring focus-visible:text-destructive-foreground focus:bg-accent/10");
-@source inline("focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent focus:text-accent");
-@source inline("focus:text-destructive font-bold font-medium font-mono font-normal font-semibold gap gap-0");
-@source inline("gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3 gap-4 gap-6 gap-8 gap-x-2.5 gap-x-3 gap-y-1");
-@source inline("gap-y-2 gap-y-4 grid grid-cols-2");
+@source inline("focus-visible:ring-ring focus-visible:ring-success focus-visible:text-destructive-foreground");
+@source inline("focus:bg-accent/10 focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent");
+@source inline("focus:text-accent focus:text-destructive font-bold font-medium font-mono font-normal");
+@source inline("font-semibold gap gap-0 gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3 gap-4 gap-6 gap-8");
+@source inline("gap-x-2.5 gap-x-3 gap-y-1 gap-y-2 gap-y-4 grid grid-cols-2");
 @source inline("grid-cols-[repeat(auto-fit,minmax(min(var(--cb-grid-min),100%),1fr))] group");
 @source inline("group-active/sep:opacity-100 group-data-[state=open]:rotate-180");
 @source inline("group-focus-visible/sep:opacity-100 group-hover group-hover/path:opacity-100");
@@ -99,13 +99,14 @@
 @source inline("h-[var(--control-h-lg)] h-[var(--control-h-md)] h-[var(--control-h-sm)] h-auto h-full h-px hi");
 @source inline("hid hidden hover hover:bg-accent hover:bg-accent-solid-hover hover:bg-accent/10");
 @source inline("hover:bg-accent/20 hover:bg-destructive-solid hover:bg-destructive-solid-hover hover:bg-muted");
-@source inline("hover:bg-transparent hover:border-accent hover:border-destructive-solid hover:opacity-70");
-@source inline("hover:text-accent hover:text-destructive hover:text-destructive-foreground hover:text-foreground");
-@source inline("hover:underline i in inline inline-block inline-flex inset inset-0 inset-x-0 inset-y-0 invisible");
-@source inline("is iso isolate it item items items-baseline items-center items-end items-start just");
-@source inline("justify-between justify-center justify-end l leading leading-none leading-relaxed leading-snug");
-@source inline("left left-1/2 left-2 lg lg:px-8 lower lowercase m m-0 max max-h max-h-[80vh]");
-@source inline("max-h-[calc(100dvh-2rem)] max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
+@source inline("hover:bg-success-solid-hover hover:bg-transparent hover:border-accent");
+@source inline("hover:border-destructive-solid hover:opacity-70 hover:text-accent hover:text-destructive");
+@source inline("hover:text-destructive-foreground hover:text-foreground hover:underline i in inline inline-block");
+@source inline("inline-flex inset inset-0 inset-x-0 inset-y-0 invisible is iso isolate it item items");
+@source inline("items-baseline items-center items-end items-start just justify-between justify-center");
+@source inline("justify-end l leading leading-none leading-relaxed leading-snug left left-1/2 left-2 lg lg:px-8");
+@source inline("lower lowercase m m-0 max max-h max-h-[80vh] max-h-[calc(100dvh-2rem)]");
+@source inline("max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
 @source inline("max-h-[min(90dvh,calc(100dvh-2rem))] max-h-[var(--radix-select-content-available-height)]");
 @source inline("max-w-2xl max-w-4xl max-w-5xl max-w-[10rem] max-w-[calc(100vw-2rem)]");
 @source inline("max-w-[var(--reading-width)] max-w-full max-w-lg max-w-sm max-w-xl max-w-xs mb-0.5 mb-1 md");

package/src/styles-utilities.css

@@ -2098,6 +2098,9 @@
   .bg-success {
     background-color: var(--success);
   }
+  .bg-success-solid {
+    background-color: var(--success-solid);
+  }
   .bg-success\/5 {
     background-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3520,6 +3523,9 @@
         background-color: color-mix(in oklab, var(--muted) 80%, transparent);
       }
     }
+    .hover\:bg-success-solid-hover:hover {
+      background-color: var(--success-solid-hover);
+    }
     .hover\:bg-transparent:hover {
       background-color: transparent;
     }
@@ -3667,6 +3673,9 @@
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: var(--ring);
   }
+  .focus-visible\:ring-success:focus-visible {
+    --tw-ring-color: var(--success);
+  }
   .focus-visible\:ring-offset-1:focus-visible {
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

package/src/theme.css

@@ -169,6 +169,13 @@
   --destructive-solid: var(--destructive); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --destructive-solid-hover: #991b1b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --success: #16a34a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Solid-fill success, for a green button carrying WHITE text — the `destructive-solid`
+     split, for the same reason: --success is tuned as a status colour, and white on it
+     is 3.3:1. green-700 is 5.02:1 with white and its hover 7.1:1, in both modes, so it
+     is mode-stable like --accent-solid. First consumer: station's Resume, the green half
+     of a run/pause toggle whose Pause is `destructive-solid` (owner, 2026-09-29). */
+  --success-solid: #15803d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid-hover: #166534; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --warning: #d97706; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* The gold a filled star is painted in (StarRating). Light needs a DARKER gold
      than dark mode does, and this is measured, not taste: the neon below scores
@@ -470,6 +477,8 @@
   --destructive-solid: #dc2626; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --destructive-solid-hover: #b91c1c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --success: #22c55e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid: #15803d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid-hover: #166534; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --warning: #f59e0b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* The neon the star always had — correct against a near-black canvas at 10.76:1,
      and the half of the pair that never needed changing. See the note at :root. */
@@ -845,6 +854,8 @@ option:disabled {
   --color-destructive-solid: var(--destructive-solid);
   --color-destructive-solid-hover: var(--destructive-solid-hover);
   --color-success: var(--success);
+  --color-success-solid: var(--success-solid);
+  --color-success-solid-hover: var(--success-solid-hover);
   --color-warning: var(--warning);
   --color-star: var(--star);
   /* AA-safe status TEXT over the 15% tinted badge fills */