{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "past-banner",
  "type": "registry:ui",
  "title": "Past banner",
  "description": "The only chrome that changes while the canvas is scrubbed into the past: Surface(graphite-plain) with the MEMORY engraving, the moment viewed, and a Back to Now cap with its key.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/blocks/past-banner/past-banner.tsx",
      "type": "registry:ui",
      "target": "components/metalui/blocks/past-banner/past-banner.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Surface } from '../../components/surface/surface';\nimport { Label } from '../../components/label/label';\nimport { Button } from '../../components/button/button';\nimport { Kbd } from '../../components/kbd/kbd';\n\n/* ─────────────────────────────────────────────────────────\n * PAST BANNER (the reference design's #pastBanner): a composition\n *   Surface(graphite-plain, pill) › Label(dark) MEMORY + Label(on-graphite) the moment + Button(graphite) Back to Now + Kbd ⎋\n *\n *   scrubbed  drops in one nest from above on the surface spring (a crossfade under Reduce Motion)\n *   back      the cap presses; the host returns to the present and unmounts it\n * The only chrome that changes while in the past. It is a live status, so the moment is announced.\n * ───────────────────────────────────────────────────────── */\n\n/* Layout from the pastbanner group; it drops one nest from above on the surface spring. The key sits\n * the group's key gap after Back to Now (important: it overrides the cap's own gap). */\nconst BANNER = 'mu-pastbanner inline-flex items-center gap-pastbanner-gap h-pastbanner-height pl-pastbanner-pad-start pr-pastbanner-pad-end whitespace-nowrap animate-pastbanner-in';\nconst BACK = 'mu-pastbanner-back !gap-pastbanner-key-gap';\n\nexport interface PastBannerProps {\n  /** The moment viewed, as a person reads it: \"viewing Tue 23 Sep · 14:10\". */\n  moment: string;\n  onBack: () => void;\n  className?: string;\n}\n\n/** Says the canvas is showing the past, and brings it back. Shown only while scrubbed. */\nexport function PastBanner({ moment, onBack, className }: PastBannerProps) {\n  return (\n    <Surface material=\"graphite-plain\" radius=\"pill\" role=\"status\" className={className ? `${BANNER} ${className}` : BANNER}>\n      <Label variant=\"dark\">MEMORY</Label>\n      <Label variant=\"on-graphite\">{moment}</Label>\n      <Button cap=\"graphite\" className={BACK} onClick={onBack} aria-keyshortcuts=\"Escape\">\n        Back to Now <Kbd aria-hidden>⎋</Kbd>\n      </Button>\n    </Surface>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/past-banner.md. SwiftUI: MetalPastBanner in the MetalUI Swift package."
}