{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "arithmetic-ladder",
  "type": "registry:component",
  "title": "Arithmetic ladder",
  "description": "Transfer review: literal operators in the gutter, working before the answer, tint-band total, uncertainty attached to the number.",
  "registryDependencies": [
    "@venlyfinance/venly-tokens",
    "@venlyfinance/money"
  ],
  "files": [
    {
      "path": "registry/components/arithmetic-ladder.tsx",
      "type": "registry:component",
      "target": "~/components/venly/components/arithmetic-ladder.tsx",
      "content": "import type { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { Money } from \"../lib/money.js\";\n\n/**\n * Arithmetic ladder – the transfer review register.\n *\n * Design contract encoded by this component:\n * - Make the operators literal: a left gutter carrying − × + against each\n *   fee and rate, so the reader verifies the sum without a calculator.\n * - Components before the total. Never the answer before the working.\n * - The total is separated by a filled tint band, not just a rule.\n * - Uncertainty attaches to the uncertain number (an asterisk on the row),\n *   not to a global disclaimer.\n * - Rate liveness belongs on the rate row itself, never as a countdown on\n *   the commit button.\n * - Never mask values on a review screen.\n */\nexport interface LadderRow {\n  /** Literal operator rendered in the gutter: \"−\", \"+\", \"×\". */\n  operator: \"−\" | \"+\" | \"×\";\n  label: string;\n  /** A money amount… */\n  amount?: number | null;\n  currency?: string;\n  /** …or a non-money value (a rate like \"0.9996\"). */\n  value?: ReactNode;\n  /** Marks the number as an estimate: asterisk on the row. */\n  uncertain?: boolean;\n  /** Liveness note, e.g. \"Refreshed at 11:55:46\". */\n  meta?: string;\n}\n\nexport interface ArithmeticLadderProps {\n  input: { label: string; amount: number; currency?: string };\n  rows: LadderRow[];\n  total: { label: string; amount: number; currency?: string; uncertain?: boolean };\n  style?: CSSProperties;\n  className?: string;\n}\n\nexport function ArithmeticLadder({\n  input,\n  rows,\n  total,\n  style,\n  className,\n}: ArithmeticLadderProps): ReactElement {\n  return (\n    <div\n      className={className}\n      style={{\n        fontFamily: \"var(--font-family)\",\n        fontSize: \"var(--font-size-body)\",\n        background: \"var(--surface-raised)\",\n        border: \"var(--border-w-hairline) solid var(--border-hairline)\",\n        borderRadius: \"var(--radius-card)\",\n        overflow: \"hidden\",\n        ...style,\n      }}\n    >\n      <div style={{ padding: \"var(--space-lg) var(--card-pad) var(--space-sm)\" }}>\n        <div style={{ fontSize: \"var(--font-size-micro)\", color: \"var(--text-tertiary)\" }}>\n          {input.label}\n        </div>\n        <Money amount={input.amount} currency={input.currency} emphasis=\"hero\" />\n      </div>\n      <div style={{ padding: \"0 var(--card-pad)\" }}>\n        {rows.map((row, i) => (\n          <div\n            key={`${row.label}-${i}`}\n            style={{\n              display: \"flex\",\n              alignItems: \"baseline\",\n              gap: \"var(--space-md)\",\n              padding: \"var(--space-xs) 0\",\n            }}\n          >\n            <span\n              aria-hidden=\"true\"\n              style={{\n                width: \"var(--space-lg)\",\n                flex: \"none\",\n                textAlign: \"center\",\n                color: \"var(--text-tertiary)\",\n                fontVariantNumeric: \"tabular-nums\",\n              }}\n            >\n              {row.operator}\n            </span>\n            <span style={{ flex: 1, color: \"var(--text-secondary)\" }}>\n              {row.label}\n              {row.meta ? (\n                <span\n                  style={{\n                    marginLeft: \"var(--space-sm)\",\n                    fontSize: \"var(--font-size-micro)\",\n                    color: \"var(--text-tertiary)\",\n                  }}\n                >\n                  {row.meta}\n                </span>\n              ) : null}\n            </span>\n            <span style={{ fontVariantNumeric: \"tabular-nums\", color: \"var(--text-primary)\" }}>\n              {row.value ?? <Money amount={row.amount} currency={row.currency} />}\n              {row.uncertain ? <span aria-label=\"estimate\">*</span> : null}\n            </span>\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          marginTop: \"var(--space-sm)\",\n          padding: \"var(--space-md) var(--card-pad)\",\n          background: \"var(--surface-sunken)\",\n          display: \"flex\",\n          alignItems: \"baseline\",\n          justifyContent: \"space-between\",\n        }}\n      >\n        <span style={{ fontWeight: 500, color: \"var(--text-primary)\" }}>{total.label}</span>\n        <span>\n          <Money amount={total.amount} currency={total.currency} emphasis=\"value\" />\n          {total.uncertain ? <span aria-label=\"estimate\">*</span> : null}\n        </span>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}