{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-checkpoint",
  "title": "Aurora AI Checkpoint",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native checkpoint parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements",
    "@aurora/aurora-components"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/checkpoint.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock, Database, Eye, Hexagon, RotateCcw, Save } from \"lucide-react\"\nimport { Badge } from \"@/registry/aurora/ui/badge\"\nimport { Button } from \"@/registry/aurora/ui/button\"\n\n// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).\n\n/**\n * Checkpoint — a saved agent checkpoint card.\n *\n * Architecture is the canonical shadcn-registry pattern: a self-contained\n * `forwardRef` component with a typed prop API. Visuals match the Aurora /\n * Claude Design source 1:1 — a raised panel with a cyan save-icon tile, a\n * status badge, an optional \"AUTO\" tag, a monospace metadata row, and the\n * Diff / Restore action pair. A `compact` variant drops the meta + actions.\n */\n\nexport type CheckpointStatus = \"current\" | \"saved\" | \"stale\"\n\nexport interface CheckpointProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** Primary checkpoint label. */\n  label: string\n  /** Secondary description (default variant only). */\n  description?: string\n  /** Lifecycle status — drives the right-aligned badge. */\n  status?: CheckpointStatus\n  /** Step index this checkpoint captured. */\n  step?: number\n  /** Relative time the checkpoint was taken. */\n  time?: string\n  /** Human-readable snapshot size. */\n  size?: string\n  /** Render the \"AUTO\" tag beside the label. */\n  badge?: boolean\n  /** Layout density. `compact` = single dense row, no meta/actions. */\n  variant?: \"default\" | \"compact\"\n  /** Diff / view-changes action. Renders the \"Diff\" button when provided. */\n  onView?: () => void\n  /** Restore-to-checkpoint action. Renders the \"Restore\" button when provided. */\n  onRestore?: () => void\n  /** Whole-card click (compact variant — makes the row interactive). */\n  onClick?: () => void\n}\n\nconst STATUS_LABEL: Record<CheckpointStatus, string> = {\n  current: \"Current\",\n  saved: \"Saved\",\n  stale: \"Stale\",\n}\n\nconst STATUS_TONE = {\n  current: \"success\",\n  saved: \"neutral\",\n  stale: \"warn\",\n} as const\n\nfunction MetaItem({ icon: Icon, children }: { icon: typeof Clock; children: React.ReactNode }) {\n  return (\n    <span\n      className=\"aurora-text-meta inline-flex items-center gap-1.5 tabular-nums\"\n      style={{ color: \"var(--aurora-text-muted)\" }}\n    >\n      <Icon className=\"size-3.5\" aria-hidden style={{ color: \"var(--aurora-text-muted)\", opacity: 0.85 }} />\n      {children}\n    </span>\n  )\n}\n\nfunction AutomationTag() {\n  return (\n    <span\n      className=\"aurora-text-caption inline-flex shrink-0 items-center rounded-[4px] border px-1.5 py-0.5\"\n      style={{\n        color: \"var(--axon-orange-strong)\",\n        background: \"var(--axon-orange-surface)\",\n        borderColor: \"var(--axon-orange-border)\",\n        fontWeight: 700,\n        letterSpacing: \"0.075em\",\n        textTransform: \"uppercase\",\n      }}\n    >\n      Auto\n    </span>\n  )\n}\n\nconst Checkpoint = (\n    { ref,\n      label,\n      description,\n      status = \"saved\",\n      step,\n      time,\n      size,\n      badge = false,\n      variant = \"default\",\n      onView,\n      onRestore,\n      onClick,\n      className,\n      style,\n      ...props\n    }: CheckpointProps & { ref?: React.Ref<HTMLDivElement> }\n  ) => {\n    const compact = variant === \"compact\"\n    const interactive = compact && typeof onClick === \"function\"\n\n    const tile = (\n      <span\n        aria-hidden\n        className=\"grid place-items-center shrink-0\"\n        style={{\n          width: compact ? 36 : 44,\n          height: compact ? 36 : 44,\n          borderRadius: 12,\n          background: \"var(--axon-orange-surface)\",\n          border: \"1px solid var(--axon-orange-border)\",\n          color: \"var(--axon-orange)\",\n        }}\n      >\n        <Save className={compact ? \"size-4\" : \"size-5\"} />\n      </span>\n    )\n\n    const statusBadge = (\n      <Badge variant={STATUS_TONE[status]} style={{ letterSpacing: \"0.14em\" }}>\n        {STATUS_LABEL[status]}\n      </Badge>\n    )\n\n    const cardStyle: React.CSSProperties = {\n      background: \"var(--aurora-surface-raised)\",\n      border: \"1px solid var(--aurora-border-strong)\",\n      borderRadius: \"var(--aurora-radius-1)\",\n      boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n      transition: interactive\n        ? \"border-color var(--motion-duration-fast) var(--motion-ease-out), background var(--motion-duration-fast) var(--motion-ease-out)\"\n        : undefined,\n      ...style,\n    }\n\n    if (compact) {\n      return (\n        <div\n          ref={ref}\n          className={[\"flex items-center gap-3 p-3\", interactive ? \"cursor-pointer aurora-checkpoint--interactive\" : \"\", className]\n            .filter(Boolean)\n            .join(\" \")}\n          style={cardStyle}\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          onClick={onClick}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault()\n                    onClick?.()\n                  }\n                }\n              : undefined\n          }\n          {...props}\n        >\n          {tile}\n          <div\n            className=\"min-w-0 flex-1 truncate\"\n            style={{\n              fontFamily: \"var(--aurora-font-display)\",\n              fontSize: 17,\n              fontWeight: 800,\n              letterSpacing: 0,\n              color: \"var(--aurora-text-primary)\",\n            }}\n          >\n            {label}\n          </div>\n          {statusBadge}\n        </div>\n      )\n    }\n\n    const showMeta = step != null || time != null || size != null\n    const showActions = typeof onView === \"function\" || typeof onRestore === \"function\"\n\n    return (\n      <div ref={ref} className={[\"grid gap-3 p-4\", className].filter(Boolean).join(\" \")} style={cardStyle} {...props}>\n        <div className=\"flex items-start gap-3\">\n          {tile}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-2.5\">\n              <span\n                className=\"truncate\"\n                style={{\n                  fontFamily: \"var(--aurora-font-display)\",\n                  fontSize: 19,\n                  fontWeight: 700,\n                  letterSpacing: 0,\n                  color: \"var(--aurora-text-primary)\",\n                }}\n              >\n                {label}\n              </span>\n              {badge ? <AutomationTag /> : null}\n            </div>\n            {description ? (\n              <div className=\"aurora-text-body-sm mt-1\" style={{ color: \"var(--aurora-text-muted)\" }}>\n                {description}\n              </div>\n            ) : null}\n          </div>\n          <div className=\"self-start\">{statusBadge}</div>\n        </div>\n\n        {showMeta || showActions ? (\n          <div style={{ height: 1, background: \"var(--aurora-border-default)\", opacity: 0.7 }} />\n        ) : null}\n\n        {showMeta || showActions ? (\n          <div className=\"flex items-center gap-5\">\n            {showMeta ? (\n              <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-5\">\n                {step != null ? <MetaItem icon={Hexagon}>Step {step}</MetaItem> : null}\n                {time != null ? <MetaItem icon={Clock}>{time}</MetaItem> : null}\n                {size != null ? <MetaItem icon={Database}>{size}</MetaItem> : null}\n              </div>\n            ) : (\n              <span className=\"flex-1\" />\n            )}\n            {showActions ? (\n              <div className=\"flex items-center gap-2.5\">\n                {typeof onView === \"function\" ? (\n                  <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconLeft={<Eye aria-hidden />} onClick={onView}>\n                    Diff\n                  </Button>\n                ) : null}\n                {typeof onRestore === \"function\" ? (\n                  <Button type=\"button\" variant=\"aurora\" size=\"sm\" iconLeft={<RotateCcw aria-hidden />} onClick={onRestore}>\n                    Restore\n                  </Button>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    )\n  }\nCheckpoint.displayName = \"Checkpoint\"\n\nexport { Checkpoint }\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/checkpoint.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/checkpoint.tsx",
    "installTarget": "@components/aurora/ai/checkpoint.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that installs Aurora AI Checkpoint.\n\nInstall `aurora-tokens`, `aurora-ai-elements`, and `aurora-components` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@components/aurora/ai/checkpoint.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`, `aurora-components`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}