{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-status",
  "title": "Token Status",
  "author": "MR <contact@bimframe.co>",
  "description": "Status line for an OAuth grant: connection state, token expiry, and held scopes. Server-safe.",
  "registryDependencies": [
    "badge",
    "@cantera/status-tokens",
    "@cantera/oauth-types"
  ],
  "files": [
    {
      "path": "registry/ui/token-status.tsx",
      "content": "import type * as React from 'react'\n\nimport { Badge } from '@/components/ui/badge'\nimport {\n  connectionExpiry,\n  isExpiringSoon,\n  type OAuthConnection,\n  type OAuthConnectionStatus,\n} from '@/lib/oauth-types'\nimport { cn } from '@/lib/utils'\n\n/**\n * The four semantic status tones. One color, one meaning — never a generic\n * badge variant. Requires the `@cantera/status-tokens` CSS variables; the\n * utilities fall back to foreground / destructive / muted without them.\n */\ntype StatusTone = 'success' | 'warning' | 'danger' | 'neutral'\n\n/**\n * Solid fills, not low-alpha tints: a tablet in direct sunlight loses a 10%\n * tint entirely. Every pair below is contrast-verified in both appearances.\n */\nconst statusToneClasses: Record<StatusTone, string> = {\n  success: 'bg-status-success text-status-success-foreground',\n  warning: 'bg-status-warning text-status-warning-foreground',\n  danger: 'bg-status-danger text-status-danger-foreground',\n  neutral: 'bg-status-neutral text-status-neutral-foreground',\n}\n\n/** The same tones as ink, for text sitting on the page or on a `-surface`. */\nconst statusInkClasses: Record<StatusTone, string> = {\n  success: 'text-status-success',\n  warning: 'text-status-warning',\n  danger: 'text-status-danger',\n  neutral: 'text-status-neutral',\n}\n\nconst statusTone: Record<OAuthConnectionStatus, StatusTone> = {\n  connected: 'success',\n  // Expiry is recoverable — a refresh away, not a failure. Warning, not danger.\n  expired: 'warning',\n  error: 'danger',\n  disconnected: 'neutral',\n}\n\nconst statusLabel: Record<OAuthConnectionStatus, string> = {\n  connected: 'Connected',\n  expired: 'Expired',\n  error: 'Error',\n  disconnected: 'Not connected',\n}\n\n/**\n * Relative expiry, clamped at zero: a token that is already gone reads\n * \"expired\", never \"expires 5 min. ago\".\n */\nfunction formatExpiry(expiry: Date, locale?: string | string[]): string {\n  const deltaMs = expiry.getTime() - Date.now()\n  if (deltaMs <= 0) return 'expired'\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'always', style: 'narrow' })\n  const minutes = Math.round(deltaMs / 60_000)\n  if (minutes < 1) return 'expires now'\n  if (minutes < 60) return `expires ${rtf.format(minutes, 'minute')}`\n  const hours = Math.round(minutes / 60)\n  if (hours < 48) return `expires ${rtf.format(hours, 'hour')}`\n  return `expires ${rtf.format(Math.round(hours / 24), 'day')}`\n}\n\ninterface TokenStatusProps extends React.ComponentProps<'div'> {\n  connection: OAuthConnection\n  showExpiry?: boolean\n  showScopes?: boolean\n  /** BCP 47 locale(s) for the relative expiry. Defaults to the runtime locale. */\n  locale?: string | string[]\n  /** How far ahead counts as \"expiring soon\". Default five minutes. */\n  expiringSoonMs?: number\n}\n\n/**\n * Status line for an OAuth grant: connection state, token expiry, and the\n * scopes it holds. Server-safe.\n */\nfunction TokenStatus({\n  connection,\n  showExpiry = true,\n  showScopes = false,\n  locale,\n  expiringSoonMs,\n  className,\n  ...props\n}: TokenStatusProps) {\n  const expiry = connectionExpiry(connection)\n  const expiringSoon =\n    connection.status === 'connected' && isExpiringSoon(connection, expiringSoonMs)\n  const tone = expiringSoon ? 'warning' : statusTone[connection.status]\n  const label = expiringSoon ? 'Expiring soon' : statusLabel[connection.status]\n\n  return (\n    <div\n      data-slot=\"token-status\"\n      data-status={connection.status}\n      data-tone={tone}\n      className={cn('flex flex-wrap items-center gap-x-2 gap-y-1.5', className)}\n      {...props}\n    >\n      <Badge className={cn('h-6 px-2.5 transition-colors', statusToneClasses[tone])}>{label}</Badge>\n      {showExpiry && expiry && connection.status === 'connected' && (\n        <time\n          dateTime={expiry.toISOString()}\n          suppressHydrationWarning\n          className={cn(\n            'text-xs tabular-nums transition-colors',\n            expiringSoon ? statusInkClasses.warning : 'text-muted-foreground',\n          )}\n        >\n          {formatExpiry(expiry, locale)}\n        </time>\n      )}\n      {connection.status === 'error' && connection.error && (\n        <span className={cn('text-xs', statusInkClasses.danger)}>{connection.error}</span>\n      )}\n      {showScopes &&\n        connection.scopes?.map((scope) => (\n          <Badge key={scope} variant=\"outline\" className=\"font-mono text-xs\">\n            {scope}\n          </Badge>\n        ))}\n    </div>\n  )\n}\n\nexport { type StatusTone, statusInkClasses, statusToneClasses, TokenStatus, type TokenStatusProps }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "authentication",
    "status"
  ],
  "type": "registry:component"
}