Page header

- Folding: each foldable part is a `grid` whose single row goes
  `1fr → 0fr` with opacity, child `min-h-0 overflow-hidden` (320 ms
  `ease-move`), so height animates without measuring.
- Scroll: a passive listener with hysteresis: fold when past `compactAt`,
  unfold only within `min(8, compactAt / 4)` px of the top. Folding changes
  the page height; without hysteresis (and with scroll anchoring) that can
  flip the state back and forth. Put `overflow-anchor: none` on the scroll
  container or page.
- Compact surface: `bg-card/85 backdrop-blur-md border-hairline
shadow-raised-sm`; expanded it is transparent with a transparent border so
  nothing shifts.
- Title: font-size transition `text-2xl → text-base`.

registry/nav/page-header/page-header.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: page-header.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";

import { cn } from "@/lib/utils";

// Pebble: the header belongs to the page until you scroll; then it folds into
// a compact sticky bar. Breadcrumbs, description and meta collapse (a grid
// row animating to 0fr, so nothing jumps), the title steps down a size, and
// a frosted surface with a hairline and a soft shadow appears behind it. The
// actions and tabs stay put, so the page's controls never move away.
// Put `overflow-anchor: none` on the scroll container (or the page) so the
// browser doesn't counter-scroll while the header folds.

export type PageHeaderProps = Omit<React.ComponentProps<"header">, "title"> & {
  title: React.ReactNode;
  description?: React.ReactNode;
  /** Usually a Breadcrumb. */
  breadcrumbs?: React.ReactNode;
  /** PageHeaderMeta chips shown beside the title. */
  meta?: React.ReactNode;
  /** Buttons on the right: primary, secondary, overflow. */
  actions?: React.ReactNode;
  /** Tabs under the header (they stay visible when compact). */
  tabs?: React.ReactNode;
  /** Force the compact state; undefined follows scroll. */
  compact?: boolean;
  /** Scroll px after which the header becomes compact. */
  compactAt?: number;
  /** Scroll container to watch instead of the window. */
  scrollContainer?: React.RefObject<HTMLElement | null>;
  /** Heading level for the title. */
  as?: "h1" | "h2";
};

export function PageHeader({
  title,
  description,
  breadcrumbs,
  meta,
  actions,
  tabs,
  compact: compactProp,
  compactAt = 48,
  scrollContainer,
  as: Heading = "h1",
  className,
  ...props
}: PageHeaderProps) {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    if (compactProp !== undefined) return;
    const el = scrollContainer?.current ?? null;
    const target: HTMLElement | Window = el ?? window;
    // Hysteresis: fold past `compactAt`, unfold only near the top, so the
    // height change of folding can't flip the state back and forth.
    const read = () => {
      const top = el ? el.scrollTop : window.scrollY;
      setScrolled((was) => (was ? top > Math.min(8, compactAt / 4) : top > compactAt));
    };
    read();
    target.addEventListener("scroll", read, { passive: true });
    return () => target.removeEventListener("scroll", read);
  }, [compactProp, compactAt, scrollContainer]);

  const compact = compactProp ?? scrolled;
  const fold = cn(
    "grid transition-[grid-template-rows,opacity] duration-(--motion-slow) ease-move motion-reduce:transition-none",
    compact ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100",
  );

  return (
    <header
      data-slot="page-header"
      data-compact={compact || undefined}
      className={cn(
        "group/ph @container/ph sticky top-0 z-20 border-b px-6 pt-5",
        "transition-[background-color,box-shadow,border-color,padding] duration-(--motion-slow) ease-move motion-reduce:transition-none",
        compact
          ? "border-hairline bg-card/85 pt-3 shadow-raised-sm backdrop-blur-md"
          : "border-transparent bg-transparent",
        !tabs && (compact ? "pb-3" : "pb-5"),
        className,
      )}
      {...props}
    >
      {breadcrumbs && (
        <div className={fold} inert={compact} data-slot="page-header-breadcrumbs">
          <div className="min-h-0 overflow-hidden">
            <div className="pb-3">{breadcrumbs}</div>
          </div>
        </div>
      )}
      <div className="flex flex-col items-stretch gap-4 @min-[480px]/ph:flex-row @min-[480px]/ph:items-start">
        <div className="flex min-w-0 flex-1 flex-col">
          <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
            <Heading
              data-slot="page-header-title"
              className={cn(
                "min-w-0 truncate font-semibold tracking-[-0.02em] text-foreground",
                "transition-[font-size] duration-(--motion-slow) ease-move motion-reduce:transition-none",
                compact ? "text-base" : "text-2xl",
              )}
            >
              {title}
            </Heading>
            {meta && (
              <div
                className={cn(
                  "transition-opacity duration-(--motion-base)",
                  compact && "max-sm:hidden",
                )}
              >
                {meta}
              </div>
            )}
          </div>
          {description && (
            <div className={fold} inert={compact} data-slot="page-header-description">
              <div className="min-h-0 overflow-hidden">
                <p className="max-w-2xl pt-1.5 text-[13px] leading-relaxed text-pretty text-muted-foreground">
                  {description}
                </p>
              </div>
            </div>
          )}
        </div>
        {actions && (
          <div
            data-slot="page-header-actions"
            className="flex flex-wrap items-center gap-2 @min-[480px]/ph:shrink-0"
          >
            {actions}
          </div>
        )}
      </div>
      {tabs && (
        <div
          data-slot="page-header-tabs"
          className={cn(
            "-mb-px overflow-x-auto transition-[margin] duration-(--motion-slow) ease-move motion-reduce:transition-none",
            compact ? "mt-2" : "mt-4",
          )}
        >
          {tabs}
        </div>
      )}
    </header>
  );
}

/** Row of meta chips (status, owner, dates) beside the title. */
export function PageHeaderMeta({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="page-header-meta"
      className={cn("flex flex-wrap items-center gap-1.5", className)}
      {...props}
    />
  );
}

export function PageHeaderMetaItem({
  icon,
  tone = "default",
  className,
  children,
  ...props
}: React.ComponentProps<"li"> & {
  icon?: React.ReactNode;
  tone?: "default" | "accent" | "success" | "warning";
}) {
  return (
    <li
      data-slot="page-header-meta-item"
      className={cn(
        "inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5",
        tone === "default" && "bg-card text-muted-foreground shadow-raised-xs ring-1 ring-hairline",
        tone === "accent" && "bg-accent/12 text-accent-strong ring-1 ring-accent/30",
        tone === "success" && "bg-success/12 text-success-strong ring-1 ring-success/30",
        tone === "warning" && "bg-warning/15 text-warning-strong ring-1 ring-warning/35",
        className,
      )}
      {...props}
    >
      {icon}
      {children}
    </li>
  );
}