Banner

import {
  Banner,
  BannerBackground,
  BannerContent,
  BannerDismiss,
} from "@/components/banner/banner"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import {
  Stat,
  StatGroup,
  StatLabel,
  StatValue,
} from "@/components/stats/stats"
import { Text } from "@/components/text/text"
import { Grain } from "@/components/texture/grain"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  closure: "Gallery 4 is closed today.",
  dismiss: "Dismiss gallery closure notice",
  eyebrow: "ALDER MUSEUM / PLAN YOUR VISIT",
  title: "A day among objects.",
  description:
    "Furniture, textiles and the things people keep. Your ticket includes every open gallery.",
  summary: "Accessible entrance",
  access:
    "Use the level entrance on Alder Lane. The lift serves all three floors. Borrow a wheelchair free of charge at the welcome desk.",
  closureNote: "The rest of the museum is open as usual.",
} as const

const HOURS = [
  { term: "Today’s hours", value: "10:00–18:00" },
  { term: "Last entry", value: "17:15" },
] as const

/** A museum visit page opened by a dismissible Banner with paper grain behind the notice. */
export default function BannerMuseumNotice() {
  return (
    <Card className="w-full max-w-xl rounded-none border border-border bg-card text-foreground shadow-none ring-0 [--card-spacing:--spacing(7)]">
      <Banner className="-mt-(--card-spacing) gap-x-2 px-4 py-3 text-foreground lg:px-4">
        <BannerBackground className="bg-muted">
          <Grain variant="paper" intensity="fine" />
        </BannerBackground>
        <BannerContent>
          <p className="text-xs/5">
            <strong>{COPY.closure}</strong> {COPY.closureNote}
          </p>
        </BannerContent>
        <BannerDismiss aria-label={COPY.dismiss} />
      </Banner>
      <CardHeader className="gap-5">
        <Eyebrow variant="caps" tone="ink">
          {COPY.eyebrow}
        </Eyebrow>
        <CardTitle className="text-4xl font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <Text className="text-sm/6">{COPY.description}</Text>
      </CardHeader>
      <CardContent className="flex flex-col gap-6">
        <Separator className="bg-current/20" />
        <StatGroup cols={2} gap="sm" className="grid-cols-2">
          {HOURS.map((hour) => (
            <Stat key={hour.term} className="gap-2">
              <StatLabel className="text-xs">{hour.term}</StatLabel>
              <StatValue className="text-sm/6 font-medium">
                {hour.value}
              </StatValue>
            </Stat>
          ))}
        </StatGroup>
        <Collapsible className="border-t border-current/20 pt-4 text-sm/6">
          <CollapsibleTrigger className="w-full cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-4">
            {COPY.summary}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <Text className="mt-3 text-sm/6">{COPY.access}</Text>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  )
}

"use client"

import { createContext, use, useState, type ComponentProps } from "react"
import { ArrowRightIcon, XIcon } from "@phosphor-icons/react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

const BannerContext = createContext<{
  dismiss: (from: HTMLElement) => void
} | null>(null)

const TABBABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'

// The dismiss button leaves with the banner, so focus goes where Tab would.
function nextTabbable(banner: HTMLElement) {
  return Array.from(document.querySelectorAll<HTMLElement>(TABBABLE)).find(
    (el) =>
      !banner.contains(el) &&
      banner.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING &&
      el.tabIndex >= 0 &&
      !el.matches(":disabled") &&
      !el.closest("[inert]") &&
      (el.checkVisibility
        ? el.checkVisibility({ visibilityProperty: true })
        : el.getClientRects().length > 0 &&
          !["hidden", "collapse"].includes(getComputedStyle(el).visibility))
  )
}

const bannerVariants = cva(
  "group/banner relative isolate flex w-full flex-nowrap items-center gap-x-4 gap-y-2 overflow-hidden px-6 py-2 text-[13px]/5 lg:px-10",
  {
    variants: {
      variant: {
        start: "",
        // The spacer mirrors the dismiss column so the message stays centered.
        center:
          "justify-center has-data-[slot=banner-dismiss]:before:min-w-0 has-data-[slot=banner-dismiss]:before:flex-1",
      },
    },
    defaultVariants: { variant: "start" },
  }
)

// Controlled: dismissing only calls onOpenChange(false); the parent sets open.
/**
 * A thin announcement bar. The text steps from 13px to 14px
 * and the message wraps on screens 40rem and wider (`sm:`), and below that the
 * link label hides. The side padding grows at the `lg` screen width.
 */
function Banner({
  className,
  variant = "start",
  open: openProp,
  defaultOpen = true,
  onOpenChange,
  children,
  ...props
}: ComponentProps<"div"> &
  VariantProps<typeof bannerVariants> & {
    open?: boolean
    defaultOpen?: boolean
    onOpenChange?: (open: boolean) => void
  }) {
  const [openState, setOpenState] = useState(defaultOpen)
  const open = openProp ?? openState
  if (!open) return null

  const dismiss = (from: HTMLElement) => {
    const banner = from.closest<HTMLElement>("[data-slot=banner]")
    const next = banner?.contains(document.activeElement)
      ? nextTabbable(banner)
      : undefined
    setOpenState(false)
    onOpenChange?.(false)
    // Only once it is really gone: a controlled parent may keep it open.
    if (banner && next)
      requestAnimationFrame(() => {
        if (!banner.isConnected) next.focus()
      })
  }

  return (
    <BannerContext value={{ dismiss }}>
      <div
        data-slot="banner"
        data-variant={variant}
        className={cn(bannerVariants({ variant }), className)}
        {...props}
      >
        {children}
      </div>
    </BannerContext>
  )
}

// Paints behind the message; put art or glow here, never under the text alone.
function BannerBackground({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      data-slot="banner-background"
      className={cn(
        "pointer-events-none absolute inset-0 -z-10 overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

function BannerContent({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="banner-content"
      className={cn(
        "flex min-w-0 flex-1 flex-row items-center gap-x-4 gap-y-2 group-data-[variant=center]/banner:flex-initial group-data-[variant=center]/banner:justify-center group-data-[variant=center]/banner:text-center max-sm:gap-x-2 sm:flex-wrap sm:text-sm/6",
        className
      )}
      {...props}
    />
  )
}

// On phones the label hides, the arrow stays and the whole bar becomes the
// link's tap target, so the banner holds to one line. The label is still the
// link's accessible name. labelOnPhone keeps the label visible, for a
// button-styled link that would otherwise shrink to a bare arrow.
function BannerLink({
  className,
  children,
  icon = <ArrowRightIcon aria-hidden="true" className="size-3.5" />,
  labelOnPhone = false,
  ...props
}: ComponentProps<"a"> & { icon?: React.ReactNode; labelOnPhone?: boolean }) {
  return (
    <a
      data-slot="banner-link"
      className={cn(
        "inline-flex shrink-0 items-center gap-1 rounded-sm font-semibold underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
        "max-sm:after:absolute max-sm:after:inset-0 max-sm:focus-visible:outline-none max-sm:focus-visible:after:outline-2 max-sm:focus-visible:after:-outline-offset-2 max-sm:focus-visible:after:outline-current",
        className
      )}
      {...props}
    >
      <span className={labelOnPhone ? undefined : "max-sm:sr-only"}>
        {children}
      </span>
      {icon}
    </a>
  )
}

function BannerDismiss({
  className,
  "aria-label": label = "Dismiss",
  onClick,
  children = <XIcon aria-hidden="true" />,
  ...props
}: Omit<ComponentProps<typeof Button>, "className"> & {
  // A string class only: the stock Button drops a class callback.
  className?: string
}) {
  const ctx = use(BannerContext)
  return (
    <div
      data-slot="banner-actions"
      className="relative flex flex-1 items-center justify-end gap-2 group-data-[variant=start]/banner:flex-none"
    >
      <Button
        data-slot="banner-dismiss"
        variant="ghost"
        size="icon-sm"
        aria-label={label}
        className={cn("-my-1 -mr-2 hover:bg-current/10", className)}
        onClick={(event) => {
          onClick?.(event)
          if (!event.defaultPrevented) ctx?.dismiss(event.currentTarget)
        }}
        {...props}
      >
        {children}
      </Button>
    </div>
  )
}

export { Banner, BannerBackground, BannerContent, BannerDismiss, BannerLink }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Grid, type GridProps } from "@/components/grid/grid"

/**
 * A list of `Stat` items laid out by `Grid`, rendered as a `ul`. It defaults
 * to 3 columns and the large gap. Like `Grid`, its columns follow the width
 * it is given, so size its parent to narrow it. `className` lands on the
 * list.
 */
function StatGroup({
  cols = 3,
  gap = "lg",
  ...props
}: ComponentProps<"ul"> & {
  /**
   * The most columns, 3 by default. They step up as the list's space
   * widens, the way `Grid`'s do.
   */
  cols?: GridProps["cols"]
  /**
   * Space between stats: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
   * is the default.
   */
  gap?: GridProps["gap"]
}) {
  return (
    <Grid
      data-slot="stat-group"
      render={<ul role="list" />}
      cols={cols}
      gap={gap}
      // Grid's props are typed for its default div; this group renders a list.
      {...(props as Omit<GridProps, "cols" | "gap">)}
    />
  )
}

// card sets the stat on a filled panel; rule sets a line down its left side.
const statVariants = cva("grid content-start gap-2", {
  variants: {
    /**
     * The stat style. `default` (the default) adds nothing. `card` sets it
     * on a `rounded-xl` panel with 32px padding, filled with `muted`, or
     * with `card` and `card-foreground` text in dark mode. `rule` draws a
     * 1px line in `border` down its left side, 24px from the text.
     */
    variant: {
      default: "",
      card: "rounded-xl bg-muted p-8 dark:bg-card dark:text-card-foreground",
      rule: "border-l border-border pl-6",
    },
  },
  defaultVariants: { variant: "default" },
})

/**
 * One figure and its label, as an `li` inside `StatGroup`. Holds a
 * `StatValue` and a `StatLabel`, stacked with 8px gaps.
 *
 * `card` sets it on a filled, rounded panel with 32px padding. `rule` draws a
 * line down its left side.
 */
function Stat({
  className,
  variant = "default",
  ...props
}: ComponentProps<"li"> & VariantProps<typeof statVariants>) {
  return (
    <li
      data-slot="stat"
      data-variant={variant}
      className={cn(statVariants({ variant }), className)}
      {...props}
    />
  )
}

/** The figure itself, such as a number or a percentage, at 32px in the body font. */
function StatValue({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-value"
      className={cn("text-[2rem]/10 tracking-tight", className)}
      {...props}
    />
  )
}

/** The text that says what the figure measures. */
function StatLabel({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-label"
      className={cn("text-base/7 text-pretty", className)}
      {...props}
    />
  )
}

export { StatGroup, Stat, StatValue, StatLabel }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const GRID_DEFAULTS = { cols: 3, gap: "lg" } as const

// Columns follow the screen, stepping at 40rem and 48rem (and 64rem for six). Gap sizes read the shared --gap-*
// values in globals.css.
const containerGridVariants = cva("grid grid-cols-1", {
  variants: {
    /**
     * The most columns. Below 40rem of screen width the grid is one
     * column (two for `6`); it steps up at 40rem and 48rem: `2` is two
     * columns from 40rem, `3` two then three, `4` two then four, `5` three
     * then five, and `6` three, then four, then six from 64rem. The default
     * is 3.
     */
    cols: {
      1: "",
      2: "sm:grid-cols-2",
      3: "sm:grid-cols-2 md:grid-cols-3",
      4: "sm:grid-cols-2 md:grid-cols-4",
      5: "sm:grid-cols-3 md:grid-cols-5",
      6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6",
    },
    /**
     * Space between items: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
     * is the default. The sizes are the `--gap-*` values in globals.css.
     */
    gap: {
      xs: "gap-(--gap-xs)",
      sm: "gap-(--gap-sm)",
      md: "gap-(--gap-md)",
      lg: "gap-(--gap-lg)",
      xl: "gap-(--gap-xl)",
      px: "gap-px",
      none: "gap-0",
    },
  },
  defaultVariants: GRID_DEFAULTS,
})

type GridState = { slot: "grid" } & VariantProps<typeof containerGridVariants>

type GridProps = useRender.ComponentProps<"div", GridState> &
  VariantProps<typeof containerGridVariants>

// className, render and every other prop go to the grid.
function Grid({
  className,
  cols = GRID_DEFAULTS.cols,
  gap = GRID_DEFAULTS.gap,
  render,
  ...props
}: GridProps) {
  const grid = useRender({
    defaultTagName: "div",
    render,
    state: { slot: "grid", cols, gap },
    props: mergeProps<"div">(
      { className: cn(containerGridVariants({ cols, gap }), className) },
      props
    ),
  })
  return grid
}

export { Grid, type GridProps }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

import {
  Banner,
  BannerContent,
  BannerDismiss,
  BannerLink,
} from "@/components/banner/banner"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Grain } from "@/components/texture/grain"

// The copy: change text here, not in the markup.
const COPY = {
  label: "OPEN",
  notice: "Winter exhibition",
  link: "Details",
  dismiss: "Dismiss exhibition announcement",
  venue: "Fieldwork Gallery",
  title: "Forms",
  aside: "in common.",
  dates: "November 14—December 20",
  hours: "Thu–Sun, 11am–6pm · Free entry",
} as const

/** A Banner announcement above a sparse exhibition poster. */
export default function BannerExhibition() {
  return (
    <div className="relative isolate w-full overflow-hidden bg-background text-foreground [--font-display:var(--font-hanken-grotesk)]!">
      <Grain variant="square" opacity={0.2} />
      <Banner className="border-b border-foreground/30 px-5 py-3 lg:px-5">
        <BannerContent className="gap-x-2">
          <span className="rounded-sm bg-foreground px-2 py-0.5 font-mono text-[10px] text-background">
            {COPY.label}
          </span>
          <p className="text-xs sm:text-sm">{COPY.notice}</p>
          <BannerLink href="#exhibition-05">{COPY.link}</BannerLink>
        </BannerContent>
        <BannerDismiss aria-label={COPY.dismiss} />
      </Banner>
      <div id="exhibition-05" className="relative grid gap-5 p-7 sm:p-10">
        <Eyebrow variant="caps" tone="ink" className="font-mono">
          {COPY.venue}
        </Eyebrow>
        <h3 className="font-display text-5xl/12 tracking-tight">
          {COPY.title}
          <br />
          {COPY.aside}
        </h3>
        <p className="border-t border-foreground/30 pt-4 text-sm">
          {COPY.dates}
          <br />
          {COPY.hours}
        </p>
      </div>
    </div>
  )
}

"use client"

import { createContext, use, useState, type ComponentProps } from "react"
import { ArrowRightIcon, XIcon } from "@phosphor-icons/react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

const BannerContext = createContext<{
  dismiss: (from: HTMLElement) => void
} | null>(null)

const TABBABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'

// The dismiss button leaves with the banner, so focus goes where Tab would.
function nextTabbable(banner: HTMLElement) {
  return Array.from(document.querySelectorAll<HTMLElement>(TABBABLE)).find(
    (el) =>
      !banner.contains(el) &&
      banner.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING &&
      el.tabIndex >= 0 &&
      !el.matches(":disabled") &&
      !el.closest("[inert]") &&
      (el.checkVisibility
        ? el.checkVisibility({ visibilityProperty: true })
        : el.getClientRects().length > 0 &&
          !["hidden", "collapse"].includes(getComputedStyle(el).visibility))
  )
}

const bannerVariants = cva(
  "group/banner relative isolate flex w-full flex-nowrap items-center gap-x-4 gap-y-2 overflow-hidden px-6 py-2 text-[13px]/5 lg:px-10",
  {
    variants: {
      variant: {
        start: "",
        // The spacer mirrors the dismiss column so the message stays centered.
        center:
          "justify-center has-data-[slot=banner-dismiss]:before:min-w-0 has-data-[slot=banner-dismiss]:before:flex-1",
      },
    },
    defaultVariants: { variant: "start" },
  }
)

// Controlled: dismissing only calls onOpenChange(false); the parent sets open.
/**
 * A thin announcement bar. The text steps from 13px to 14px
 * and the message wraps on screens 40rem and wider (`sm:`), and below that the
 * link label hides. The side padding grows at the `lg` screen width.
 */
function Banner({
  className,
  variant = "start",
  open: openProp,
  defaultOpen = true,
  onOpenChange,
  children,
  ...props
}: ComponentProps<"div"> &
  VariantProps<typeof bannerVariants> & {
    open?: boolean
    defaultOpen?: boolean
    onOpenChange?: (open: boolean) => void
  }) {
  const [openState, setOpenState] = useState(defaultOpen)
  const open = openProp ?? openState
  if (!open) return null

  const dismiss = (from: HTMLElement) => {
    const banner = from.closest<HTMLElement>("[data-slot=banner]")
    const next = banner?.contains(document.activeElement)
      ? nextTabbable(banner)
      : undefined
    setOpenState(false)
    onOpenChange?.(false)
    // Only once it is really gone: a controlled parent may keep it open.
    if (banner && next)
      requestAnimationFrame(() => {
        if (!banner.isConnected) next.focus()
      })
  }

  return (
    <BannerContext value={{ dismiss }}>
      <div
        data-slot="banner"
        data-variant={variant}
        className={cn(bannerVariants({ variant }), className)}
        {...props}
      >
        {children}
      </div>
    </BannerContext>
  )
}

// Paints behind the message; put art or glow here, never under the text alone.
function BannerBackground({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      data-slot="banner-background"
      className={cn(
        "pointer-events-none absolute inset-0 -z-10 overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

function BannerContent({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="banner-content"
      className={cn(
        "flex min-w-0 flex-1 flex-row items-center gap-x-4 gap-y-2 group-data-[variant=center]/banner:flex-initial group-data-[variant=center]/banner:justify-center group-data-[variant=center]/banner:text-center max-sm:gap-x-2 sm:flex-wrap sm:text-sm/6",
        className
      )}
      {...props}
    />
  )
}

// On phones the label hides, the arrow stays and the whole bar becomes the
// link's tap target, so the banner holds to one line. The label is still the
// link's accessible name. labelOnPhone keeps the label visible, for a
// button-styled link that would otherwise shrink to a bare arrow.
function BannerLink({
  className,
  children,
  icon = <ArrowRightIcon aria-hidden="true" className="size-3.5" />,
  labelOnPhone = false,
  ...props
}: ComponentProps<"a"> & { icon?: React.ReactNode; labelOnPhone?: boolean }) {
  return (
    <a
      data-slot="banner-link"
      className={cn(
        "inline-flex shrink-0 items-center gap-1 rounded-sm font-semibold underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
        "max-sm:after:absolute max-sm:after:inset-0 max-sm:focus-visible:outline-none max-sm:focus-visible:after:outline-2 max-sm:focus-visible:after:-outline-offset-2 max-sm:focus-visible:after:outline-current",
        className
      )}
      {...props}
    >
      <span className={labelOnPhone ? undefined : "max-sm:sr-only"}>
        {children}
      </span>
      {icon}
    </a>
  )
}

function BannerDismiss({
  className,
  "aria-label": label = "Dismiss",
  onClick,
  children = <XIcon aria-hidden="true" />,
  ...props
}: Omit<ComponentProps<typeof Button>, "className"> & {
  // A string class only: the stock Button drops a class callback.
  className?: string
}) {
  const ctx = use(BannerContext)
  return (
    <div
      data-slot="banner-actions"
      className="relative flex flex-1 items-center justify-end gap-2 group-data-[variant=start]/banner:flex-none"
    >
      <Button
        data-slot="banner-dismiss"
        variant="ghost"
        size="icon-sm"
        aria-label={label}
        className={cn("-my-1 -mr-2 hover:bg-current/10", className)}
        onClick={(event) => {
          onClick?.(event)
          if (!event.defaultPrevented) ctx?.dismiss(event.currentTarget)
        }}
        {...props}
      >
        {children}
      </Button>
    </div>
  )
}

export { Banner, BannerBackground, BannerContent, BannerDismiss, BannerLink }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`

import {
  Banner,
  BannerContent,
  BannerLink,
} from "@/components/banner/banner"
import { Grain } from "@/components/texture/grain"

// The copy: change text here, not in the markup.
const COPY = {
  notice: "Saturday readings return.",
  link: "Join us",
  name: "The Corner Bookshop",
  description:
    "A new book, a shared table, and an hour without your phone. Saturdays at 10.",
} as const

/** A centered Banner notice, inside a double rule above an understated bookshop masthead. */
export default function BannerBookshop() {
  return (
    <div className="relative isolate w-full overflow-hidden bg-background p-5 text-foreground [--font-display:var(--font-hanken-grotesk)] sm:p-8">
      <Grain variant="paper" intensity="rich" />
      <div className="relative border-y-3 border-double border-border py-1">
        <Banner variant="center" className="px-1 py-3 lg:px-1">
          <BannerContent className="gap-x-2">
            <p className="text-xs">{COPY.notice}</p>
            <BannerLink
              href="#reading-06"
              labelOnPhone
              icon={null}
              className="text-xs underline"
            >
              {COPY.link}
            </BannerLink>
          </BannerContent>
        </Banner>
      </div>
      <div id="reading-06" className="relative py-10 text-center">
        <p className="font-display text-4xl tracking-tight">{COPY.name}</p>
        <p className="mx-auto mt-4 max-w-xs text-sm/6">{COPY.description}</p>
      </div>
    </div>
  )
}

"use client"

import { createContext, use, useState, type ComponentProps } from "react"
import { ArrowRightIcon, XIcon } from "@phosphor-icons/react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

const BannerContext = createContext<{
  dismiss: (from: HTMLElement) => void
} | null>(null)

const TABBABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'

// The dismiss button leaves with the banner, so focus goes where Tab would.
function nextTabbable(banner: HTMLElement) {
  return Array.from(document.querySelectorAll<HTMLElement>(TABBABLE)).find(
    (el) =>
      !banner.contains(el) &&
      banner.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING &&
      el.tabIndex >= 0 &&
      !el.matches(":disabled") &&
      !el.closest("[inert]") &&
      (el.checkVisibility
        ? el.checkVisibility({ visibilityProperty: true })
        : el.getClientRects().length > 0 &&
          !["hidden", "collapse"].includes(getComputedStyle(el).visibility))
  )
}

const bannerVariants = cva(
  "group/banner relative isolate flex w-full flex-nowrap items-center gap-x-4 gap-y-2 overflow-hidden px-6 py-2 text-[13px]/5 lg:px-10",
  {
    variants: {
      variant: {
        start: "",
        // The spacer mirrors the dismiss column so the message stays centered.
        center:
          "justify-center has-data-[slot=banner-dismiss]:before:min-w-0 has-data-[slot=banner-dismiss]:before:flex-1",
      },
    },
    defaultVariants: { variant: "start" },
  }
)

// Controlled: dismissing only calls onOpenChange(false); the parent sets open.
/**
 * A thin announcement bar. The text steps from 13px to 14px
 * and the message wraps on screens 40rem and wider (`sm:`), and below that the
 * link label hides. The side padding grows at the `lg` screen width.
 */
function Banner({
  className,
  variant = "start",
  open: openProp,
  defaultOpen = true,
  onOpenChange,
  children,
  ...props
}: ComponentProps<"div"> &
  VariantProps<typeof bannerVariants> & {
    open?: boolean
    defaultOpen?: boolean
    onOpenChange?: (open: boolean) => void
  }) {
  const [openState, setOpenState] = useState(defaultOpen)
  const open = openProp ?? openState
  if (!open) return null

  const dismiss = (from: HTMLElement) => {
    const banner = from.closest<HTMLElement>("[data-slot=banner]")
    const next = banner?.contains(document.activeElement)
      ? nextTabbable(banner)
      : undefined
    setOpenState(false)
    onOpenChange?.(false)
    // Only once it is really gone: a controlled parent may keep it open.
    if (banner && next)
      requestAnimationFrame(() => {
        if (!banner.isConnected) next.focus()
      })
  }

  return (
    <BannerContext value={{ dismiss }}>
      <div
        data-slot="banner"
        data-variant={variant}
        className={cn(bannerVariants({ variant }), className)}
        {...props}
      >
        {children}
      </div>
    </BannerContext>
  )
}

// Paints behind the message; put art or glow here, never under the text alone.
function BannerBackground({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      data-slot="banner-background"
      className={cn(
        "pointer-events-none absolute inset-0 -z-10 overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

function BannerContent({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="banner-content"
      className={cn(
        "flex min-w-0 flex-1 flex-row items-center gap-x-4 gap-y-2 group-data-[variant=center]/banner:flex-initial group-data-[variant=center]/banner:justify-center group-data-[variant=center]/banner:text-center max-sm:gap-x-2 sm:flex-wrap sm:text-sm/6",
        className
      )}
      {...props}
    />
  )
}

// On phones the label hides, the arrow stays and the whole bar becomes the
// link's tap target, so the banner holds to one line. The label is still the
// link's accessible name. labelOnPhone keeps the label visible, for a
// button-styled link that would otherwise shrink to a bare arrow.
function BannerLink({
  className,
  children,
  icon = <ArrowRightIcon aria-hidden="true" className="size-3.5" />,
  labelOnPhone = false,
  ...props
}: ComponentProps<"a"> & { icon?: React.ReactNode; labelOnPhone?: boolean }) {
  return (
    <a
      data-slot="banner-link"
      className={cn(
        "inline-flex shrink-0 items-center gap-1 rounded-sm font-semibold underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
        "max-sm:after:absolute max-sm:after:inset-0 max-sm:focus-visible:outline-none max-sm:focus-visible:after:outline-2 max-sm:focus-visible:after:-outline-offset-2 max-sm:focus-visible:after:outline-current",
        className
      )}
      {...props}
    >
      <span className={labelOnPhone ? undefined : "max-sm:sr-only"}>
        {children}
      </span>
      {icon}
    </a>
  )
}

function BannerDismiss({
  className,
  "aria-label": label = "Dismiss",
  onClick,
  children = <XIcon aria-hidden="true" />,
  ...props
}: Omit<ComponentProps<typeof Button>, "className"> & {
  // A string class only: the stock Button drops a class callback.
  className?: string
}) {
  const ctx = use(BannerContext)
  return (
    <div
      data-slot="banner-actions"
      className="relative flex flex-1 items-center justify-end gap-2 group-data-[variant=start]/banner:flex-none"
    >
      <Button
        data-slot="banner-dismiss"
        variant="ghost"
        size="icon-sm"
        aria-label={label}
        className={cn("-my-1 -mr-2 hover:bg-current/10", className)}
        onClick={(event) => {
          onClick?.(event)
          if (!event.defaultPrevented) ctx?.dismiss(event.currentTarget)
        }}
        {...props}
      >
        {children}
      </Button>
    </div>
  )
}

export { Banner, BannerBackground, BannerContent, BannerDismiss, BannerLink }

import { cn } from "cn"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`