{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "send",
  "type": "registry:block",
  "title": "Send block",
  "description": "Stage-then-confirm rendered: form, arithmetic-ladder review, a commit button that restates the amount, single execution on a pinned idempotency key, status timeline.",
  "dependencies": [
    "@venlyfinance/react@^0.2.0",
    "@venlyfinance/sdk@^0.3.0",
    "@tanstack/react-query@^5.0.0"
  ],
  "registryDependencies": [
    "@venlyfinance/venly-tokens",
    "@venlyfinance/money",
    "@venlyfinance/arithmetic-ladder",
    "@venlyfinance/timeline"
  ],
  "files": [
    {
      "path": "registry/blocks/send.tsx",
      "type": "registry:component",
      "target": "~/components/venly/blocks/send.tsx",
      "content": "import { useState, type CSSProperties, type ReactElement } from \"react\";\nimport {\n  useStagedTransfer,\n  type StagedTransferState,\n  type TransferDraft,\n} from \"@venlyfinance/react\";\nimport { formatAmount } from \"../lib/money.js\";\nimport { ArithmeticLadder, type LadderRow } from \"../components/arithmetic-ladder.js\";\nimport { Timeline, type TimelineStep } from \"../components/timeline.js\";\n\n/**\n * Send block – stage-then-confirm, rendered.\n *\n * Design contract encoded by this block:\n * - Money movement is never form-submit-to-execution: the review step\n *   renders the EXACT staged request (the arithmetic ladder), and only\n *   confirm() executes – once, on a pinned idempotency key.\n * - The commit button restates the amount: \"Pay €1,240.00\". Never a\n *   countdown on the button.\n * - Values are never masked on a review screen.\n * - After confirm, the transfer's status story renders as the timeline;\n *   failure is a terminal state with the reason, not a toast.\n */\n\nconst inputStyle: CSSProperties = {\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  border: \"var(--border-w-hairline) solid var(--border-strong)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-md)\",\n  fontSize: \"var(--font-size-body)\",\n  fontFamily: \"var(--font-family)\",\n  color: \"var(--text-primary)\",\n  background: \"var(--surface-raised)\",\n};\n\nconst labelStyle: CSSProperties = {\n  display: \"block\",\n  fontSize: \"var(--font-size-label)\",\n  color: \"var(--text-secondary)\",\n  marginBottom: \"var(--space-2xs)\",\n};\n\nexport interface SendFormValues {\n  receiverAccountId: string;\n  currency: string;\n  amount: string;\n  description: string;\n}\n\n/**\n * Amount input guard. Number(\"\")/Number(\" \") are 0 and Number(\"Infinity\")\n * is > 0, so a falsy/NaN check alone lets nonsense reach the review step.\n * Returns the parsed amount, or null when the input must not stage.\n */\nexport function parseAmountInput(raw: string): number | null {\n  const trimmed = raw.trim();\n  if (!trimmed) return null;\n  const amount = Number(trimmed);\n  return Number.isFinite(amount) && amount > 0 ? amount : null;\n}\n\nexport function SendForm({\n  values,\n  issues,\n  onChange,\n  onStage,\n}: {\n  values: SendFormValues;\n  issues: string[];\n  onChange: (values: SendFormValues) => void;\n  onStage: () => void;\n}): ReactElement {\n  return (\n    <form\n      onSubmit={(e) => {\n        e.preventDefault();\n        onStage();\n      }}\n      style={{ display: \"grid\", gap: \"var(--space-md)\", fontFamily: \"var(--font-family)\" }}\n    >\n      <div>\n        <label style={labelStyle} htmlFor=\"vf-send-recipient\">\n          Recipient account\n        </label>\n        <input\n          id=\"vf-send-recipient\"\n          style={inputStyle}\n          value={values.receiverAccountId}\n          onChange={(e) => onChange({ ...values, receiverAccountId: e.target.value })}\n        />\n      </div>\n      <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 2fr\", gap: \"var(--space-md)\" }}>\n        <div>\n          <label style={labelStyle} htmlFor=\"vf-send-currency\">\n            Currency\n          </label>\n          <input\n            id=\"vf-send-currency\"\n            style={inputStyle}\n            value={values.currency}\n            onChange={(e) => onChange({ ...values, currency: e.target.value.toUpperCase() })}\n          />\n        </div>\n        <div>\n          <label style={labelStyle} htmlFor=\"vf-send-amount\">\n            Amount\n          </label>\n          <input\n            id=\"vf-send-amount\"\n            style={{ ...inputStyle, fontVariantNumeric: \"tabular-nums\" }}\n            inputMode=\"decimal\"\n            value={values.amount}\n            onChange={(e) => onChange({ ...values, amount: e.target.value })}\n          />\n        </div>\n      </div>\n      <div>\n        <label style={labelStyle} htmlFor=\"vf-send-description\">\n          Description\n        </label>\n        <input\n          id=\"vf-send-description\"\n          style={inputStyle}\n          value={values.description}\n          onChange={(e) => onChange({ ...values, description: e.target.value })}\n        />\n      </div>\n      {issues.length > 0 ? (\n        <ul\n          role=\"alert\"\n          style={{\n            margin: 0,\n            paddingLeft: \"var(--space-lg)\",\n            color: \"var(--state-danger-fg)\",\n            fontSize: \"var(--font-size-label)\",\n          }}\n        >\n          {issues.map((issue) => (\n            <li key={issue}>{issue}</li>\n          ))}\n        </ul>\n      ) : null}\n      <button type=\"submit\" style={primaryButton}>\n        Review transfer\n      </button>\n    </form>\n  );\n}\n\nconst primaryButton: CSSProperties = {\n  border: \"none\",\n  background: \"var(--accent)\",\n  color: \"var(--accent-fg)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-lg)\",\n  fontSize: \"var(--font-size-body)\",\n  fontWeight: 500,\n  cursor: \"pointer\",\n  justifySelf: \"start\",\n};\n\nconst quietButton: CSSProperties = {\n  border: \"var(--border-w-hairline) solid var(--border-strong)\",\n  background: \"var(--surface-raised)\",\n  color: \"var(--text-primary)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-lg)\",\n  fontSize: \"var(--font-size-body)\",\n  fontWeight: 500,\n  cursor: \"pointer\",\n};\n\nexport function SendReview({\n  draft,\n  fee,\n  onConfirm,\n  onEdit,\n  submitting,\n}: {\n  draft: TransferDraft;\n  /** Fee amount when known; renders as an estimate row. */\n  fee?: number;\n  onConfirm: () => void;\n  onEdit: () => void;\n  submitting?: boolean;\n}): ReactElement {\n  const body = draft.body as { amount?: number; currency?: string; description?: string };\n  const amount = body.amount ?? 0;\n  const currency = draft.kind === \"fiat\" ? (body.currency ?? \"\") : \"\";\n  const rows: LadderRow[] = fee\n    ? [{ operator: \"−\", label: \"Transfer fee\", amount: fee, currency, uncertain: true }]\n    : [];\n  const net = fee ? amount - fee : amount;\n\n  return (\n    <div style={{ display: \"grid\", gap: \"var(--space-md)\", fontFamily: \"var(--font-family)\" }}>\n      <ArithmeticLadder\n        input={{ label: \"You send\", amount, currency }}\n        rows={rows}\n        total={{ label: \"Recipient receives\", amount: net, currency, uncertain: Boolean(fee) }}\n      />\n      <div style={{ display: \"flex\", gap: \"var(--space-md)\" }}>\n        <button type=\"button\" onClick={onConfirm} disabled={submitting} style={primaryButton}>\n          {submitting ? \"Sending…\" : `Pay ${formatAmount(amount)} ${currency}`.trim()}\n        </button>\n        <button type=\"button\" onClick={onEdit} disabled={submitting} style={quietButton}>\n          Edit\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport function transferProgressSteps(state: StagedTransferState): TimelineStep[] {\n  const submitted = state.phase === \"pending\" || state.phase === \"completed\" || state.phase === \"failed\";\n  return [\n    { key: \"staged\", label: \"Reviewed and confirmed\", state: \"completed\" },\n    {\n      key: \"submitted\",\n      label: \"Submitted\",\n      state: submitted ? \"completed\" : \"current\",\n    },\n    {\n      key: \"settled\",\n      label:\n        state.phase === \"failed\"\n          ? (state.transfer?.errorMessage ?? \"Transfer failed\")\n          : \"Settled\",\n      state:\n        state.phase === \"completed\"\n          ? \"completed\"\n          : state.phase === \"failed\"\n            ? \"failed\"\n            : state.phase === \"pending\"\n              ? \"current\"\n              : \"future\",\n      meta: state.phase === \"pending\" ? \"Usually under a minute in mock mode\" : undefined,\n    },\n  ];\n}\n\n/** The full stage → review → confirm → track flow, bound to the machine. */\nexport function SendBlock({\n  senderAccountId,\n  defaultCurrency = \"EUR\",\n  style,\n  className,\n}: {\n  senderAccountId: string;\n  defaultCurrency?: string;\n  style?: CSSProperties;\n  className?: string;\n}): ReactElement {\n  const { state, stage, edit, confirm, reset } = useStagedTransfer();\n  const [values, setValues] = useState<SendFormValues>({\n    receiverAccountId: \"\",\n    currency: defaultCurrency,\n    amount: \"\",\n    description: \"\",\n  });\n  const [issues, setIssues] = useState<string[]>([]);\n\n  const toDraft = (): TransferDraft => ({\n    kind: \"fiat\",\n    senderAccountId,\n    body: {\n      receiverAccountId: values.receiverAccountId,\n      currency: values.currency,\n      amount: parseAmountInput(values.amount) ?? 0,\n      description: values.description || undefined,\n    },\n  });\n\n  return (\n    <section className={className} style={{ maxWidth: \"var(--card-max-width)\", ...style }}>\n      {state.phase === \"draft\" ? (\n        <SendForm\n          values={values}\n          issues={issues.length > 0 ? issues : state.issues}\n          onChange={setValues}\n          onStage={() => {\n            if (parseAmountInput(values.amount) === null) {\n              setIssues([\"amount must be a positive number\"]);\n              return;\n            }\n            setIssues([]);\n            stage(toDraft());\n          }}\n        />\n      ) : null}\n      {state.phase === \"staged\" || state.phase === \"submitting\" ? (\n        <SendReview\n          draft={state.staged.draft}\n          onConfirm={() => void confirm()}\n          onEdit={edit}\n          submitting={state.phase === \"submitting\"}\n        />\n      ) : null}\n      {state.phase === \"pending\" || state.phase === \"completed\" || state.phase === \"failed\" ? (\n        <div style={{ display: \"grid\", gap: \"var(--space-md)\", fontFamily: \"var(--font-family)\" }}>\n          <Timeline steps={transferProgressSteps(state)} />\n          <button type=\"button\" onClick={reset} style={quietButton}>\n            New transfer\n          </button>\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"
    }
  ]
}