@bearmenu/ui 0.8.7 → 0.8.8

package/src/components/hour-band.tsx

@@ -4,41 +4,39 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
-import { TimelineHourPuck } from "./timeline-band";
+import {
+  TIMELINE_MOBILE_GUTTER_CLASS,
+  TimelineHourPuck,
+} from "./timeline-band";
 
 /**
  * HourBand — one hour on the timeline's axis, with that hour's events beside it.
  *
- * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
- * hairline and an hour puck, and full-width cards to its right. Nothing else.
- * The cards inside carry no timestamp of their own — this band IS the
- * timestamp, which is why `EventCard` has `hideWhen`.
+ * The mobile timeline is an app list, not a page: a 58px gutter carrying a
+ * filled hour chip with a hairline dropping from beneath it, and the hour's
+ * rows to the right, separated by hairlines of their own. The rows carry no
+ * timestamp — this band IS the timestamp, which is why `EventCard` has
+ * `hideWhen` and `EventCompactRow` has `hideTime`.
  *
- * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
- * background fill punching through it so the hairline reads as continuous
- * behind the label. It used to be a second, hand-rolled copy of the desktop
- * band's puck, and the two had drifted apart — this one borderless and
- * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
- * Sharing the object changes this gutter's pixels: the mobile puck now carries
- * a border, which is what makes it read as clipped onto the rail rather than
- * text floating over it, and matches the station on the desktop spine.
+ * The chip is the shared `TimelineHourPuck` in its `chip` variant, so the
+ * desktop spine's station and this gutter's label are one object with two
+ * looks rather than two objects that drift. The hairline starts BELOW the chip
+ * rather than running behind it: a chip is a label at the top of its hour, a
+ * station is a tick on a continuous rail, and the two read differently.
  *
- * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
- * which is why live bands need extra top padding on the content column — the
- * label occupies space the cards would otherwise start in.
+ * `isLive` tints the chip and the hairline with `--success`; the live label is
+ * kept for screen readers (the chip variant hides it visually). The playhead —
+ * the exact current time — is a separate `TimelinePlayhead` rendered between
+ * bands by the caller, because an hour spans sixty minutes and "now" is one of
+ * them.
  *
- * ── Why the gap is 24px and not 12px ──────────────────────────────────────
- * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
- * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
- * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
- * centred on a 52px gutter, overflowing ~12px on each side. At the original
- * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
- * edge landed ON the content column, which read as the hairline colliding
- * with the rows beside it.
- *
- * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
- * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
- * is ~30px narrower and hides the problem completely.
+ * ROWS ARE SEPARATED HERE, NOT IN THE ROW. `EventCompactRow` deliberately
+ * draws no divider (its container does — see its docblock), so this band wraps
+ * each child and rules between them. The wrapper, not the child, carries the
+ * rule, so the row's own negative-margin hover wash is untouched. Children are
+ * read with `Children.toArray`, which drops `null`/`false` so a conditional
+ * first row never inherits a rule meant for a second; pass rows as siblings,
+ * not inside a fragment — a fragment is one child and gets one wrapper.
  */
 
 export type HourBandProps = {
@@ -46,80 +44,102 @@ export type HourBandProps = {
   time: string;
   /** Marks this as the hour currently in progress. */
   isLive?: boolean;
-  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
   liveLabel?: string;
-  /** The hour's events. */
+  /** The hour's events. Each direct child is one row or card. */
   children: React.ReactNode;
+  /**
+   * `rows` (default): compact rows, ruled between with a Separator. `cards`:
+   * poster cards, stacked with a 16px gap and no rules — a card is its own
+   * frame, and a hairline between two posters reads as a third object.
+   */
+  layout?: "rows" | "cards";
   className?: string;
 };
 
-export function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps) {
-  const showLiveLabel = isLive && !!liveLabel;
-
+export function HourBand({
+  time,
+  isLive,
+  liveLabel,
+  children,
+  layout = "rows",
+  className,
+}: HourBandProps) {
+  const isCards = layout === "cards";
   return (
-    <div className={cn("flex gap-6 pt-[18px]", className)}>
-      <div className="relative flex w-[52px] shrink-0 justify-center">
-        <Separator orientation="vertical" className="h-full" />
+    <div className={cn("flex gap-3 pt-2.5", className)}>
+      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
         <TimelineHourPuck
           time={time}
           isLive={isLive}
           liveLabel={liveLabel}
-          className="absolute left-1/2 top-0 w-0"
+          variant="chip"
+        />
+        <Separator
+          orientation="vertical"
+          className={cn(
+            "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2",
+            isLive && "bg-success/30",
+          )}
         />
       </div>
 
       <div
-        className={cn(
-          "flex min-w-0 flex-1 flex-col gap-5 pb-2",
-          showLiveLabel ? "pt-[34px]" : "pt-1"
-        )}
+        className={cn("flex min-w-0 flex-1 flex-col", isCards && "gap-4 pb-2")}
       >
-        {children}
+        {React.Children.toArray(children).map((child, index) => (
+          <div key={index}>
+            {!isCards && index > 0 && <Separator />}
+            {child}
+          </div>
+        ))}
       </div>
     </div>
   );
 }
 
 export type HourBandSkeletonProps = {
-  /** Cards to reserve space for. The design's loading frame shows two. */
+  /** Rows to reserve space for. */
   cardCount?: number;
   className?: string;
 };
 
 /**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
- * gutter, same hairline, same content gap — so nothing jumps when data lands.
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same
+ * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
  *
- * The puck is omitted rather than blocked out: the hour is not known until the
- * data arrives, and a grey lozenge on the axis reads as a real, unreadable
- * timestamp. The hairline alone still says "this is a time axis".
- *
- * Card footprints come from the design's own loading frame: a 220px poster with
- * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ * The chip is blocked out at its real size rather than omitted: it is a fixed
+ * 58x24 lozenge, so a grey one reads as "a time goes here" without inventing
+ * a time. Row footprints mirror `EventCompactRowSkeleton`.
  */
-export function HourBandSkeleton({ cardCount = 2, className }: HourBandSkeletonProps) {
-  const cards = [
-    { poster: 220, title: "80%", meta: "50%" },
-    { poster: 170, title: "70%", meta: null },
-  ];
-
+export function HourBandSkeleton({
+  cardCount = 2,
+  className,
+}: HourBandSkeletonProps) {
   return (
-    <div className={cn("flex gap-6 pt-[18px]", className)} aria-hidden="true">
-      <div className="relative flex w-[52px] shrink-0 justify-center">
-        <Separator orientation="vertical" className="h-full" />
+    <div className={cn("flex gap-3 pt-2.5", className)} aria-hidden="true">
+      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
+        <Skeleton className="h-6 w-[58px] rounded-[7px]" />
+        <Separator
+          orientation="vertical"
+          className="absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2"
+        />
       </div>
 
-      <div className="flex min-w-0 flex-1 flex-col gap-5 pb-2 pt-1">
-        {Array.from({ length: cardCount }).map((_, index) => {
-          const card = cards[index % cards.length];
-          return (
-            <div key={index} className="flex flex-col gap-2.5">
-              <Skeleton className="w-full" style={{ height: card.poster }} />
-              <Skeleton className="h-4" style={{ width: card.title }} />
-              {card.meta && <Skeleton className="h-3" style={{ width: card.meta }} />}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <div key={index}>
+            {index > 0 && <Separator />}
+            <div className="flex gap-3 py-[11px]">
+              <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[10px]" />
+              <div className="min-w-0 flex-1">
+                <Skeleton className="h-[14px] w-3/4" />
+                <Skeleton className="mt-1.5 h-[11.5px] w-1/2" />
+                <Skeleton className="mt-2 h-[22px] w-16 rounded-full" />
+              </div>
             </div>
-          );
-        })}
+          </div>
+        ))}
       </div>
     </div>
   );

package/src/components/poster-wall.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { PosterWall } from "./poster-wall";
+
+const grid = (container: HTMLElement) =>
+  container.querySelector<HTMLElement>("[aria-hidden].grid")!;
+
+describe("PosterWall grid", () => {
+  it("sizes the grid to the tiles and completes the last row by cycling them", () => {
+    const tiles = Array.from({ length: 5 }, (_, i) => ({ src: `p${i}.jpg` }));
+    const { container } = render(
+      <PosterWall tiles={tiles} variant="compact" />,
+    );
+    const g = grid(container);
+    // compact: width 390, height 330 → cols = round(√(5·1.18)) = 2, rows = 3 → 6 slots
+    expect(g.style.gridTemplateColumns).toBe("repeat(2, minmax(0, 1fr))");
+    expect(g.querySelectorAll("img")).toHaveLength(6);
+    expect(g.querySelectorAll("img")[5].getAttribute("src")).toBe("p0.jpg");
+  });
+
+  it("keeps the placeholder grid when there are no pictures", () => {
+    const { container } = render(<PosterWall tiles={[]} variant="compact" />);
+    const g = grid(container);
+    expect(g.style.gridTemplateColumns).toBe("repeat(6, minmax(0, 1fr))");
+    expect(g.children).toHaveLength(36);
+    expect(g.querySelectorAll("img")).toHaveLength(0);
+  });
+});

package/src/components/poster-wall.tsx

@@ -17,6 +17,14 @@ import { Skeleton } from "./skeleton";
  * the container's size, alignment and padding for the given `variant`. All
  * overlay typography belongs to the caller.
  *
+ * THE GRID FOLLOWS THE TILES. It used to be a fixed 12×4 (48) or 6×6 (36)
+ * grid, and a city with 28 posters left twenty empty cells — a dark hole down
+ * one side of the masthead. Now the column count comes from the tile count
+ * and the wall's measured aspect ratio (`cols ≈ √(n · w/h)`, so tiles stay
+ * roughly square), rows follow, and the last row is completed by cycling the
+ * tiles. Fewer pictures means fewer, bigger tiles; never a gap. The default
+ * grid is kept for the server render and for an empty tile list.
+ *
  * The sweep is a genuine `@keyframes` animation (not Framer Motion) because
  * its exact timing is part of the design spec and it needs to keep running
  * indefinitely at zero React cost — the keyframes are scoped to this file via
@@ -43,16 +51,22 @@ function usePrefersReducedMotion(): boolean {
   return reduced;
 }
 
-function useInViewport<T extends Element>(): [React.RefObject<T | null>, boolean] {
+function useInViewport<T extends Element>(): [
+  React.RefObject<T | null>,
+  boolean,
+] {
   const ref = React.useRef<T | null>(null);
   const [inView, setInView] = React.useState(true);
 
   React.useEffect(() => {
     const node = ref.current;
     if (!node || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      threshold: 0,
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      {
+        threshold: 0,
+      },
+    );
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
@@ -65,7 +79,7 @@ export type PosterWallTile = {
 };
 
 export type PosterWallProps = {
-  /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+  /** Background tiles. The grid sizes itself to how many there are (see above); with none, a placeholder grid renders. */
   tiles?: PosterWallTile[];
   /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
   variant?: "default" | "compact";
@@ -74,22 +88,64 @@ export type PosterWallProps = {
   className?: string;
 };
 
-export function PosterWall({ tiles, variant = "default", children, className }: PosterWallProps) {
+export function PosterWall({
+  tiles,
+  variant = "default",
+  children,
+  className,
+}: PosterWallProps) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
-  const slots = Array.from({ length: tileCount }, (_, index): PosterWallTile => tiles?.[index] ?? {});
+  const maxCols = isCompact ? 6 : 12;
+  const maxSlots = isCompact
+    ? POSTER_WALL_COMPACT_TILE_COUNT
+    : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const heightPx = isCompact ? 330 : 420;
+  const pictures = React.useMemo(
+    () => (tiles ?? []).filter((tile) => !!tile.src),
+    [tiles],
+  );
 
   const prefersReducedMotion = usePrefersReducedMotion();
   const [wallRef, inView] = useInViewport<HTMLDivElement>();
   const isSweepPaused = prefersReducedMotion || !inView;
 
+  // Measured on the client; the server assumes a phone or a wide desktop
+  // column, which is what those two variants are for.
+  const [width, setWidth] = React.useState(isCompact ? 390 : 1200);
+  React.useEffect(() => {
+    const node = wallRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) =>
+      setWidth(entry.contentRect.width),
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [wallRef]);
+
+  let cols = maxCols;
+  let slots: PosterWallTile[];
+  if (pictures.length === 0) {
+    slots = Array.from({ length: maxSlots }, (): PosterWallTile => ({}));
+  } else {
+    const shown = Math.min(pictures.length, maxSlots);
+    cols = Math.min(
+      maxCols,
+      Math.max(2, Math.round(Math.sqrt((shown * width) / heightPx))),
+    );
+    const rows = Math.max(1, Math.ceil(shown / cols));
+    slots = Array.from(
+      { length: cols * rows },
+      (_, index) => pictures[index % pictures.length],
+    );
+  }
+
   return (
     <div
       ref={wallRef}
       className={cn(
         "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
         isCompact ? "h-[330px]" : "h-[420px]",
-        className
+        className,
       )}
     >
       <style>{`
@@ -100,10 +156,8 @@ export function PosterWall({ tiles, variant = "default", children, className }:
       `}</style>
 
       <div
-        className={cn(
-          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-          isCompact ? "grid-cols-6" : "grid-cols-12"
-        )}
+        className="absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50"
+        style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}
         aria-hidden
       >
         {slots.map((tile, index) =>
@@ -122,7 +176,7 @@ export function PosterWall({ tiles, variant = "default", children, className }:
               key={index}
               className="h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
             />
-          )
+          ),
         )}
       </div>
 
@@ -157,7 +211,9 @@ export function PosterWall({ tiles, variant = "default", children, className }:
       <div
         className={cn(
           "relative flex h-full min-w-0 flex-col text-white",
-          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+          isCompact
+            ? "justify-end gap-[11px] p-5"
+            : "justify-center gap-[15px] px-12",
         )}
       >
         {children}
@@ -173,9 +229,14 @@ export type PosterWallSkeletonProps = {
 };
 
 /** The tile grid at rest — the sweeping light never renders in the loading state. */
-export function PosterWallSkeleton({ variant = "default", className }: PosterWallSkeletonProps) {
+export function PosterWallSkeleton({
+  variant = "default",
+  className,
+}: PosterWallSkeletonProps) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const tileCount = isCompact
+    ? POSTER_WALL_COMPACT_TILE_COUNT
+    : POSTER_WALL_DESKTOP_TILE_COUNT;
 
   return (
     <div
@@ -183,17 +244,20 @@ export function PosterWallSkeleton({ variant = "default", className }: PosterWal
       className={cn(
         "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
         isCompact ? "h-[330px]" : "h-[420px]",
-        className
+        className,
       )}
     >
       <div
         className={cn(
           "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-          isCompact ? "grid-cols-6" : "grid-cols-12"
+          isCompact ? "grid-cols-6" : "grid-cols-12",
         )}
       >
         {Array.from({ length: tileCount }, (_, index) => (
-          <Skeleton key={index} className="h-full w-full rounded-none bg-white/10" />
+          <Skeleton
+            key={index}
+            className="h-full w-full rounded-none bg-white/10"
+          />
         ))}
       </div>
 
@@ -209,11 +273,20 @@ export function PosterWallSkeleton({ variant = "default", className }: PosterWal
       <div
         className={cn(
           "relative flex h-full min-w-0 flex-col",
-          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+          isCompact
+            ? "justify-end gap-[11px] p-5"
+            : "justify-center gap-[15px] px-12",
         )}
       >
-        <Skeleton className={cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52")} />
-        <Skeleton className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")} />
+        <Skeleton
+          className={cn(
+            "bg-white/15",
+            isCompact ? "h-[11px] w-40" : "h-3 w-52",
+          )}
+        />
+        <Skeleton
+          className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")}
+        />
       </div>
     </div>
   );

package/src/components/section-header.stories.tsx

@@ -68,3 +68,27 @@ export const LoadingVsLoaded: Story = {
     </div>
   ),
 };
+
+/**
+ * The app-card header: title, count, and an accent "All ›" in the count's
+ * size tier. Both the tone and the subtitle are phone-scoped — resize past
+ * `lg` to see the muted action and the subtitle return.
+ */
+export const AppCard: Story = {
+  args: {
+    title: "Tonight",
+    count: 7,
+    subtitle: "Everything still to start before midnight",
+    subtitleFrom: "lg",
+    action: "All 15",
+    actionHref: "#",
+    actionTone: "app",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[366px] rounded-[18px] bg-card px-3.5 pt-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/section-header.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SectionHeader } from "./section-header";
+
+describe("SectionHeader", () => {
+  it("renders title, count and a linked action", () => {
+    render(<SectionHeader title="Tonight" count={7} action="See all" actionHref="/events" />);
+    expect(screen.getByRole("heading", { name: "Tonight" })).toBeInTheDocument();
+    expect(screen.getByText("7")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "See all" })).toHaveAttribute("href", "/events");
+  });
+
+  it("gives the app tone its accent classes and the muted tone none of them", () => {
+    const { rerender } = render(
+      <SectionHeader title="Tonight" action="See all" actionHref="/events" actionTone="app" />
+    );
+    expect(screen.getByRole("link", { name: "See all" }).className).toContain("text-accent");
+
+    rerender(<SectionHeader title="Tonight" action="See all" actionHref="/events" />);
+    expect(screen.getByRole("link", { name: "See all" }).className).not.toContain("text-accent");
+  });
+
+  it("keeps the subtitle in the DOM but hides it below lg with subtitleFrom", () => {
+    render(<SectionHeader title="Tonight" subtitle="Still to start" subtitleFrom="lg" />);
+    expect(screen.getByText("Still to start").className).toContain("hidden");
+    expect(screen.getByText("Still to start").className).toContain("lg:block");
+  });
+});

package/src/components/section-header.tsx

@@ -35,6 +35,21 @@ export type SectionHeaderProps = {
   /** Trailing action label, e.g. "See all". */
   action?: string;
   actionHref?: string;
+  /**
+   * `muted` (default): 14px in `--muted-foreground`, at every width. `app`:
+   * BELOW `lg`, 12.5px semibold in `--accent` — the way an app's "All ›" reads
+   * at the end of a card's title row, quieter in size and louder in colour so
+   * it sits in the count's tier rather than competing with the title. From
+   * `lg` it falls back to `muted`: the app treatment is a phone treatment, and
+   * the desktop page it shares a header with is unchanged by it.
+   */
+  actionTone?: "muted" | "app";
+  /**
+   * `always` (default) shows the subtitle at every width. `lg` hides it below
+   * the `lg` breakpoint for surfaces that narrate on desktop and not on a
+   * phone, where a card title with a count is the whole header.
+   */
+  subtitleFrom?: "always" | "lg";
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
   onAction?: (mouseEvent: React.MouseEvent) => void;
@@ -48,24 +63,38 @@ export type SectionHeaderProps = {
   className?: string;
 };
 
-const ACTION_CLASSES = cn(
-  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
-  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+// `-my-2 py-2 -mr-1 pr-1`: the label keeps its visual size while its hit area
+// grows to the 44px minimum. Negative margins cancel the padding so the row
+// height and the right edge do not move.
+const ACTION_BASE_CLASSES = cn(
+  "inline-flex min-h-11 shrink-0 items-center gap-0.5 rounded-sm -my-2 py-2 -mr-1 pr-1",
+  "transition-colors duration-150 motion-reduce:transition-none",
   "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
 
+const ACTION_TONE_CLASSES = {
+  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  app: cn(
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+  ),
+} as const;
+
 export function SectionHeader({
   title,
   count,
   subtitle,
   action,
   actionHref,
+  actionTone = "muted",
+  subtitleFrom = "always",
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
+  const actionClasses = cn(ACTION_BASE_CLASSES, ACTION_TONE_CLASSES[actionTone]);
 
   return (
     <div className={cn("flex flex-col mb-3.5", className)}>
@@ -75,18 +104,20 @@ export function SectionHeader({
             {title}
           </Heading>
           {count !== undefined && (
-            <span className="ml-0.5 shrink-0 text-[12px] text-muted-foreground">{count}</span>
+            <span className="ml-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5">
+              {count}
+            </span>
           )}
         </div>
 
         {action &&
           (actionHref ? (
-            <LinkComponent href={actionHref} className={ACTION_CLASSES} onClick={onAction}>
+            <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
               {action}
               {actionIcon}
             </LinkComponent>
           ) : onAction ? (
-            <button type="button" className={ACTION_CLASSES} onClick={onAction}>
+            <button type="button" className={actionClasses} onClick={onAction}>
               {action}
               {actionIcon}
             </button>
@@ -94,7 +125,14 @@ export function SectionHeader({
       </div>
 
       {subtitle && (
-        <p className="mt-0.5 text-[13px] text-muted-foreground md:text-[14px]">{subtitle}</p>
+        <p
+          className={cn(
+            "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]",
+            subtitleFrom === "lg" && "hidden lg:block"
+          )}
+        >
+          {subtitle}
+        </p>
       )}
     </div>
   );