Scroll Header

'use client';

import { BookmarkIcon, MoreHorizontalIcon, Share2Icon } from 'lucide-react';
import { useRef } from 'react';
import { Button } from '@/components/panelui/button';
import { ScrollHeader } from '@/components/panelui/scroll-header';

const PARAGRAPHS = [
  'The press has been in the same building since 1974: two floors, a stone stair, and a loading door on the lane that is exactly wide enough for a pallet of paper. Nothing about it was chosen for efficiency. It was chosen because it was there, and because the rent was low enough that a bad year would not close it.',
  'That is the whole model, in a sentence. A small publisher does not compete on speed or scale. It competes by being able to wait — for a book to find its reader, for a printing decision to become obvious, for a title to earn back its advance over four years instead of four months.',
  'The autumn list has eleven titles. Six are reprints, which means the typesetting is already done and the only question is how many to print. The other five are new, and each one arrives with a different kind of risk: a first novel with a good agent, a translation that took three years to license, a cookbook that needs colour on every spread, a memoir with a difficult author, and a book of essays that nobody expects to sell and everybody wants to publish.',
  'The print run for the novel is four thousand. That is not a guess. It is the number the sales team can place in independent shops before publication, plus the number the wholesalers will take on a sale-or-return basis, minus the number that usually come back. The arithmetic is unglamorous and it is the whole job.',
  'What the reader sees is a cover, a page, a sentence. What makes the sentence arrive is a schedule that has been revised six times, a paper stock that was tested against the cover proof, and a printer who answers the phone on a Tuesday afternoon in November.',
  'The building is quiet in the morning. By ten the desk has three parcels on it and the kettle is on, and somebody is asking whether the index for the essays has come back from the author. It has not. It will, eventually. The book will be late by a week, and the week will not matter.',
];

export default function ScrollHeaderOverview() {
  const scroller = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scroller}
      className="h-[460px] w-full max-w-2xl overflow-y-auto rounded-2xl border bg-background text-sm"
    >
      <ScrollHeader scrollRef={scroller}>
        <ScrollHeader.Cover />
        <ScrollHeader.Bar>
          <ScrollHeader.Title>Field notes</ScrollHeader.Title>
          <ScrollHeader.Actions>
            <Button variant="ghost" size="icon" aria-label="Share this issue">
              <Share2Icon />
            </Button>
            <Button variant="ghost" size="icon" aria-label="More actions">
              <MoreHorizontalIcon />
            </Button>
          </ScrollHeader.Actions>
        </ScrollHeader.Bar>
        <ScrollHeader.Large>
          <ScrollHeader.Description>Issue 12 · November</ScrollHeader.Description>
          <ScrollHeader.Title>Field notes from the coast</ScrollHeader.Title>
          <ScrollHeader.Actions>
            <Button variant="secondary" size="sm">
              <BookmarkIcon />
              Save
            </Button>
          </ScrollHeader.Actions>
        </ScrollHeader.Large>

        <article className="px-6 py-6">
          <p className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
            The press
          </p>
          <h2 className="mt-2 text-xl font-semibold tracking-tight text-foreground">
            Eleven titles and a loading door
          </h2>
          <div className="mt-4 flex flex-col gap-4 leading-7 text-muted-foreground">
            {PARAGRAPHS.map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>
        </article>
      </ScrollHeader>
    </div>
  );
}

'use client';

import { useRef } from 'react';
import { ScrollHeader } from '@/components/panelui/scroll-header';
import { Tabs } from '@/components/panelui/tabs';

const SECTIONS = [
  {
    value: 'desktop',
    label: 'Desktop',
    notes: [
      'The Mac build now restores the window you had open last, including the scroll position of each tab. Opening a file from the recent list puts it back in the window it came from rather than a new one.',
      'Menus have moved to the system menu bar. The in-window menu strip stays available while a full-screen window has no menu bar to show, and both read the same command list.',
      'A long rebuild no longer blocks the window. Progress appears in the title bar and the app can be quit from the menu while it runs, with the build resumed on the next launch.',
    ],
  },
  {
    value: 'mobile',
    label: 'Mobile',
    notes: [
      'The phone build has a new reader view, reached from the page menu. It keeps the text, the images and the captions, and drops the navigation around them.',
      'Downloading a file now waits for a network that is not metered by default. A switch in settings lets a download start on any connection, and the list shows which items are waiting for wifi.',
      'The home screen widget can show one project or a shared list. It refreshes when the app is opened and once an hour in the background.',
    ],
  },
  {
    value: 'api',
    label: 'API',
    notes: [
      'The sync endpoint accepts partial documents. A client can now send only the fields that changed, and the server merges them into the stored revision instead of replacing the whole document.',
      'Rate limits are per token rather than per account. A token that is shared by a build machine no longer uses the allowance of the person who created it.',
      'Webhooks carry a signature header. Verify it against the secret shown when the webhook was created; the old unsigned delivery is still sent for one more release.',
    ],
  },
];

export default function ScrollHeaderWithTabs() {
  const scroller = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scroller}
      className="h-[460px] w-full max-w-2xl overflow-y-auto rounded-2xl border bg-background text-sm"
    >
      <ScrollHeader scrollRef={scroller}>
        <ScrollHeader.Bar surface="plain">
          <ScrollHeader.Title>Release notes</ScrollHeader.Title>
        </ScrollHeader.Bar>
        <ScrollHeader.Large>
          <ScrollHeader.Description>Version 4.2 · 12 November</ScrollHeader.Description>
          <ScrollHeader.Title>What changed this month</ScrollHeader.Title>
        </ScrollHeader.Large>

        <div className="px-6 pt-2">
          <Tabs defaultValue="desktop" variant="underline">
            {/* Pinned under the condensed bar, at exactly the bar's height. */}
            <Tabs.List aria-label="Platform" className="sticky top-14 z-10 bg-background">
              {SECTIONS.map((section) => (
                <Tabs.Trigger key={section.value} value={section.value}>
                  {section.label}
                </Tabs.Trigger>
              ))}
            </Tabs.List>
            {SECTIONS.map((section) => (
              <Tabs.Content key={section.value} value={section.value}>
                <ul className="flex flex-col gap-4 py-5">
                  {section.notes.map((note) => (
                    <li key={note} className="flex gap-3 leading-7 text-muted-foreground">
                      <span aria-hidden="true" className="mt-2.5 size-1.5 shrink-0 rounded-full bg-border" />
                      {note}
                    </li>
                  ))}
                </ul>
              </Tabs.Content>
            ))}
          </Tabs>
        </div>
      </ScrollHeader>
    </div>
  );
}

'use client';

import { useRef } from 'react';
import { ScrollHeader } from '@/components/panelui/scroll-header';

const ENTRIES = [
  {
    version: '0.14.0',
    date: '2 November',
    title: 'Charts, all of them',
    text: 'The nine remaining chart types arrived with the same axes, tooltips and empty states as the first four. Every one is a compound component, so a chart is assembled from the parts it needs.',
  },
  {
    version: '0.13.0',
    date: '19 October',
    title: 'The workbench',
    text: 'A canvas, a sidebar and an inspector in one shell, with the panels resizable and the whole thing keyboard reachable. It is the first component in the collection that holds other components as a workspace.',
  },
  {
    version: '0.12.0',
    date: '5 October',
    title: 'A quieter toast',
    text: 'Toasts can now be queued from outside React, which is what a fetch handler needs. The queue is one object, created once and passed to the provider, and it survives a route change.',
  },
  {
    version: '0.11.0',
    date: '21 September',
    title: 'Motion, measured',
    text: 'Every transition now uses the same curve and the same durations, and every one of them is turned off under reduced motion. The numbers live in one file rather than in each component.',
  },
  {
    version: '0.10.0',
    date: '7 September',
    title: 'The inspector',
    text: 'A rail of icons beside a page of sections. It reads a variant from a data attribute, so the panel renders on the server and the rail is the only part that needs a client boundary.',
  },
  {
    version: '0.9.0',
    date: '24 August',
    title: 'Tables that scroll',
    text: 'A table wider than its container scrolls sideways on its own, with the header row pinned above the body. Numbers line up on their last digit when a column is aligned to the end.',
  },
];

export default function ScrollHeaderInScroller() {
  const scroller = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scroller}
      className="h-[420px] w-full max-w-xl overflow-y-auto rounded-2xl border bg-background"
    >
      <ScrollHeader scrollRef={scroller} barHeight={48} threshold={0.5}>
        <ScrollHeader.Bar>
          <ScrollHeader.Title>Changelog</ScrollHeader.Title>
        </ScrollHeader.Bar>
        <ScrollHeader.Large>
          <ScrollHeader.Description>Everything shipped, newest first</ScrollHeader.Description>
          <ScrollHeader.Title>Changelog</ScrollHeader.Title>
        </ScrollHeader.Large>

        <ol className="divide-y px-6 pb-6">
          {ENTRIES.map((entry) => (
            <li key={entry.version} className="py-5">
              <div className="flex items-baseline gap-3">
                <span className="font-mono text-xs font-medium text-foreground">{entry.version}</span>
                <span className="text-xs text-muted-foreground">{entry.date}</span>
              </div>
              <h2 className="mt-1.5 text-sm font-semibold text-foreground">{entry.title}</h2>
              <p className="mt-1 text-sm leading-6 text-muted-foreground">{entry.text}</p>
            </li>
          ))}
        </ol>
      </ScrollHeader>
    </div>
  );
}

'use client';

import { Share2Icon } from 'lucide-react';
import { useRef } from 'react';
import { Button } from '@/components/panelui/button';
import { ScrollHeader } from '@/components/panelui/scroll-header';

const PARAGRAPHS = [
  'There is a particular kind of bookshop that exists because somebody wanted it to, not because the numbers asked for it. It has a table near the door, a chair that nobody is supposed to sit in, and a shelf of local history that has been in the same order for a decade.',
  'The economics are not mysterious. Rent is the largest line, then staff, then stock. The stock turns slowly and the margins are thin, and the whole thing works because the person running it has decided that a modest living is enough and that the alternative — a bigger shop, more events, a café — would be a different job.',
  'What that buys is patience. A book can sit on the table for six months and find the two people in town who want it. A publisher can take a chance on a first novel because the shop will hand-sell it, and the shop can hand-sell it because it is not trying to turn the stock over before the rent is due.',
  'None of this scales. That is the point. The question a small house asks is not how to become a large one, but how to keep being a small one without becoming a hobby. The answer, when there is one, is usually a shorter list and a longer horizon.',
];

export default function ScrollHeaderLongTitle() {
  const scroller = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scroller}
      className="h-[440px] w-full max-w-2xl overflow-y-auto rounded-2xl border bg-background"
    >
      <ScrollHeader scrollRef={scroller}>
        <ScrollHeader.Cover />
        <ScrollHeader.Bar>
          <ScrollHeader.Title>The quiet economics of a small publishing house</ScrollHeader.Title>
          <ScrollHeader.Actions>
            <Button variant="ghost" size="icon" aria-label="Share">
              <Share2Icon />
            </Button>
          </ScrollHeader.Actions>
        </ScrollHeader.Bar>
        <ScrollHeader.Large>
          <ScrollHeader.Description>Essay · 8 minute read</ScrollHeader.Description>
          <ScrollHeader.Title>The quiet economics of a small publishing house on the coast</ScrollHeader.Title>
        </ScrollHeader.Large>

        <article className="px-6 py-6">
          <div className="flex flex-col gap-4 text-sm leading-7 text-muted-foreground">
            {PARAGRAPHS.map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>
        </article>
      </ScrollHeader>
    </div>
  );
}