{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkpoint",
  "type": "registry:component",
  "title": "Checkpoint",
  "description": "A conversation marker with an async restore action, retry feedback, and stable cancellation.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/button.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/checkpoint.tsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { rs } from \"./rs\";\nimport { vlak } from \"./tokens.stylex\";\nimport { Button } from \"./button\";\n\nexport interface CheckpointProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onError\"> { label: React.ReactNode; onRestore?: () => void | Promise<void>; restoreLabel?: string; disabled?: boolean; onError?: (error: unknown) => void }\nconst styles = stylex.create({ root: { display: \"flex\", flexWrap: \"wrap\", alignItems: \"center\", gap: \"0.75rem\", color: vlak.gray, fontSize: \"0.8125rem\" }, line: { height: 1, backgroundColor: vlak.divider, flex: \"1 1 1rem\" }, error: { flexBasis: \"100%\", color: vlak.ink, margin: 0 } });\n/** A restore marker. The application owns saved history and the async restore operation. */\nexport const Checkpoint = React.forwardRef<HTMLDivElement, CheckpointProps>(function Checkpoint({ label, onRestore, restoreLabel = \"Restore checkpoint\", disabled, onError, className, style, children, ...props }, ref) {\n  const [pending, setPending] = React.useState(false);\n  const [error, setError] = React.useState(false);\n  const generation = React.useRef(0);\n  const busy = React.useRef(false);\n  React.useEffect(() => () => { generation.current++; }, []);\n  const restore = async () => { if (!onRestore || busy.current || disabled) return; busy.current = true; const token = generation.current; setPending(true); setError(false); try { await onRestore(); } catch (cause) { if (token === generation.current) { setError(true); onError?.(cause); } } finally { if (token === generation.current) { busy.current = false; setPending(false); } } };\n  const root = rs([\"rs-checkpoint\", className], styles.root);\n  return <div ref={ref} {...props} className={root.className} style={{ ...root.style, ...style }}><span {...rs([\"rs-checkpoint-line\"], styles.line)} aria-hidden=\"true\" /><span>{label}</span>{onRestore && <Button variant=\"subtle\" disabled={disabled || pending} onClick={() => { void restore(); }} aria-busy={pending}>{pending ? \"Restoring…\" : restoreLabel}</Button>}{children}<span {...rs([\"rs-checkpoint-line\"], styles.line)} aria-hidden=\"true\" />{error && <p {...rs([\"rs-checkpoint-error\"], styles.error)} role=\"alert\">The checkpoint could not be restored. Try again.</p>}</div>;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/checkpoint.tsx"
    },
    {
      "path": "vlak/styles/checkpoint.css",
      "content": "/* ── checkpoint: generated from packages/react/src/components/checkpoint.tsx ── */\n.rs-checkpoint{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;color:var(--text-secondary);font-size:0.8125rem}\n.rs-checkpoint-line{height:1px;background-color:var(--divider);flex:1 1 1rem}\n.rs-checkpoint-error{flex-basis:100%;color:var(--text);margin:0}\n",
      "type": "registry:file",
      "target": "styles/vlak/checkpoint.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "ai",
      "classes": [
        "rs-checkpoint",
        "rs-checkpoint-line",
        "rs-checkpoint-error"
      ],
      "snippet": "<div class=\"rs-checkpoint\"><span class=\"rs-checkpoint-line\"></span><span>Before editing</span><button class=\"rs-btn-subtle\" type=\"button\">Restore checkpoint</button><span class=\"rs-checkpoint-line\"></span></div>",
      "cssOnly": false,
      "registryDependencies": [
        "button",
        "vlak-lib"
      ],
      "aliases": [
        "Checkpoint",
        "AI Elements Checkpoint",
        "Restore checkpoint"
      ],
      "example": "import { Checkpoint } from \"@noorddev/vlak-react\";\n\nexport function SavedCheckpoint({ onRestore }: { onRestore: () => void | Promise<void> }) {\n  return <Checkpoint label=\"Before editing\" onRestore={onRestore} />;\n}",
      "usage": {
        "use": [
          "Mark a saved point in history and supply onRestore to restore it.",
          "A rejected promise keeps the restore action available and explains the failure."
        ],
        "avoid": [
          "Assuming the component saves model or tool state. The application owns persistence and restoration."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves through the supplied native controls in reading order"
        },
        {
          "keys": "Enter, Space",
          "does": "Activates focused buttons and disclosure summaries"
        }
      ],
      "a11y": [
        "Native attributes, className, style, and the forwarded ref reach the outer element.",
        "Interactive content requires accessible names; progress text is not announced for every streamed token."
      ]
    }
  }
}